Golden Rules for Effective Alt-Text. AbilityNet Webinar, March 2014
-
Upload
abilitynet -
Category
Business
-
view
366 -
download
4
description
Transcript of Golden Rules for Effective Alt-Text. AbilityNet Webinar, March 2014
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
[email protected] 01926 465 247
@abilitynet