JavaScript - Accessibility and Useability

There has been talk at work about having to provide non-JavaScript alternatives for any of our web-pages that use JavaScript. A few people were suspicoius of this idea and given that we're using MVC3, they were finding it very difficult to implement functionality without JavaScript. Below is the document I created after reading compliance info on the net. You can also download as a Word doc.

---

JavaScript - Accessibility and Useability on the Web

Below are the relevant sections of documents concerning JavaScript and its impact on website accessibility and useability. I have checked documents relating to accessibility compliance under Australian law, compliance for US law and more general accessibility sites. In the conclusion, I explain a public website’s responsibilities regarding JavaScript and accessibility/useability.

Disability Discrimination Act Advisory Notes

http://www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html

It is important for developers to understand that in many cases the accessibility of a particular technology will be determined by how it is used. For example, it is widely considered that JavaScript can be implemented so as to be accessible. However, JavaScript can also be used in ways that are inaccessible, particularly if full keyboard support is not provided.
Ten Common Web Accessibility Failures

1. Failure to include appropriate text descriptions (such as “alt-text” labels) for images;

2. Failure to provide accessible alternatives when using a visual CAPTCHA;

3. Failure to use technologies (such as Flash and JavaScript) in ways that are accessible;

4. Failure to use HTML features appropriately to indicate content structure such as the hierarchy of headings;

5. Failure to explicitly associate form input controls with their labels;

6. Failure to ensure sufficient difference between foreground (text) colour and background colour;

7. Failure to identify data tables with Summary or Caption, and failure to mark-up data tables correctly;

8. Failure to provide a way for users to disable content such as advertisements from flashing rapidly (rapidly-flashing content may cause seizures in susceptible individuals), and failure to provide a way for users to stop a page from auto-refreshing;

9. Failure to ensure that web pages can be used from the keyboard (that is, without the mouse);

10. Failure to alert the user to changes on a web page that are triggered automatically when selecting items from a dropdown menu.

How to Meet WCAG 2.0

http://www.w3.org/WAI/WCAG20/quickref/

1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.2 Time-based Media: Provide alternatives for time-based media.

1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

2.1 Keyboard Accessible: Make all functionality available from a keyboard.

2.2 Enough Time: Provide users enough time to read and use content.

2.3 Seizures: Do not design content in a way that is known to cause seizures.

2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.

3.1 Readable: Make text content readable and understandable.

3.2 Predictable: Make Web pages appear and operate in predictable ways.

3.3 Input Assistance: Help users avoid and correct mistakes.

4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

(No specific mention of JavaScript.)

Migrating from WCAG 1.0 to WCAG 2.0

http://wipa.org.au/papers/wcag-migration.htm

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

NO MATCHING WCAG 2.0 S.C. Issue is addressed as part of "Conformance requirements".

NB: WCAG 2.0 does not require alternative to be always provided for JavaScript etc. But nominated "accessibility supported technologies" must be used in a way that is accessible. Conformance requirement 4: Only accessibility supported technologies are relied on to satisfy the success criteria. AND Conformance requirement 5: If technologies that are not accessibility supported are used, they do not stop users accessing the rest of the page.

Accessible Rich Internet Applications (WAI-ARIA) 1.0

http://www.w3.org/WAI/PF/aria/introduction#intro_ria_accessibility

New technologies often overlook semantics required for accessibility, and new authoring practices often misuse the intended semantics of those technologies. Elements that have one defined meaning in the language are used with a different meaning intended to be understood by the user.

For example, web application developers create collapsible tree widgets in HTML using CSS and JavaScript even though HTML has no semantic tree element. To a non-disabled user, it may look and act like a collapsible tree widget, but without appropriate semantics, the tree widget may not be perceivable to, or operable by, a person with a disability because assistive technologies may not recognize the role.

Screen readers vs JavaScript

http://webaim.org/projects/screenreadersurvey3/#javascript

JavaScript Enabled = 98.4%, Disabled = 1.6%

10.4% of respondents to the October 2009 survey indicated that they have JavaScript disabled in their web browser. As respondents submitted responses to this survey we detected the presence of JavaScript. We found that very few respondents had it disabled or unavailable in their web browser. Of the 19 respondents with JavaScript disabled, 12 were using Firefox (presumably with the NoScript add-on enabled) and 5 were using Lynx with Linux.

Creating Accessible JavaScript

http://webaim.org/techniques/javascript/

Making JavaScript accessible involves looking at the following issues. Each of these will be discussed in the next lessons.

·         When using event handlers, use only those that are device independent (e.g., do not require the use of the mouse only).

·         Content and functionality that is provided through scripting must be made accessible to assistive technologies.

·         Web pages that utilize scripting must be fully navigable using a keyboard.

·         JavaScript should not modify or override normal browser functionality in a way that may cause confusion.

·         When JavaScript cannot be made natively accessible, an accessible alternative must be provided.

Accessible forms: Guidelines, examples and accessible JavaScript tricks.

http://www.websemantics.co.uk/tutorials/accessible_forms/

So what will you find here?

·         A list of form guidelines based on current and on-going research into accessibility, usability and web standards.

·         Simple examples of accessible forms including: a login form, a search form and a contact form.

·         Examples and help on each form element.

·         Styling forms with CSS.

·         Using accessible inline JavaScript to aide form functionality.

·         Using accessible JavaScript with the DOM to aide form functionality.

·         A comprehensive list of external form related articles and resources.

Conclusion

W3C, Australian law and US law either make no comment on JavaScript or state that JavaScript is acceptable as long as accessibility is maintained.

WCAG 1.0 required that non-JavaScript alternatives were required. WCAG 2.0 does not have this requirement. In compliance with WCAG 2.0, we are permitted to implement pages that would not be useable without JavaScript so long as they remain accessible.

The guidelines at http://webaim.org/techniques/javascript/ and http://www.websemantics.co.uk/tutorials/accessible_forms/ can assist in determining how to ensure the use of JavaScript on a website is accessible.