Golden Rules for Effective Alt-Text. AbilityNet Webinar, March 2014

  • 210 views
Uploaded on

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. …

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

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
210
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • We work with some of the biggest names in global business, delivering world class services.They use us because they are clear about the business case
  • Chart from http://www.pewinternet.org/data-trend/social-media/social-media-use-all-users/ Other example: BBC Weather – http://www.bbc.co.uk/weather/2643743

Transcript

  • 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