Embed Size (px)
Citation preview
Testing for accessibilitySarah Pulis
Director
creating an inclusive digital world
intopia.digital
Breaks
10.30 Morning Tea
12.30 Lunch
3.00 Afternoon Tea
On post-it notes, write down what accessibility
means to you? What does it mean to your
organisation?
We all have the right to inclusive
and delightful digital experiences
Accessibility is the qualities that
make an experience open to all
Who benefits from accessibility?
Everyone
Anyone
You
Image credit: Microsoft’s Inclusive Design Toolkit
Optimising the online experience: Vision• Screen readers
• High-contrast colours
• Magnifying software
• Text size, bold settings
• Braille keyboards & displays
• Large-print keyboards
Screen magnifier and highcontrast exercise
Optimising the online experience: Hearing• Captions & transcripts
• Visual alerts
• Haptic/tap/vibration feedback
• Hearing aids
• Video, not audio-only, calls
Optimising the online experience: Mobility• Input devices: switches, dials, over-sized mouse
• Head/mouth pointers
• Keyboard keyguards
• Eye-tracking software
• Voice-activated software
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
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
WCAG 2.1 is
WCAG 2.0 + 17 new criteria
WCAG structure
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)
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”
How to meet WCAG 2.0 (quick ref) [www.w3.org/WAI/WCAG20/quickref]
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)
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
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
Testing for accessibility
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
Testing
Automated testing
Assistive technology
testing
Manual testing
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
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/]
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]
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/]
Assistance tools
• Web Developer extension for Chrome & Firefox
[chrispederick.com/work/web-developer]
• HeadingMaps
[chrome.google.com/webstore/detail/headingsm
ap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en]
axe exercise
Test strategies – existing projects
Test strategies
• Testing an existing website
• Testing a new website as it is built
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
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
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)?
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?
Primary screen reader
Common AT combos
• JAW/IE
• NVDA/Firefox
• VoiceOver/Safari (Mac and iOS)
• TalkBack/Android
• Dragon/IE
Do you currently test with different assistive technologies?
What might your Accessibility Supported Baseline be for your project?
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
3. Select a representative sample
• Include a Structured Sample
• Include a Randomly Selected Sample
• Include Complete Processes
4. Audit the selected sample
• Check All Initial Web Pages
• Check All Complete Processes
• Compare Structured and Random Samples
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)
Test strategy exercise
Test strategies –new projects
Test as you design and build
Source: ABC
Cost of fixing issues increases during the project lifecycle
Time
Cost
Issues fixed after production have a much higher cost again
Time
Cost
Shift-left
Traditional model
DesignUX designVisual designContent design
Build Test Launch
Shift-left model
DesignUX designVisual designContent design
Build QA Launch
Accessibility Accessibility A11y Accessibility
Roles and responsibilities
Include accessibility in DoD
• conforms to WCAG 2 Level AA
• works with technologies in your
organisation/product Accessibility Supported
Baseline
User story
'As a registered customer, I want to enter my
username and password and submit, so that I can
access my account details.'
Identify elements
Ref Functionality
Ticket_ID Username - Input field
Ticket_ID Password - Input field
Ticket_ID Submit button
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.
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
Assign a role for each test case
• Who has primary responsibility for each test
case?
• We’ll be talking about this today
Test!
• Executive each test case and record the results
Accessible coding fundamentals
Use semantic HTML
Native HTML conveys semantics to assistive
technologies like screen readers and voice
recognition technology
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;
}
Interactive elements
Interactive HTML elements automatically have:
• name
• role
• state, properties or value
• are keyboard accessible!
Checkbox
<input id="checkbox01" type="checkbox"
checked>
<label for="checkbox01">Subscribe</label>
4.1.2 Name, Role, Value
Accessible name
Role
State
HTML for meaning, CSS for style
• <strong> not <b>
• <em> not <i>
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)
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>
Accordion post-ARIA
<button aria-expanded=“true”>
Personal Information
</button>
<div>
<p>Please enter your personal information in the
form below</p>
<div>
.visuallyhidden
Text that is hidden from visual view but is available
to screen reader users
.visuallyhidden
.hidden {
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
border: 0;
margin: -1px;
padding: 0;
}
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
Visual design
In this section
• Colour
• Shape, size or relative position
• Contrast
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
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.
Patterns example
Text example
• https://webaim.org/projects/screenreadersurvey7/
Link underline example
Checklist
• Information that is conveyed by colour
differences must also available using another
visual means, such as text
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
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.
Position
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
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
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
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.
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
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
Contrast - icons
Blue on white – 5.1:1
Grey on white – 6:1
UI components - 3:1
For example:
• selected state
• focus state
• borders
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)
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
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
Checklist – exemptions
• Logos, default focus indicators, disabled
components do not have to meet contrast
requirements
Group activity: Contrast exercise
Discussion
Who has primary responsibility?Who has secondary responsibility?
Responsive design
In this section
• Zoom
• Text spacing
• Orientation
• Reading and focus order
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
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.
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.
Up to 400% with reflow
Up to 400% without reflow
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.
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)
Reflow exercise
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
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
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
Group exercise: text spacing
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
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.
Exception
Where orientation is
essential!
Checklist
• Content must be able to be viewed in portrait or
landscape mode, unless specific display
orientation is essential
Orientation exercise
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
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.
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.
Live demo: Coles online
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
Reading and focus order exercise
Discussion
Who has primary responsibility?Who has secondary responsibility?
Semantic structure
In this section
• Landmark regions
• Headings
• Content structure
• iFrames
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
1.3.1 Info and Relationships (A)
Information, structure, and relationships conveyed
through presentation can be programmatically
determined or are available in text.
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">
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
<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>
Checklist
• For each landmark role:
• Landmark roles must be applied to page regions that
correspond to that role
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)
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
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
2.4.6 Headings and Labels (AA)
Headings and labels describe topic or purpose.
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
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)
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
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
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
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)
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
Semantic structure exercise
Discussion
Who has primary responsibility?Who has secondary responsibility?
Navigation
In this section• Language
• Page title
• Links and consistent identification of links
• Skip link
• Consistent navigation
• Multiple ways
• iFrames
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
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 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
2.4.2 Page Titled (A)
Web pages have titles that describe topic or
purpose
<head>
<title>Early Learning & K-12 | Use Cases |
Learnosity</title>
</head>
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
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 title exercise
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
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.
3.2.4 Consistent Identification (AA)
Components that have the same functionality
within a set of Web pages are identified
consistently.
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
Link text is meaningful when combined with its enclosing list item
Link text is meaningful when combined with table header
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
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
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
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
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”
.visuallyhidden text
<a href=“…”>
View
<span class=“visuallyhidden>Millenium
Falcon</span>
</a>
aria-label
<a href=“…” aria-label=“View Millenium Falcon”>
View
</a>
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
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
2.4.1 Bypass Blocks (A)
A mechanism is available to bypass blocks of
content that are repeated on multiple Web pages
Skip link
You can use skip over links to skip repeating blocks of content.
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
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.
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.
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
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.
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.
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
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.
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
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
<iframe ... title=“Twitter feed">
…
<title>Twitter feed</title>
…
<!-- frame contents -->
</iframe>
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)
Discussion
Who has primary responsibility?Who has secondary responsibility?
Tables
In this section
• Table headings (captions)
• Simple table headers
• Multi-level table headers
• Simple tables
1.3.1 Info and Relationships (A)
Information, structure, and relationships conveyed
through presentation can be programmatically
determined or are available in text.
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
<table>
<caption>Lego Star Wars sales</caption>
…
</table>
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
<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>
<table>
<caption>Lego Star Wars sales</caption>
…
<tr>
<th scope=“row”>Millennium Falcon</th>
<td>$10,546</td>
<td>$2,444</td>
</tr>
</table>
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
<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>
<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>
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
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
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
Don’t use semantic mark-up
• Don’t use structural elements, such as <th> or
<caption>
• Add role="presentation" to the <table>
element
<table role=“presentation”>
<tr>
<td>Boys Tony Stark Steve Rogers</td>
</tr>
<tr>
<td>Girls Natasha Romanova Wanda Miximoff</td>
</tr>
</table>
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
Tables exercise
Discussion
Who has primary responsibility?Who has secondary responsibility?
