Exercise 1.5 - Meaningful Sequence part 2
An e-shop has a card styling for displaying products. Even though the interface is straightforward for people with eyesight, there is a problem with screen readers. Because the heading is not the first element and there is an image before the heading, it's easy for that image to be missed.
Requirements
Need help?
Show me the solutionLearning Material
- WCAG: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
- Related Technique: https://www.w3.org/WAI/WCAG21/Techniques/css/C6
- WAI developing tips: https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order
- Flex layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox
Editor
Preview Page
Exercise 1.5 - Meaningful Sequence part 2
An e-shop has a card styling for displaying products. Even though the interface is straightforward for people with eyesight, there is a problem with screen readers. Because the heading is not the first element and there is an image before the heading, it's easy for that image to be missed.
Requirements
Need help?
Show me the solutionLearning Material
- WCAG: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
- Related Technique: https://www.w3.org/WAI/WCAG21/Techniques/css/C6
- WAI developing tips: https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order
- Flex layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox