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

Golden Rules for Effective Alt-Text

AbilityNet

Webinar, 25 March 2014

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

Welcome

• Mark Walker, AbilityNet

• Robin Christopherson, AbilityNet

• Stefan Sollinger, AbilityNet

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

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

• Accessibility Testing

• User Testing

• Design Reviews

• Desktop, Mobile and Tablet Integration

• Accessibility Accreditation

• Service Agreements

• My Computer My Way

AbilityNet

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'

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

Who else likes alt-text?

Google:

• Makes all graphical info searchable

• Improves rankings

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

Who else likes alt-text?

Mobile users:

• Often images aren't loaded immediately or even at all

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

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)

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.

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

Golden Rule 2 - Examples

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

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.

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”)

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.

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

Complex images

Example for a graph:

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

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

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