Thu, Dec 05
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)
Revise your Citizen Science wireframe for next class.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
Tasks for next class
Make sure to prepare for each online lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- Refine and test your wireframe
- Remember that you can share the Figma link with others - enlist as many people as possible for testing.
- Do a final pre-presentation test to find any errors your may have identified.
Need help?
Contact me - Slack is best.