corephp usability accessibility by steven pignataro

Usability and AccessibilityUsability and Accessibility

Steven PignataroCEO

CONTENTSCONTENTS

• Fill in with all the content that will be discuss throughout - just a brief overview - last thing to do.

Defining UsabilityDefining Usability

How usable is this presentation?

What is Usability?What is Usability?

• Designers and Developers ensure that websites work well and a person of average (or lower) ability and experience can properly use it.

• Provide to the end user a easy navigation system that allows for many different ways of getting to content.

Examples of Bad UsabilityExamples of Bad Usability

• http://www.havenworks.com/

• http://www.5safepoints.com/

• http://www.lbl.org/Home.html

http://www.havenworks.com/

http://www.5safepoints.com/

http://www.lbl.org/Home.html

Good Examples of UsabilityGood Examples of Usability

• http://www.apple.com

• http://www.google.com

• http://www.theonion.com

• http://www.amazon.com

http://www.theonion.com/

http://www.amazon.com/

So why care about Usability?So why care about Usability?

• Increased productivity (for the user) • Decreased training and support costs• Increased enrollment (sales and revenues) • Reduced development time and costs • Reduced maintenance costs • Increased customer satisfaction

The usable wayThe usable way

Don’t make the end user think!

As much as possible, when you look at a website, It should be self-evident. Obvious. Self Explanatory. To the point. Pop-out. (you get the picture)

If the user has to extend or exert extra effort to complete a task, then you can still refine your efforts to make the task easier.

Which is a button?Which is a button?

• The example to the right shows 3 different buttons. As an end user which looks like a button to you?

• We have the underline for text hyperlinks.

How do you view a site?How do you view a site?

• Raise you hand if you read a web site? If anyone in this room raises there hand - Steven (the presenter) has full right to grab you by your undies and pitch you outside in the snow.

We do not read sites!We do not read sites!

• Yep you read the title right - we do not read sites. We scan them. 9 out of 10 users will scan a site to find the information they are looking for.

How you (designer) reads a site!How you (designer) reads a site!

How user (not you) reads the site!How user (not you) reads the site!

How the Zen Penguin reads the site!How the Zen Penguin reads the site!

The users point of viewThe users point of view

• A user will look for anything that is off there interest and move on.

• Pretty much find something that vaguely resembles what they are searching for.

What will help?What will help?

• Site identification (site logo and tagline)

• Page name

• Sections and sub-sections (global navigation)

• Local navigation

• “You are here” indicators (breadcrumbs)

• Search

Visual See It!Visual See It!

Get feedbackGet feedback

• If you do not get user feedback on the work you do then the work done is not 100% usable. As developers we sometimes get lost into code / design / etc that we forget the basics and need to be slapped a bit in order to make things easier for people. JUST TEST IT!!!

Test Drive that new PorscheTest Drive that new Porsche

• You test a car before you drive it? So test your site before you deploy it!

AccessibilityAccessibility

What am I see?

What is web accessibilityWhat is web accessibility

• It’s about making websites accessible to all people with disabilities as well as to people using different operating systems, web browsers and devices.

• More specifically, web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Starting with AccessibilityStarting with Accessibility

• Practice of making web pages on the Internet accessible to all users, especially those with disabilities.

• You cannot use something if you do not have access to it.

• Make your site accessible by following the web standard by w3c - http://www.w3.org/pany.

Rafael - The Penguin:Hard at work!Rafael - The Penguin:Hard at work!

Rafael waking Kobby up to Learn Accessibility

Totally not accessibly to users!Why make your site that way?

Totally not accessibly to users!Why make your site that way?

QuickTime™ and a decompressor

are needed to see this picture.

Why is Web Accessibility Important?Why is Web Accessibility Important?

• Firstly, it is now a law. June 21st 2001 new rules where mandated and applied to websites operated by the federal government agencies. Higher education is also moving towards accessible designs for there web sites.

• Secondly, it is the right thing to do. By providing access to web-based information to others with disabilities you provide a better site over all.

• Lastly, it is great strategy. This allows you to provide your site in a very mobile format.

Why Cont.Why Cont.

• Accessible design improves maintainability and efficiency of sites. By separating structure and presentation and style sheets you can easily change the look of a site by modifying one file. It is just forward thinking.

