Blog

5 Quick Tips to Web Accessibility for Your Utility Website

One of the main goals for your website is to make sure it is easy for your visitors to find what they’re looking for. Even with the latest design and the freshest content, for millions of Americans, it’s still nearly impossible for them to complete online tasks. That’s because many website managers don’t format their content in a way that works for everyone, including those with disabilities.

According to WebAIM (Web Accessibility in Mind), one in four American adults lives with some type of disability. That’s a quarter of the U.S. adult population that cannot access information in the same way. By not taking these site visitors into consideration, you are excluding a large chunk of people from finding information on your website, and unfortunately, that is discrimination.

So how do you avoid discriminating against all of those visitors? That’s where we come in. Here are 5 of the easiest things you can do to your web content today to ensure it is accessible for everyone.

1. Alternative Text

Imagine closing your eyes and having a friend describe an image to you. Essentially, that is what alternative text, or alt text, is. Alt text is the text alternative to non-text content. This means that for someone visiting your website with impaired vision or blindness, your images are of very little use to them without alt text.

  • According to WebAIM, alt text is the first principle of web accessibility. Now, WebAIM also says it is challenging to implement, but that depends on the content management system you use. With a Powerful website, adding alternative text is easy and can be added at the same time you upload a new image. This alt text carries throughout the site so that any time you utilize the image the assigned alt text will be used. See? Easy!
  • Having alt text on your images allows those using assistive technology, such as screen readers, to understand the message conveyed by the image. The screen reader will read the alt text aloud to the visitor so they understand the purpose of the image and how it enhances the content of the page.

How to Use Alt Text

  • a young woman sitting looking at a computerAlt text should be a visual description of what’s in the image. For example, instead of simply using this image’s file name, a good alt text could say, “a young woman sitting looking at a computer”.
  • In situations where the image is purely decorative, leave the alt text blank so that the screen reader skips over the image and moves on to more important content.
  • If an image is linked to another resource, the alt text should tell the visitor what they’ll find by visiting that link.

2. Intuitively Named Links

Speaking of links, when adding links into your content, whether that be links to other pages within your site or links to third-party resources, always use intuitive naming conventions. Sighted visitors can visually see links on a page however, visitors with visual impairments use the technology in screen readers to find the links for them.x

Instead of simply copying and pasting your link into the content, be sure the link is created so that it reads appropriately. For example, if a sentence reads, “Visit https://webaim.org/articles/visual/ for more information on visual disabilities,” for a visitor using a screen reader that link is going to be read aloud precisely as it appears. Who wants to hear all of that? A better way to create this link in your content is, “Learn more about visual disabilities.” The text in the sentence explains what the visitor will find by selecting the linked text.

Screen readers also have the ability to pull all of the links out of the context of the page and into a list. So if all your links say, “Click here to learn more about visual disabilities,” all the screen reader sees is, “click here”. What are we clicking on? What will I find when I visit that link? Who knows. All the more reason to ensure your links are intuitive and clear.

3. Use Headings

Imagine reading a news article without any headlines or sub-headlines. Where are the key points? What’s the main takeaway? It would just be a wall of words and chances are, you’d skip to something else anyway.

Headings are used to describe the content that follows it, much like a news headline. Headings help guide sighted users visually, but they also help the visually impaired. The heading tags built into heading HTML allow those using screen readers to use the headings in a page as an outline and will enable them to navigate or “skip” through a page to the content of their choice by scanning the headings. This is much like the process a sighted reader would go through when scanning through the page visually.

4. Don’t Rely on Sensory Characteristics for Instructions

It is easy for sighted visitors to navigate around your webpage using their eyes, but that is too difficult for those with visual or cognitive impairments. Things like color, shape, visual location, and orientation cannot be the only means of communicating information. According to WebAIM, cognitive disabilities are, by far, the most common type of disability. Some web content is too complex to be understood by some visitors due to their cognitive disabilities.

Instead of, “Click on the link to the right,” simply provide the link within the body of the content. Visitors relying on screen readers can’t see directions like right or left and those with cognitive disabilities may not understand those directions. Instead of saying, “Please see the sidebar for more information,” either provide the information in the main content area, provide an anchor link to the referenced area of the page, or add a heading to the sidebar area that can be used for navigation.

5. Use Color Cautiously

According to the National Institute of Health, the most common type of color blindness makes it hard to tell the difference between red and green. Another type of color blindness causes issues with blue and yellow, and some people cannot see colors at all. However, it’s not necessary to eliminate color from your website, but you must be sure color isn’t the only method of conveying information.

For example, take this image of the New York public transportation system. The various routes are identified using color. When color is removed, it becomes virtually impossible to differentiate between the routes.

New York City public transportation system in color

New York City transportation system as viewed by someone who is colorblind

Instead, ensure the page’s content relays the same information available in the image so that it’s accessible to everyone, even those with color blindness.

With so many resources available, it’s hard to know who to rely on to ensure you finish with an accessible, usable website. But, according to the great Rick Mears, the 1991 Indy 500 winner, “To finish first, you must first finish.” And you can’t finish first if you don’t start. So, start small by using these 5 steps to set your web content up for success by ensuring everyone visiting your website has an enjoyable experience.