Intopia testing examples

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

Course exercises

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

Testing course resources

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

Intopia bookmarklets

• Intopia's accessibility testing bookmarklets
• Page structure bookmarklets explained
• Table bookmarklets explained
• Focus and navigation bookmarklets explained
• Names and descriptions bookmarklets explained
• Form bookmarklets explained
• States bookmarklets explained

Page structure and semantics

• Testing headings
• Reviewing lists
• Reviewing the different landmarks
• Testing page language - good example
• Testing page language - invalid example
• Testing page language - missing example
• Testing roles
• Testing aria-roledescription NEW
• Testing the <menu> element
• Testing aria-level NEW
• Testing aria-setsize and aria-posinset NEW

Images, graphics and non-text content

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

Links and navigation

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

Tables

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

Colour

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

Text formatting

• Testing phrasing content NEW
• Testing capitalisation

Motion and animation

• Testing movement

Keyboard, focus and focus management

• Testing focus order
• Reviewing different tabindex methods
• Testing focus indication
• 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 NEW

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
• Reviewing all form elements
• Reviewing all <input> types
• 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

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 NEW
• Reviewing methods of applying accessible names
• Reviewing a concatenated accessible name

States, properties and widget behaviour

Basic states

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

Values and popups

• Testing aria-controls
• Testing aria-valuetext NEW
• Testing aria-valuenow NEW
• Testing aria-valuemin and aria-valuemax NEW
• Testing aria-haspopup NEW
• Testing aria-autocomplete NEW
• Reviewing aria-owns
• Reviewing aria-controls

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 NEW

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"

Dialogs and overlays

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

DOM and component architecture

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