-
Notifications
You must be signed in to change notification settings - Fork 176
/
S1077.html
90 lines (85 loc) · 5.23 KB
/
S1077.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<h2>Why is this an issue?</h2>
<p>The <code>alt</code>, <code>aria-label</code> and <code>aria-labelledby</code> attributes provide a textual alternative to an image.</p>
<p>It is used whenever the actual image cannot be rendered.</p>
<p>Common reasons for that include:</p>
<ul>
<li> The image can no longer be found </li>
<li> Visually impaired users using a screen reader software </li>
<li> Image loading is disabled, to reduce data consumption on mobile phones </li>
</ul>
<p>It is also very important to not set an alternative text attribute to a non-informative value. For example <code><img ... alt="logo"></code>
is useless as it doesn’t give any information to the user. In this case, as for any other decorative image, it is better to use a CSS background image
instead of an <code><img></code> tag. If using CSS background-image is not possible, an empty <code>alt=""</code> is tolerated. See Exceptions
below.</p>
<p>This rule raises an issue when:</p>
<ul>
<li> An <code><img></code> element has no <code>alt</code> attribute. </li>
<li> An <code><input type="image"></code> element has no <code>alt</code>, <code>aria-label</code> or <code>aria-labelledby</code> attribute
or they hold an empty string. </li>
<li> An <code><area></code> element within an image map has no <code>alt</code>, <code>aria-label</code> or <code>aria-labelledby</code>
attribute. </li>
<li> An <code><object></code> element has no inner text, or <code>title</code>, <code>aria-label</code> or <code>aria-labelledby</code>
attribute </li>
</ul>
<h3>Noncompliant code example</h3>
<pre>
<img src="foo.png" /> <!-- missing `alt` attribute -->
<input type="image" src="bar.png" /> <!-- missing alternative text attribute -->
<input type="image" src="bar.png" alt="" /> <!-- empty alternative text attribute on <input> -->
<img src="house.gif" usemap="#map1"
alt="rooms of the house." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,42,42"
href="bedroom.html"/> <!-- missing alternative text attribute on <area> -->
<area shape="rect" coords="0,0,21,21"
href="lounge.html" alt=""/> <!-- empty `alt` attribute on <area> -->
</map>
<object {...props} /> <!-- missing alternative text attribute on <area> -->
</pre>
<h3>Compliant solution</h3>
<pre>
<img src="foo.png" alt="Some textual description of foo.png" />
<input type="image" src="bar.png" aria-labelledby="Textual description of bar.png" />
<img src="house.gif" usemap="#map1"
alt="rooms of the house." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,42,42"
href="bedroom.html" alt="Bedroom" />
<area shape="rect" coords="0,0,21,21"
href="lounge.html" aria-label="Lounge"/>
</map>
<object>My welcoming Bar</object>
</pre>
<h3>Exceptions</h3>
<p><code><img></code> elements with an empty string <code>alt=""</code> attribute won’t raise any issue. However, this way should be used
in two cases only:</p>
<p>When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <code><img></code> is
generated via javascript with a source image coming from a database, it is better to use an <code><img alt=""></code> tag rather than generate
CSS code.</p>
<pre>
<li *ngFor="let image of images">
<img [src]="image" alt="">
</li>
</pre>
<p>When the image is not decorative but its <code>alt</code> text would repeat a nearby text. For example, images contained in links should not
duplicate the link’s text in their <code>alt</code> attribute, as it would make the screen reader repeat the text twice.</p>
<pre>
<a href="flowers.html">
<img src="tulip.gif" alt="" />
A blooming tulip
</a>
</pre>
<p>In all other cases, you should use CSS background images.</p>
<p>See <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">W3C WAI Web Accessibility Tutorials</a> for more information.</p>
<h2>Resources</h2>
<ul>
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">WCAG2, H24</a> - Providing text alternatives for the area elements of image maps </li>
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H36.html">WCAG2, H36</a> - Using alt attributes on images used as submit buttons </li>
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H37.html">WCAG2, H37</a> - Using alt attributes on img elements </li>
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H67.html">WCAG2, H67</a> - Using null alt text and no title attribute on img elements for images
that AT should ignore </li>
<li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H2.html">WCAG2, H2</a> - Combining adjacent image and text links for the same resource </li>
<li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all">WCAG2, 1.1.1</a> - Non-text Content </li>
<li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs">WCAG2, 2.4.4</a> - Link Purpose (In Context) </li>
<li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link">WCAG2, 2.4.9</a> - Link Purpose (Link Only) </li>
</ul>