So, you’ve just finished the “Testing web accessibility for teams” course and want to know what you could focus on next to continue expanding your knowledge?

WCAG resources

The Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. The key documents are:

Testing tools used in course

Browser extensions

Bookmarklets

Test pages

Checklists

Keyboard use

  • All functionality must be operable by keyboard.

Focus order

  • Focusable components receive focus in an order that is logical and intuitive.

Focus indication

  • Focus indicators are clearly visible.

Text colour contrast

  • Normal text smaller than 18pt must be at least 4.5:1.
  • Normal text 18pt or larger must be at least 3:1.
  • Bold text smaller than 14pt must be at least 4.5:1.
  • Bold text 14pt or larger must be at least 3:1.

Non-text colour contrast

  • Visual information that is necessary for a user to identify a control must have a contrast ratio of at least 3:1.

Use of colour

  • Information that is conveyed by colour must also be available using another visual means, such as text, underline or pattern.

Headings

  • Heading markup must be used for visual headings.
  • Information, structure, and relationships can be programmatically determined via headings.
  • Heading levels should only increase by one.
  • Headings must describe the topic or purpose of its content.

Images

  • All non-decorative images must have a text alternative.
  • Informative and complex images text alternatives should convey the meaning or intent of the image.
  • Functional images text alternatives should describe the function of the image.
  • Complex images must provide a longer text description – onscreen or on a new page.

Links

  • The link purpose must be clear on its own OR when read with the enclosing sentence, paragraph or list item.
  • Links that open in a new window should inform users visually and programmatically.
  • Links that open in a different file format should inform users visually and programmatically.

Skip links

  • Skip links should be the first focusable elements on the page
  • Skip links must be either always visible or visible when they receive focus.
  • When a skip link is activated, focus must move to the relevant destination.

Accessible names

  • All interface components must have meaningful, accessible names that are available to assistive technologies.

Roles

  • All interface components must have a meaningful role that are available to assistive technologies.

States

  • All interface components must have a meaningful states that are available to assistive technologies.

Form labels

  • Form fields must have visible text labels.
  • Form fields must have accessible names.
  • The visible text labels and accessible names must describe the purpose of each form control.
  • Labels should be in close proximity to the form field.

Form instructions

  • Instructions must remain visible as users interact with each form control.
  • Instructions must be programmatically associated with the relevant form field.
  • Instructions should be in close proximity to the form field.

For fields in error

  • The is an error message that helps users resolve the error.
  • The error message should be in close proximity to the field.
  • The error message must be programmatically associated with the field.
  • The error field is programmatically identifiable that it is in a state of error.

Where focus should go when a form contains errors

  • For simple forms with two fields, focus should be set on the first error within the form.
  • For all other forms, focus should go to an overall error message above the form.

If an overall message is used

  • List all errors.
  • Link errors to the relevant form field.