Friday, August 23, 2013

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/