How accessible design helps everyone

I was born cross-eyed, and after two corrective surgeries, I thought I could see like everyone else. But I still had trouble driving, navigating stairs, and playing sports. In my late twenties, I learned that I mostly saw with one eye, and I couldn’t see in 3D. This is considered a hidden disability (similar to dyslexia or color blindness), and people with hidden disabilities could go years without knowing why some basic daily activities and interactions with technology are challenging. 

There are millions of people with hidden disabilities and over 2.2 billion people who have a vision impairment around the world, but more than 70 percent of all websites are inaccessible to them. Often, there is a lack of awareness among developers and designers about both the challenges as well as how best to design and code for accessibility.

To bridge this gap, our Material Design team updated the accessibility guidelines on how to  make images more accessible for websites and applications. The new guidelines explain how to write HTML code in the correct order for images to be read aloud by a screen reader, how to write alt text and captions for  sighted and non-sighted people to understand images, and which types of images have to follow accessibility requirements. By following these guidelines, designers and developers can prevent common mistakes that may leave beautifully designed websites and apps unusable for people with visual impairments. We’ve started applying these rules to images in the Material Design guidelines, and here are a few of the key lessons we learned:

Designing and coding should start with inclusivity in mind 

Imagine how someone with a visual impairment experiences your website or app.When text is embedded in images, it may not be read aloud by screen reader software used by people with visual impairments. By implementing captions that describe how the images relate to the topic and alt text to explain the contents of the images, screen reader users will hear what the images are about. 

The captions appear below the photo and explain the who, what, when, and where about the image. The alt text describes the colors, sizes, and location of the objects in the image.

Designers put images in a specific order on a website, such as a four-step recipe with photos showing what to do for each step. However, if the HTML is not in the correct order, the screen reader will read out the alt text for each image in the wrong order, and the screen reader user may follow the recipe incorrectly.  To prevent such (untasty) problems, we provided visual and text examples of the correct HTML code order.

The HTML reflects the visual hierarchy by reading the content from the top left (Step 1) to the top right (Step 2), bottom left (Step 3) to bottom right (Step 4).

Not all images are alike

Decorative images such as illustrations of fruit on a recipe website don’t have to follow accessibility guidelines because they don’t have critical information. However, informative images such as the foods in a recipe, do because they convey information that is relevant to the adjacent text. The updated guidelines explain how to ensure informative images follow accessibility guidelines for color contrast, text size, captions, and alt text. Images such as logos, icons, images within a button, and images that are links, need alt text that describe their function and not what they look like.  

Related Article

Using AI to give people who are blind the “full picture”

Google is helping people who are blind browse the web by incorporating machine image descriptions in Chrome.

Read Article

Inclusivity helps everyone

Making products accessible means that even people beyond your target users may benefit. Captions help sighted people understand images. Alt text appears when images don’t load, helping sighted users understand what they are missing. People reading an online menu in poor lighting, such as during an electricity outage, might experience a temporary disability. They are more likely to be able to read the menu if it has good color contrast and large text. 

Disabilities have too often stayed hidden and taboo. I believe we are entering a new age where disabilities can serve as a precursor to improving the world for others. The first time somebody at Google saw me looking at a document that was enlarged to 125 percent, I was absolutely mortified because I wasn’t keen on sharing my visual impairment. But then I realized that, in fact, being open and vocal could help make products more useful and accessible for everyone. I hope that these guidelines can help ensure that developers and designers implement accessibility so that those of us with visual impairments can fully access the content of their websites and apps.

by Susanna Zaraysky via The Keyword