What You Learn in This HTML Lesson
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
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.
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:
<img src="images/picture.jpg" width="125" height="55" alt="text description of the image" title="visible text description for the picture">
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 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.
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.”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 AccessibleTo 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.
First Name <input type="text" id="customerFirstName" name="customerFirstName">
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.
<label for="customerFirstName">First Name</label>
<input type="text" id="customerFirstName" name="customerFirstName">
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
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.
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 ResourcesThe 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.