Images help us to understand better some content. They are especially useful for people with cognitive and learning disabilities.
24 |
However, inaccessible images can create major barriers for people with visual disabilities. Accessible images will benefit not only them but also the Search Engine Optimization (SEO) of a website.
25 |
We know that every <img> must have an alt attribute. However, it doesn't need to be used equally everywhere.
26 | In the same way, there are different images concepts, we can also describe them in different ways.
27 | For example, if the image doesn't add any relevant information about the content, we can just leave an empty alt: alt="".
28 |
Exercise
29 |
In the exercise page,
30 | there are 4 visual representations, but none of them are accessible.
31 |
🎯 Goal: Add the needed accessible descriptions to each image.
32 |
Tip 1: Alt text - Replace the image src with an invalid URL and see how the browser renders a broken image. Does the alt text make sense?
33 |
Bonus
34 |
In slow internet connections, images take time to load. Some people even prefer to disable images to save bandwidth data.
35 |
🎯 Goal: Edit the CSS to ensure the page looks good when images don't load.
36 |
🍀 Tip #1: In your daily job, take this as an opportunity for developers and designers to collaborate!
37 |
🍀 Tip #2: In real projects, we can block all images, like this:
38 |
39 |
In Chrome, go to DevTools > 3 dots (top right) > More tools > "Network request blocking".
40 |
A new container in the bottom is opened.
41 |
Add a new blocker: Click "+" button, write *.jpg and save it.
42 |
Refresh the page and voilá. The images are not loaded!
Empty alt (alt="") is always better than an unexistent alt.
62 |
Alt is meant to be read by people, NotARobotImage.
63 |
As a designer, go beyond the ideal state — Include design skeletons to be shown when the images are loading or broken.
64 |
As a designer, include the images alts in your mockups. #invisibleCopy.
65 |
66 |
67 |
68 |
69 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/src/briefings/1.3.md:
--------------------------------------------------------------------------------
1 | # 1.3. Meaningful images
2 |
3 | ## Introduction
4 |
5 | _"One image is worth a thousand words"_, they say.
6 |
7 | Images help us to understand better some content. They are especially useful for people with cognitive and learning disabilities.
8 |
9 | However, inaccessible images can create major barriers for people with visual disabilities. Accessible images will benefit not only them but also the Search Engine Optimization (SEO) of a website.
10 |
11 | We know that every `` must have an `alt` attribute. However, it doesn't need to be used equally everywhere.
12 | In the same way, there are [different images concepts](https://www.w3.org/WAI/tutorials/images), we can also describe them in different ways.
13 | For example, if the image doesn't add any relevant information about the content, we can just leave an empty alt: `alt=""`.
14 |
15 | ## Exercise
16 |
17 | In the [exercise page](../exercises/1.3.html),
18 | there are 4 visual representations, but none of them are accessible.
19 |
20 | **🎯 Goal:** Add the needed accessible descriptions to each image.
21 |
22 | **Tip 1: Alt text** - Replace the image `src` with an invalid URL and see how the browser renders a broken image. Does the alt text make sense?
23 |
24 | ### Bonus
25 |
26 | In slow internet connections, images take time to load. Some people even prefer to disable images to save bandwidth data.
27 |
28 | **🎯 Goal:** Edit the CSS to ensure the page looks good when images don't load.
29 |
30 | **🍀 Tip #1:** In your daily job, take this as an opportunity for developers and designers to collaborate!
31 |
32 | **🍀 Tip #2**: In real projects, we can block all images, like this:
33 |
34 | 1. In Chrome, go to DevTools > 3 dots (top right) > More tools > "Network request blocking".
35 | 2. A new container in the bottom is opened.
36 | 3. Add a new blocker: Click "+" button, write `*.jpg` and save it.
37 | 4. Refresh the page and voilá. The images are not loaded!
38 |
39 | ## Further reading
40 |
41 | - [Images concepts](https://www.w3.org/WAI/tutorials/images)
42 | - [Alt usage - Decision tree](https://www.w3.org/wai/tutorials/images/decision-tree/)
43 | - [Writing great alt text: Emotion matters](https://jakearchibald.com/2021/great-alt-text/)
44 | - [Pros and cons of alt text](https://twitter.com/thingskatedid/status/1360331792067166208?s=20)
45 | - [Use CSS to detect invalid alt](https://twitter.com/geoffreycrofte/status/1274652138854121474?s=21)
46 |
47 | ### WCAG Success Criterion
48 |
49 | - [WCAG 1.1.1 Non-text content - Level A](https://www.w3.org/TR/WCAG21/#non-text-content)
50 | - [WCAG 1.4.5 Images of text - Level AA](https://www.w3.org/TR/WCAG21/#images-of-text)
51 |
52 | ## Exercise takeaways
53 |
54 |
55 | (After the exercise) Reveal takeaways
56 |
57 | - Empty alt (`alt=""`) is always better than an unexistent alt.
58 | - Alt is meant to be read by people, _NotARobotImage_.
59 | - As a designer, go beyond the ideal state — Include design skeletons to be shown when the images are loading or broken.
60 | - As a designer, include the images alts in your mockups. #invisibleCopy.
61 |
62 |
--------------------------------------------------------------------------------
/src/briefings/2.2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Briefing #2.2
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Nowadays, a lot of content is hidden on a page until it's necessary: menus, drawers, dialogs, tooltips… you name it!
23 |
When we hide content visually, we must remember to hide it completely. Otherwise, those elements are still accessible, even when invisible.
24 |
This mistake can confuse and frustrate those who lose track of the focus indicator while navigating the page.
25 |
These are common ways to hide content:
26 |
/* Visually hidden but accessible by keyboard */
27 | opacity: 0;
28 |
29 | /* Completely hidden: visually and by keyboard */
30 | display: none;
31 | visibility: hidden;
32 |
33 |
<!-- Even invisible, "Get started" can be clicked / focused -->
34 | <div style="opacity: 0">
35 | <button>Get started</button>
36 | </div>
37 |
38 |
To completely remove the interaction, we need to use the attribute inert. This tells the browser to "ignore" the elements inside as if they didn't exist.
39 |
<!-- With `inert`, we cannot interact with the child button -->
40 | <div style="opacity: 0" inert="true">
41 | <button>Get started</button>
42 | </div>
43 |
44 |
Exercise
45 |
In the exercise page,
46 | there's a sidebar that can be toggled through a <button>. Use your keyboard to navigate the page. You'll notice the links inside the sidebar are still accessible even if the menu is hidden.
47 |
🎯 Goal: Make the interactive elements only accessible when visible.
48 |
Hint 1: Use Accessibility Insights "Tab Stops" feature to detect errors within interactive elements.
49 |
Hint 2: The attribute inert lacks browser support, so we need the inert polifyll.
50 |
<!-- Include the inert polyfill at the bottom of the page -->
51 | <script src="../assets/polyfill-inert.js"></script>
52 |
53 |
Bonus
54 |
1. CSS transitions
55 |
This bonus is not about A11Y, it's about CSS transitions. I highly recommend you to pair with your group to explore this one!
56 |
The text "Here's a random article." has a fade-in/fade-out transition done with CSS opacity and transition.
57 |
Assuming you solved the A11Y exercise correctly, you've added visibility:hidden; to the element when it's hidden. But wait… now the fade-out transition is gone!
58 |
Goal: Ensure the fade-in and fade-out transitions work as before. This can be solved with only CSS.
59 |
Hint: In Chrome, go to "More tools > Animations". This panel helps you to inspect animations and find a solution.
60 |
61 | 🍀 Toggle CSS hint #1
62 | CSS transitions have multiple properties. We can use them to better control how the transition happens.
63 |
64 |
65 | 🍀 Toggle CSS hint #2
66 | Check transition-delay. With that we can better control when the visibility happens.
67 |
To hide content just visually, use .sr-only instead of opacity: 0 to ensure all assistive technologies can access it.
86 |
Use inert polyfill with caution, as it can cause performance issues in complex DOM trees.
87 |
88 |
89 |
90 |
91 |
99 |
100 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/src/briefings/2.2.md:
--------------------------------------------------------------------------------
1 | # 2.2. Hidden elements
2 |
3 | ## Introduction
4 |
5 | Nowadays, a lot of content is hidden on a page until it's necessary: menus, drawers, dialogs, tooltips... you name it!
6 |
7 | When we hide content visually, we must remember to hide it completely. Otherwise, those elements are still accessible, even when invisible.
8 |
9 | This mistake can confuse and frustrate those who lose track of the focus indicator while navigating the page.
10 |
11 | These are common ways to hide content:
12 |
13 | ```css
14 | /* Visually hidden but accessible by keyboard */
15 | opacity: 0;
16 |
17 | /* Completely hidden: visually and by keyboard */
18 | display: none;
19 | visibility: hidden;
20 | ```
21 |
22 | ```html
23 |
24 |
25 |
26 |
27 | ```
28 |
29 | To completely remove the interaction, we need to use the attribute `inert`. This tells the browser to "ignore" the elements inside as if they didn't exist.
30 |
31 | ```html
32 |
33 |
34 |
35 |
36 | ```
37 |
38 | ## Exercise
39 |
40 | In the [exercise page](../exercises/2.2.html),
41 | there's a sidebar that can be toggled through a `