Textual Equivalents Standards v2.5

1. Requirements for text equivalents

1.1. "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.

• For example, there is no point making games text accessible for screen readers as a screen-reader user is unlikely to want to play the games. Refer to the Multimedia Accessibility Standard for further guidance.

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.

Top of page

2. Notes on image usage

2.1. Furniture images

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. Graphic text

2.2.1. You SHOULD ONLY render text in a graphic image:

• Where the text is part of the brand image;
• Where characters/symbols cannot be assumed to be in the browser's standard character set (for example, mathematical/scientific symbols);
• Where the text is in diagrams/maps.

2.2.3. See section 3.3 below for rules around specifying alt attributes for graphic text images.

2.3. sIFRs

2.3.1. You MUST apply for an exemption from the Editor, Standards and Guidelines if you wish to use sIFRs on your site. You will also need to provide supporting information for your request, as shown on the sIFR wiki site [ an internal BBC website – gain access via your Technical Account Manager].

• This is because sIFRs can cause difficulties for screen-reader users.
• sIFRs can also cause flickering when displayed in some browsers.
• For more information, refer to the sIFR wiki site [ an internal BBC website – gain access via your Technical Account Manager].

2.3.2. If you are granted an exemption to use sIFRs you MUST:

• use the BBC-approved version of sIFR [ an internal BBC website – gain access via your Technical Account Manager]; and
• only use sIFRs for level 2 and level 3 headings.

Top of page

3. Alt attributes

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. Furniture images

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. Graphic text

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. Functional images (for example, graphical buttons)

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. Complex images (charts, time-lines and diagrams)

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. Image maps

3.6.1. With image maps you MUST provide an alt attribute to every <area> tag.

3.7. Editorially-significant images

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. Words you MUST NOTuse in the alt attribute

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.

Top of page

4. Title attributes

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.

Top of page

5. Flash-specific textual equivalents

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.

Top of page

6. Appendix: Examples of using alt attributes

6.1. Specifying alt attributes for editorially-significant images

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. Specifying alt attributes for functional images

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>

Top of page

7. Document history

Date	Version	Change	Author
05/12/2008	v2.5	Added further details on sIFR usage in section 2.3.	Victoria Jolliffe
17/11/2008	v2.4.1	Minor revisions to remove references to bbc.co.uk and replace with 'online'.	Victoria Jolliffe
09/10/2008	v2.4	Added section 5 on Flash-specific equivalents, and reorganised section 1.	Victoria Jolliffe
23/06/2008	v2.3	Added section 4.4 on ensuring title attributes contain human-readable data.	Victoria Jolliffe
26/03/2008	v2.2	Reorganised information in document. Added clause 2.2.2 regarding use of sIFRs.	Victoria Jolliffe
19/03/2007	v2.1	Two additions to section 3. describing the use of title attributes, as amended by Tech Forum	Gareth Ford Williams, Tred Magill
12/2006	v2.00	Completely revised	Gareth Ford Williams
22/03/2004	v1.00 – external	External pub version. Rebranded BBCi => bbc.co.uk	Jonathan Hassell
23/12/2003	v1.00	Standard renumbered as v1.00 on approval by Standards Exec	Jonathan Hassell
01/12/2003	v0.15	Revisions required for approval by Technical Forum on 28/11/2003	Jonathan Hassell
24/11/2003	v0.14	Revisions after discussion at Accessibility WG meeting on 17/11/2003	Jonathan Hassell
17/11/2003	v0.13	Polish by JH	Jonathan Hassell
10/11/2003	v0.12	Tidy by JH and G-KW	Jonathan Hassell , Gee-Kay Wong
15/10/2003	v0.11	With comments from Accessibility WG meeting on 15/10/2003	Jonathan Hassell
15/10/2003	v0.1	First draft of this doc, based on research by JH (sources: WAI, HP , UK Government site guidelines, RNIB) and Accessibility WG meeting on 11/06/2003	Jonathan Hassell

Top of page