Accessible Markup and Code Examples | Accessibility

Standards Based Development

Take out http://dev.bowdenweb.com/ links to code. PUT THEM IN A SEPARATE DOCUMENT

Maybe

NOT SURE WHAT TO DO HERE YET

• Coding Accessible Youtube Player Flash Controls
• Accessible Audio Player (aap) 2.1.3 Test Page
• Expand and collapse content accessibly with progressive enhancement, jQuery, and ARIA
• jQuery Visualize - HTML5 canvas charts driven by HTML table elements
• jQuery Accessible ARIA tree control
• jQuery Custom File Upload Input

ui Automation Verify (uia Verify) Test Automation Framework

uia Verify is a test automation framework that features the User Interface Automation Test Library (uia Test Library) and Visual UI Automation Verify (Visual uia Verify), the graphical user interface tool. The framework facilitates manual and automated testing of the Microsoft User Interface Automation Provider implementation of a control or application. The majority of the uia Verify functionality is provided through a dynamic link library (e.g., UIATestLibrary.dll) that contains the code for testing specific ui Automation functionality and supports logging of the test results.

ui Automation Verify (uia) Verify Test Automation Framework

Accessible jQuery-ui Components Demonstration

Accessibility In Code

Accessibility In HTML/XHTML

• Section 508 Compliance in Plain English
• Screen Readers: HTML Character Entities & Numeric Character References

Accessibility In JavaScript

• JavaScript a11y Issues
• Creating Accessible JavaScript
• Accessibility In JavaScript
• Web Accessibility Issues - Dojo Toolkit

Accessible JavaScript Summary

JavaScript Event Handlers

There are two types of JavaScript event handlers - device dependent and device independent. When implementing event handlers, you must either use a device independent event handler or use multiple device dependent event handlers to accommodate all users. Below is a list of common event handlers and their associated accessibility issues.

onMouseOver and onMouseOut

Device dependent (require the use of a mouse)

Ensure important content or functionality is not introduced with these event handlers

Use in conjunction with the onFocus and onBlur event handlers to allow keyboard accessibility

Provide an accessible alternative if the content or functionality cannot be made natively accessible

onFocus and onBlur

Device independent (work with both keyboard and mouse)

Test to ensure that accessibility is not affected

onClick and onDblClick

Device dependent (require the use of a mouse)

onClick is activated by keyboard input when used with links and form elements

There are no device independent or keyboard accessible equivalents to these event handlers

Functionality and content provide by the onClick event handler must also be made accessible

onChange and onSelect

Device independent (work with both keyboard and mouse)

Functionality and content provide by the onChange and onSelect event handlers must also be made accessible

Drop-down menu navigation items that are triggered with onChange are not fully keyboard accessible

wet Working Examples

Accessibility Responsibility Breakdown (WCAG 2.0)

• Accessibility Responsibility Breakdown (WCAG 2.0) - English example
• Accessibility Responsibility Breakdown (WCAG 2.0) - French example
• Accessibility Responsibility Breakdown (WCAG 2.0) - English example - Planning accessibility
• Accessibility Responsibility Breakdown (WCAG 2.0) - French example - Planning accessibility

Archived Web page template

• Archived Web page template - English example
• Archived Web page template - French example

Auto-complete for text input fields (datalist polyfill)

• Auto-complete for text input fields (datalist polyfill) - English example
• Auto-complete for text input fields (datalist polyfill) - French example

Base theme (v3.1 Beta)

• Base theme - English examples
• Base theme - French examples
• Base theme - Spanish examples
• Base theme - Arabic examples

Calendar interface

• Calendar interface - Date picker (input type="date" polyfill) - English example
• Calendar interface - Date picker (input type="date" polyfill) - French example
• Calendar interface - Events calendar - English example
• Calendar interface - Events calendar - French example

Charts and graphs support

• Charts and graphs support - Charts - English examples
• Charts and graphs support - Charts - Customized - English examples
• Charts and graphs support - Complex charts - English examples

