testing for accessibility - intopia · there are a number of evaluation tools and techniques that...
TRANSCRIPT
![Page 1: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/1.jpg)
Testing for accessibilitySarah Pulis
Director
creating an inclusive digital world
intopia.digital
![Page 2: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/2.jpg)
Breaks
10.30 Morning Tea
12.30 Lunch
3.00 Afternoon Tea
![Page 3: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/3.jpg)
On post-it notes, write down what accessibility
means to you? What does it mean to your
organisation?
![Page 4: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/4.jpg)
We all have the right to inclusive
and delightful digital experiences
Accessibility is the qualities that
make an experience open to all
![Page 6: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/6.jpg)
Who benefits from accessibility?
Everyone
Anyone
You
Image credit: Microsoft’s Inclusive Design Toolkit
![Page 7: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/7.jpg)
Optimising the online experience: Vision• Screen readers
• High-contrast colours
• Magnifying software
• Text size, bold settings
• Braille keyboards & displays
• Large-print keyboards
![Page 8: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/8.jpg)
Screen magnifier and highcontrast exercise
![Page 9: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/9.jpg)
Optimising the online experience: Hearing• Captions & transcripts
• Visual alerts
• Haptic/tap/vibration feedback
• Hearing aids
• Video, not audio-only, calls
![Page 10: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/10.jpg)
Optimising the online experience: Mobility• Input devices: switches, dials, over-sized mouse
• Head/mouth pointers
• Keyboard keyguards
• Eye-tracking software
• Voice-activated software
![Page 11: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/11.jpg)
Optimising the online experience: Cognitive• Remove distractions
• Dyslexia-friendly fonts
• Dictionary, thesaurus
• Read-aloud tools
• Disable animations
• Foreign language translation tools
• Notes of prompts, passwords, URLs, instructions, reminders
![Page 12: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/12.jpg)
Web Content Accessibility Guidelines (WCAG) 2
WCAG 2 is a technical standard about how to make
digital content more accessible to people with
disabilities.
• WCAG 2.0 published 2008
• WCAG 2.1 published June 2018
![Page 13: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/13.jpg)
WCAG 2.1 is
WCAG 2.0 + 17 new criteria
![Page 14: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/14.jpg)
WCAG structure
![Page 15: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/15.jpg)
Example WCAG 2 success criteria
Success Criterion 2.1.1 Keyboard
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
![Page 16: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/16.jpg)
WCAG 2 support material
Understanding WCAG 2 – user-friendly descriptions of each Success Criterion.
Sufficient techniques – how to pass
“G90: Providing keyboard-triggered event handlers”
Failures – how to fail
“F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function”
![Page 17: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/17.jpg)
How to meet WCAG 2.0 (quick ref) [www.w3.org/WAI/WCAG20/quickref]
![Page 18: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/18.jpg)
Disability Discrimination Act
The provision of online services through the web is a service covered by the DDA.
Equal access for people with a disability is required by the DDA where it can reasonably be provided.
This requirement applies to any organisation developing a website in Australia.Australian Human Rights Commission (AHRC)WWW Access: DDA Advisory Notes v4.1 (http://bit.ly/2BsdxbY)
![Page 19: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/19.jpg)
Guidelines advice from the AHRC
Non-government websites and web resources whose development commences after July 1 2010 should comply with WCAG 2.0 to a minimum of AA-Level conformance.
All existing non-government websites and web content should comply with WCAG 2.0 to a minimum level of AA conformance by December 31 2013.
AHRC WWW Access: DDA Advisory Notes v4.1
![Page 20: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/20.jpg)
Usability advice from the AHRC
There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there is no complete substitute for user testing, and designers should, wherever possible, involve users of assistive technology in the testing and evaluation of the accessibility of their websites and web content.
AHRC WWW Access: DDA Advisory Notes v4.1
![Page 21: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/21.jpg)
Testing for accessibility
![Page 22: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/22.jpg)
Meeting WCAG
• pages conform to WCAG 2 at a specified level (e.g. Level AA)
• all pages in a process conform to WCAG 2 at the specified level
• pages work with commonly used assistive technologies and web browsers
![Page 23: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/23.jpg)
Testing
Automated testing
Assistive technology
testing
Manual testing
![Page 24: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/24.jpg)
On average, only 18% of WCAG requirements can be tested via an automated testing tools
25%
17%
23%
29%
41%
24%
46%
41%
53%
0%
10%
20%
30%
40%
50%
60%
Level A Level AA Level AAA
Testability of accessibility requirements by WCAG levelFrom: Web Accessibility Testing: What Can be Tested and How
[karlgroves.com/2012/09/15/accessibility-testing-what-can-be-tested-and-how]
Auto Manual verification Manual only
![Page 25: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/25.jpg)
Our favourite free testing toolsAutomated testing
• aXe by Deque [deque.com/products/axe]
• Tenon [tenon.io]
• WAVE by WebAIM [wave.webaim.org]
Colour contrast
• Colour Contrast Analyser by The Paciello Group [www.paciellogroup.com/resources/contrastanalyser]
• Contrast Ratio by Lea Verou [leaverou.github.io/contrast-ratio]
• WebAIM Color Contrast Checker [webaim.org/resources/contrastchecker/]
![Page 26: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/26.jpg)
Automated tools
• aXe by Deque [deque.com/products/axe]
• Tenon [tenon.io]
• WAVE by WebAIM [wave.webaim.org]
• ARC Toolkit [bit.ly/arc-toolkit]
• Microsoft Insights [accessibilityinsights.io]
![Page 27: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/27.jpg)
Colour contrast tools
• Colour Contrast Analyser by The Paciello Group [paciellogroup.com/resources/contrastanalyser]
• Contrast Ratio by Lea Verou[leaverou.github.io/contrast-ratio]
• WebAIM Color Contrast Checker [webaim.org/resources/contrastchecker/]
![Page 28: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/28.jpg)
Assistance tools
• Web Developer extension for Chrome & Firefox
[chrispederick.com/work/web-developer]
• HeadingMaps
[chrome.google.com/webstore/detail/headingsm
ap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en]
![Page 29: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/29.jpg)
axe exercise
![Page 30: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/30.jpg)
Test strategies – existing projects
![Page 31: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/31.jpg)
Test strategies
• Testing an existing website
• Testing a new website as it is built
![Page 32: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/32.jpg)
Testing existing websites
The Website Accessibility Conformance Evaluation
Methodology (WCAG-EM) describes a process for
evaluating sites – usually existing websites –
against WCAG 2
www.w3.org/TR/WCAG-EM
![Page 33: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/33.jpg)
Steps to review an existing site
1. Define the evaluation scope
2. Explore the target website
3. Select a representative sample
4. Audit the selected sample
5. Report the evaluation findings
![Page 34: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/34.jpg)
1. Define the evaluation scope
• What is in scope for testing?
• What WCAG 2 level are your aiming for?
• What commonly used assistive technology and
web browsers will you support (Accessibility
Supported Baseline)?
![Page 35: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/35.jpg)
Accessibility Supported Baseline
What is the minimum set of combinations of
operating systems, web browsers, assistive
technologies, and other user agents that the
website is expected to work with?
Do your users have any environment restrictions?
![Page 36: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/36.jpg)
Primary screen reader
![Page 37: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/37.jpg)
Common AT combos
• JAW/IE
• NVDA/Firefox
• VoiceOver/Safari (Mac and iOS)
• TalkBack/Android
• Dragon/IE
![Page 38: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/38.jpg)
Do you currently test with different assistive technologies?
What might your Accessibility Supported Baseline be for your project?
![Page 39: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/39.jpg)
2. Explore the target website
• Identify Common Web Pages of the Website
• Identify Essential Functionality of the Website
• Identify the Variety of Web Page Types
• Identify Web Technologies Relied Upon
• Identify Other Relevant Web Pages
![Page 40: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/40.jpg)
3. Select a representative sample
• Include a Structured Sample
• Include a Randomly Selected Sample
• Include Complete Processes
![Page 41: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/41.jpg)
4. Audit the selected sample
• Check All Initial Web Pages
• Check All Complete Processes
• Compare Structured and Random Samples
![Page 42: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/42.jpg)
5. Report the evaluation findings
• Document the Outcomes of Each Step
• Record the Evaluation Specifics (Optional)
• Provide an Evaluation Statement (Optional)
• Provide an Aggregated Score (Optional)
• Provide Machine-Readable Reports (Optional)
![Page 43: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/43.jpg)
Test strategy exercise
![Page 44: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/44.jpg)
Test strategies –new projects
![Page 45: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/45.jpg)
Test as you design and build
Source: ABC
![Page 46: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/46.jpg)
Cost of fixing issues increases during the project lifecycle
Time
Cost
![Page 47: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/47.jpg)
Issues fixed after production have a much higher cost again
Time
Cost
![Page 48: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/48.jpg)
Shift-left
![Page 49: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/49.jpg)
Traditional model
DesignUX designVisual designContent design
Build Test Launch
![Page 50: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/50.jpg)
Shift-left model
DesignUX designVisual designContent design
Build QA Launch
Accessibility Accessibility A11y Accessibility
![Page 51: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/51.jpg)
Roles and responsibilities
![Page 52: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/52.jpg)
Include accessibility in DoD
• conforms to WCAG 2 Level AA
• works with technologies in your
organisation/product Accessibility Supported
Baseline
![Page 53: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/53.jpg)
User story
'As a registered customer, I want to enter my
username and password and submit, so that I can
access my account details.'
![Page 54: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/54.jpg)
Identify elements
Ref Functionality
Ticket_ID Username - Input field
Ticket_ID Password - Input field
Ticket_ID Submit button
![Page 55: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/55.jpg)
Write test cases
• Component level tests - can be performed against individual components out of context of the rest of the page. E.g. code inspections
• Page level tests - must be performed in context of the rest of the page. e.g. checking the focus order.
![Page 56: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/56.jpg)
Write test casesCheck that the input field has an associated label
Ticket_ID Password input field
3.3.2 Labels or Instructions
A Component
Check that the label describes the purpose of the field
Ticket_ID Password input field
2.4.6 Headings and labels
AA Component
Check that text meets the minimum contrast requirements against the background, 4.5:1 for small text (<24px)
Ticket_ID Password input field
1.4.3 Contrast (Minimum)
AA Component
![Page 57: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/57.jpg)
Assign a role for each test case
• Who has primary responsibility for each test
case?
• We’ll be talking about this today
![Page 58: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/58.jpg)
Test!
• Executive each test case and record the results
![Page 59: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/59.jpg)
Accessible coding fundamentals
![Page 60: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/60.jpg)
Use semantic HTML
Native HTML conveys semantics to assistive
technologies like screen readers and voice
recognition technology
![Page 61: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/61.jpg)
Semantic code
Yes!<h1>Heading level 1</h1>
h1, h2, h3, .h1, .h2, .h3
{
color: #333;
font-weight: 700; }
h1, .h1 {
margin: 0 0 .5rem;
font-size: 2.25em; }
No<span class=“heading1”>Heading 1</span>
.heading1
{
color: #333;
font-weight: 700;
margin: 0 0 .5rem;
font-size: 2.25em;
}
![Page 62: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/62.jpg)
Interactive elements
Interactive HTML elements automatically have:
• name
• role
• state, properties or value
• are keyboard accessible!
![Page 63: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/63.jpg)
Checkbox
<input id="checkbox01" type="checkbox"
checked>
<label for="checkbox01">Subscribe</label>
4.1.2 Name, Role, Value
Accessible name
Role
State
![Page 64: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/64.jpg)
HTML for meaning, CSS for style
• <strong> not <b>
• <em> not <i>
![Page 65: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/65.jpg)
Enhance with ARIA
Attributes that supplement HTML by adding
custom roles (e.g. tooltip), states (e.g. aria-
expanded) or properties (e.g. aria-haspopup)
Enables us to build complex components (not
covered today)
![Page 66: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/66.jpg)
Accordion pre-ARIA
<button>
Personal Information
<span class=“visuallyhidden”>expanded</span>
</button>
<div>
<p>Please enter your personal information in the form below</p>
<div>
![Page 67: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/67.jpg)
Accordion post-ARIA
<button aria-expanded=“true”>
Personal Information
</button>
<div>
<p>Please enter your personal information in the
form below</p>
<div>
![Page 68: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/68.jpg)
.visuallyhidden
Text that is hidden from visual view but is available
to screen reader users
![Page 69: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/69.jpg)
.visuallyhidden
.hidden {
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
border: 0;
margin: -1px;
padding: 0;
}
![Page 70: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/70.jpg)
Stick to valid HTML
Assistive technology works best with valid code
At a minimum:• Complete start and end tags
• Correct element nesting
• No duplicate attributes
• All element IDs are unique
4.1.1 Parsing
![Page 71: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/71.jpg)
Visual design
![Page 72: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/72.jpg)
In this section
• Colour
• Shape, size or relative position
• Contrast
![Page 73: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/73.jpg)
Colour
As a user who has difficulty distinguishing between
colours and shades, I want information that is
conveyed with colour to also be available using
another visual method, so that I can understand all
information
1.4.1 Use of Color
![Page 74: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/74.jpg)
1.4.1 Use of Color (A)
Color is not used as the only visual means of
conveying information, indicating an action,
prompting a response, or distinguishing a visual
element.
![Page 75: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/75.jpg)
Patterns example
![Page 76: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/76.jpg)
Text example
• https://webaim.org/projects/screenreadersurvey7/
![Page 77: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/77.jpg)
Link underline example
![Page 78: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/78.jpg)
Checklist
• Information that is conveyed by colour
differences must also available using another
visual means, such as text
![Page 79: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/79.jpg)
Shape, size or relative position
As a user who is blind or has low vision, I want
instructions that don’t need me to see shape, size
or relative position, so that I can identify, located
or operate information or a component
1.3.3 Sensory Characteristics
![Page 80: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/80.jpg)
1.3.3 Sensory Characteristics (A)
Instructions provided for understanding and
operating content do not rely solely on sensory
characteristics of components such as shape, size,
visual location, orientation, or sound.
![Page 81: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/81.jpg)
Position
![Page 82: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/82.jpg)
Checklist
• Information that references the shape, size or
position of an object must have additional
information that allows the item to be located
and identified without any knowledge of its
shape, size, or relative position
![Page 83: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/83.jpg)
Contrast
As a user with low vision, I want important text,
graphics and user interface components to have
good contrast so that I can easily perceive all
important information
1.4.3: Contrast (Minimum); 1.4.11 Non-text Contrast
![Page 84: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/84.jpg)
1.4.3: Contrast (Minimum) (AA)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
![Page 85: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/85.jpg)
1.4.11 Non-text Contrast (AA)
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
• User Interface Components. Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
• Graphical Objects. Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
![Page 87: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/87.jpg)
Contrast - text
Normal text has a
contrast ratio of at least
4.5:1
Large text has a
contrast ratio of at
least 3:1
Normal text is less than
14 point bold or 18 point
Large text is at least
14 point bold or 18
point
![Page 88: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/88.jpg)
Contrast ratio between link text and paragraph is 2.6:1. Contrast must be 3:1 to pass this requirement.
Best practice uses an underline that meets contrast requirements (4.6:1 in example)
Contrast - links
![Page 89: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/89.jpg)
Contrast - icons
Blue on white – 5.1:1
Grey on white – 6:1
![Page 90: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/90.jpg)
UI components - 3:1
For example:
• selected state
• focus state
• borders
![Page 91: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/91.jpg)
Checklist - text
• Normal text must have a contrast ratio of at least
4:5:1
• Large text must have a contrast ratio of at least
3:1 (text is at least 14 point bold or 18 point)
![Page 92: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/92.jpg)
Checklist – UI components
• Visual information that is necessary for a user to identify a control, know how to use it, or what state it is on must have a contrast ratio of at least 3:1
• Custom focus styles must have a contrast ratio of at least 3:1
![Page 93: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/93.jpg)
Checklist – graphics and links
• Graphical objects or parts of objects that is necessary for a user to understand the content must have a contrast ratio of at least 3:1
• If links are not underlined, there must be a contrast ratio of at least 3:1 between the link colour and paragraph colour
![Page 94: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/94.jpg)
Checklist – exemptions
• Logos, default focus indicators, disabled
components do not have to meet contrast
requirements
![Page 95: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/95.jpg)
Group activity: Contrast exercise
![Page 96: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/96.jpg)
Discussion
Who has primary responsibility?Who has secondary responsibility?
![Page 97: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/97.jpg)
Responsive design
![Page 98: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/98.jpg)
In this section
• Zoom
• Text spacing
• Orientation
• Reading and focus order
![Page 99: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/99.jpg)
Zoom
As a user with low vision, I want to be able to zoom
in to 400% and only scroll in one direction, so that I
can more easily read and interact with content
1.4.4 Resize text, 1.4.10 Reflow
![Page 100: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/100.jpg)
1.4.4 Resize text (AA) – WCAG 2.0
Except for captions and images of text, text can be
resized without assistive technology up to 200
percent without loss of content or functionality.
![Page 101: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/101.jpg)
1.4.10 Reflow (AA) – WCAG 2.1
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
• vertical scrolling content at a width equivalent to 320 CSS pixels
• horizontal scrolling content at a height equivalent to 256 CSS pixels
Except for parts of the content which require two-dimensional layout for usage or meaning.
![Page 102: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/102.jpg)
Up to 400% with reflow
![Page 103: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/103.jpg)
Up to 400% without reflow
![Page 104: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/104.jpg)
Exceptions
Content that requires two-dimensional layout
e.g. images, maps, diagrams, video, games,
presentations, data tables, and interfaces where it
is necessary to keep toolbars in view while
manipulating content.
![Page 105: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/105.jpg)
Checklist
• Users must be able to zoom and scale text up to
400% without 2-dimensional scrolling (note
exceptions)
• Zooming and scaling must not be disabled
(checked by axe)
![Page 106: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/106.jpg)
Reflow exercise
![Page 107: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/107.jpg)
Text spacing
As a user with low vision or dyslexia, I want to be
able to change spacing between lines, words,
letters and paragraphs, so that I can more easily
read content
1.4.12 Text Spacing
![Page 108: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/108.jpg)
1.4.12 Text Spacing (AA)
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.
With exceptions
![Page 109: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/109.jpg)
![Page 110: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/110.jpg)
Checklist
• All the following text style changes must be supported with no loss of content or functionality:
• Line height (line spacing) to at least 1.5 times the font size
• Spacing following paragraphs to at least 2 times the font size
• Letter spacing (tracking) to at least 0.12 times the font size
• Word spacing to at least 0.16 times the font size
![Page 111: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/111.jpg)
Group exercise: text spacing
![Page 112: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/112.jpg)
Orientation
As a user that has a device mounted in a fixed
orientation, I want to be able to view content in
either portrait or landscape mode, so that I don’t
need to move my device
1.3.4 Orientation
![Page 113: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/113.jpg)
1.3.4 Orientation (AA)
Content does not restrict its view and operation to
a single display orientation, such as portrait or
landscape, unless a specific display orientation is
essential.
![Page 114: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/114.jpg)
![Page 115: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/115.jpg)
Exception
Where orientation is
essential!
![Page 116: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/116.jpg)
Checklist
• Content must be able to be viewed in portrait or
landscape mode, unless specific display
orientation is essential
![Page 117: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/117.jpg)
Orientation exercise
![Page 118: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/118.jpg)
Reading and focus order
As a screen reader user or keyboard user, I want
the reading and focus order to be logical and
intuitive, so that I can understand and interact with
the content, regardless of what method I use
1.3.2 Meaningful Sequence; 2.4.3 Focus Order
![Page 119: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/119.jpg)
1.3.2 Meaningful Sequence (A)
When the sequence in which content is presented
affects its meaning, a correct reading sequence can
be programmatically determined.
![Page 120: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/120.jpg)
2.4.3 Focus Order (A)
If a Web page can be navigated sequentially and
the navigation sequences affect meaning or
operation, focusable components receive focus in
an order that preserves meaning and operability.
![Page 121: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/121.jpg)
Live demo: Coles online
![Page 122: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/122.jpg)
Checklist
• The order of content must be meaningful and
intuitive when content is linearised or read out by
screen readers
• The tab order must be logical and intuitive
![Page 123: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/123.jpg)
Reading and focus order exercise
![Page 124: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/124.jpg)
Discussion
Who has primary responsibility?Who has secondary responsibility?
![Page 125: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/125.jpg)
Semantic structure
![Page 126: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/126.jpg)
In this section
• Landmark regions
• Headings
• Content structure
• iFrames
![Page 127: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/127.jpg)
Landmark regions
As a screen reader users or keyboard user, I want
to easily navigate to common regions of a page, so
that I don’t have to navigate linearly through
content
1.3.1 Info and Relationship; 2.4.1 Bypass blocks
![Page 128: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/128.jpg)
1.3.1 Info and Relationships (A)
Information, structure, and relationships conveyed
through presentation can be programmatically
determined or are available in text.
![Page 129: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/129.jpg)
Landmark types
More info: www.w3.org/TR/wai-aria-practices/examples/landmarks/
<header role=“banner”>
<footer role=“contentinfo”>
<nav role=“navigation”>
<aside role=“complementary”>
<main role=“main”>
Search
<form role="search">
![Page 130: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/130.jpg)
Labelling regions
Use aria-label or aria-labelledby to label
regions that are used more than once on a page
Avoid using the landmark role name within the
label
![Page 131: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/131.jpg)
<nav role=“navigation” aria-label=“main”>
<ul>
<li><a href=“page1.html”>Link 1</a></li>
…
</nav>
<p id=“footer-nav”>title for footer navigation</p>
<nav aria-labelledby=“footer-nav”>
…
</nav>
![Page 132: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/132.jpg)
Checklist
• For each landmark role:
• Landmark roles must be applied to page regions that
correspond to that role
![Page 133: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/133.jpg)
Checklist
• The banner, main, complementary and
contentinfo landmarks should be top level
landmarks (checked by axe)
• There should only be one main, banner,
contentinfo landmark (checked by axe)
![Page 134: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/134.jpg)
Checklist
• All page content should be contained by landmarks (checked by axe)
• If a specific landmark role is used more than once on a page, it should have a unique label
• Avoid using the landmark role name as part of the label
![Page 135: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/135.jpg)
Headings
As a screen reader user, I want descriptive headings
that are hierarchical structured like a table of
contents, so that I can understand the structure of
content on a page and easily navigate to sections of
content
1.3.1 Info and Relationship; 2.4.6 Headings and Labels
![Page 136: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/136.jpg)
2.4.6 Headings and Labels (AA)
Headings and labels describe topic or purpose.
![Page 137: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/137.jpg)
![Page 138: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/138.jpg)
Checklist
• Headings must be properly coded using heading markup, ideally <h1>…<h6>
• Headings must identify its section of content
• Heading level markup must convey the hierarchical structure of the content
• Heading markup must not be used when content is not a heading
![Page 139: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/139.jpg)
Checklist
• Each new section of content should be identified by a descriptive heading
• Heading levels should only increase by one (checked by axe)
• Headings must not be empty (checked by axe)
• Page should contain one heading level 1 (checked by axe)
![Page 140: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/140.jpg)
Content structure
As an assistive technology user, I want content
structure that is visual such as lists and paragraphs
to be to also be reflected in code, so that the
structure is announced to me
![Page 141: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/141.jpg)
Semantic markup examples
• <p> for paragraphs
• <ul> and <li> for unordered lists
• <ol> and <li> for ordered lists
• <dl>, <dt> and <dd> for description lists
• <blockquote> and <q> for quotes
![Page 142: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/142.jpg)
Lists
As a screen reader users, I want groups of related
items to be a list, so that know when items are in a
list and how many are in them
1.3.1 Info and Relationship
![Page 143: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/143.jpg)
Lists
• Screen reader says “list of x items” at the start of the list
• Unordered: use <ul>, <li>
• Ordered: use <ol>, <li>
• Definitions: use <dl>, <dt>, <dd>
Success Criteria 1.3.1 Info and Relationship (A)
![Page 144: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/144.jpg)
Checklist for lists
• Lists of related items must be properly coded using list
markup
• Unordered lists <ul> are used when the order of the items is not
relevant
• Ordered lists <ol> are used for sequential information
• Description lists <dl> are groups of related terms <dt> and
descriptions <dd>
• Nested lists are used for multi-level lists
![Page 145: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/145.jpg)
Semantic structure exercise
![Page 146: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/146.jpg)
Discussion
Who has primary responsibility?Who has secondary responsibility?
![Page 147: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/147.jpg)
Navigation
![Page 148: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/148.jpg)
In this section• Language
• Page title
• Links and consistent identification of links
• Skip link
• Consistent navigation
• Multiple ways
• iFrames
![Page 149: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/149.jpg)
Language
As a screen reader user, I want the language of the
page to be identified, so that my screen reader
announces content in the right accent
3.1.1 Language of Page, 3.1.2 Language of Parts
![Page 150: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/150.jpg)
![Page 151: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/151.jpg)
Checklist
• <html> element must have a lang attribute with a valid value (checked by axe) that reflects the primary language of the page
• Any content within the page that is different from the primary language must be marked up with the langattribute and valid value
• <html> elements with lang and xml:lang must have the same base language (checked by axe)
![Page 152: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/152.jpg)
Page title
As a user, I want a descriptive, informative and
unique page title, so that I can easily identify the
page
2.4.2 Page Titled
![Page 153: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/153.jpg)
2.4.2 Page Titled (A)
Web pages have titles that describe topic or
purpose
![Page 154: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/154.jpg)
<head>
<title>Early Learning & K-12 | Use Cases |
Learnosity</title>
</head>
![Page 155: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/155.jpg)
Checklist
• The page must have a non-empty title element in
the head section (checked by axe)
• The page title must clearly identify and describe
the page content
![Page 156: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/156.jpg)
Checklist
• The page title should be unique within the site
• The page title should identify the site to which
the page belongs
• The page title should include the most important
information first
![Page 157: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/157.jpg)
Page title exercise
![Page 158: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/158.jpg)
Links
As a user, I want links to clearly describe where
they will take me, and I want links that take me to
the same page to be labelled the same, so that it is
easy for me to decide if I want to follow a link
2.4.4 Link Purpose (In Context); 3.2.4 Consistent Identification
![Page 159: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/159.jpg)
2.4.4 Link Purpose(In Context) (A)
The purpose of each link can be determined from
the link text alone or from the link text together
with its programmatically determined link context,
except where the purpose of the link would be
ambiguous to users in general.
![Page 160: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/160.jpg)
3.2.4 Consistent Identification (AA)
Components that have the same functionality
within a set of Web pages are identified
consistently.
![Page 161: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/161.jpg)
Link text is meaningful on its own
Link text is meaningful when combined with its enclosing paragraph
Link text is meaningful when combined with its enclosing paragraph
![Page 162: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/162.jpg)
Link text is meaningful when combined with its enclosing list item
Link text is meaningful when combined with table header
![Page 163: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/163.jpg)
Links and buttons
Use <a href=“”> for links
• Links should take you somewhere
Use <button> for buttons
• Buttons should trigger something on the page, such
as a modal, accordion or form submission
![Page 164: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/164.jpg)
Checklist
• The purpose of the link must be clear and
meaningful on its own (recommended) OR when
read with the enclosing sentence, paragraph, list
item or table cell and associated header cell(s)
• Links that go to the same location must have the
same link text
![Page 165: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/165.jpg)
Checklist
• Links that open a different file format (e.g. PDF, Word) should have the file type and the file size as part of the link text
• Links that open in a new window should include that as part of the link text
• Links that take you somewhere should be marked up as links in code
![Page 166: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/166.jpg)
Accessible name
As a Dragon user, I want to be able to navigate to
and activate a link using the link label that I can
see, so that I can quickly and easily navigate to
links
2.5.3 Label in Name
![Page 167: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/167.jpg)
Bad practice
Visual button text: Add to cart
Accessible button text: Add broccoli to cart
Good practice
Visual button text: Add to cart
Accessible button text: Add to cart, broccoli
Add to cart Add to cart
Dragon user says:“Click Add to cart button”
Screen reader user hears:“Add broccoli to cart”
Dragon user says:“Click Add to cart button”
Screen reader user hears:“Add to cart, broccoli”
![Page 168: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/168.jpg)
.visuallyhidden text
<a href=“…”>
View
<span class=“visuallyhidden>Millenium
Falcon</span>
</a>
![Page 169: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/169.jpg)
aria-label
<a href=“…” aria-label=“View Millenium Falcon”>
View
</a>
![Page 170: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/170.jpg)
Checklist
• If the link has an accessible name:
• the accessible name must contain the text that is
presented as the visual text label
• the accessible name should have the visible text
label at the start of the accessible name
![Page 171: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/171.jpg)
Skip links
As a screen reader user or keyboard user, I want to
skip over content is repeated across your website,
so that I don’t have to navigate through it each
time
2.4.1 Bypass Blocks
![Page 172: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/172.jpg)
2.4.1 Bypass Blocks (A)
A mechanism is available to bypass blocks of
content that are repeated on multiple Web pages
![Page 173: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/173.jpg)
Skip link
![Page 174: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/174.jpg)
You can use skip over links to skip repeating blocks of content.
![Page 175: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/175.jpg)
Checklist – skip to main
• For skip to main content links:• The skip-link should be the first focusable control on the page
• The description of the link must say that it links to the main content
• The link should be always visible or must be visible when it has keyboard focus
• Activating the link must move focus to the main content.
• After activating the link, the keyboard focus must have moved to the main content
![Page 176: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/176.jpg)
Checklist – skip to region
• For skip to other sections of content links:
• Check that the only controls in the Web page that precede the link are other links in the set.
• Check that the description of each link communicates that it links to some section of the content.
• Check that the link is either always visible or visible when it has keyboard focus.
• Check that activating the link moves the focus to that section of the content.
![Page 177: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/177.jpg)
Checklist – skip over
• For skip over block of content links:
• Check that a link is the first focusable control on the page.
• Check that the description of the link communicates that it links to the main content.
• Check that the link is either always visible or visible when it has keyboard focus.
• Check that activating the link moves the focus to the main content.
• Check that after activating the link, the keyboard focus has moved to the main content.
![Page 178: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/178.jpg)
Consistent navigation
As a user who is blind or has low vision, or users with
intellectual disability or other cognitive limitations, I
want navigation that repeats across pages to be in the
same location with the same look on each page, so
that I can predict where navigation will be when I
navigate pages in your site
3.2.3 Consistent Navigation
![Page 179: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/179.jpg)
Success Criterion 3.2.3 Consistent Navigation (AA)
Navigational mechanisms that are repeated on
multiple Web pages within a set of Web pages
occur in the same relative order each time they are
repeated, unless a change is initiated by the user.
![Page 180: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/180.jpg)
Checklist
• List components that are repeated on each page in a set of pages (for example, on each page in a site).
• For each component, check that it appears in the same relative order with regard to other repeated components on each page where it appears.
• For each navigational component, check that the links or programmatic references are always in the same relative order.
![Page 181: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/181.jpg)
Multiple ways to navigate
As a user with a disability, I want to have multiple
ways of finding a page within a site, so that I can
choose a way that works best for me
2.4.5 Multiple Ways
![Page 182: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/182.jpg)
2.4.5 Multiple Ways (AA)
More than one way is available to locate a Web
page within a set of Web pages except where the
Web Page is the result of, or a step in, a process.
![Page 183: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/183.jpg)
Checklist
• A user must be able to navigate using two or more of the following techniques:• links to navigate to related Web pages
• a search function to help users find content
• a site map
• a table of contents (e.g. long form documents)
• a list of links to all other Web pages
• linking to all pages on the site from the home page
![Page 184: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/184.jpg)
iFrames
All frame and iframe element have a title
attribute that describes the content of the
container
For best practice, give the enclosed document a
title element with the same value
![Page 185: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/185.jpg)
<iframe ... title=“Twitter feed">
…
<title>Twitter feed</title>
…
<!-- frame contents -->
</iframe>
![Page 186: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/186.jpg)
Checklist
• Frames must have title attribute (checked by axe)
• The title attribute must provide a descriptive label for the contents of each frame
• Frames should a unique title attribute (checked by axe)
![Page 187: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/187.jpg)
Discussion
Who has primary responsibility?Who has secondary responsibility?
![Page 188: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/188.jpg)
Tables
![Page 189: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/189.jpg)
In this section
• Table headings (captions)
• Simple table headers
• Multi-level table headers
• Simple tables
![Page 190: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/190.jpg)
1.3.1 Info and Relationships (A)
Information, structure, and relationships conveyed
through presentation can be programmatically
determined or are available in text.
![Page 191: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/191.jpg)
Captions
As a user using a screen reader, I want a table
heading (caption) to be linked to the table, so that I
hear the table heading when I navigate to the table
1.3.1 Info and Relationship
![Page 192: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/192.jpg)
<table>
<caption>Lego Star Wars sales</caption>
…
</table>
![Page 193: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/193.jpg)
Simple table headers
As a screen reader user, I want header cells and
data cells to be properly coded , so that I can
navigate a table in all four directions and so that I
can hear the relationship between table headers
and cells
1.3.1 Info and Relationship
![Page 194: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/194.jpg)
<table>
<caption>Lego Star Wars sales</caption>
<tr>
<th scope=“col”>Product</th>
<th scope=“col”>Victoria</th>
<th scope=“col”>Tasmania</th>
</tr>
</table>
![Page 195: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/195.jpg)
<table>
<caption>Lego Star Wars sales</caption>
…
<tr>
<th scope=“row”>Millennium Falcon</th>
<td>$10,546</td>
<td>$2,444</td>
</tr>
</table>
![Page 196: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/196.jpg)
Multi-level headers
As a screen reader user, I want all header cells to
be properly associated with their data cells, so that
I can hear the relationship between table headers
and cells
1.3.1 Info and Relationship
![Page 197: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/197.jpg)
<table>
<tr>
<th id=“hdrRange” rowspan=“2”>Range</th>
<th id=“hdrProduct” rowspan=“2”>Product</th>
<th id=“hdrState” colspan=“2”>State</th>
</tr>
<tr>
<th id=“hdrVic”>Victoria</th>
<th id=“hdrTas”>Tasmania</th>
</tr>
![Page 198: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/198.jpg)
<tr>
<th id=“hdrStarWars” rowspan=“2”>Star Wars</td>
<th id=“hdrFalcon”>Millenium Falcom</th>
<td headers=“hdrStarWars hdrFalcon hdrState
hdrVic”>$10,546</td>
<td headers=“hdrStarWars
hdrFalcon hdrState
hdrTas”>$2,444</td>
</tr>
![Page 199: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/199.jpg)
Checklist
• Table heading (caption) must be programmatically associated with the corresponding table
• Header cells and data cells must be properly coded using data table markup
• Data cells in complex data tables must be programmatically associated with every corresponding header cell
![Page 200: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/200.jpg)
Simple tables
As a screen reader user, I want simple tables with
single row or column headers, so that it is easy to
understand and navigate the table
1.3.1 Info and Relationship
![Page 201: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/201.jpg)
Layout tables
As a screen reader user, I want my screen reader to
ignore layout table markup, and I want the
information in the layout table to be read out in a
meaningful and logical sequence, so that I can
understand the information
1.3.1 Info and Relationship
![Page 202: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/202.jpg)
Don’t use semantic mark-up
• Don’t use structural elements, such as <th> or
<caption>
• Add role="presentation" to the <table>
element
![Page 203: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/203.jpg)
<table role=“presentation”>
<tr>
<td>Boys Tony Stark Steve Rogers</td>
</tr>
<tr>
<td>Girls Natasha Romanova Wanda Miximoff</td>
</tr>
</table>
![Page 204: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/204.jpg)
Checklist
• CSS should be used for layout instead of table
markup
• Layout tables must be ignored by screen readers
• The reading order of content in the layout table
must be is logical and intuitive
![Page 205: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/205.jpg)
Tables exercise
![Page 206: Testing for accessibility - Intopia · There are a number of evaluation tools and techniques that web designers can employ to test the accessibility of their sites. However, there](https://reader033.vdocument.in/reader033/viewer/2022053002/5f0692ea7e708231d418a9c4/html5/thumbnails/206.jpg)
Discussion
Who has primary responsibility?Who has secondary responsibility?