What Does an Accessible Website Look Like?

Posted on Jun 15, 2016


You want to create a positive experience with consumers, both in person and online. How can you ensure your website works well for everyone? Make sure members with vision, hearing and mobility challenges can access and understand your online content.

Utility websites should consider following the Americans with Disabilities Act website accessibility guidelines by 2018. Wonder what an ADA-friendly website looks like? Here’s a great example.

Inside Peninsula Light’s Website Redesign

PenLightWebsiteRedesign

Peninsula Light Company in Gig Harbor, Washington, enlisted Ruralite Services to redesign their website, PenLight.org, in April.

The new responsive design is mobile friendly, a great perk for PenLight members looking at the site on smart phones or tablets. But the biggest change was an eye toward ADA guidelines.

The old website design featured a rotating slideshow with text-heavy graphics, two navigation sections (a line at the top and a list of quick links on the left side) and a drop-down menu for services.

These design choices made viewing the site difficult for members with vision and cognitive challenges. Videos are not used on the site, but if they were closed captioning would have been an issue, too.

The new design made four big changes:

  1. Avoid text overlays. To make sure anyone could easily understand content, PenLight removed graphics with heavy text overlays. Instead, program promotions (paperless billing, Project Help, Ambassador Program) use images with blocks of text underneath.
  1. Add a slider advance option. A slider with program marketing messages changed from automatically rotating messages to only advancing when an arrow is clicked.
  1. Streamline navigation. Five buttons with the most common actions take center stage, with words under the button icons clearing explaining the content (Manage Account, One-Time Payment, Prepay Program, Power Outages, and Save Money and Energy).
  1. Tag images. Images were tagged with meaningful alternative text.

“We’re very pleased with the outcome,” says Jonathan White, PenLight’s director of marketing and member services. “We have gotten great comments from our staff and members. The end result was beyond my expectations.”

 

How Can Your Site Improve?

Some elements of a website, such as slideshows and PDFs, can be fixed once and require no further action. Other aspects, such as image tags, must be regularly maintained.

  • Pause-enabled Slideshows: Slideshows must have a pause function. Imagine how frustrating it might be to have a screen reader tell a consumer what one slide says, only to get interrupted when the next slide appears.
  • Rich-Text Documents: PDFs present a problem for vision-impaired readers. Since most PDFs are one big image, screen-reading software cannot read them. Consumers who use text enlargement programs are also out of luck. We recommend publishing documents in HTML or another rich-text format in addition to the PDF format.
  • Image Tags: When you upload an image to your website, you can add a caption and alternate text. No matter how you describe an image, put something in the alternate text box. Otherwise screen readers read out the location of the image file instead. Wonder how many of your website’s images need alt text? Use WAVE, a very basic website accessibility evaluation tool. Plug in your website address to see what alternate text pops up for your images. But this tool is not foolproof—far from it. Users often assume everything they see is a cause for concern, but often flags can be false positives. There are also issues WAVE often does not pick up that can be cause for alarm. Human eye review is the best approach. The WAVE tool is just a starting point.

When you look beyond simple structural changes, website accessibility is more art form than science.

Consider image tags. Every time an image is added to a website, it must be tagged with a description of what the image shows. How do you make those tags meaningful? Do you describe the colors of a sunset by a soaring mountain or simply say the image depicts a mountain with the sun setting nearby?

Website managers who take the time to tag all images with alternate text are 80 percent of the way to website accessibility. But this is an ongoing effort, much like cutting your grass. Websites are dynamic, and must be maintained.

Whoever creates content for your website plays a big role. Train everyone involved with the website to keep accessibility in mind.

To make sure your website follows accessibility guidelines or to learn about training, contact Charlie Stanley, Ruralite’s website solutions manager, at CharlieS@Ruralite.org.

 

Want More Tips?

2 Comments

  1. “Do you describe the colors of a sunset by a soaring mountain or simply say the image depicts a mountain with the sun setting nearby?”

    I’m a little confused about this – is one of these necessarily better than the other, or does it depend on the website? I would think a simple description would be better, but I’m pretty utilitarian when it comes to pretty much everything.

    Post a Reply
    • Great thought, and it shows how accessible design can be an art form. I think simple descriptions are best unless the website uses images as the dominant content (graphic design websites, for example).

      Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *