Intopia testing examples

A series of pages that can be used to test or review specific aspects about HTML markup and accessibility features.

Resources: Course exercises

• All about mammals
• All about mammals - second screen
• All about mammals - bad example
• All about mammals - zoom bad example

Resources: "Testing web accessibility for teams" course

• "Testing web accessibility for teams" bookmarklets
• Installing browser extensions and add-ons
• Different types of accessibility testing tools

Advanced testing

1. Exploring automated accessibility testing NEW
2. Understanding axe-core and Playwright NEW
3. Running axe-core in the browser console NEW
4. Setting up Node.js NEW
5. Running axe-core from the command line NEW
6. Running axe-core with a Playwright script NEW
7. Accessibility testing with Playwright NEW

Test pages:

• axe test page
• axe test page

Resources: Intopia bookmarklets

Full list:

• Intopia's accessibility testing bookmarklets

Bookmarklets explained:

• Page structure bookmarklets explained
• Table bookmarklets explained
• Focus and navigation bookmarklets explained
• Names and descriptions bookmarklets explained
• Form bookmarklets explained
• States bookmarklets explained

Tests: Page title, language, encoding

Document title:

• Testing document title - good example
• Testing document title - missing example
• Testing document title - empty example
• Testing document title - multiple example

Page language:

• Testing page language - good example
• Testing page language - missing example
• Testing page language - invalid example
• Testing localisation

Character encoding:

• Testing character encoding - good example
• Testing character encoding - missing example
• Testing character encoding - invalid example
• Testing character encoding - empty example
• Testing character encoding - conflicting example

Tests: Page structure and semantics

• Testing headings
• Reviewing lists
• Reviewing the different landmarks
• Testing roles
• Testing aria-roledescription
• Testing the <menu> element
• Testing aria-level
• Testing aria-setsize and aria-posinset
• Testing the switch attribute

Tests: Images, graphics and non-text content

• Testing images
• Reviewing the four image types
• Testing image controls
• Testing <svg>
• Testing <svg> inside links
• Testing the <canvas> element
• Testing back arrow options

Tests: Links and navigation

• Testing links
• Testing credit card links
• Reviewing different link methods
• Testing aria-current
• Testing the :target CSS selector
• Testing sticky header
• Reviewing different solutions for clickable cards

Tests: Tables

• Testing tables
• Testing tables - scope
• Testing tables - complex
• Testing tables - ARIA

Tests: Colour

• Testing text colour contrast
• Testing non-text colour contrast
• Testing colour contrast in forms
• Testing use of colour
• Testing CSS colour methods

Tests: Text formatting

• Testing phrasing content
• Testing capitalisation

Tests: Motion and animation

• Testing movement

Tests: Keyboard, focus and focus management

• Testing focus order
• Reviewing different tabindex methods
• Testing a "back to top" pattern NEW
• Testing focus indication
• Focus test page 1 - browser default focus styles
• Focus test page 2 - :focus-visible
• Focus test page 3 - :focus
• Testing focus management onsubmit - form with two form fields
• Testing focus management onsubmit - form with more than two form fields
• Testing focus management - single page app
• Testing aria-activedescendant

Tests: Pointer and target size

• Testing target size

Tests: Forms and form controls

Form controls and labelling

• Testing form labels
• Testing form field instructions
• Testing buttons
• Testing fieldsets and legends
• Testing the placeholder attribute
• Testing accessible name priority for an <input>
• Testing autocomplete
• Testing a contact form
• Reviewing all form elements
• Reviewing all <input> types
• Reviewing all form controls
• Reviewing form controls that do not require labels

Validation, errors and submission

• Testing required fields
• Testing form field errors
• Testing form field error messaging
• Testing aria-invalid
• Testing the required attribute in Chrome
• Reviewing a form example - bad
• Reviewing a form example - good

Tests: Accessible names and descriptions

• Testing accessible names
• Testing aria-label — practice exercise
• Reviewing aria-label — full test results across browsers
• Reviewing aria-labelledby
• Testing aria-describedby
• Testing name mismatches
• Testing name prohibited roles
• Testing aria-details
• Reviewing methods of applying accessible names
• Reviewing a concatenated accessible name

Tests: States, properties and widget behaviour

Basic states

• Testing states
• Testing aria-checked
• Testing aria-expanded
• Testing aria-pressed
• Testing aria-selected
• Testing an aria-disabled button
• Testing aria-readonly

Values and popups

• Testing aria-controls
• Testing aria-valuetext
• Testing aria-valuenow
• Testing aria-valuemin and aria-valuemax
• Testing native vs custom sliders
• Testing aria-haspopup
• Testing aria-autocomplete
• Reviewing aria-owns

Tests: Dynamic content and live regions

Elements and dynamic values

• Testing the <output> element
• Testing the <progress> element
• Testing the timer role, version 1
• Testing the timer role, version 2
• Testing a character counter

aria-live, aria-atomic, aria-busy, aria-relevant

• Reviewing aria-live="off"
• Reviewing aria-live="polite"
• Reviewing aria-live="assertive"
• Reviewing no aria-live
• Reviewing aria-atomic="true"
• Reviewing aria-atomic="false"
• Reviewing aria-busy
• Reviewing aria-relevant="additions"
• Reviewing aria-relevant="removals"
• Reviewing aria-relevant="all"

Live region roles

• Reviewing role="alert"
• Reviewing role="status"
• Reviewing role="log"

Programmatic announcements

• Testing ariaNotify()

Tests: Dialogs and overlays

• A minimal viable modal - option 1
• A minimal viable modal - option 2
• An ARIA modal - option 3
• Testing CSS-only tooltip

Tests: DOM and component architecture

• Testing the <slot> element
• Testing shadow DOM elements