/
tips.html.md.erb
44 lines (29 loc) · 4.05 KB
/
tips.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
---
title: Tips and Frequently asked questions
nav_title: Tips and FAQ
status: draft
order: 9
type: tips
---
Feedback on this page is welcome, if you have a question about images
that isn’t answered by this tutorial, you can send it to
[wai-eo-editors@w3.org](mailto:wai-eo-editors@w3.org).
## Tips
- **Logos:** Images of text that are used as logos are exempt from some of the accessibility guidance that applies to other images of text, for instance there is no minimum color contrast requirement;
- **Prioritize information in `alt` values:** Aim to put the most important information at the start of the `alt` value, as people using high screen magnification may be unable to see more than the first two or three words in the `alt` “tooltip” and people who can’t read quickly may not be able to read as far as the important part of the text alternative before the "tooltip" disappears.
- **Choosing appropriate text alternatives:**Imagine that you are reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it is probably safe to treat them as [decorative](../decorative/).
- **Punctuation within `alt` attributes:**As in visible text, using punctuation within the text alternative can make it easier to understand. In addition, a space character may be needed within the `alt` value if there is no space between the image and adjacent text, to avoid having words run together when read by a screen reader.
## FAQ
- **I've been told to remove the `alt` from most of the images in my template, is that right?**
No that's incorrect, the `alt` is a required attribute. If the images are part of the page design, and don’t convey information, you can remove any text values, leaving just the quotes (`alt=""`).
- **I can’t remember – should the alt be a space or null (empty) if a description is not needed?**
It should be null (empty) `alt` text (`alt=""`), with no space between the quotes. Having a space between the quotes doesn’t effectively hide the image from all assistive technologies, for instance some screen readers will still announce the presence of an image if a space is put between the quotes.
- **My CMS system puts in a default `alt` of “image of“, can I just add to that?**
It will depend on the function of the image, but default values may result in inappropriate alternative text. Normally there's no need to include words like “image”, “icon” or “picture” in the `alt` text, people who can see will know this already and screen readers announce the presence of an image. There's a good case for including text that describes the type of image if it is a painting, photograph or illustration, but it's best to avoid the more generic terms.
- **How long can the `alt` text be, is it up to 90 words?**
The `alt` text should be the briefest, most concise description of the image's purpose as possible. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed on the [complex images](../complex/) page. People using high screen magnification may be able to see only two or three short words in their magnified view of the `alt`: tooltip and screen readers are likely to truncate or break any long `alt` value.
## Other W3C Resources
- Background information on [providing text alternatives for non-text content](http://www.w3.org/WAI/intro/people-use-web/principles#alternatives) in How People with Disabilities Use the Web;
- Further examples and a helpful decision tree: [HTML5: Techniques for providing useful text alternatives](http://www.w3.org/TR/html-alt-techniques/) ;
- Test the accessibility of images on your site: [Quick Checks Image text alternatives;](http://www.w3.org/WAI/EO/Drafts/eval/checks#images)
- Examples of good and bad practice in selecting text alternatives can be found in the [Before and After Demonstration](http://www.w3.org/WAI/demos/bad/) (BAD).