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/

Colors & Contrast

Notes from the July 25 meeting of the AccessibleWeb@U interest group

• Presenter - Rick Ells UW-IT
• Vision
• Normal - Has red, green, and blue sensors
• Protanopia – Red/green color blindness, less sensitive to red light
• Deuteranopia – Red/green color blindness, less sensitive to green light
• Tritanopia – Blue/ yellow color blindness, confuse blue with green and yellow with light violet
• Cataracts
• http://www.color-blindness.com
• Color Combinations
• Use orange only for large text or highlight
• Avoid red on green or green red
• Avoid using red and green to convey information, such as red text is a warning, green text is a recommendation
• Avoid putting bright colors at the opposite end of the spectrum together
• Avoid putting text on textured backgrounds
• Contrast and Luminosity
• Contrast is the difference in brighness (luminosity) between two colors, such as between the color of text and the color of the background
• More contrast is needed for smaller text
• 4.5:1 for content text (Level AA)
• 3:1 for large text (Level AA)
• Guidelines
• 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
• Example Site
• http://staff.washington.edu/rells/accessibility/contrast/low.htm
• Evaluate the example site using the Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages
• Maintaining Hue
• When you need to darken or lighten a hue, maintain the same relative ratios between the red, green and blue values.
• Example: The following are the same hue, but different luminosities
• RGB 50, 75, 100 - darkest
• RGB 75, 112, 150 - medium
• RGB 100, 150, 200 - lightest
• Tools
• Contrast-A http:// www.dasplankton.de/ContrastA/
• Color Oracle - http://colororacle.org
• WebAim Contrast Checker - http://webaim.org/ resources/contrastchecker/
• ColorHexa - http://www.colorhexa.com
• Colour Contrast Analyzer - http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages