• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
19 how to create real accessible aria
 

19 how to create real accessible aria

on

  • 358 views

 

Statistics

Views

Total Views
358
Views on SlideShare
358
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    19 how to create real accessible aria 19 how to create real accessible aria Presentation Transcript

    • HOW TO CREATE REALACCESSIBLE ARIA Jan Vystrcil Czech Technical University in Prague
    • SUCESS project• Center of Excellence between CTU in Prague and Sun Microsystems (Oracle)• ARIA enhancement of 2 JSF based toolkits – ICEfaces – Apache MyFaces TrinidadCTU in Prague AEGIS Workshop and International Conference, Brussels 2
    • Rich environment of RIA• Modern RIA applications are build from components – Tree – Tabs – Accordion – Grid – etc.CTU in Prague AEGIS Workshop and International Conference, Brussels 3
    • Rich world of RIA• Web environment is extremely variable• Accessibility depends on: – Type of OS • Windows, Linux, Mac, … – Type of Web browser • Firefox, IE, Safari, Chrome, … – Type of Screen reader • Jaws, NVDA, Orca, …• No configuration is 100% ARIA compliantCTU in Prague AEGIS Workshop and International Conference, Brussels 4
    • Three steps towards accessible RIA1. Accessibility of RIA components2. Accessibility of RIA applications3. Testing of application accessibilityCTU in Prague AEGIS Workshop and International Conference, Brussels 5
    • Three steps towards accessible RIA1. Accessibility of RIA components2. Accessibility of RIA applications3. Testing of application accessibilityCTU in Prague AEGIS Workshop and International Conference, Brussels 6
    • Offline component prototype Server Web Browser User CSS <HTML> ?? <HTML> ? <HTML> JS JS JS CSS <HTML> <HTML> JS JSCTU in Prague AEGIS Workshop and International Conference, Brussels 7
    • Offline component prototypeCSS <ARIA><HTML> <HTML><HTML> JS + <ARIA> = JS JS CSS <ARIA> <HTML>? + <HTML> JS JSCTU in Prague AEGIS Workshop and International Conference, Brussels 8
    • Accessibility of RIA components1. Create offline component prototype2. Simplify the component architecture3. Add WAI-ARIA attributes into offline component prototypes – Implementing ARIA attributes – Implementing keyboard navigation4. Implement changes back to the server – Test whether results are accessibleCTU in Prague AEGIS Workshop and International Conference, Brussels 9
    • Three steps towards accessible RIA1. Accessibility of RIA components2. Accessibility of RIA applications3. Testing of application accessibilityCTU in Prague AEGIS Workshop and International Conference, Brussels 10
    • Issues to be implemented• Navigation on the page• Relationships between components• Dynamic changes of presented information• Created set of 11 heuristics based on Nealson’s usability heuristicsCTU in Prague AEGIS Workshop and International Conference, Brussels 11
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 12
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements Screen readers and another assistive technologies3. Use headings to mark important areas parts of use several browsing modes. Make sure all4. Handle hidden section appropriately “virtual the web page are accessible at least with5. cursor” and “forms mode”. In forms mode all Communicate important information and feedback as soon asinformation in the form area must be linked to one of possible the form elements as a label or description.6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 13
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas Icons and other similar visual elements that carry4. Handle hidden section appropriately information to the user should have a textual5. alternative available. The only exception is when a Communicate important information and feedback as soon asnon-textual element is used for decoration or layout possible purposes.6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 14
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately Headings are the only elements with various levels of5. Communicate important information and feedback as soon importance. They are often used to scan the ascontent and should be used when possible to denote possible sections.6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 15
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon When showing larger section move focus to the assection. When showing a tooltip all content should possible6. Create proper as description. be connected linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 16
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage ofwhere possible. Use live messages Use on-the-fly validation controls, labels and7. Distinguish communicate asynchronous messages. regions to all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 17
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components Connect menus with corresponding dynamically8. Define complete using aria-controls. loaded sections keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 18
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, All components that have their Roles identified in standardize WAI-ARIA should be marked using appropriate Role.9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 19
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define complete keyboard operation and where possible, standardize9. Define document structure with ARIA landmarks Use design patterns defined in WAI-ARIA or DHTML10. Provide a logical tab order proper keyboard Style Guide to determine the11. Use buttonsbefore implementing your own. linking navigation for functions and links forCTU in Prague AEGIS Workshop and International Conference, Brussels 20
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components Identify as many common structure parts as possible8. Define complete keyboard operation and where possible, and apply WAI-ARIA landmark roles to them. standardize9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 21
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper be close of the means of tab order to Menus should linkage in controls, labels and messages7. Distinguish allthey are affecting. Tab order is the sections components8. Define completeused to quickly scan the page for possible, important as it is keyboard operation and where interactive components. If the tab order is faulty, the standardize mental model of the web page will likely be incorrect.9. Define document structure with ARIA landmarks10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 22
    • Heuristics1. Design with screen reader modes in mind2. Provide text alternative for all non-textual elements3. Use headings to mark important areas4. Handle hidden section appropriately5. Communicate important information and feedback as soon as possible6. Create proper linkage of controls, labels and messages7. Distinguish all components8. Define clear distinction between buttons and links. possible, Make complete keyboard operation and where standardize For all functions that are available on the page use buttons. For navigation purposes and for linking to9. Define document structure with ARIA landmarks other pages or anchoring, use links.10. Provide a logical tab order11. Use buttons for functions and links for linkingCTU in Prague AEGIS Workshop and International Conference, Brussels 23
    • Three steps towards accessible RIA1. Accessibility of RIA components2. Accessibility of RIA applications3. Testing of application accessibilityCTU in Prague AEGIS Workshop and International Conference, Brussels 24
    • Testing of application accessibility• Developer is typically NOT: – Blind user – Used to operate screen reader• Need for accessibility testing with blind users• Early stages of development means: – Poor accessibility – Need for support of accessibility testingCTU in Prague AEGIS Workshop and International Conference, Brussels 25
    • View of blind user• User see some components just partially or they seems missing E A B D CCTU in Prague AEGIS Workshop and International Conference, Brussels 26
    • View of developer• Developer see all the components E A B D CCTU in Prague AEGIS Workshop and International Conference, Brussels 27
    • View of user with description Datepicker (E) Tablist (A) Tab 1 Collapsible panel (C) E Panel 1 A Tree view (B) Panel 2 B D Grid (D) Tab 2 Grid CCTU in Prague AEGIS Workshop and International Conference, Brussels 28
    • Conclusion• RIA accessibility is complicated and complex process – Has to be treated in phases• Valid testing is complicated – Support of blind tester neededCTU in Prague AEGIS Workshop and International Conference, Brussels 29
    • Thank you for attention Jan Vystrcil Czech Technical University in Prague Faculty of Electrical Engineering Czech RepublicCTU in Prague AEGIS Workshop and International Conference, Brussels 30