"You MUST provide a text equivalent for every non-text element on your HTML pages." (Source: W3C, WAI Accessibility Guidelines, v1.)
1.1.1. In certain circumstances, the content of this text equivalent MAY be null. (Please see section 2 for details).
1.1.2. These non-text elements include: images, embedded objects (e.g. Flash), audio and video.
1.2. Elements of HTML pages such as
<img> MUST include an alt attribute.
1.3. Pages that include plug-in content, such as animations (Flash, Shockwave), SHOULD include either text equivalents in the plug-in content itself, or include an HTML version of that plug-in content, where this is technically possible. For more details, see Multimedia Plug-in Content Standards.
1.3.1. However, when deciding on what text equivalents to include with your plug-in content you SHOULD consider the content you are creating and who is going to be using it.
1.4. Every time there is editorially significant plug-in content featured on a page, there SHOULD be a visible text link adjacent to the plug-in feature, to enable users to access the non plug-in accessible alternative.
1.5. Pages that include A/V content SHOULD include text equivalents to any speech contained within that content (for example, subtitles in video streams). For more details, see A/V Streaming Standards.
2.1.1. Images that are not editorially significant (that is, they are purely presentational and are not content) SHOULD be in the CSS, and SHOULD NOT be in the HTML of the page.
2.1.2. Furniture images that are, however, in the HTML SHOULD follow the alt attribute rules defined in section 3.2 below.
2.1.3. You SHOULD NOT use transparent spacer images, as their function can be provided by CSS layout.
2.2.1. You SHOULD ONLY render text in a graphic image:
2.2.3. See section 3.3 below for rules around specifying alt attributes for graphic text images.
2.3.1. If you wish to use sIFRs on your site you should discuss this with your product lead. Also see the sIFR wiki site [ an internal BBC website – gain access via your product lead].
2.3.2. If you are granted an exemption to use sIFRs you MUST:
3.1. Alt attributes provide a text description of images. They SHOULD be:
3.1.1. Concise: Unnecessarily long alt attributes are time consuming.
3.1.2. Meaningful: Non-specific text does not provide sufficient information to users who cannot see the image.
3.1.3. Useful: They SHOULD describe the editorial intent of the image.
3.2.1. Presentational images in a page's html MUST carry an alt attribute which MUST be blank (that is, alt=""). Providing a blank alt attribute will allow screen-readers to skip the image.
3.3.1. The alt attribute of an image that features editorially significant text MUST include that text. If you require a call to action this, this can be achieved by having a text link placed over the picture.
3.4.1. If an image is essentially functional (for example, the "Search" or "Go" button) the alt attribute MUST convey the function, or include the exact text featured on the button. The alt attribute MUST NOT carry a description of what the button looks like.
3.5.1. For complex images, alt attributes SHOULD convey the primary purpose of the information in the chart or diagram.
3.5.2. Where a more complete description is deemed useful, you MAY provide a '
longdesc' link to a page with that description.
3.6.1. With image maps you MUST provide an alt attribute to every
3.7.1. If an image is editorially significant its alt attribute should include the part or parts of the image that have most relevance and importance within the content, thus putting the picture into context for sight-impaired users.
3.7.2. For examples, refer to the appendix.
3.8.1. Screen readers tell the user that an image is an image; therefore, there is no need to duplicate this information in the alt attribute.
3.8.2. You MUST NOT use phrases such as "image of", "picture of", "photo of" unless that fact has editorial significance.
3.8.3. You MUST NOT use the words "brand" or "logo" in an alt attribute unless the fact that it is a logo or brand is editorially significant.
3.8.4. For examples, refer to the appendix.
4.1. Title attributes MUST NOT be used UNLESS the wording of the link text does not inform the user of the destination of the link, when read in isolation.
4.2. You MUST NOT simply repeat the link text in the title attribute.
4.3. Title attributes MUST be used to describe or support the description of a link's destination; whether this link is around an image or text. This includes <area> tags for image maps.
4.4. Title attributes MUST contain human-readable data. See also the section on microformats in the Semantic Mark-up Standard.
4.5. The title attribute MUST NOT replicate the content of the alt attribute, but MAY include some of the same wording. See the appendix for examples.
4.6. Title attributes should be:
4.6.1. Useful: They SHOULD ONLY be used where the destination description is not already provided in a text form, UNLESS they are supporting that definition with additional information.
4.6.2. Concise: Unnecessarily long title attributes might not be displayed in the best possible way when appearing as "tooltips" as a user moves their mouse over a titled link. Title attributes SHOULD NOT be more than 33 characters long (BBC News advises 33 character-length headlines as a guide to editorial staff).
4.7. You SHOULD NOT use the following words in a title tag:
4.7.1. "link to", "jump to": you do not need to start your description with these phrases because users are normally already prompted with this information by their assistive technologies.
4.7.2. "follow this link": this does not provide information about the link destination.
4.7.3. "click here": this assumes users are using a mouse, which they may not be.
4.7.4. "More...","More information...": screen readers strip the links from a page, which means they are often presented to the user out of context. Links MUST contain information about their destination. For more information refer to the Text Links Standards.
5.1. The name property of all accessibility controls featured in a Flash movie MUST reflect the functionality rather than the control's design. For example, write 'Play' or 'Pause', not 'Play button' or 'Pause button'.
5.2. A description of the Flash object MAY be placed in the "description" field, so it can be read by a screen reader. The description SHOULD be concise.
5.3. Flash objects or elements that are not editorially significant MUST NOT have text equivalents. Any object that does not provide user interaction or is not editorially significant SHOULD have its accessibility properties left as silent by default. This enables screen readers to skip this content.
6.1.1. If the link to the Doctor Who picture gallery shows the Doctor and Rose Tyler in front of the Tardis, then the alt attribute will read "The Doctor and Rose Tyler outside the Tardis" if that is the editorial message to be conveyed. The title attribute of the same image (illustrated below) that is a link could read "Doctor Who picture gallery" if that is what it links to.
The HTML code would read:
<a href="picture_gallery.html" title="Doctor Who picture gallery"> <img src="doctor_rose.jpg" width="400" height="300" alt="The Doctor and Rose Tyler outside the Tardis" /> </a>
6.1.2. If an image contains text, then the alt attribute will include that text to support speech recognition browsers. If an image of Doctor Who contains the words "Watch Now" then the alt attribute will feature the words "watch now", as well as describing the image (illustrated below). The title attribute of the same image could say "Watch Episode 4 Series 2".
The HTML code could read:
<a href="picture_gallery.html" title=" Watch Episode 4 Series 2"> <img src="doctor_rose_watch.jpg" width="400" height="300" alt="Watch Doctor Who and Rose Now"/> </a>
6.1.3. If an image is divided using an image map that links to different destinations, the alt attributes of the image will describe each area. For example, on a map of the United Kingdom (illustrated below) the area could be "Wear"; the title tag for that section of the image map could be "Wear's Homepage"; the alt attribute of the overall image could be something like "UK map showing county boundaries".
The HTML should read:
<img src="uk_map.gif" height="xx" width="xx" alt="UK map showing county boundaries" usemap="ukmap" /> <map name="ukmap"> <area href="/wear/" alt="wear" title="Wear's Homepage" shape="circle" coords="195,200,5"> </map>
6.2.1. If an image is essentially functional (for example, "Search" or "Go" button, illustrated below), its alt attribute will convey the function, or the exact text featured on the button. It will not carry a description of what the button looks like.
The HTML will read:
<a href="search/" title="search the web" > <img src="search.gif" height="xx" width="xx" alt="search" /> </a>
This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.