How We Made Our Client’s Site Accessible by Law

by on 03/22/16 at 10:28 am

It was just another day at the office until we got a quote request from a website owner in California. It was a first time for our team, as we only provided web design and development projects so far.

This client was a California-based disability center. We had to rebuild his website, which was the easy part. But we also had to follow certain web legislations passed in California.

We were so used to clients asking for an “engaging” website. But this was the first time a client has asked us to design an “accessible” website.

Web Accessibility Lawsuits

On UXMovement, we’ve seen articles on how designers can ease disability problems (from motor disabilities to color blindness and dyslexia). More designers are becoming conscious of their work for the welfare of the disabled.

accessibility-lawsuits-chart

But web accessibility is still struggling as more sites are adjusting to the rules. Since the start of 2015, there have been 61 lawsuits filed or removed to federal court. Retail websites are getting the most attention.

With our client’s site, we’re not only obligated to follow design principles, but we have to be aware of Section 508. It outlines “binding, enforceable standards that must be adhered to in order for E&IT products to be accessible to persons with disabilities.”

Our client emphasized that web accessibility was the main concern that he had on his site. There were several concerns we had in building his website:

  • He started his site around the early 2000s, so the site is full of Flash applications.
  • Website elements such as meta tags and image texts aren’t present.
  • He has a lot of content on his website, particularly PDF guides and Videos.
  • He has a big photo gallery of his center.

Sounds like a typical, old website just ripe for a redesign, right?

Our Approach

After running an audit, we salvaged the remains of his old site and did away with things he no longer needs. The site content was frequently updated with blog posts, PDF guides, and videos.

Before we proceed on redesigning the site as a whole, we referred to Section 508 Checklist. It’s not the official documentation, but it’s a guide that extracts the principles from it.

Here’s a step-by-step approach of how we dealt with the redesign.

SEO Audit

Redesigning and making a site accessible isn’t all Photoshop/Illustrator magic. We had to run an SEO audit on the site and found there were a lot to fix.

seo-audit

HTML helps screen readers read out text on a site. Aside from text, screen readers can also read graphics through the ALT text image attribute. It has been a common, lazy practice to write the filename as the ALT text of images. But reading out the filename isn’t descriptive for users.

Section 508 suggests that writing ALT texts should be accurate and succinct in describing photos. We wrote the ALT text as it is, describing what we see in the photo. To avoid confusion, decorative elements for visual appeal were given an empty ALT tag as recommended in Section 508.

Contrasting Button Shape

The design we used appealed to the eyes, but we did not only use color to convey important information. This way, users with color perception problems would not miss out.

contrasting-button

One technique we implemented on the navigation menu is a contrasting button shape. Instead of mere color and an underline to guide users in selecting an item, we used a color-filled box to make it more obvious.

Screen Reader Testing

To ensure the site was screen-reader friendly, we tested it with NVDA (NonVisual Desktop Access). We made it possible to browse the site with the use of keyboard strokes.

There were instances where we needed to hide content from screen readers due to visual cues only applicable to sighted users. We included a Skip Navigation button so they can view the main content right away. Along with a Back to the Top button once they reach the bottom of a page.

Managing Media

Perhaps the most challenging part was managing our client’s PDF guides and video content. Although we reduced the materials to a workable amount, it was still a struggle.

Video Captioning

Working with videos requires caption synchronization and accuracy. Knowledge of technical jargons was necessary. There were medical terms mentioned that we had to double-check for correct spelling.

video-caption-spelling

We also had to make sure that the captions were readable and evenly spaced in the video. It’s important to use a neutral background in creating video demos like the one above. It makes the subject matter easier to focus on, and easier for the video editor to place captions in.

video-closed-caption

Another way to aid the hearing disabled is to include descriptions of non-speech elements in the video. Closed captions help fill in the silence when there’s no one talking. They are the text for non-speech information such as the identity of speakers, their manner of speaking, along with music or sound effects.

Some media players offer captions that are color blind friendly. These captions highlight discussions between two speakers using distinct colors to avoid confusion on who’s currently speaking.

