Alt text
What do you usually put in the alt text of your img elements? Maybe you don’t include the attribute, or maybe you leave it empty. Otherwise, you’ll probably put a half-hearted alt=”image” or alt=”logo” or alt=”me” and leave it at that.
And it’s what we’re all taught to do, frankly; but we’re slightly misled, when we’re told that the alt attribute “describes whatever it is.” Alt is so much more than that.
The Essence of the Media
Alt is the image. Any time you add some form of media to your page, whether aural or visual, you need to store it as text, which is accessibly by basically anyone. Text can be translated, turned into Braille, spoken, or rendered onto the screen. It can be searched, selected, saved, stored, or sent.
Define a Context
When you look at the link to your file, try to imagine what it would be like to be denied it. Forget the title, for a moment, or what it’s there for, or the basic thing inside it: For a moment, imagine you’re on your page, you know there’s an image there, but you have no clue why. What’s the context? You might mention it in the text around the image. What else is needed? Describe anything that would help the context, as well as anything someone might notice.
Filenames
It isn’t all alt. An image viewed on a webpage will have text around it for context, but if you save the image to disk you won’t have that luxury. Give all your images a filename that best describes it out of context. Instead of ‘team.jpg’ try ‘webdev_team_09.jpg’. It’s a bit longer, but much more descriptive. Filenames take some practice, because you need to keep the filenames to a minimum while also including all the information you can.
Title text
As well, there are the page titles. Most users, when they save a link, don’t bother changing the name. I found an external SSD I wanted, and saved the detail page to my flash-drive to carry with me. To this day, the file is called ‘Welcome to Transcend Online Store.htm’. I know what it is, but it would be confusing if someone else saw the file, or if I had multiple items.
If the page deals with a specific product, try to add the product name to the page title. Each and every page should have a different title. You can keep the company name in there, but also add the page context to the beginning.
The company name is ever-present, and isn’t really important; and the browsers tend to cut off the latter parts of a title if they’re too long. In this light, always put the most important parts of the title first. Because tabs shrink when too many are open, it’s wise to keep the first few characters the most descriptive.
‘Welcome to Transcend Online Store.htm’ could have been ‘SSD eSATA/USB – Transcend Online Store.htm’, which would have made much more sense.
Meta Description
Finally, there’s the meta information. The page description, you might think, can be the same everywhere, and that very well be true; but if the page expresses any different functionality, the meta description should also change. Search engines such as Google display this description when showing your site as a result, so craft it to show as best you can the nature of that page. If the user was searching for something that could be found on another page in your site, Google will include that link, with its own description, right under the main link. This point is mainly SEO, but what’s good for search engines is usually good for accessibility, as well.
Once Again
To recap:
-alt text should make a fine substitute of the media it references, because those who use the alt text cannot gain access to the information in the media
-filenames are sometimes viewed outside the context of the page, and so they should have reasonable names
-titles will be used on saved links, so each page should give its context
-meta description is very helpful to users who are searching for something specific, and also help your different pages gain visibility
This doesn’t only affect blind readers. People with images disabled or hard-of-hearing video-viewers will also be able to find their way around better.
