Accessibility in 1 Hour: Improving the Phase2 Website

When I say, “Section 508 Compliance,” “accessibility,” or “WCAG,” what comes to mind? Overwhelming? Cumbersome? or Unnecessary?

I’m here to alleviate those fears! As a person who is deaf and understands accessibility needs intimately, at one point, Section508 and WCAG were really overwhelming to me too. So I get it: you’re not sure what’s wrong with your site, or where to start-- and I’m here to help.

Catharine McNally, Associate Product Manager
#Accessibility | Posted

When I say, “Section 508 Compliance,” “accessibility,” or “WCAG,” what comes to mind? Overwhelming? Cumbersome? or Unnecessary?

I’m here to alleviate those fears! As a person who is deaf and understands accessibility needs intimately, at one point, Section508 and WCAG were really overwhelming to me too. So I get it: you’re not sure what’s wrong with your site, or where to start-- and I’m here to help.

Before I could get on my soapbox and talk about accessibility, the Phase2 website needed to be made accessible first. My initial analysis, as seen below, uncovered an immediate handful of accessibility issues. While it may look like a lot, these were fixes that were resolved within an hour. And guess what? These same issues probably apply to your website too. This post will help you understand why and how you (or your developers) can fix it. You see, if you take these incremental steps, you’re improving the experience for 10% of web users who may need assistance exploring your website.

The ideal outcome of this was to create a more usable, accessible site, as well as have our developers be more educated about preventative measures in not making the same mistakes on future sites.

Here’s an initial analysis of the problems that I found on the Phase2 homepage:

Screenshot of Phase2 Homepage with handwritten notes of all accessibility violations.

Remember. It’s not as scary as it looks. It’s about taking a step back and looking at a few of the basic elements of website accessibility.

 

 

Phase2 Logo:

Screenshot detail of logo missing alt textThe Issue:

The absence of alternative text on the logo prevents a user from understanding the image. Users who are blind screen-reader, which reads aloud the information presented on a website.

The Fix:

Add alt-text field and text to the Logo: “Phase2 Technology logo”

 

Homepage Rotator:

Screenshot detail of homepage rotator unable to read text, pause, or receive focus.

The Issues:

The homepage rotator cannot be paused. This is a problem for users who need more time to view the item, or navigate to the “Learn More” button with a mouse.

Users who use a keyboard to navigate websites cannot get the keyboard focus on the “Learn More” buttons.

Screen-readers cannot pick up the text within the rotator – It does not read “Finding Form & Function.” Instead, it just reads the title of the image in the rotator.

The Fixes:

The homepage has both a pause button inserted along the bottom left for users with a mouse to pause. For users of a keyboard, when entering the rotator, it automatically pauses.

Include proper markup in the rotator, so that the Title and Description texts are focusable by the keyboard and can be read by a screen reader.

 

Read More Links:

Screenshot detail of a "Read More" link not providing enough context. The Issue:

Read More Links are used everywhere on sites. They’re certainly helpful, if set up the right way.  The current problems with “Read More Links” is that it doesn’t provide enough context to a user who uses a screen-reader. You see, oftentimes these users pull up all the links to get a quick understanding of what’s linked on the page, and this is often what they get:

Read More

Read More

Read More

Read More

So would you know where you would end up if you clicked on “Read More”? Yet alone deal with a page full of “Read More”? I’d be clueless too.

The Fix:

Provide better “Read More” context by adding a reference to the content of what the “Read More” link targets. For example, “Read Full Press Release”, or “Read Full Blog Entry” This is particularly helpful when you’re on a mobile device, when you may not always see which “section” of the site you’re in, as you’ve pinched & zoomed into the site for easer readability.

For users who are blind or have low vision, incorporating the title of the referenced link would be useful. To prevent sighted users from seeing this redundant text, it can be hidden by CSS. For example:

“Read Full Blog Entry: Cartoon Sketches on the Web”

Where “Cartoon Sketches on the Web” is hidden and rendered by the screen-reader.

Contrast:

Screenshot detail of post date contrast being too low.

The Issue:

When a site has poor color contrast, it becomes challenging for anyone to read, especially those with low vision. In the case of the Phase2 website, low contrast is present in the Main Navigation, “POSTED” links, and some sidebar text that is in light gray.

I’d also like to challenge you to think about how often you’re outside, under bright sunlight with your smartphone in your hand, visiting websites. Aren’t you sometimes glaring your hand over the screen, or going under a shady tree to better see the site? Contrast makes a difference there, too. The lower the contrast ratio, the higher chances people will not have a good experience.

How to test for contrast:

Firefox (Easiest, Recommended): Use the plugin: https://addons.mozilla.org/en-US/firefox/addon/ wcag-contrast-checker/ to spot-test the contrast of the site. There are varying levels of contrast; Phase2 follows WCAG AA. The “large” refers to font larger than 14 px., and “small” for fonts smaller than 14 px.

A website that you could visit has a “calculator” to use, so you’d need to grab the HEX values using a color picker and plug them into the calculator to evaluate the contrast: http://juicystudio.com/ services/luminositycontrastratio.php

In closing, this is actually a great case for demonstrating how your site can be made accessible “after the fact.” At Phase2, we’re in the process of re-designing the website, so my colleagues and I are able to implement innovative and creative accessibility practices the right way from the start. I’ll be covering those “good-to-know-before-you-start-development” strategies in forthcoming posts.

That’s it y’all. Feel a little less overwhelmed? I sure hope so! Please don’t hesitate to reach out here in the comments with the questions you have about accessibility, or if there are particular areas of accessibility that you’d like for me to cover in a post.

Catharine McNally

Associate Product Manager