Thu, Nov 30
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
Semantic elements
WCAG2.1 Standard
Testing accessibility
Agenda
Assignment(s)
Assignment 12
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. While it does not need to be a formal presentation or paper, emphasize visual clarity and make sure your report is well-organized.
Organize your review based on the "POUR" framework:
- Perceivable
- Operable
- Understandable
- Robust
Don't just summarize the output of automated tools such as wave.webaim.org - use your understanding and judgement. Consider:
- Clarity of content: text, image and any other media
- Use of semantic elements
- Text size and contrast
- Use with a screen reader such as Apple VoiceOver or Windows Narrator (if possible)
- Use with keyboard access mode (if possible)
- Use in "reader" mode
- Use 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 06, 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
- https://www.plainlanguage.gov/examples/before-and-after/
- https://www.plainlanguage.gov/examples/awards/award-1/
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.