AccessWebU: ARIA Basics

AccessibleWeb@U - August 22, 2013

Announcements
- ACM SIGACCESS ASSETS 2013 Conference on Computers and Accessibility, October 21-23 in Bellevue, WA
  - http://www.sigaccess.org/assets13/
  - This conference has top-notch speakers, including UW's Richard Ladner, and it is the first time since 2006 that it has been held on the West coast
- Accessibility Camp Seattle Oct 19-20, in Seattle Public Library's downtown Central Library
  - http://accessibilitycampseattle.org/blog/
ARIA Basics
- Rick Ells, presenter
  - UW-IT Web Guy rells@uw.edu
- Semantic Web
  - Communication is not just letters clumped into words. The words are assembled into sentences, with particular words playing roles such as subject, verb, and object.
  - Structure and role are part of communication
  - ARIA is a way to declare the roles of elements on a page.
- What is ARIA
  - Accessible Rich Internet Applications (ARIA)
  - Associating meta information to page elements that helps assistive technologies “understand” and interact with the page
  - ARIA landmarks are added to HTML/XHTML/HTML5 as element attributes
  - ARIA landmarks do not change the elements, they just associate information with them
- Disadvantage of ARIA
  - ARIA is not part of the specifications for HTML 4.01 or XHTML.
    - Such pages with ARIA attributes will not validate
    - The ARIA attributes will be flagged as non-complying
  - Validation is important, but advantages of adding ARIA outweigh the disadvantage of seeing error messages
- Using ARIA
  - To enhance accessibility of your pages with ARIA
    - Build standards-based validated pages
      - Use semantic types correctly
      - Use headings hierarchically
      - Provide alt texts and labels
    - lApply appropriate ARIA landmarks
- How ARIA Landmarks Work
  - Video
    - http://www.webmonkey.com/2013/02/video-how-arias-landmark-roles-work/
- Types of ARIA Landmarks
  - Banner role
  - Contentinfo role
  - Main role
  - Complementary role
  - Form role
  - Search role
  - Navigation role
  - Information in this section is from North Carolina State University http://accessibility.oit.ncsu.edu/training/aria/
- Banner Landmark
  - The ARIA role "banner" is used to indicate mostly site-oriented content rather than page specific content.
  - Add the attribute role="banner" to the encompassing <div>.
  - Add the attribute aria-labelledby="bannerHeading" to the encompassing <div> to explicitly say what the heading is for this section.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#banner
- Contentinfo Landmark
  - The ARIA role "contentinfo" indicates a region that contains information about the parent document. It often contains information like copyright and privacy statements.
  - Add the attribute role="contentinfo" to the encompassing <div>.
  - You should use the role "contentinfo" only once per page.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#contentinfo
- Main Content Landmark
  - The ARIA role "main" is used to indicate the content that relates directly to the central topic of the document.
  - Add the attribute role="main" to the encompassing <div>.
  - Add the attribute aria-labelledby="mainContentLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#main
- Complementary Landmark
  - The ARIA role "complementary" is used to indicate content that is complementary to the main content, yet has meaning when separated from the main content.
  - Add the attribute role="complementary" to the encompassing <div>.
  - Add the attribute aria-labelledby="validationLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#complementary
- Form Landmark
  - The ARIA role "form" is used to indicate a section that contains a form.
  - Add the attribute role="form" to the encompassing <div>.
  - Add the attribute aria-labelledby="newsletterLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  - Using the role="form" still requires you to use the <form> tag and accompanying <label> and <input> tags.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#form
- Search Landmark
  - The ARIA role "search" is used to define a region where search functionality is located. The role "search" is a specialized version of "form" so you do not need to label this section with the role of "form."
  - Add the attribute role="search" to the encompassing <div>.
  - Add the attribute aria-labelledby="searchLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#search
- Site Navigation Landmark
  - The ARIA role "navigation" is used to indicate a collection of links to navigate the document or related documents.
  - Add the attribute role="navigation" to the encompassing <div>.
  - Add the attribute aria-label="Site Navigation" to add a descriptive label to this section
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#navigation
- Application Landmark
  - Declares a region as a web application, as opposed to a web document
  - Tells assistive technologies to switch to an application browsing mode and pass keyboard events directly through to the web application
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#application
- The ARIA Specification has many more roles
  - http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#role_definitions
- Looking At ARIA Markup
  - The Web Developer Toolbar for Chrome and FireFox has a Display ARIA Roles item in its Information menu.
    - http://chrispederick.com/work/web-developer/
  - Firebug add-on for FireFox makes it easy to hop into the code of a page and see what ARIA attributes it contains
    - https://addons.mozilla.org/en-us/firefox/addon/firebug/
- Examples of Using ARIA
  - OpenAjax Accessibility Task Force examples
    - http://oaa-accessibility.org/examples/

AccessWebU

Friday, August 23, 2013

ARIA Basics

No comments: