Thu, Nov 25

Accessibility and user experience

Today's objectives

Understand the basics of web site accessibility, how to build in accessibility from the beginning, and common tools for helping build accessible online experiences.

  • Accessibility concepts
  • Standards and testing
  • Tools and techniques
  • Other topics: semantics

Tasks

Presentations

Introduction to accessibility

Introduction to accessibility

Semantic elements

Semantic elements

WCAG2.1 Standard

WCAG2.1 Standard

Testing accessibility

Testing accessibility

Agenda

Agenda

Assignment(s)


Assignment 08
Accessibility review

Using the tools and techniques we reviewed in class, and additional resources and readings, create a brief accessibility review of the site I have assigned to you. You only need to examine the single linked page. If you have problems accessing the site, or using any of the accessibility tools to access the site, contact me for a replacement. Don't leave this until the last minute. Check it soon.

Keep your review brief. You may use point form or tables where necessary.

Organize your review based on the "POUR" framework:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Don't just summarize the output of automated tools - use your understanding and judgement. Consider:

  • Clarity of content
  • Use semantic of elements
  • Text size and contrast
  • Use with a screen reader (if possible)
  • Use with keyboard access mode (if possible)
  • Use with "reader" mode
  • Use with on mobile
  • and any other key concepts

Include a bibliography of resources you consulted.

Upload to Brightspace as a PDF. Name your file YOURLASTNAME_accessibility.pdf

Due Wed, Dec 01, 6:00 PM.

Samples

Basic semantic tags

See the Pen Basic semantic structure by Robert Currie (@rcurrie) on CodePen.



Understanding users

How People with Disabilities Use the Web
https://www.w3.org/WAI/people-use-web/user-stories/

Using plain language

Type

Understanding contrast ratio
https://webaim.org/articles/contrast/#ratio
Perspectives on contrast
https://www.w3.org/WAI/perspective-videos/contrast/
Type on the web
https://webaim.org/techniques/fonts/

Audio

Captions
Example of high-quality captions.

Screen readers

How to use the Voiceover screen reader.
https://webaim.org/articles/voiceover/

Further reading

A collection of good basic articles on accessibility
https://webaim.org/articles/
Another strong guide to accessibility
http://web-accessibility.carnegiemuseums.org
Accessibility tools and testing
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility
Semantics cheat sheet
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

Tutorials

A short course on accessibility
https://developer.mozilla.org/en-US/docs/Learn/Accessibility

Need help?

Contact me - Slack is best.


Robert Currie
This page was last updated at 2021-12-16 08:06.