Accessible cards A11yTO 2020
0 likes297 views
This document discusses making cards accessible on webpages. It provides considerations for the design and code of accessible cards, including using proper HTML elements, adding descriptive headings, writing quality link text and alt text, and ensuring logical tab order between cards. The document suggests telling a story with the cards and provides examples and slides for further information.
Accessible cards A11yTO 2020
- 1. Accessible cards. Presentation Research and considerations.
- 2. Web accessibility expert for Level Level and trainer for The A11Y Collective My name is Rian Rietveld Hi!
- 4. Accessible cards Wat is a card (aka tile)?
- 8. Source: The A!!Y Collective
- 11. How much info does it take to make you click?
- 16. Focus styles. Where am I?
- 17. Let it breath and flow.
- 19. Dont DIV the DOM!
- 20. HTML has meaning. Choose the right element for the job.
- 21. Headings. Describe the content below
- 22. Accessible cards Links and link text quality.
- 23. Link text. Make it understandable on its one
- 24. Featured images. What should the alt text be?
- 25. Tab order. Where am I?
- 26. One tab/click per card. Techniques.
- 27. Accessible cards Tell a story