• Techniques like using style sheets, color independence, and avoiding deprecated elements makes web content more readily available to the changing which is nice considering the constant change in technology.

What type of users?What type of users?

• Blind users: web users who have no sight may utilize a screen reader. This type of software reads the content of the web page, or rather the HTML, back to them. This sites between the user and the browser, sifts through the HTML markup and deciphers the technology to what should be read aloud and what should be ignored.

• Partial or poor sight users: Users that enlarge text within there browsers. Users may also us the built in screen magnifiers.

Users Cont.Users Cont.

• Deaf Users: These users are able to access the internet in much the same way as non-deaf people with one key exception - AUDIO content. Be sure to provide written transcripts for some of your content if video recorded.

• Keyboard/voice only users: some users may not have the ability to use a mouse.

Making the Web Accessible:Making the Web Accessible:

• Making a site accessible generally means using HTML to structure data properly and make sure you add accessibility features where relevant.

Three Key Steps:Three Key Steps:

• Step One:

– Learn and follow established accessibility guidelines and standards.

– Section 508 Guidelines (1194.22 Standards)

Three Key Steps: Cont.Three Key Steps: Cont.

• Step Two:

– Validate your HTML and CSS code to be sure that it is error-free and

complies with the federal standards. A key to accessibility is to

design for device independence, so that your pages work on any

device, that supports the openly published standards. The existence

of standards such as HTML 4, XHTML and CSS makes this a

possibility. Error-free, well-formed, standards-compliant HTML is the

foundation of an accessible web site. The more a page is edited and

re-edited in a WYSIWYG program, the more syntax errors will creep

in. Many WYSIWYG programs generate tag soup. This is particularly

true if the author is an HTML novice or is paying more attention to

the page's visual presentation than to its underlying structure.

Three Key Steps: Cont.Three Key Steps: Cont.

• Step Three:

– Evaluate the pages in your site with accessibility tools. Here are some tools that can help:

• ATRC Web Accessiblity Checker: http://checker.atrc.utoronto.ca

• WAVE - This tool helps people perform design tasks that require human judgment. The Wave displays the ALT text of images and areas on the page for comparison with the images, provides numbered arrows to show the linearized reading order, and shows the HTML equivalent provided for applets.

http://checker.atrc.utoronto.ca/

Here are some tools that can help:Here are some tools that can help:

• W3C HTML Validator - Checks HTML documents for conformance to W3C HTML and XHTML recommendations and other HTML standards. It is important to use the HTML validator to create documents that validate to publish formal grammars.

– W3C CSS Validation Service - Checks Cascading Style Sheets for conformance to standards.

– HTML TIDY - Tidy is a free lint utility to check and clean up badly formed HTML. It is useful as a first-pass for helping to fix bad HTML.

How to be the userHow to be the user

• A graphical user interface (GUI) browser. These can be helpful for accessibility

evaluation also. Examine your pages while adjusting the browser settings.

– Turn off images

– Turn off the sound

– Turn off scripting

– Change the font size (larger and smaller)

– Change the display color to black and white and observe whether color

contrast is adequate.

– Put away the mouse and tab through the links and form controls on a page.

Priority list - Priority 1Priority list - Priority 1

1. Provide a text equivalent for every non-text element This includes: images, graphical representations of text image map regions, animations, applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand-alone audio files, audio tracks of video, and video.

2. Ensure that all information conveyed with color is also available without color, for example from context or markup.

3. Clearly identify changes in the natural language of a document's text and any text equivalents.

Priority list - Priority 1 - Cont.Priority list - Priority 1 - Cont.

4. Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

5. Ensure that equivalents for dynamic content are updated when the dynamic content changes.

6. Until user agents allow users to control flickering, avoid causing the screen to flicker.

7. Use the clearest and simplest language appropriate for a site's content.


8. And if you use tables (Priority 1)

1. For data tables, identify row and column headers.

2. For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.


9. And if you use frames (Priority 1)

1. Title each frame to facilitate frame identification and navigation.

10.And if you use applets and scripts (Priority 1)

1. Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.


11.And if you use multimedia (Priority 1)

1. Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation.

2. For any time-based multimedia presentation synchronize equivalent alternatives with the presentation.


12.And if all else fails (Priority 1)

1. If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information, and is updated as often as the inaccessible page.


1. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

2. When an appropriate markup language exists, use markup rather than images to convey information.

