Notes about Web Accessibility – Part 1

I’m studying about Accessibility standards and best practices for the web. I decided to share my notes here, I hope you find them useful and we can improve the web together.

Status: Work in progress.
Last update: June 17, 2015

Lesson 1: Add AlternativesText for Images. 

Alternative text  is a text equivalent for a non-text element on the page.

How?
Add alt attribute to images and input type=”image”

Examples:

<img src=”mydog.jg” alt=”My dog” />
<input alt=”Submit” src=”img-submitbutton.jpg” type=”image” />

When an image is not a link, and carries no information or is redundant, use null alternative text ( alt=”” ). Images with null alternative text will be ignore by screen readers.

The alternative text should be consistent, clear and, most important, useful.

Alt-text is required for all images.

  • If the image is active (link, button, area) the text alternative should describe the link’s function.
  • if the image is not active but conveys information, the text alternative conveys the same information.
  • if the image is redundant or conveys no information use alt=”” for the text alternative.
  • If the image is text then the alt-text should (usually) be the same as the text in the image.

TIPS: How to write better alternative text.

  1. Write the function of the image, not its description.
  2. If the image is a link, or it’s inside a link tag, do not reference to the fact that it is a link. Screen readers will mention this anyways.
  3. Avoid words like “picture of…”, “image of…” or “link to…”
  4. Use the fewest number of words necessary.
  5. Use CSS to create graphic custom bullets. If you can not use CSS use null or “bullet” as alternative text.
  6. Include the image related to a link inside the link tag. And use null as alternative text.
  7. Use a text-only browser or hide the images on your browser to review your alternative text. You can also use an screen reader to check the page before publishing it.
Advertisements

Thanks for your comments

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s