This month's webinar is all about alt-text and labels and will help anyone who produces content for the web, whatever their technical skills. You could be a developer, a site editor or anyone who puts content on any website. Just follow our golden rules to make your content more accessible to your visitors, more visible to search engines and more compliant to technical and legal standards

1. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rules for
Effective Alt-Text
AbilityNet
Webinar, 25 March 2014

2. Webinar archive at www.abilitynet.org.uk/webinars

3. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rules for Effective Alt-Text
A practical focus for
Brief introduction to alt-text, Robin
5 Golden Rules, Stefan
Complex images, Stefan
Question and Answers, Mark/Stefan/Robin
Please use the chat box to ask questions at any stage

4. Webinar archive at www.abilitynet.org.uk/webinars

5. Webinar archive at www.abilitynet.org.uk/webinars
Who likes alt-text
Users with impairments:
• Dyslexia software such as BrowseAloud or TextHelp help speak
pictures of text.
• Screen reading software such as Jaws or VoiceOver describe images
for blind users
A missing alt attribute means:
• Users struggle to read images of text
• Valuable info is missing
• The filename is read causing 'verbal clutter'

6. Webinar archive at www.abilitynet.org.uk/webinars
Who else likes alt-text?
Google:
• Makes all graphical info searchable
• Improves rankings

7. Webinar archive at www.abilitynet.org.uk/webinars

8. Webinar archive at www.abilitynet.org.uk/webinars
Five Golden Rules of Alt-Text
Rule 1: Every <img> must have an alt= attribute
Rule 2: Describe the information, not the picture
Rule 3: Active images require descriptive alt-text
Rule 4: Images that contain information require descriptive alt-text
Rule 5: Decorative images should have empty alt-text

9. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 1
Every <img> must have an alt= attribute
• There is no exception to this. It doesn‟t matter what the image is used
for, or what it shows, or even how small it is
• Text depends on the type of image
• Either alt=“” (empty alt-text) or alt=“descriptive text” (descriptive alt-
text)

10. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 2
Describe the information, not the picture
• You should almost never describe that the picture looks like, you
should explain the information the picture contains.

11. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 2 - Examples

12. Webinar archive at www.abilitynet.org.uk/webinars
Types of images
There are 3 fundamental types of image to consider:
• Type 1 – „Active‟ images (i.e. links, buttons etc)  Rule 3
• Type 2 – Images that contain information  Rule 4
• Type 3 – Images that are purely for decoration  Rule 5

13. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 3
Active images require descriptive alt-text
• An active image is an image that performs an action or has some
functionality. The most common example is a link image.
• The alt text for an active image should describe the action the image
performs e.g. a link image should tell the user what the link does.

14. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 4
Images that contain information require descriptive alt-text
• If an image contains information then you need to offer this
information to the user in an alternative format.
• The alt-text should be a brief description of the information
Special cases:
• Images of text
• Charts, graphs, etc (“complex images”)

15. Webinar archive at www.abilitynet.org.uk/webinars
Golden Rule 5
Decorative images should have empty alt-text
• The alt text should be empty (null) string, i.e. alt=“”. The code for the
image should look like this: <img alt=“”>
• Even if the image is for decoration, it must still have the alt
attribute, but doesn‟t contain any text.
• If the alt attribute contains no text, the screen reader ignores the
image which helps cut down the “audio clutter” on the page.

16. Webinar archive at www.abilitynet.org.uk/webinars
Complex images
Example for a graph:

17. Webinar archive at www.abilitynet.org.uk/webinars
Five Golden Rules of Alt-Text
Rule 1: Every <img> must have an alt= attribute
Rule 2: Describe the information, not the picture
Rule 3: Active images require descriptive alt-text
Rule 4: Images that contain information require descriptive alt-text
Rule 5: Decorative images should have empty alt-text

18. Webinar archive at www.abilitynet.org.uk/webinars
Questions and Answers
• Please use the chat box or the questions box to ask your question
• We will then turn on your microphone and ask you to repeat your
question
• Any question not answered can be covered in a follow up email

19. Webinar archive at www.abilitynet.org.uk/webinars
Contact Us
More free accessibility webinars from AbilityNet
www.abilitynet.org.uk/webinars
AbilityNet Accessibility Services
www.abilitynet.org.uk/accessibility-services
sales@abilitynet.org.uk 01926 465 247
Robin.christopherson@abilitynet.org.uk
@abilitynet