CLF 2.0 theme

• CLF 2.0 theme - Content pages
• CLF 2.0 theme - Welcome pages
• CLF 2.0 theme - Server message pages

CSS Grid System

• CSS Grid System - English example
• CSS Grid System - Arabic example

Design guide (v3.1 Beta)

• Design guide - English guide

Drupal variant

• Drupal variant - English example
• Drupal variant - French example

Expandable/collapsible content (details/summary polyfill)

• Expandable/collapsible content (details/summary polyfill) - English example
• Expandable/collapsible content (details/summary polyfill) - French example
• Expandable/collapsible content (details/summary polyfill) - English example - Expand/Collapse All Content (v3.1 Beta)
• Expandable/collapsible content (details/summary polyfill) - French example - Expand/Collapse All Content (v3.1 Beta)

Feedback form

• Feedback form - English example
• Feedback form - French example

Footnotes

• Footnotes - English examples
• Footnotes - French examples

Form validation

• Form validation - English examples
• Form validation - French examples

GC Web Usability theme

• GC Web Usability theme - Home pages
• GC Web Usability theme - Content pages
• GC Web Usability theme - Content pages - Web application template
• GC Web Usability theme - Splash pages
• GC Web Usability theme - Server message pages

GC Web Usability Intranet theme

• GC Web Usability Intranet theme - Content pages
• GC Web Usability Intranet theme - Splash pages
• GC Web Usability Intranet theme - Server message pages

Language selector

• Language selector - English example - JavaScript + PHP
• Language selector - French example - JavaScript + PHP

Lightbox

• Lightbox - English examples
• Lightbox - French examples

Mathematical/scientific formula display (MathML polyfill)

• Mathematical/scientific formula display (MathML polyfill) - English examples
• Mathematical/scientific formula display (MathML polyfill) - French examples
• Mathematical/scientific formula display (MathML polyfill) - Complex French example

Menu bar

• Menu bar - English example - Mega menu
• Menu bar - French example - Mega menu
• Menu bar - English example - Horizontal site menu bar
• Menu bar - French example - Horizontal site menu bar

Meter (meter polyfill) (v3.1 Beta)

• Meter (meter polyfill) - English examples
• Meter (meter polyfill) - French examples

Multimedia player

• Multimedia player - English video examples
• Multimedia player - French video examples
• Multimedia player - English audio examples
• Multimedia player - French audio examples

Optimal content examples

• Optimal content examples - English examples
• Documentation related to HTML Table

Optimal content development tools (v3.1 Beta)

• HTML Table Validator

PHP variant

• PHP variant - English examples
• PHP variant - French examples

Prettify (source code)

• Prettify (source code) - English examples
• Prettify (source code) - French examples

Progress bar (progress polyfill)

• Progress bar (progress polyfill) - English examples
• Progress bar (progress polyfill) - French examples

Responsive design emulator

• Responsive design emulator - Content page - English - GC Web Usability theme
• Responsive design emulator - Content page - French - GC Web Usability theme
• Responsive design emulator - Content page + Secondary menu 1 - English - GC Web Usability theme
• Responsive design emulator - Content page + Secondary menu 1 - French - GC Web Usability theme
• Responsive design emulator - Content page + Secondary menu 2 - English - GC Web Usability theme
• Responsive design emulator - Content page + Secondary menu 2 - French - GC Web Usability theme

Responsive images (v3.1 Beta)

• Responsive images - English example

Session timeout

• Session timeout - English example
• Session timeout - French example

Share widget

• Share widget - English example
• Share widget - French example
• Share widget - English example - Filtered sites
• Share widget - French example - Filtered sites

Slide out tab

• Slide out tab - English example
• Slide out tab - French example

Slider control (input type="range" polyfill)

• Slider control (input type="range" polyfill) - English examples
• Slider control (input type="range" polyfill) - French examples

SSI variant

• SSI variant - English examples
• SSI variant - French examples

