Accessibility Guide.md

Accessibility Guide

Notes and guide to Accessibility techniques.

• WAI-ARIA 1.0 Authoring Practices (guide)
• Web Content Accessibility Guidelines (WCAG) 2.0

ARIA Roles

• Roles MUST NOT change in the DOM. If needed, you'll need to remove the entire element and it's children and all a new element with the desired role.
• MDN Accessibility ARIA
• W3C Definition of Roles
• WAI-ARIA Taxonomy

landmark (abstract role)

• A region of the page intended as a navigational landmark for quick assess. Such as navigating, searching, primary content, etc.

• main

  • Superclass Role: landmark
  • The main content of a document.
  • Non-obtrusive alternative for "skip to main content" links
  • No more than one element with the main role.

• application

  • Superclass Role: landmark
  • A region declared as a web application, as opposed to a web document.

• banner

• complementary

• contentinfo

• form

• navigation

• search

structure (abstract role)

Structures organize content in a page. Structures are not usually interactive.

TODO: Expound

• document
  • Superclass Role: structure
  • A region declared as document content, as opposed to a web application.
• article
• directory
• group
• heading
• img
• list
• listitem
• note
• presentation
• region
• separator
• toolbar

widget

W3C Widget Roles

TODO: Expound

• button
• link
• radio
• radiogroup
• tab
• tabpanel
• tablist
• tree
• treeitem
• menu
• menubar
• combobox
• listbox

ARIA Attributes

These attributes are used to support the widget roles.

TODO: Expound

Widget Attributes

• aria-autocomplete
• aria-checked (state)
• aria-disabled (state)
• aria-expanded (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-label
• aria-level
• aria-multiselectable
• aria-pressed (state)
• aria-readonly
• aria-required
• aria-selected (state)

Live Region Attributes

TODO: Expound

• aria-atomic
  • false (default): Changes to the live region is presented alone, rather than the whole content. This prevents users from hearing redundant content repeatedly.
  • true: The live region are presented as a whole, rather than just announcing the parts that changed.
• aria-busy (state)
• aria-live
  • off (default): Updates to live regions are ignored. Good for secondary content which is frequently updated.
  • polite: Waits to announce updates, after the user not busy (reading, navigating).
  • assertive: Interrupt user immediately, possibly clearing current read buffer.
• aria-relevant

Relationship Attributes

TODO: Expound

http://www.w3.org/TR/wai-aria/states_and_properties#attrs_relationships

Forms

Labels

• Every <lable> needs a for attribute, pointed to a valid form control's id, or needs to wrap the form control it belongs to.

<label for="inputId">Label Text</label>
<input id="inputId">

<!-- or -->

<label>
    Label Text
    <input>
</label>

Inputs

• The placeholder attribute should not be used as an alternative to a label. <input placeholder="...">
  • Placeholder Attribute Is Not A Label!
  • The HTML5 placeholder attribute is not a substitute for the label element

Managing Focus

TODO: Expound

http://www.w3.org/TR/wai-aria/usage#managingfocus http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#kbd_focus

Unorganized TODOs

• Accessible Rich Internet Applications (WAI-ARIA) 1.0
• General Techniques for WCAG 2.0
• HTML and XHTML Techniques for WCAG 2.0
• CSS Techniques for WCAG 2.0
• Client-side Scripting Techniques for WCAG 2.0
• Server-side Scripting Techniques for WCAG 2.0
• ARIA Techniques for WCAG 2.0
• Failures for WCAG 2.0