Intopia testing examples

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

Exercise pages

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

‘Testing web accessibility for teams’ course

Bookmarklets

• Testing Bookmarklets
• Some simple accessibility bookmarklets

Testing semantics

• Testing headings
• Reviewing landmarks
• Reviewing image types
• Reviewing links
• Testing tables
• Testing tables - complex
• Testing tables - ARIA

Testing colour

• Testing text contrast
• Testing non text contrast
• Testing use of color
• Testing color contrast in forms

Testing focus

• Testing focus order
• Testing focus indication
• Reviewing tabindex

Testing forms

• Testing form labels
• Testing form field instructions
• Testing fieldsets and legends
• Testing required fields
• Testing form field errors
• Testing form field error messaging
• Testing the placeholder attribute

Testing onsubmit

• Testing onsubmit - simple
• Testing onsubmit - complex

Testing focus management

• Testing focus management - single page app

Testing name, role, state, value

• Testing accessible names
• Testing roles
• Testing states

Tests HTML elements and attributes

• Testing the accessible name of an input
• Testing the required attribute in Chrome
• Testing the aria-controls attribute
• Testing the canvas element
• Testing the menu element
• Testing the output element
• Testing the progress element
• Testing the timer element - version 1
• Testing the timer element - version 2
• Testing the slot element
• Testing the :target CSS selector
• Testing a disabled button
• Testing the autocomplete attribute

‘Developing for web accessibility’ course

Reviewing accessible names

• Reviewing methods of applying accessible names
• Reviewing a concatenated accessible name

Reviewing form controls

• Reviewing all form elements
• Reviewing all input types
• Reviewing form controls that do not require labels
• Reviewing a form example - bad
• Reviewing a form example - good

Reviewing aria-live

• Reviewing aria-live="off"
• Reviewing aria-live="polite"
• Reviewing aria-live="assertive"
• Reviewing no aria-live

Reviewing aria-atomic

• Reviewing aria-atomic="true"
• Reviewing aria-atomic="false"

Reviewing aria-busy

• Reviewing aria-busy

Reviewing aria-relevant

• Reviewing aria-relevant="additions"
• Reviewing aria-relevant="removals"
• Reviewing aria-relevant="all"

Reviewing alert and status roles

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

Reviewing clickable card

• Reviewing clickable cards