NDEAM Accessibility Series - Part 1: Website Images and Alt Text
October is National Disability Employment Awareness Month (NDEAM) where we celebrate another year of the contributions people with disabilities make in the workplace and to the overall economy.
With this year's NDEAM theme of "Advancing Access and Equity," we wanted to take a closer look at accessibility; examining some of the ways that people with disabilities are impacted in the workplace and as customers.
Roughly one in four individuals in the U.S. lives with a disability. That means a quarter of our population and economy are being overlooked or not considered at all when it comes to web access, user experience, universal design and overall workplace accessibility.
Disability Solutions’ own in-house experts will be taking us through an informative series on how we can shift our thinking and awareness and continue to build and advance accessibility for all.
Top Website Accessibility Challenges for People Who are Blind or Have Low Vision: Part 1 - Website Images and Alt Text
The web can be frustrating at times for everyone. So, when you throw a disability and assistive technology into the task, it can become even more daunting, take it from me! As someone who is legally blind and works in the accessibility space, I can attest to the challenge of navigating websites that are designed without much consideration for people with disabilities.
Over the course of the next few weeks, we'll look at 3 common website accessibility issues that come up for people who are blind or have low vision. We will also review some ways to avoid these downfalls and make your website more accessible. Making your website more accessible sends a signal to customers, competitors, as well as future and current employees that your company is committed to true disability inclusion.
Images tell a story without words. That's great if you can see the image. However, if you can't see or have a hard time seeing images, then their use on websites can often cause serious issues. This is where alternative text or “alt text” comes into play. Alt text is a way to describe your image(s) to users who are blind or have low vision.
People with visual impairments typically use technology such as computers and mobile devices with screen reading software. Screen reading software uses computer-generated speech to audibly read everything that appears on a screen out to a user. Essentially, this software takes a mental map of everything that is on a screen and reads it to the user. This software allows a blind or visually impaired person to do a variety of tasks, such as do a Google search, place a food delivery order, or even write a blog post like this one!
So, when a screen reader comes upon an image on a website or application, it will read whatever the image has in the “alt text attribute”. The alt text attribute is the component of the code that describes the function and appearance of the image on a page.
For example, a blind user may come across an image and hear the screen reader say, "124710.png." In this case, “124710.png” is the alt text and therefore gives the user no indication of what the graphic means. Looking at an image on the web that does not have alt text is like being placed in the middle of a corn maze with absolutely no idea what direction leads out. It’s impossible to understand why the image is there and what enjoyment, function, or value it may be adding to the page.
When writing alt text, it’s important to keep in mind that screen reader users will have to listen to the text all the way through. They can't stop or rewind a few sentences back. Therefore, it is a good idea to keep alt text to 50-150 characters long. If you need to go into more detail than that concise 50–150 character alt text, there are a few options to consider.
One option for images that require longer descriptions is to link a footnote indicating a longer description. In the alt text, you could write, "see footnote for longer description”. This way, the user would know to listen for the screen reader’s recitation of the footnotes if they wanted to know what was displayed in the image.
A second option would be to simply consider if the description could be shortened. Consider the meaning of the graphic. Don't editorialize or give your opinion. For example, saying something like “3 happy people” assigns emotion and meaning where there may be none. Since you don’t know if the people are happy, try to stick to more concrete, objective statements about the image. Similarly try to eliminate words like “an image of...” Since screen readers tell the user that an image is present, phrases like this are just extra characters that could be used to create more usable meaning.
If you are considering the meaning of an image and come to realize that it doesn't really serve any purpose, or doesn't bring any meaning, the image should be hidden from screen readers by filling in the alt text as follows: "".
Our first accessibility challenge that we’ve tackled is a big one. Simply adding alt text to your web pages can be a huge first step in creating a more accessible digital space for people who are blind or have low vision. In the coming weeks, we’ll discuss a few other common challenges and how you and your team might work to remedy them for your users.
If you think you may need some help or want to more thoroughly review your company’s website accessibility, consider reaching out to Disability Solutions to learn more.
Comments