Alt Text: Easy Enough, or so You'd Think

I'm currently working through the "Images, SVG, and Canvas" module of the Deque University WAS prep-course, and I'm surprised by how specific and helpful the information is.

There's a lot more than just adding alt text to images. The big revelations dealt with image maps, visuals that would require excessive explanation not appropriate for an alt text, images instead of buttons, geographical maps, and text alternatives for data visualizations.

Image Maps

Firstly, I completely forgot that image maps were a thing. I vaguely remember abusing this option when making a websites in the early 2000 because it allowed you to simply identify hot spots as links on a robust image background instead of dealing with HTML buttons, or actual code. 

If you're unable to use a more appropriate solution than an image map, you'd need to:

  • provide alt text on the background image to summarize the context of the area alt text
  • provide alt text describing the map area within that context

Screen shot of a visual flow chart example and the code illustrating proper alt text for image map areas on the flow chart

 One mistake I made when I started the practice site, was that I added alt text to an image that rambled on because I was tired of writing boring alt text and thought I'd be funny. Turns out, yes, there's a limit you should stick within. 

You start to lose the audience if it goes over 150 characters, and alt text doesn't allow the user to navigate within it like other content does. You should stick to a short, succinct description of the image to help the user experience the benefit of the visual content the same way a sighted user would. 

Screen shot of code inspector showing alt text for the profile image of Danielle in the practice site

Excerpts and Long Descriptions

If there is important information that can't responsibly be included in alt text, using an excerpt to convey the more lengthy information helps the user:

  • get an idea about the image
  • be able to navigate and read the long description as a part of their normal page navigation
  • be able to skip the excerpt if they desire
You can chose to include the lengthy text in an expandable container to save on page space, or have it available via a link.

This type of thing is more relevant to images that are more complex than stock photos such as, artistic representation of concepts/symbolism or images used to illustrate graphical data or diagram.

Image Buttons

If you're using images in place of semantic button elements, the alt text needs to convey the action of the button, and you don't need any alt text on an image that displays as the background via CSS. If you have an image in the background as apart of the page code, however, keep it blank with alt=" ".

Geographically Maps

From the context of "you need alt text on images" when you have a map of city streets in front of you, your immediate thought is, "Uhhhh... how do I alt text this?" You can't describe the directions and cross streets of a city map in alt text.

Short answer is you really don't aside from providing text for the user to understand where the map visual is on the page. The approach to take is they are looking at the map in order to get directions, so focus on making the list of directions, and the the ability to search for directions as accessible as possible.

Data Visualizations

Similar to geographical maps, it requires a lot more than 150 characters to convey the full message of a bar chart or other data visualization.

You should still include alt text for the data visualization, but keep it short and summarize the goal of the data. 

Amy Cesal has a helpful list of specific things to include as a standard such as:

  • Chart type
  • Type of data
  • Reason for including chart
  • Link to raw data somewhere in the page text if available

Colored bar chart illustrating the dramatic increase in temperature from 1850-2019

Image of Amy's list of items to include in alt text from the example graph above

Popular posts from this blog

Practice Site: Keyboard Accessible Tooltip Fail

Image
While reading about keyboard input methods and learning about the success criteria requiring custom keyboard instructions for any custom key commands, one method of accomplishing this was using a tool tip to present the instructions. It mentioned that the tooltip would have to be accessible via keyboard navigation and be able to be read by a screen reader. That reminded me that on my practice site, I spent a significant amount of time creating an example of success criteria for 3.1.3 to provide a definition of an unusual word when the user hovers over the text "affordance" displaying in a tooltip. I did not, however, make this accessible to keyboard-only users or screen readers. Turns out it wasn't even focusable until I gave it a tab index. More investigation into ARIA Practices for 3.24 Tooltip Widget call out specifically that the tooltip container requires role="tooltip" (which I did not have), and the element triggering the tooltip references the tooltip ...
Read more

Pointer Cancellation: Real-World Examples

Image
 While reading through the Operable Principles, I admit that I was confused about the success criteria around pointer cancellation . The success criteria states, For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event: The down-event of the pointer is not used to execute any part of the function Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion Up Reversal: The up-event reverses any outcome of the preceding down-event Essential: Completing the function on the down-event is essential Some of my initial questions when reading this are: It mentions functionality using a single pointer, but what are the other options? Is there a double pointer? Do they mean that when they release the down-click the user is prompted to abort the action or undo?  Are they holding down a mouse button reading something tha...
Read more

Practice Site: Accessible Forms

Image
Today I finally bit the bullet and focused on creating a page on the practice site that would allow me to practice with form components, and live events based on actions. I have the basics down thanks to a friend of mine who walked me through the tools and resources that would be best for this very specific scenario and wrote the skeleton of the page that I could edit to make more accessible. She recommended using JQuery and JavaScript to avoid requiring a database or AJAX. Thanks to w3school.com for their amazing resources. My goal is to make the form fields clear on each submit, and post the data in a styled way on the page. I'd also like to make each submit speak a "success" message to alert the user of the new content, and of course, add labels to everything. Since this took the entire day, it will have to do for now. Luckily there are built-in focus states for the input and button elements by default. This was a productive day, but I may need to take a walk after ...
Read more