testing for accessibility - intopia · there are a number of evaluation tools and techniques that...

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

https://www.youtube.com/watch?v=6ic8OO4ORI8

Who benefits from accessibility?

Everyone

Anyone

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

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

Issues fixed after production have a much higher cost again

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

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)

1.4.3 Contrast (Minimum)

AA Component

Assign a role for each test case

• Who has primary responsibility for each test

• We’ll be talking about this today

• 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

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

Personal Information

<span class=“visuallyhidden”>expanded</span>

</button>

<p>Please enter your personal information in the form below</p>

Accordion post-ARIA

Personal Information

</button>

<p>Please enter your personal information in the

form below</p>

.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.

http://jxnblk.com/colorable/demos/text

Contrast - text

Normal text has a

contrast ratio of at least

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

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

• 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

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

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/

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

</nav>

<p id=“footer-nav”>title for footer navigation</p>

</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

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

• 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

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

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

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 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

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

<span class=“visuallyhidden>Millenium

Falcon</span>

aria-label

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

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

<title>Twitter feed</title>

</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

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

<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

<table>

<th scope=“col”>Product</th>

<th scope=“col”>Victoria</th>

<th scope=“col”>Tasmania</th>

</table>

<table>

<th scope=“row”>Millennium Falcon</th>

</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

<table>

<th id=“hdrRange” rowspan=“2”>Range</th>

<th id=“hdrProduct” rowspan=“2”>Product</th>

<th id=“hdrState” colspan=“2”>State</th>

<th id=“hdrVic”>Victoria</th>

<th id=“hdrTas”>Tasmania</th>

<th id=“hdrFalcon”>Millenium Falcom</th>

<td headers=“hdrStarWars hdrFalcon hdrState

hdrVic”>$10,546</td>

<td headers=“hdrStarWars

hdrFalcon hdrState

hdrTas”>$2,444</td>

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

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

Don’t use semantic mark-up

• Don’t use structural elements, such as <th> or

• Add role="presentation" to the <table>

element

<td>Boys Tony Stark Steve Rogers</td>

<td>Girls Natasha Romanova Wanda Miximoff</td>

</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

testing for accessibility - intopia · there are a number of evaluation tools and techniques that...

Documents

designing for accessibility lecture 11. agenda disabilities...

employ hand grenades

social accessibility: achieving accessibility through...

web site - accessibility is there something wrong?

age-friendly and disability-friendly ocps · and people...

foreword - delhi · web viewalthough the scope of this...

goals blueprint for institutional web accessibility ·...

employ ability presentation

employ ablekesslerpresentation

fringe accessibility - guelph accessibility conference

accessibility - u-m social media · 2019. 10. 1. ·...

employ satisfaction

website accessibility for users with visual impairment ·...

ge5000 elective courses autumn ge6000 urban and · ning,...

employ engagement

implementing accessibility: accessibility toronto

exploring counterurbanisation in a post-socialist context...

how to get there? a critical assessment of accessibility...

equitable employ

employ ks4 education for employ ability