Tabbed interface

• Tabbed interface - English examples
• Tabbed interface - French examples

Table enhancement (DataTables integration) (v3.1 Beta)

• Table enhancement (DataTables integration) - English example

Text highlighting

• Text highlighting - English example
• Text highlighting - French example

Web Accessibility Assessment Methodology

• Web Accessibility Assessment Methodology - English methodology
• Web Accessibility Assessment Methodology - French methodology
• Web Accessibility Assessment Methodology - English methodology (AAA)
• Web Accessibility Assessment Methodology - French methodology (AAA)

Web feeds widget

• Web feeds widget - English examples
• Web feeds widget - French examples

Web Storage (HTML5)

• Web Storage (HTML5) - English example - Persistent storage (localStorage polyfill)
• Web Storage (HTML5) - French example - Persistent storage (localStorage polyfill)
• Web Storage (HTML5) - English example - Session storage (sessionStorage polyfill) (v3.1 Beta)
• Web Storage (HTML5) - French example - Session storage (sessionStorage polyfill) (v3.1 Beta)

WET theme (v3.1 Beta)

• WET theme - English examples
• WET theme - French examples
• WET theme - Spanish examples

WordPress variant

• WordPress variant - English examples

Axs

Axs is a small Javascript library which provides methods which make it easier for web developers to implement modern Web 2.0 sites with accessible features. These methods are categorized into primary and secondary methods. Included in the library are: http://dev.bowdenweb.com/a11y/code/axs/keychart.html" title="Available Shortcut Keys"> http://dev.bowdenweb.com/a11y/code/axs/readme.html" title="Axs.js Documentation"> http://dev.bowdenweb.com/a11y/code/axs/demos/fd/fd.html" title="Flash Detect"> http://dev.bowdenweb.com/a11y/code/axs/demos/flash_xoxo/flash_xoxo.html" title="Flash XOXO">Flash XOXO http://dev.bowdenweb.com/a11y/code/axs/demos/gecn/gecn.html" title="getElementsByClassName">getElementsByClassName http://dev.bowdenweb.com/a11y/code/axs/demos/hd/hd.html" title="Check for High Contrast Mode"> http://dev.bowdenweb.com/a11y/code/axs/demos/keycap/keycap.html" title="Keyboard Capture">Keyboard CaptureAXS (access) http://dev.bowdenweb.com/a11y/code/axs/demos/md/md.html" title="MSAA Detect">

accessifyhtml5.js

accessifyhtml5.js is a polyfill for a more accessible html5.

While most browsers work all right with the new semantic elements of html5, they don't add the aria accessibility attributes that the specification demands. This small JavaScript adds those attributes to enhance accessibility of web sites.

AccDC (Accelerated Dynamic Content)

AccDC is a scalable, cross-browser and cross-platform compatible Dynamic Content Management System that automates the rendering of dynamic content to ensure accessibility for screen reader and keyboard only users.

AccDC Component Library

The AccDC Component Library is a collection of accessible control types that automate the structural and functional accessibility of each control according to relevant accessibility best practices. The controls can be populated with any type of content, and can be styled to fit any type of user interface layout, in any language, without negatively impacting accessibility. The controls tap into the accessibility features of the AccDC API to render content in an accessible manner, then apply supporting markup and scripting to automatically ensure accessibility for screen reader and keyboard only users. This makes it possible for developers to add fully customizable components, that look and feel exactly as they desire, while ensuring functional accessibility at the same time without the risk of coding misinterpretation by those who are unfamiliar with ats.

The following modules are included:

