Web Accessibility
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can; perceive, understand, navigate, and interact with the Web, [and] contribute to the Web” [WAI].
Appropriate measures [must be] taken to ensure access for persons with disabilities, on equal basis with others, to information and communication technologies, including the Internet. [UNCRPD]
Understanding accessibility
- There are more ways to browse, read, navigate and interact with a website than with eyes and mouse alone.
- Colour and contrast perception vary significantly between people.
- Impairments only become handicaps if the environment does not account for them.
- Accessibility improvements result in improvements for everyone (eg subtitles on videos, easier-to-operate websites)
Intro style https://webaim.org/articles/pour/
What it’s like to navigate websites with impairments: https://webaim.org/articles/userperspective/
Assistive technologies
All modern operating systems (eg Mac OS, Windows etc) have accessiblity tools integrated already. There is no need for you to rebuild them! You just need to ensure that your website text and structure are in place which allows assistive accessibility tools to navigate, scan and read just like someone who doesn't use them. Programming skills are not necessarily required…!
For example: screenreaders use underlying code structure to read the content aloud to the user. However scanning text ‘audio’ can be harder if the content writer has not correctly used document structure (eg. bold to indicate a header or title, rather than <h2> or <h3> structuring), or URL links have labels like “click here”. There is no context so the screenreaders when scanning links on a page can only read out “click here”, which is meaningless.
Types of impairment
Visual https://webaim.org/articles/visual/
Auditory: https://webaim.org/articles/auditory/ (use subtitles in your Zoom meetings)
Motor: https://webaim.org/articles/motor/ (make buttons/target areas larger. Also useful for non-impaired people in a moving environment)
Cognitive: https://webaim.org/articles/cognitive/ (don’t use flashing images or fast-moving sliders. Migraines also apply!)
Top 5 – if you do nothing else:
- Colour contrasts that assist with accessibility (see tool list)
- Headings are coded so that they can be read by screen readers (H1, H2 etc)
- Links have meaningful text that explain what the users can expect when they click on them. We avoid the usage of ‘click here’
- Tables are laid out in tabular form, with headings and summaries that make them more accessible (th, tr)
- New images are accompanied by appropriate alternative text that can be read by screen readers ("alt" text)
https://webaim.org/resources/quickref/
Tools
Colour
Accessible color palette generator, based on a colour of your choice: https://venngage.com/tools/accessible-color-palette-generator
Accessibility Checker
CERN-produced material
Development of Web Accessibility Recommendations for CERN https://cds.cern.ch/record/2844654?ln=en