Accessibility course

Use rems or ems for font sizes

Use Landmark HTML tags - main aside header footer nav

aria-label attribute to label types of navigation

Use semantic HTML

Keep repeated elements in the same place on each page

Role attribute

Add a site map

Visually hidden class-

Skip link

Tables

caption

thead, tfoot, tbody

th scope= col or row

td headers= ids of th headers

Add description of table to caption, use visuallyhidden if only for screen readers

Forms

Contrast, make sure readable

Labels for all form fields

Labels for input formats

All functionality is operable using only a keyboard - allow outline

Only showing errors with red borders is bad

Show errors with text with info about how to correct the error

Html5 validation not accessible so provide your own

Use labels

Use required attribute for fields that are compulsory, write (required) in label too

Type=email, tel attribute

Implicit label wraps input, for not required

Fieldset and legend for related fields eg radio buttons

Add errors next to labels as well as in a summary above the fields

Use aria-live attribute

Make error summary tabbable using tabindex=-1

Media

Use real text rather than text as images

Provide text alternatives for images with alt attribute

Set alt to empty if decorative

Write alt text as meaning or purpose of image

Use visuallyhidden to add text to css background images

Accessible svg Add role=img Use title and desc tags in svg Use aria-labelledby to point to description

Audio- Transcribe audio, use automated tools to speed this up

Video Transcribe videos with captions

Responsive

Don’t change page on selection of drop down, submit form instead

Tab order should match content order

Don’t programmatically move focus

Keyboard traps, tabbing through hidden items that are off screen rather than hidden

Use HTML5 hidden attribute to hide content

Use percentages and rems