19 how to create real accessible aria
TRANSCRIPT
![Page 1: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/1.jpg)
HOW TO CREATE REAL
ACCESSIBLE ARIA
Jan Vystrcil Czech Technical University in Prague
![Page 2: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/2.jpg)
2 CTU in Prague AEGIS Workshop and International Conference, Brussels
SUCESS project
• Center of Excellence between CTU in
Prague and Sun Microsystems (Oracle)
• ARIA enhancement of 2 JSF based toolkits
– ICEfaces
– Apache MyFaces Trinidad
![Page 3: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/3.jpg)
3 CTU in Prague AEGIS Workshop and International Conference, Brussels
Rich environment of RIA
• Modern RIA applications are build from
components
– Tree
– Tabs
– Accordion
– Grid
– etc.
![Page 4: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/4.jpg)
4 CTU in Prague AEGIS Workshop and International Conference, Brussels
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 compliant
![Page 5: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/5.jpg)
5 CTU in Prague AEGIS Workshop and International Conference, Brussels
Three steps towards accessible RIA
1. Accessibility of RIA components
2. Accessibility of RIA applications
3. Testing of application accessibility
![Page 6: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/6.jpg)
6 CTU in Prague AEGIS Workshop and International Conference, Brussels
Three steps towards accessible RIA
1. Accessibility of RIA components
2. Accessibility of RIA applications
3. Testing of application accessibility
![Page 7: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/7.jpg)
7 CTU in Prague AEGIS Workshop and International Conference, Brussels
Offline component prototype
<HTML>
JS
Web Browser
Server User
<HTML>
JS
JS
<HTML>
CSS
<HTML>
JS
<HTML>
CSS
JS
? ?
?
![Page 8: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/8.jpg)
8 CTU in Prague AEGIS Workshop and International Conference, Brussels
Offline component prototype
<HTML>
JS
<HTML>
CSS
JS <ARIA> + <HTML>
JS
<ARIA>
=
<HTML>
JS
<HTML>
CSS
JS
<ARIA>
+ ?
![Page 9: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/9.jpg)
9 CTU in Prague AEGIS Workshop and International Conference, Brussels
Accessibility of RIA components
1. Create offline component prototype
2. Simplify the component architecture
3. Add WAI-ARIA attributes into offline
component prototypes
– Implementing ARIA attributes
– Implementing keyboard navigation
4. Implement changes back to the server
– Test whether results are accessible
![Page 10: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/10.jpg)
10 CTU in Prague AEGIS Workshop and International Conference, Brussels
Three steps towards accessible RIA
1. Accessibility of RIA components
2. Accessibility of RIA applications
3. Testing of application accessibility
![Page 11: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/11.jpg)
11 CTU in Prague AEGIS Workshop and International Conference, Brussels
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 heuristics
![Page 12: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/12.jpg)
12 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
![Page 13: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/13.jpg)
13 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Screen readers and another assistive technologies
use several browsing modes. Make sure all parts of
the web page are accessible at least with “virtual
cursor” and “forms mode”. In forms mode all
information in the form area must be linked to one of
the form elements as a label or description.
![Page 14: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/14.jpg)
14 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Icons and other similar visual elements that carry
information to the user should have a textual
alternative available. The only exception is when a
non-textual element is used for decoration or layout
purposes.
![Page 15: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/15.jpg)
15 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Headings are the only elements with various levels of
importance. They are often used to scan the
content and should be used when possible to denote
sections.
![Page 16: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/16.jpg)
16 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
When showing larger section move focus to the
section. When showing a tooltip all content should
be connected as description.
![Page 17: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/17.jpg)
17 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Use on-the-fly validation where possible. Use live
regions to communicate asynchronous messages.
![Page 18: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/18.jpg)
18 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Connect menus with corresponding dynamically
loaded sections using aria-controls.
![Page 19: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/19.jpg)
19 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
All components that have their Roles identified in
WAI-ARIA should be marked using appropriate Role.
![Page 20: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/20.jpg)
20 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Use design patterns defined in WAI-ARIA or DHTML
Style Guide to determine the proper keyboard
navigation before implementing your own.
![Page 21: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/21.jpg)
21 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Identify as many common structure parts as possible
and apply WAI-ARIA landmark roles to them.
![Page 22: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/22.jpg)
22 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Menus should be close in the means of tab order to
the sections they are affecting. Tab order is
important as it is used to quickly scan the page for
interactive components. If the tab order is faulty, the
mental model of the web page will likely be incorrect.
![Page 23: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/23.jpg)
23 CTU in Prague AEGIS Workshop and International Conference, Brussels
Heuristics
1. Design with screen reader modes in mind
2. Provide text alternative for all non-textual elements
3. Use headings to mark important areas
4. Handle hidden section appropriately
5. Communicate important information and feedback as soon as possible
6. Create proper linkage of controls, labels and messages
7. Distinguish all components
8. Define complete keyboard operation and where possible, standardize
9. Define document structure with ARIA landmarks
10.Provide a logical tab order
11.Use buttons for functions and links for linking
Make clear distinction between buttons and links.
For all functions that are available on the page use
buttons. For navigation purposes and for linking to
other pages or anchoring, use links.
![Page 24: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/24.jpg)
24 CTU in Prague AEGIS Workshop and International Conference, Brussels
Three steps towards accessible RIA
1. Accessibility of RIA components
2. Accessibility of RIA applications
3. Testing of application accessibility
![Page 25: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/25.jpg)
25 CTU in Prague AEGIS Workshop and International Conference, Brussels
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 testing
![Page 26: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/26.jpg)
26 CTU in Prague AEGIS Workshop and International Conference, Brussels
View of blind user
• User see some components just partially or
they seems missing
B
A E
D
C
![Page 27: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/27.jpg)
27 CTU in Prague AEGIS Workshop and International Conference, Brussels
View of developer
• Developer see all the components
B
A E
D
C
![Page 28: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/28.jpg)
28 CTU in Prague AEGIS Workshop and International Conference, Brussels
View of user with description
B
A E
D
C
Datepicker (E)
Tablist (A)
Tab 1
Collapsible panel (C)
Panel 1
Tree view (B)
Panel 2
Grid (D)
Tab 2
Grid
![Page 29: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/29.jpg)
29 CTU in Prague AEGIS Workshop and International Conference, Brussels
Conclusion
• RIA accessibility is
complicated and complex
process
– Has to be treated in phases
• Valid testing is
complicated
– Support of blind tester
needed
![Page 30: 19 how to create real accessible aria](https://reader033.vdocuments.net/reader033/viewer/2022052821/554a5195b4c9054b328b4831/html5/thumbnails/30.jpg)
30 CTU in Prague AEGIS Workshop and International Conference, Brussels
Thank you for attention
Jan Vystrcil
Czech Technical University in Prague
Faculty of Electrical Engineering
Czech Republic