Web accessibility workshop 4

1,035 views

Published on

Workshop on Web Accessibility on spring semester 2014 in Tallinn University

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
356
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • PFWG - Protocols and Formats Working Group
  • This progress bar is built using a <div>, which is not very descriptive. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the role="progressbar" attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The aria-valuemin and aria-valuemax attributes specify the minimum and maximum values for the progress bar, and the aria-valuenow describes the current state of it.
  • JavaScript checks if browser supports HTML5 <progressbar> tag, if no, it adds ARIA attributes into the code
  • JavaScript checks if browser supports HTML5 <progressbar> tag, if no, it adds ARIA attributes into the code
  • Web accessibility workshop 4

    1. 1. Web Accessibility Workshop Session Four Vladimir Tomberg, PhD Tallinn University
    2. 2. Today Workshop 1. Presentation of the Homework; 2. WAI ARIA; 3. Core Components; A. Abstract Roles; B. Widget Roles; C. Document Structure ROLES D. Document landmarks roles E. ARIA Properties And States 4. HTML5 AND WAI ARIA 5. WAI ARIA PROSPECT 6. Best Practices; 7. Homework Assignment 4 Web Accessibility Workshop 2
    3. 3. 1. PRESENTATION OF HOMEWORK Please be prepared to share your experience! 3 Web Accessibility Workshop
    4. 4. 2. WAI ARIA Introduction 4 Web Accessibility Workshop
    5. 5. 5 • It has a very limited set of interface controls and interactions HTML is Very Static Web Accessibility Workshop Picture Source: funnyvscute.com
    6. 6. JavaScript • As the demand for rich interaction increased, JavaScript became our saviour! • However, many of dynamic interactions and widgets are problematic for Assistive Technologies 6 Web Accessibility Workshop Picture Source: toys4collection.blogspot.com
    7. 7. However… • Many widgets are inaccessible by keyboard; • ATs may not be made aware of dynamically generated content as it is updated 7 Web Accessibility Workshop
    8. 8. Here ARIA goes to the stage 8 Web Accessibility Workshop
    9. 9. ARIA? 9 Web Accessibility Workshop Image source: www.artv.cl
    10. 10. 10 • Accessible Rich Internet Applications; • Specification developed by the PFWG of the W3C’s WAI; • W3C Recommendation, 20 March 2014 • http://www.w3.org/TR/wai-aria/ WAI ARIA! Web Accessibility Workshop Open this link and refer to this page during the workshop!
    11. 11. Web Accessibility Workshop 11
    12. 12. WAI ARIA 12 Web Accessibility Workshop Clipart by Blinkofyoureye.com
    13. 13. 13 What's it do? Without WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com
    14. 14. 14 What's it do? With WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com
    15. 15. 15 • The addition of a role attribute <a href="#" title="OK" role="button"> <img src="ok.gif" alt="OK"> </a> What's the Difference? Web Accessibility Workshop Source: blog.paciellogroup.com
    16. 16. What's Gained? • Correct role information: "Button" • Usage instructions: "To activate press spacebar" 16 Web Accessibility Workshop Source: blog.paciellogroup.com
    17. 17. 17 <input type="image“ src="ok.gif“ alt="OK"> Couldn't this Example Also Be Achieved Without Using WAI - ARIA? Web Accessibility Workshop • Yes; • Wherever possible use native HTML elements
    18. 18. 18 What's it do without WAI-ARIA (example two) Web Accessibility Workshop Source: blog.paciellogroup.com
    19. 19. 19 What's it do with WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com What's the difference?
    20. 20. 20 <input type="image“ src="hioff.gif“ alt="highlight"> button is selected Without WAI-ARIA Web Accessibility Workshop <input type="image“ src="hion.gif“ alt="highlight"> Button is not selected Source: blog.paciellogroup.com
    21. 21. 21 <input type="image" src="hioff.gif" alt="highlight" role="button" aria-pressed="false"> button selected With WAI-ARIA Web Accessibility Workshop <input type="image" src="hion.gif" alt="highlight" role="button" aria-pressed="true"> button not selected Source: blog.paciellogroup.com
    22. 22. What's Gained? state information: "pressed" 22 Web Accessibility Workshop Source: blog.paciellogroup.com
    23. 23. Progress Bar Code Example <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> 23 Web Accessibility Workshop Source: developer.mozilla.org
    24. 24. The Purpose • The main purpose of ARIA is to allow JavaScript to communicate dynamic changes in roles, states, and relationships to assistive technologies; • Most of the ARIA specification is intended for use in web applications, rather than in static web content, but some of the ARIA roles overlap with some of the new HTML 5 elements 24 Web Accessibility Workshop Source: dequeuniversity.com
    25. 25. ARIA Attributes are Typically Added and Updated Dynamically Using JavaScript Code // Find the progress bar <div> in the DOM. var progressBar = document.getElementById("percent-loaded"); // Set its ARIA roles and states, so that assistive technologies know what kind of widget it is. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); // Create a function that can be called at any time to update the value of the progress bar. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); } 25 Web Accessibility Workshop Source: developer.mozilla.org
    26. 26. Additional Development Layer http://www.slideshare.net/ginader/the-5-layers-of- web-accessibility 26 Web Accessibility Workshop
    27. 27. 3. CORE COMPONENTS Roles, properties, and states 27 Web Accessibility Workshop
    28. 28. Roles • ARIA roles define what an element is or does; • Most HTML elements have a default role that is presented to assistive technology. For example, a button has a default role of "button" and a form has a default role of "form“; • With ARIA, you can define roles that are not available in HTML; • You can also override HTML's default roles. This allows you to present elements and widgets in HTML to screen readers in a more accurate and accessible way 28 Web Accessibility Workshop Source: webaim.org
    29. 29. Categorization of Roles 29 Web Accessibility Workshop Source: www.w3.org
    30. 30. 3.A ABSTRACT ROLES 30 Web Accessibility Workshop
    31. 31. Abstract Roles • Abstract roles are used for the ontology only; • Authors MUST NOT use abstract roles in content; • Useful roles (widget, document, landmark) inherit properties from the abstract roles • command • composite • input • landmark • range • roletype • section • sectionhead • select • structure • widget • window 31 Web Accessibility Workshop
    32. 32. 3.B WIDGET ROLES 32 Web Accessibility Workshop
    33. 33. What is a Widget? • The term 'widget' is broadly used to describe interactive elements that are created and controlled through scripting; • It refers to controls that are not native to HTML or to HTML controls that are greatly enhanced through scripting; • Examples of widgets would include sliders, drop-down and fly-out menus, tree systems, drag and drop controls, auto- completing text boxes, and tooltip windows; • Accessibility of widgets does not happen natively or naturally. HTML has very limited markup for defining complex widgets. 33 Web Accessibility Workshop Source: webaim.org
    34. 34. The Complexity Issues • How do you make a complex menu system intuitively keyboard accessible? • How do you make a drag-and-drop element keyboard accessible? • How do you present ordering details for sortable list items? • How do you present visual tooltips or pop-up messages to blind users? 34 Web Accessibility Workshop Source: webaim.org
    35. 35. New Widget Roles • By establishing a standard set of roles, properties, and values, ARIA allows developers to address these accessibility issues with relative ease 35 Web Accessibility Workshop Source: webaim.org
    36. 36. Widget Roles Act as Standalone UI Widgets or as Part of Larger, Composite Widgets • alert • alertdialog • button • checkbox • dialog • gridcell • link • log • marquee • menuitem • menuitemcheckbox • menuitemradio • option • progressbar • radio • scrollbar • slider • spinbutton • status • tab • tabpanel • textbox • timer • tooltip • treeitem 36 Web Accessibility Workshop
    37. 37. Widget Roles Act as Composite UI Widgets • combobox • grid • listbox • menu • menubar • radiogroup • tablist • tree • treegrid 37 Web Accessibility Workshop
    38. 38. Keyboard Handling • Every widget needs to be operable by keyboard; • Common keystrokes are:  Arrow keys  Home, end, page up, page down  Enter, space  ESC 38 Web Accessibility Workshop Source: slideshare.net
    39. 39. Focus & Keyboard Accessibility • To be accessible, ARIA input widgets need focus:  Use natively focusable elements, such as <a>, <input />, etc  Add ‘tabindex’ attribute for non focusable elements, such as <span>, <div>, etc. • Tabindex=“0”: Element becomes part of the tab order • Tabindex=“-1” (Element is not in tab order, but focusable) 39 Web Accessibility Workshop Source: slideshare.net
    40. 40. 40 <span style="background-color: #ddd; border: medium outset white;" role="button" tabindex="0" onkeydown="if(event.keyCode==13 || event.keyCode==32) alert('You activated me with the keyboard');" onclick="alert('You clicked me with the mouse');">Push Me</span> • In this example, the text is styled to visually appear like a button; • The role="button" tells the browser that the text should behave as a button; • tabindex="0" puts the element into the keyboard navigation flow so keyboard users can activate the button. Accessible Button Example Web Accessibility Workshop
    41. 41. 3.C DOCUMENT STRUCTURE ROLES 41 Web Accessibility Workshop
    42. 42. Start Structuring with HTML5 42 Web Accessibility Workshop Source: classroom.w3devcampus.com
    43. 43. Document Structure Roles • Roles for document structure support the accessibility of dynamic web content by helping assistive technologies determine active content versus static document content; • Structural roles by themselves do not all map to accessibility APIs, but are used to create widget roles or assist content adaptation for assistive technologies 43 Web Accessibility Workshop
    44. 44. Document Structure Roles Describe Structures that Organize Content in a Page Document structures are not usually interactive • listitem • math • note • presentation • region • row • rowgroup • rowheader • separator • toolbar Web Accessibility Workshop 44 • article • columnheader • definition • directory • document • group • heading • img • list
    45. 45. 3.D DOCUMENT LANDMARK ROLES 45 Web Accessibility Workshop
    46. 46. The Problem • There is no mechanism for identifying the function or purpose of HTML elements in a programmatically determinable way (like navigation, search, etc.); • Browser or screen reader has no way of knowing what portion of the page contains the navigation elements; • This problem is evidenced by the need for "Skip to main content" or "Skip navigation" links 46 Web Accessibility Workshop Source: webaim.org
    47. 47. Roles for regions of the page intended as navigational landmarks • application • banner • complementary • contentinfo • form • main • navigation • search 47 Web Accessibility Workshop
    48. 48. WAI ARIA Document Landmark Roles • Application  A region declared as a web application, as opposed to a web document; • Banner  Site-oriented content, such as the name of the web site, title of the page, and/or the logo; • Complementary  Supporting content for the main content; • Contentinfo  Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on 48 Web Accessibility Workshop
    49. 49. WAI ARIA Document Landmark Roles • Form  A landmark region that contains a collection of items and objects that, as a whole, combine to create a form; • Main  The main or central content of the document; • Navigation  The area that contains the navigation links for the document or web site; • Search  This section contains the search functionality for the site; 49 Web Accessibility Workshop
    50. 50. Structuring Page with Landmarks Roles 50 Web Accessibility Workshop
    51. 51. How ARIA Landmark Roles Help Screen Reader Users 51 Web Accessibility Workshop Source: youtube.com
    52. 52. Using Landmark Role Simple Example <div id="header" role="banner">A banner image and introductory title</div> <div id="sitelookup" role="search">....</div> <div id="nav" role="navigation">...a list of links here ... </div> <div id="content" role="main"> ... Ottawa is the capital of Canada ...</div> <div id="rightsideadvert" role="complementary">....an advertisement here...</div> <div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div> 52 Web Accessibility Workshop Source: www.w3.org
    53. 53. Example 2: Two or More of the Same Type of Landmark on the Same Page <div id="leftnav" role="navigaton" aria-labelledby="leftnavheading"> <h2 id="leftnavheading">Institutional Links</h2> <ul><li>...a list of links here ...</li> </ul></div> <div id="rightnav" role="navigation" aria-labelledby="rightnavheading"> <h2 id="rightnavheading">Related topics</h2> <ul><li>...a list of links here ...</li></ul></div> 53 Web Accessibility Workshop Source: www.w3.org
    54. 54. Example 3: Two or More of the Same Type of Landmark on the Same Page, and no Text that can be Referenced as the Label <div id="leftnav" role="navigaton" aria-label="Primary"> <ul><li>...a list of links here ...</li></ul> </div> <div id="rightnav" role="navigation" aria-label="Secondary"> <ul><li>...a list of links here ...</li> </ul></div> 54 Web Accessibility Workshop Source: www.w3.org
    55. 55. Example 4: Search Form with "Search" Landmark. Typically Goes on the Form Field or Div Surrounding the Search Form <form role="search"> <label for="56">search</label><input id="56" type="text" size="20"> ... </form> 55 Web Accessibility Workshop Source: www.w3.org
    56. 56. Another Example of Structured Document with ARIA Code 56 Web Accessibility Workshop Source: carmenwiki.osu.edu
    57. 57. Page navigation with WAI-ARIA Landmarks http://www.youtube.com/watch?v=gS7Op020o-8 57 Web Accessibility Workshop
    58. 58. 3.E ARIA PROPERTIES AND STATES 58 Web Accessibility Workshop
    59. 59. What Properties Are? • ARIA properties define... well, properties or meanings of elements.; • You can extend HTML's native semantics by defining properties for elements that are not allowed in standard HTML; 59 Web Accessibility Workshop Source: webaim.org
    60. 60. 60 <input aria-required="true"> • This property will cause a screen reader to read this input as being required (meaning the user must complete it) Example of Property Web Accessibility Workshop Source: webaim.org
    61. 61. What States Are? • ARIA states are properties that define the current condition of an element; • They generally change based on user interaction or some dynamic variable 61 Web Accessibility Workshop Source: webaim.org
    62. 62. 62 <input aria-disabled="true"> • This property will cause a screen reader to read this input as being disabled, but this state value could easily be changed to "false" dynamically based on user input Example of State Web Accessibility Workshop Source: webaim.org
    63. 63. Global States and Properties Properties • aria-atomic • aria-controls • aria-describedby • aria-dropeffect • aria-flowto • aria-haspopup • aria-label • aria-labelledby • aria-live • aria-owns • aria-relevant States • aria-busy • aria-disabled • aria-grabbed • aria-hidden • aria-invalid 63 Web Accessibility Workshop Global states and properties are supported by all roles and by all base markup elements
    64. 64. Demo: Adding aria-describedby to “more” Links Without aria-describedby With aria-describedby 64 Web Accessibility Workshop
    65. 65. Use role="img" and aria-label to Make a CSS Background Image be Treated Like a Foreground Image http://www.youtube.com/watch?v=v1gsOG5IEhs#t=40 65 Web Accessibility Workshop
    66. 66. Widget Attributes Properties • aria-autocomplete • aria-haspopup • aria-label • aria-level • aria-multiline • aria-multiselectable • aria-orientation • aria-readonly • aria-required • aria-sort • aria-valuemax • aria-valuemin • aria-valuenow • aria-valuetext States • aria-checked • aria-disabled • aria-expanded • aria-hidden • aria-invalid • aria-pressed • aria-selected 66 Web Accessibility Workshop Widget attributes might be mapped by a user agent that MUST provide a way for AT to be notified when states change
    67. 67. Live Region Attributes Properties • aria-atomic • aria-live • aria-relevant States • aria-busy (state) 67 Web Accessibility Workshop • Live attributes are intended for live regions in rich internet applications; • These attributes may be applied to any element; • The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide assistive technologies with information on how to process those content updates
    68. 68. WAI-ARIA Live Region Example http://www.youtube.com/watch?v=jFB_zJE_pjY 68 Web Accessibility Workshop
    69. 69. Drag-and-Drop Attributes Properties • aria-dropeffect States • aria-grabbed 69 Web Accessibility Workshop • Drag-and-Drop attributes indicate information about drag- and-drop interface elements, such as draggable elements and their drop targets
    70. 70. 70 Relationship Attributes indicate relationships or associations between elements which cannot be readily determined from the document structure • aria-activedescendant • aria-controls • aria-describedby • aria-flowto Relationship Attributes Web Accessibility Workshop • aria-labelledby • aria-owns • aria-posinset • aria-setsize
    71. 71. Using aria-labelledby to Dynamically Label a Form Text Field http://www.youtube.com/watch?v=Xr32OASZO_Q 71 Web Accessibility Workshop
    72. 72. 4. HTML5 AND WAI ARIA 72 Web Accessibility Workshop
    73. 73. Comparing HTML 5 Tags to ARIA Roles HTML 5 ARIA Role <header> role="banner" <nav> role="navigation" <main> role="main" <footer> role="contentinfo" <aside> role="complementary" <section> role="region" * <article> role="article" * none role="search" <form> role="form" 73 Web Accessibility Workshop Source: dequeuniversity.com More detailed comparison is here: blog.paciellogroup.com
    74. 74. The Page that Uses WAI ARIA without HTML5 <div role="banner"> <p>Put company logo, etc. here.</p> </div> <div role="navigation"> <ul> <li>Put navigation here</li> </ul> </div> <div role="main"> <p>Put main content here.</p> </div> <div role="contentinfo"> <p>Put copyright, etc. here.</p> </div> 74 Web Accessibility Workshop Source: dequeuniversity.com
    75. 75. The Same Web Page that Uses HTML5 and WAI ARIA <header role="banner"> <p>Put company logo, etc. here.</p> </header> <nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav> <main role="main"> <p>Put main content here.</p> </main> <footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer> 75 Web Accessibility Workshop Source: dequeuniversity.com
    76. 76. Similar Example Again 76 Web Accessibility Workshop
    77. 77. 5. WAI ARIA PROSPECT 77 Web Accessibility Workshop
    78. 78. Will adding ARIA change my page styles or behavior? • No, ARIA is only made available to assistive technology API's, and doesn't affect native browser functionality with respect to the DOM or styling; • From the browser's point of view, the native HTML defines the semantic meaning and behavior of an element, with ARIA attributes acting as a layer on top to help support the AT API 78 Web Accessibility Workshop Source: developer.mozilla.org
    79. 79. WAI ARIA Support by Browsers Browser Minimum Version Notes Firefox 3.0+ Works with NVDA, JAWS 10+ and Orca Chrome Latest Screen reader support still experimental as of Chrome 15 Safari 4+ Safari 5 support is much improved. Live region support requires Safari 5 with VoiceOver on iOS5 or OS X Lion Opera 9.5+ Requires VoiceOver on OS X Internet Explorer 8+ Works with JAWS 10+ and NVDA. No live region support in NVDA. IE9 support is much improved. 79 Web Accessibility Workshop Source: developer.mozilla.org
    80. 80. Compatibility table for support of WAI-ARIA Accessibility features 80 Web Accessibility Workshop Source: caniuse.com/wai-aria
    81. 81. How well is ARIA supported? 81 Web Accessibility Workshop JAWS 13 NVDA 2012 Orca VoiceOver Window eyes 7.5 0 1 2 3 4 5 6 7 8 9 10 1 Supportscore Screen Readers Source: slideshare.net
    82. 82. JS Libraries and WAI-ARIA • JQuery UI – accordion – dialog – progress bar • Full ARIA implementation planned for JQuery UI version 2.0 • Sencha Ext JS • ARIA is a high priority in Ext 4. According to developers, it's built in to every Component. • Google Web Toolkit – Custom Button – Date Picker – Suggest Box – Tree – Menu Bar – Rich text – Tab Panel 82 Web Accessibility Workshop Source: blog.paciellogroup.com
    83. 83. Is ARIA Used Correctly? • Research on ARIA landmark role use on the top 10,000 web sites HTML (2012); • 93 pages found to include the banner role; • 130 pages found to include the main role; • 72 pages found to include the contentinfo role; • From an initial analysis the correct use of ARIA landmark roles is surprisingly high 83 Web Accessibility Workshop Source: blog.paciellogroup.com
    84. 84. 6. BEST PRACTICES Please be prepared to share your experience! 84 Web Accessibility Workshop
    85. 85. 85 <html> <head><title>Gracefully degrading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">Update</button> </body> </html> var progressBar = document.getElementById("progress-bar"); // Check to see if the browser supports the HTML5 <progress> tag. var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); function setupProgress() { if (!supportsHTML5Progress) { // HTML5 <progress> isn't supported in this browser, so we need to add // ARIA roles and states to the element. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); } } function updateProgress(percentComplete) { // Output omitted, follow the link for code… Graceful Degradation for WAI ARIA: HTML5 Markup Used for Progress Bar and JavaScript code for older browsers Web Accessibility Workshop Source: developer.mozilla.org
    86. 86. Using Landmarks Roles • Identify the logical structure of your page; • Implement the logical structure in HTML markup with <div> or <iframe>; • Label each region with a perceivable header; • Assign landmark roles to each region 86 Web Accessibility Workshop
    87. 87. Structuring Page with Landmarks Roles 87 Web Accessibility Workshop
    88. 88. 7. HOMEWORK ASSIGNMENT 4 88 Web Accessibility Workshop
    89. 89. Adding WAI ARIA to a Page 1. Choose two pages from representative sample you used in previous assignment; 2. Identify structure of the page by dividing code onto logical blocks if it is not ready. Use <div> tags; 3. Add ARIA Landmark Roles to these elements; 4. Add by necessary tab order for menu 89 Web Accessibility Workshop
    90. 90. Validate Your Page http://validator.w3.org/nu/ 90 Web Accessibility Workshop
    91. 91. Evaluation 5. Validate your page using validator from previous slide; 6. Test your pages with your favorite Screen Reader; 7. Reflect your experience in your blog, write about problems and differences in use of AT that you observed with and without ARIA 91 Web Accessibility Workshop
    92. 92. This Course Hands On Experience 92 Web Accessibility Workshop Evaluation of a page to WCAG Conformance Testing and repairing accessibility errors in code Using Screen Reader to access page content Embedding WAI ARIA code to improve accessibility Session One Session Two Session Three Session Four
    93. 93. Thank you for participation! The assignment implementation deadline is June 1st Please, be in time! Do not forgot to register into exam one week before! 93 Web Accessibility Workshop
    94. 94. End of the Course 94 Web Accessibility Workshop

    ×