Transcriptions can also help you get your message across to the hearing impaired. Arrange it in an outline form to make presentable and easy to read. Not only does it make the video content accessible, it’s also good for search engine optimization.

Flash

Say goodbye to Flash and design your site with HTML5. Flash is no longer supported on major browsers. Expect poor accessibility from using Flash in your design.

Another type of flash you should say goodbye to are flashing effects in videos. What seemed to be an innocent children’s show triggered seizures in hundreds of viewers in Japan. Photosensitivity can cause nausea, vomiting, or worse, epileptic seizures like what happened in Japan.

PDF Files

The site used PDF files to disseminate documents for printing. Documents such as e-book guides were saved as a PDF.

We followed HHS.gov’s PDF File 508 Checklist and set these guidelines for the client before publishing another PDF guide.

One of the major struggles in re-creating these PDF files was restructuring the content. Most of the PDF files were saved without a hierarchical outline to make it accessible. We had to reformat them with a clickable outline so that users could locate content without traversing through many pages.

Images that accompany your text need subtitles underneath, so screen readers can read the description. If possible, you should translate images with heavy text into a table format.

pdf-graphic-table

Table 1.1 What Do We Waste Most?

FoodsStatistics
SaladsAlmost 50% of what we buy, we throw out
Fruit & VegetablesAlmost 25% of these are thrown out.

Potatoes are the most wasted vegetable.

Bananas and apples are the most wasted fruits.

Bread & BakeryAlmost 20% of these are wasted
Meat & Fish10% of these are wasted

The easiest way to get a PDF accessible file is through Microsoft Word. Use the Styles and Formatting pane to titles, headings, quotes, etc. If you’re working on a long guide with section headers, it’s best to include a Table of Contents. Generate the table of contents via Word, don’t do it yourself.

word-doc-formatting

Afterward, save your file as a PDF. Before you click OK, make sure to click on Options, then tick all the options under “Include non-printing information”. This will include PDF structure tags within the document to make it accessible for all.

word-doc-pdf-tags

Tools We Used

We used the following tools to aid us in checking the accessibility of the site. Please note that most of the tools we used are related to visual impairment because of the nature of our client’s business:

WAVE Web Accessibility Tool
A general evaluation tool that assesses how accessible your site is. You can browse the tab at the left for errors that need resolutions.wave-tool

Tanaguru Contrast-Finder
Tanaguru Contrast-Finder finds correct color contrasts for web accessibility. It can calculate the contrast between two colors, and check if it is high enough. It also tests for alternatives you can use.

No Coffee – Chrome Extension
This was used specifically to simulate different visual impairments. Since the target users of our client’s website were visually impaired, we needed to get a “feel” of what they saw. It was hard to find a proper color combination for the site’s theme, but it was an eye-opener for us designers who worked on this project.

Visolve
This tool helped us with quick simulations of color vision deficiencies. it was easier to upload the image we were working on. Our goal was to use colors that didn’t fade together. We wanted to make it easy for users with any type of color blindness to navigate the site.

visolve-tool

SEMRush / Raven
We used several auditing tools such as Raven and SEMRush. In our experience, Raven helped in specific parts of the audit. SEMRush helped us detect issues such as language declaration.

If you don’t have the budget for these tools, I recommend using free website auditing tools such as MySiteAuditor and Screaming Frog. While they’re limited in function, they get the job done.

Final Thoughts

According to World Bank, one billion people (15 percent of world population) experience some form of disability. One-fifth of the estimated global total (110-190 million people) experience significant disabilities.

Because of technological innovations, we have the potential to make the internet a place not just for anybody, but for everybody. Web accessibility can help one billion people discover and learn information that was once unavailable to them. By taking advantage of these accessibility tools and best practices we can all make the web a better place.


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Vince is a secret web designing ninja at WebsiteSetup.org. They offer a free guide on how to make a website at their dojo! While he’s not splicing on Photoshop, he plays the ukulele in hopes of becoming a better musician.

Leave a Comment