Twitter Adds Alt Text Authoring for Some Users

I posted recently about how sharing images through services like Twitter are often inaccessible to users with visual impairments because they lack meaningful alt text. In its March 28 release (version 6.50 for iOS), Twitter now provides some mobile users the option of including alt text. (No word on when the feature will be available for website users.)

To enable the ability to add alt text to your posted pictures from within the iOS Twitter app:

  1. Go to your profile page
  2. Tap the settings (gear) icon
  3. Choose the “Accessibility” option
  4. Turn on the “Compose image description” option
  5. Save your settings

The first time you insert an image into a tweet, you will be prompted to “Describe this image for the visually impaired”.

Twitter image prompt to describe this image for the visually impaired
Screenshot of the image upload prompt

Tap the “Add description” button to provide a meaningful explanation of the contents of the image.

screenshot of the field to type in the image description for a watermelon pinata
Screenshot typing the image description

Looking at the source code via the website, we can see the image contains the description within the alt attribute.

<img style="width: 100%; top: -72px;" data-aria-label-part="" src="https://pbs.twimg.com/media/Ceu_z_PW4AEchnB.jpg" alt="Watermelon piñata broken open">

For more information on this feature, check out the Twitter Support article Making images accessible for people on Twitter.

Waze, what is that bar on the left for?

I’ve been using Waze for a few months now, and every now and then, a bar shows up on the left side. I’d glance down and see that it showed “something” was estimated to happen (or last?) for a few minutes, but I could not figure out what. We have a hands-free law here, so I could not legally take my phone off its holder and look at it more closely.

photo inside a car of an iPhone in a phone holder, displaying the Waze app map
Waze app in my car

The screen is probably 18″ from my eyes and I wear polarized sunglasses which makes the app even harder to interpret when glancing down for fractions of a second.

It took using Waze as a passenger to see that the bar’s label also had the word “Jam” (traffic jam?) in a light blue font. However, other times I’ve been driving and the bar has no label, so I’m still not sure what it’s for!

screenshot of the Waze map with a status bar on the left side that has no label to indicate its purpose
Waze left bar with no label

Design Recommendation

This is an easy one. Change the font color to white and bold it so that the word “Jam” is just as visible as the time estimate. And always include a label to indicate why the bar is there.

Waze map showing an orange status bar with "Jam 7 minutes"
Screen capture of the Waze map screen

Geocaching.com App Advanced Search

Geocaching is one of my hobbies and I usually cache with just my iPhone using the official Geocaching.com app. Most of the time, I’m searching by location (find nearest caches) or by a cache’s specific ID. But occasionally, I want to narrow the results using the app’s Advanced Search feature.

One of the advanced options is to narrow by cache type.

screen for the geocaching app advanced search show cache type and difficulty filters
Geocaching app advanced search screen

Issues with geocache type filter

  1. Use of radio buttons when the user can select multiple options. These should be check boxes.
  2. The hit area for each type is very small. I often have to hit the circle multiple times to get my selection to register.
  3. The select all/deselect all option is in a weird spot.
  4. It can be problematic to rely solely on icons because not everyone, especially newer cachers, know about all the types of caches. There is a little “information” icon but it has information about many additional cache types beyond the nine available in the app search. Other filters include labels.

    geocaching difficult and size filters with labels on the icons
    Filter options with labels

Design Recommendations

  1. Change the circles to squares and make the entire icon the hit area for selecting a cache type.
  2. Move the select all option to the end.
  3. Add icon labels.

mock up of cache type selection with boxes and icon labels in place of radio buttons
Cache type selection mock up