Designing for Accessibility

By Beacon News | Published August 23, 2018 | Categories: Web Development , Higher Education

It's easy to forget how revolutionary internet technology is. Today, applying mobile devices in our everyday lives is almost second nature. But, just 20 years ago, you still had to call someone's house phone to make plans.

Think about that. If you were a kid in the 90's and you wanted to talk to your friends, you likely first had to pass a phone conversation with one of your friend's parents. There were hoops. And we had to jump through them.

Not so today. (Enter generic grumbling about those darn millennial)

What makes the internet so powerful is that literally anyone can share and access information on demand (and talk to your friends whenever you want). The democratization of information levels the playing field and acts as a catalyst for all sorts of creative collaborations.

Accessibility is the central tenet of the world wide web. It's what allows for the maximum exposure to 7+ billion pairs of eyes. If you've read anything about net neutrality in the news lately (and, perhaps, wondered what's the big deal) - that's what the conversation is about: equal access to all information (not allowing for preferential treatment of online content).

Accessibility has also become a legal requirement. Which means that if you're building or redesigning a website, there are several things you need to do in order to ensure that everyone -- including people with diverse abilities -- can reasonably access the information you present. This includes thinking about the readability of your text (contrast, color, font, etc.) and how users navigate your site.

Readability: Color Contrast & Fonts

Your website text needs to be easy to read, even for people with impaired vision. There are several suggestions for how to accomplish this goal. The best practices outlined in the W3C Web Content Accessibility Guidelines 2.0 state the following:

• Contrast ratio (visibility of text against a background) must be 4.5:1
• Contrast ratio of large text must be 3:1
• Color should not be the sole visual cue for relaying information, eliciting an action or marking a visual element (removing the underline from a hyperlink, for example, would make it more difficult for visually impaired users to distinguish between regular text and the link)
• Your site should allow users to regulate their size of the text (up to 200 percent of the original size)

It's also important to take into account the use of screen readers by low-vision users. People with impaired vision rely on screen readers to describe the contents of a given webpage. This means that every element that loads on a particular page is included in the page description. Keep this in mind during the design phase. Too many page elements will likely frustrate this particular audience.

Accessible Navigation

Navigation is another important concept where accessibility issue can creep up. One of the best things you can do is enable your site with keyboard navigation, or hotkeys. This not only helps users with accessibility; you'll also greatly satisfy the so-called power users who love to keep their fingers on the keyboard (and off the mouse or touchpad).

Here are a few more suggestions to ensure maximum accessibility:

• Proper headings -- correct usage of H1, H2, H3 is important for assistive aids to organize on-page content
• Menus -- main navigational menus should be accessible via the keyboard, and easily available for screen readers
• Meaningful link text -- screen readers can provide a list of hyperlinks listed on a given page. When providing a hyperlink, it's helpful to include descriptive text of where the link is leading. "Click here" does not communicate much about what the user can expect.

Beacon Knows Accessibility

If you want to know if your site meets accessibility guidelines, give us a call at 866.801.9563. Our team will be happy to run an audit and talk to you about accessibility optimization.