START A COURSE

The HTML and CSS Blog:

Creating Accessible Websites

What You Learn in This HTML Lesson

Alternative text descriptions

Alternative text descriptions help people understand your pictures even if they can’t see them.

In this HTML lesson you’ll learn about how we use alt and title attributes to make images more accessible. We’ll talk about why giving your images title attributes and alt attributes improves both web content accessibility and search engine optimization. We’ll also cover some other basic accessibility standards and offer some resources that let you test just how accessible your site is.

Creating Accessible Websites

Making Images Accessible

deal-withit-brialle-stevie-wonder

Deal with it: you need to make your site accessible

There are over 10 million Americans (not to mention the rest of the world) who have vision disabilities. I became one of them when I turned 40. It’s important to make sure everybody can use your website, so this blog is about making sure your pictures have enough information to be heard. Some people will be listening to your web page read out loud by a screen reader. Others will look at your page visually. You want to make sure your site conveys the same information whether it is heard or seen.

 

Bonus: Web Accessibility Improves Your SEO

Bringing your site up the latest web accessibility standards will also improve your ranking in search engine results by giving Google and all the search engines clues about your photo content. (Do you have a thousand images of guitars? Tell Google about it with alternative text descriptions!) It’s interesting that accessibility and SEO (search engine optimization) mirror each other: apparently Google is a very important blind person.

Improve SEO

Improve SEO by using good descriptive alternative text descriptions

Image Tag Attributes

The image tag has many attributes, which can be listed in any order. The attributes that are important to web accessibility are the alt text attribute and title attributes. Here’s an example of a standard <img> tag:

Alternative Text Attribute

The alt attribute is essential, as it provides a text description for screen readers, allowing web accessibility for those with vision difficulties. The alt attribute lets you provide alternative text descriptions for each picture that can read out loud by screen readers, and help improve search results.

When writing your alt text, try to describe the contents of the image. One way to think of this is: if someone wanted to find a photo like this, what would they search for? What is the message being conveyed to those who can see the picture?

The alt attribute allows you to create a text description for each picture

The alt attribute allows you to create a text description for each picture

Title Attribute

The title attribute creates a visible text label that appears when the web visitor hovers over the image. It can be nice to add extra information to images, that only pops up when the web visitor is interested enough to point at the image. Some web developers like to repeat the same alternative text description as a title, so that users hear and see the same information.

The title attribute can be especially useful when your image is also a link, as it can also give the reader an idea of what any reader (vision challenged or otherwise) will get when they click on the image.

judmental parental cat looks down debutant kitty

An appropriate alt tag for this image might read “judgmental parental cat looks down debutant kitty” while the attribute might say, “What the what?” [image via Future Is Fiction]

Web Accessibility: Don’t Forget the Buttons

There’s one kind of image that many thoughtful coders forget to make accessible—buttons. Even sites like Amazon can be very difficult for hearing impaired folks to navigate. The image of the button may say “Buy now!” but because their software can’t read the image, the vision-impaired web surfer has no way of knowing if the button says “Buy Now” or “Cancel” or “Click Here to Feed Your First-born to Sharks.”

shark versus narwhal

This poor, vision-impaired narwhal just wanted to add a pinwheel to her shopping cart [painting by LegendaryTigerHero]

There are a couple ways of making your buttons accessible. One method is to use code to create the button (button HTML tag plus visual styling with CSS), rather than using an image. The button text can easily be read by screen readers, so the web visitor can see or hear the same text. If you are using images for the button, than make sure the alternative text description (alt attribute) is written clearly to indicate what will happen when clicking the button. Don’t just use vague labels like “click here”. Be more descriptive, such as “click to add this item to your shopping cart”.

Making Forms Web Accessible

cat label on cat

Proper labeling is important [cat via Reddit]

To ensure you can fill out a web form using a screen reader, you must use the label tag to relate the visible text labels with the appropriate field. You don’t want to enter information in the wrong fields just because the web developer forgot to use labels.

The label tag surrounds your visible text label, and includes a “for” attribute that matches the name you assigned to the matching field. Form fields are created using the “input” tag. Here is an example of a form field that is not accessible because it lacks any clue that the text label actually goes with it’s input.

Here’s an example of an accessible form, where the label tag has been added and the for attribute correctly assigns the same name to the field and it’s text label.

Now someone using a screen reader will hear the correct label right at the instant their cursor is in the field. So, make your forms accessible to all people by using the label tag in your forms.

To Keep Your Site Accessible, Stick with HTML

The trend of having flashy animated sequences at the opening of your site has died down in part because search engines and other automated readers (like those used by the deaf) read only HTML. Javascript, Flash and Java are alien to them. So just remember the more you use these languages on your site, the less accessible your site is.

Make Your PDF Documents Accessible

If you do use PDF attachments on your web site, then at least make sure your PDF files are accessible. You can add alternative text descriptions to your images inside PDF documents. Open your PDF in Adobe Acrobat Pro, and choose from Tools, the Touch-Up Tool, and right-click your image for “properties”.  After right-clicking for the image properties, fill in a descriptive alternative text message in the “Alt” field.

Acrobat Accessibility

Acrobat allows you to add alternative text descriptions so that your PDF files can be heard by people using screen readers.

Accessible Audio and Video

Make sure all your video and audio has written text to go with the audio experience. In order to make sure your web content can be heard and seen equally, you need to provide text transcripts for audio tracks. Video needs to include captioning (closed captioning button or open captions) or provide a link to a transcript.

Useful Web Content Accessibility Resources

The Web Content Accessibility Guidelines (WCAG) from the W3.org

blind dog navigates with hoop

Make your site accessible for all [gif via Cheezburger]

The Web Accessibility Checker Just give it your url (your web page address) and it will scan the HTML page to determine how accessible your site is.

The non-profit, Lighthouse, has some excellent information on making color contrast strong enough to accommodate color-blindness and low-vision.

I like this color mixing tool which shows an example of a text color against a background color. After mixing a text color and background color that have a lot of contrast, you can copy and paste the color code (Hexidecimal value) needed to specify that color in your HTML and CSS code.

Photoshop and Illustrator include a feature in the View menu to see images as if you are colorblind. This is a great feature to check if your info graphics, maps, and other important visual content can be understood without full color perception.

You can try out the view by choosing View menu > Proof Setup > Color Blindness.

Color Blindness View in Photoshop

Color Blindness VIew in Photoshop

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.