Mock O'Riley Book Cover: Blatantly Misusing HTML5 Accessibe Application Attributes

Misusing the Image alt Attribute and Ignoring Accessible Rich Internet Application (ARIA) Attributes


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.

Lynx is a text browser for the World Wide Web.screenshot of w3m accessing/rendering daygeek.com

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 the alt 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 the alt 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."
 — Using alt attributes on img 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 type image, the alt attribute of the input 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."
 — Using alt 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.

Lynx text-mode browserThis 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.)

How do you rate this article?

3


Great White Snark
Great White Snark

I'm currently seeking fixed employment as a S/W & Web developer (C# & ASP .NET MVC, PHP 8+, Python 3), hoping to stash the farmed fiat and go full Crypto, quit the 07:30-18:00 grind. Unsigned music producer; snarky; white; balding; smashes Patriarchy.


Return to the Source
Return to the Source

Use the Force; read the source! This blog is mostly a collection of study notes on ASM, ASP .NET, Blender, BASIC, C/C++, C#, ChucK, Computer Architecture, Computer Literacy, CSS, Digital Logic, Electronics, F#, GIMP, GTK+, Haskel, Java, Julia, JavaScript (ES6+) & JSON, LISP, Nim, OOP, Photoshop, PLAD, Python, Qt, Ruby, Scheme, SQL (MySQL & SQLite), Super Collider, UML, Verilog, VHDL, WASM, XML. If I can learn it and make notes on it, I'll write about it. || Blog images copyright Markus Spiske and Pixabay

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.