Your SlideShare is downloading. ×
0
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Web accessibility workshop 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web accessibility workshop 4

629

Published on

Workshop on Web Accessibility on spring semester 2014 in Tallinn University

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
629
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Web Accessibility Workshop Session Four Vladimir Tomberg, PhD Tallinn University
    • 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. 1. PRESENTATION OF HOMEWORK Please be prepared to share your experience! 3 Web Accessibility Workshop
    • 4. 2. WAI ARIA Introduction 4 Web Accessibility Workshop
    • 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. 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. 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. Here ARIA goes to the stage 8 Web Accessibility Workshop
    • 9. ARIA? 9 Web Accessibility Workshop Image source: www.artv.cl
    • 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. Web Accessibility Workshop 11
    • 12. WAI ARIA 12 Web Accessibility Workshop Clipart by Blinkofyoureye.com
    • 13. 13 What's it do? Without WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com
    • 14. 14 What's it do? With WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com
    • 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. What's Gained? • Correct role information: "Button" • Usage instructions: "To activate press spacebar" 16 Web Accessibility Workshop Source: blog.paciellogroup.com
    • 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 What's it do without WAI-ARIA (example two) Web Accessibility Workshop Source: blog.paciellogroup.com
    • 19. 19 What's it do with WAI-ARIA Web Accessibility Workshop Source: blog.paciellogroup.com What's the difference?
    • 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 <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. What's Gained? state information: "pressed" 22 Web Accessibility Workshop Source: blog.paciellogroup.com
    • 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. 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. 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. Additional Development Layer http://www.slideshare.net/ginader/the-5-layers-of- web-accessibility 26 Web Accessibility Workshop
    • 27. 3. CORE COMPONENTS Roles, properties, and states 27 Web Accessibility Workshop
    • 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. Categorization of Roles 29 Web Accessibility Workshop Source: www.w3.org
    • 30. 3.A ABSTRACT ROLES 30 Web Accessibility Workshop
    • 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. 3.B WIDGET ROLES 32 Web Accessibility Workshop
    • 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. 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. 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. 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. Widget Roles Act as Composite UI Widgets • combobox • grid • listbox • menu • menubar • radiogroup • tablist • tree • treegrid 37 Web Accessibility Workshop
    • 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. 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 <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. 3.C DOCUMENT STRUCTURE ROLES 41 Web Accessibility Workshop
    • 42. Start Structuring with HTML5 42 Web Accessibility Workshop Source: classroom.w3devcampus.com
    • 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. 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. 3.D DOCUMENT LANDMARK ROLES 45 Web Accessibility Workshop
    • 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. Roles for regions of the page intended as navigational landmarks • application • banner • complementary • contentinfo • form • main • navigation • search 47 Web Accessibility Workshop
    • 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. 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. Structuring Page with Landmarks Roles 50 Web Accessibility Workshop
    • 51. How ARIA Landmark Roles Help Screen Reader Users 51 Web Accessibility Workshop Source: youtube.com
    • 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. 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. 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. 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. Another Example of Structured Document with ARIA Code 56 Web Accessibility Workshop Source: carmenwiki.osu.edu
    • 57. Page navigation with WAI-ARIA Landmarks http://www.youtube.com/watch?v=gS7Op020o-8 57 Web Accessibility Workshop
    • 58. 3.E ARIA PROPERTIES AND STATES 58 Web Accessibility Workshop
    • 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 <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. 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 <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. 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. Demo: Adding aria-describedby to “more” Links Without aria-describedby With aria-describedby 64 Web Accessibility Workshop
    • 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. 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. 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. WAI-ARIA Live Region Example http://www.youtube.com/watch?v=jFB_zJE_pjY 68 Web Accessibility Workshop
    • 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 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. Using aria-labelledby to Dynamically Label a Form Text Field http://www.youtube.com/watch?v=Xr32OASZO_Q 71 Web Accessibility Workshop
    • 72. 4. HTML5 AND WAI ARIA 72 Web Accessibility Workshop
    • 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. 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. 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. Similar Example Again 76 Web Accessibility Workshop
    • 77. 5. WAI ARIA PROSPECT 77 Web Accessibility Workshop
    • 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. 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. Compatibility table for support of WAI-ARIA Accessibility features 80 Web Accessibility Workshop Source: caniuse.com/wai-aria
    • 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. 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. 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. 6. BEST PRACTICES Please be prepared to share your experience! 84 Web Accessibility Workshop
    • 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. 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. Structuring Page with Landmarks Roles 87 Web Accessibility Workshop
    • 88. 7. HOMEWORK ASSIGNMENT 4 88 Web Accessibility Workshop
    • 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. Validate Your Page http://validator.w3.org/nu/ 90 Web Accessibility Workshop
    • 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. 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. 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. End of the Course 94 Web Accessibility Workshop

    ×