Not all people are able/willing to view images or other graphical multimedia content in their Web browsers. For instance, I have a slow Internet connection at home and I've configured various plugins to block content from sites such as Daily Motion, Instagram, Facebook, Google, Twitter, Vimeo and Twitter, both because I don't want them tracking me and they slow down my browser/connection. I also know people who use lynx
and other non-graphical (or simplified) browsers (such as w3m
, surf and even emacs
) for their main browsing activity. (I even sometimes use lynx
for simple connectivity checks or when my connection is rubbish, as it often is.) As a consequence of this, I often see the alt
text for images/multimedia (provided that there is any), instead of that content (at least while it's loading, anyway). Still others might be using assistive technology such as screen readers or other text-to-speech applications (perhaps because they have disabilities). Working as a professional Web developer, I have to keep this in mind when I build Websites and write content.
The upshot of this is that it's abundantly clear to me that a lot of people have no idea of the purpose of the alt
attribute (and that they should probably use aria-label
[MDN1] and/or aria-labelledby
[MDN2] as well), since most of the time the content that gets put in alt text is the file name of the item in question. Given that a lot of those images are hosted on CDNs or other platforms that use naming schemes to give each image a unique name, that's often a string of random characters, which is not helpful to understanding what the multimedia item actually depicts. (I see this a lot on Pub0x, which is a travesty because the site provides the functionality for the content writers to specify the alt text, so it's people at fault here.) This is not the correct way to use it! As per the W3C [W3CH36][W3CH37] (emphasis mine):
"When using the
img
element, specify a short text alternative with thealt
attribute. The value of this attribute is referred to as "alt text".
"When an image contains words that are important to understanding the content, the alt text should include those words. This will allow thealt
text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image."
— Usingalt
attributes onimg
elements (W3CH37)
If the image does not contain any text (which it shouldn't, since this is considered bad practice), then it is acceptable for the alt text to (briefly) describe the image, which is still preferable to having no alt text.
"For
input
elements of typeimage
, thealt
attribute of theinput
element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results."
— Usingalt
attributes on images used as submit buttons (W3CH36)
For example:
<form action="/findBooks" method="post" role="search" class="inline-form search-form">
<label for="look-up">Find books:</label>
<input id="look-up" type="text" maxlength="150" required="required" />
<!-- alt text describe's button's function, not the image used -->
<input alt="Search" src="search-button.gif" type="image" />
</form>
Use of the title
attribute as a backup/fail-safe might also work in some situations. The disadvantage of this is that it shows as text in a tool-tip when the mouse cursor hovers over the element in question. (You might not necessarily want this.)
In my unashamedly egotistical opinion (as possibly one of the world's word developers), it is both ableist and inconsiderate to not set (or incorrectly set) these attributes.
This image has the alt text 'Lynx', because that's what the embedded text is.
This message has been brought to you by a few good people whom use the lynx
Web browser. (I'm not sure if lynx
uses ARIA attributes — or much HTML 5, for that matter — but if not, it definitely should be upgraded to do so. Having never built a browser or parser for HTML, I'm not sure what that requires, but I imagine it's non-trivial, even for something as comparatively simple as lynx
. What I do know is that some assistive technologies definitely do make use of ARIA.)