» All Posts «

Rabbit Rhetoric: Accessibility

Jackrabbit Design March 30, 2016 Rabbit Rhetoric

Share Comment 0

We often think of the internet as a broad expanse of endless information and means of connection to every corner of every part of the world.

We can see remote parts of the globe, read an in-depth narrative of obscure pieces of history, and even educate ourselves beyond the boundaries of the classroom.

The internet, however, is not so easily explored by absolutely everyone with access to a computer. Our world population is comprised of an extremely diverse mix, which includes those with disabilities that restrict their capacity to access everything on the web. All sites should be mindful of this, and some need to be especially aware of the wide range of accessibility needs, such as those that represent public institutions or educational opportunities. Fortunately, when we design sites that need to serve the largest possible segment of the population, we have a set of guidelines to which we can adhere.

Why We Need Accessibility

The internet and its associated technologies have given those with disabilities a whole new level of access to information, entertainment, education, and many other opportunities. Unfortunately, barriers inadvertently set up on many sites often limit the technology needed to read or access this network. For instance, those affected by blindness use readers to access websites; if the reader encounters an image that doesn’t contain alt text describing that image, the reader doesn’t know how to interpret it and some of the page’s meaning could be lost. Mitigating this issue, and many others, is very simple and very important.

BCBS menu bar

Steps Taken

Given the significance of accessibility, you might expect the steps taken to be drastic. However, a few small changes can make a big impact. The basics include:

  • Modifying colors to make sure that they’re as distinguishable as possible
  • Adding alt text to images to allow an explanation of content and context
  • Ensuring that a text-only view and navigation skip option are available and easily viewable
  • Adding captions to multimedia portions of a site
  • Adding code to support screen readers, and adding ARIA fields that tell the reader the role of each element of a page
  • Ensuring that a user can navigate a site using only their keyboard
  • Making good use of header structures to help determine the hierarchy of a page

We implement these changes, and several others, during both the design and development phase. They do not deter from the overall site, and they’re important in allowing the site to be accessed by the largest possible population.

Example

We designed an Annual Report for Blue Cross Blue Shield of Massachusetts. They wanted to make sure that their site conformed to accessibility standards; the most obvious changes we implemented were to add alt tags to images, and make everything on the site have a high level of visual contrast so that each element stood out and was easily viewable.

Screen Shot 2016-04-01 at 11.41.09 AM

Screen Shot 2016-04-01 at 11.41.16 AM

To analyze our success in making the contrast strong enough to meet accessibility guidelines, we ran a color contrast analysis:

Color Contrast Analysis for BCBS

The above example showcases the standard for text on a page, where the contrast ratio must be a minimum of 4.5:1. We made sure that every page of the Annual Report met this standard. Despite creating a very color- and image-heavy site, we were able to ensure that the site is widely accessible without losing any of its aesthetic quality.

Want to learn more about accessibility standards and guidelines? Check out this site. And if you need help modifying your site to make it accessible, feel free to reach out to the Rabbits!

0 Comments

There aren't currently any comments for this entry.

Leave a Comment