• Accessible Modal controls.
• Accessible Banner controls.
• Accessible Tooltip controls.
• Accessible Popup controls.
• ARIA Tab controls.
• ARIA context sensitive dropdown Menu controls.
• ARIA Tree controls.
• Screen reader accessible Drag and Drop controls.
• Auto Suggestion Search Field controls.
• ARIA Listbox controls that support optional sortability, list item deletion, and dynamic addition of list items.
• ARIA Footnote controls.
• Accessible Live Chat controls.
• Horizontal and vertical ARIA Slider controls.
• ARIA Date Picker controls.
• Accessible Accordion controls.
• Accessible Carousel, Slideshow, and Wizard controls.
• Accessible Dynamic Help Tooltips and Form Field Validation.
• ARIA Radio Button controls.
• ARIA Toggle and Checkbox controls.
• Keyboard accessible Scrollable Div controls.
• Screen reader accessible Progress Bar controls.

AccDC api for jQuery

The AccDC api for jQuery is a an api that interfaces with jQuery as an extension. All of the toolkit component modules plug into this interface.

AccDC Bootstrap

AccDC Bootstrap is an html parser that renders advanced, accessible interactive controls using semantic html markup.

Bootstrapping refers to the use of semantic html markup to configure advanced controls, which are then magically converted into dynamic interactive components when the content finishes loading.

This allows developers to include complex functionality that is fully configurable across thousands of web pages, without having to program individual components using JavaScript.

AccDC Bootstrap for jQuery

AccDC Bootstrap for jQuery is an extension of AccDC Bootstrap, with an api that interfaces with jQuery. All of the toolkit component modules plug into this interface.

AccDc Bootstrap

AccDC Bootstrap is an html parser that renders advanced, accessible interactive controls using semantic html markup.

Zebra Striping

• Zebra striping - Column highlight table
• Zebra striping - Simple table
• Zebra striping - Simple grouping table
• Zebra striping - Invoice table
• Zebra striping - Row level with summary table
• Zebra striping - English examples
• Zebra striping - French examples

a11y Web Development References & Resources

• Implementing wai Authoring Tool Accessibility Guidelines in Developing Adaptive Elearning (pdf)
• Computer Accessibility
• Web Accessibility
• Accessibility
• Skip Navigation Links
• Accessibility Tips
• Seven Accessibility Mistakes You Don't Want To Make
• Understanding Accessibility
• IBM Web Accessibility Checklist
• Making Ajax Work With Screen Readers
• Seven Accessibility Mistakes Part 1/
• Seven Accessibility Mistakes Part 2
• Don't Leave Money On The Table: Marketing To People With Disabilities
• Accessibility Heuristics
• Accessibility In Print
• Accessibility Tips For Audio And Video
• iPhone - Accessibility
• Web Accessibility Initiative (WAI)
• http://ryankeiser.net/blog/accessible-color/
• http://www.etre.com/tools/colourblindsimulator/
• http://www.logocritiques.com/resources/color_psychology_in_logo_design/
• Scripting Enabled - How To Make The Web More Accessible With JavaScript And Flash
• Flash And Keyboard Accessibility Access Accross Browsers
• Designing For Accessibility
• Accessibility: Can't We All Just Get Along?
• Designing Accessible Websites
• Configuring Your Machine For Testing With A Screen Reader
• Section 508: Uncle Sam's Guide To Web Accessibility
• Display Size And Resolution Accessibility
• Derek Featherstone: Accessibility Is More Than Compliance
• Open & Closed - Uniting Global Knowledge Of Accessibile Media

Accessibility Web Commmunity%Blogroll

• WebAIM
• Web Axe - Practical Web Design Accessibility Tips
• Web Site Accessibility Blog
• Standards Schmandards

ui Access

The "freshest" resource for universal interface design and usability accessibility information.

Web Accessibility Initiative

World Wide Web Consortium's Web Accessibility Initiative, an international virtual working on the ongoing refinement of guidelines for all aspects of web accessibility.

Accessibility Developer Community

• The Paciello Blog Group
• Yahoo! Aceessibility Library
• Accessible Culture

Free aria Community - Google Group Mailing List

Accessible JavaScript Widget Libraries

• Fluid Components
• Accessible jQuery-ui Components Demonstration
• Rich ui Widgets - The Dojo Toolkit
• yui Library