3. Create documents that validate to published formal grammars.

4. Use style sheets to control layout and presentation.

5. Use relative rather than absolute units in markup language attribute values and style sheet property values.


6. Use header elements to convey document structure and use them according to specification.

7. Mark up lists and list items properly.

8. Mark up quotations. Do not use quotation markup for formatting effects such as indentation.

9. Ensure that dynamic content is accessible or provide an alternative presentation or page.

10.Until user agents allow users to control blinking, avoid causing content to blink.


11.Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.

12.Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects.

13.Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

14.Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported.


15.Avoid deprecated features of W3C technologies.

16.Divide large blocks of information into more manageable groups where natural and appropriate.

17.Clearly identify the target of each link.

18.Provide metadata to add semantic information to pages and sites.

19.Provide information about the general layout of a site.

20.Use navigation mechanisms in a consistent manner.


21.And if you use tables (Priority 2)

1. Do not use tables for layout unless the table makes sense when linearized.

2. If a table is used for layout, do not use any structural markup for the purpose of visual formatting.

22.And if you use frames (Priority 2)

1. Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone.


23.And if you use forms (Priority 2)

1. Until user agents support explicit associations between labels and form controls.

1. Associate labels explicitly with their controls.

24.And if you use applets and scripts (Priority 2)

1. For scripts and applets, ensure that event handlers are input device-independent.

2. Until user agents allow users to freeze moving content, avoid movement in pages.


3. Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies.

25.Ensure that any element that has its own interface can be operated in a device-independent manner.

26.For scripts, specify logical event handlers rather than device-dependent event handlers.


1. Specify the expansion of each abbreviation or acronym in a document where it first occurs.

2. Identify the primary natural language of a document.

3. Create a logical tab order through links, form controls, and objects.

4. Provide keyboard shortcuts to important links.

5. Until user agents render adjacent links distinctly, include non-link, printable characters between adjacent links.


6. Provide information so that users may receive documents according to their preferences.

7. Provide navigation bars to highlight and give access to the navigation mechanism.

8. Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.

9. If search functions are provided, enable different types of searches for different skill levels and preferences.


10.Place distinguishing information at the beginning of headings, paragraphs, lists, etc.

11.Provide information about document collections.

12.Provide a means to skip over multi-line ASCII art.

13.Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page.

14.Create a style of presentation that is consistent across pages.

Priority list - Priority 3 - Cont.Priority list - Priority 3 - Cont.15.And if you use tables (Priority 3)

1. Provide summaries for tables.

2. Provide abbreviations for header labels.

3. Until user agents render side-by-side text correctly, provide a linear text alternative for all tables that lay out text in parallel, word-wrapped columns.

16.And if you use forms (Priority 3)

1. Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.

What Accessibility is not?What Accessibility is not?

• Creation of separate versions of a page

– You will not need to create one page for your disabled users and another for your regular users. Everyone will utilize the same page.


• Text-only pages

– Text only pages can be helpful for a particular user group but may actually hinder another. People with a learning disability may actually get over loaded with the mass of continuous text. Creation of text-only pages never carries the same information as the regular page. Graphics, typography, color scheme, and page design are also information.


• Accessibility is Boring

– all too often, people assume that accessible means boring, quite to the contrary. This is usually due to the misconception that accessible websites have to be mostly text. Graphic elements are perfectly acceptable in accessible web design; in fact they are actually encouraged. Graphics actually enhance accessibility by providing visual; cues as to the meaning and organization of the content. These cues help people to understand the content better, thus increasing the accessibility of the content.

Accessibility goalsAccessibility goals

• List goals

The process of how to make web pages accessible

The process of how to make web pages accessible

• Think through the process

• Understanding the process

• Simplifying the process

• Design

• Develop

• Deploy

Current state of web standardsCurrent state of web standards

• What are the current state of web standards for your site.

And finally …And finally …

• Any web developer with basic HTML and CSS design knowledge, and a bit of time on their hands, can easily learn and implement web accessibility — it’s not brain science after all. Web accessibility is all about following design standards and then adding in a few simple accessibility features. It’s not just about disabled users being able to access your website — it’s about everyone being able to access your website.

Questions?Questions?

QuickTime™ and a decompressor

are needed to see this picture.

THE ENDTHE END

There is no end when the beginning is so near!

corephp usability accessibility by steven pignataro

Technology