/
groups.html.md.erb
45 lines (33 loc) · 1.77 KB
/
groups.html.md.erb
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
---
title: Groups of Images
status: draft
order: 7
---
A grouped collection of images is sometimes used to convey a single piece of information, for instance star images to denote a product rating. In this case, the text alternative for one of the images should convey the information conveyed by the entire group, all other images should have null (empty) `alt` attributes. For instance, as shown in example 1 below, the descriptive text alternative on one image should be “3.5 out of 5 stars”, rather than “1 star”, “Half star” or “Unfilled star” on each image.
## Group of images for rating
{:.ex}
This group of five images shows a product rating. There are five images, three filled stars, one half filled star and one empty star, indicating the overall rating. The text alternative for the first image is “Rating: 3.5 out of 5 stars”, all other images have a null (empty) `alt` attribute (`alt=""`).
<%= sample_start %>
Rating: 
<%= sample_end %>
<%= code_start %>
~~~ html
<p>
Rating:
<img src="star-full.jpg" alt="3.5 out of 5 stars">
<img src="star-full.jpg" alt="">
<img src="star-full.jpg" alt="">
<img src="star-half.jpg" alt="">
<img src="star-empty.jpg" alt="">
</p>
~~~
<%= code_end %>
## Related WCAG2.0 Techniques
The following WCAG 2.0 techniques were used in the examples above:
- [G196: Using a text alternative on one item within a group of images
that describes all items in the
group](http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G196)
- [H67: Using null alt text and no title attribute on img elements for
images that AT should
ignore](http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H67.html)