The Reality of Accessible Web Design


“Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

If you could listen to a site, how would you want it to be designed? This may seem like an unusual question, but for the blind, visually impaired, and print disabled, this is the reality of using the Internet, and therefore, the reality of accessible design. When the Audio Information Network of Colorado came to us with the hope of redoing their current site, it quickly became our reality as well.

AINC is an organization where volunteers read and stream local and national news publications 24 hours a day, 7 days a week, so that print disabled residents are able to access the information they need in order to live independent and well-informed lives. For many, sites like this are a connection to the outside world. For AINC, its their largest marketing tool, informing and recruiting the volunteers and donors who fuel the organization. In redesigning their website, AINC was faced with two challenges: foremost, they needed a site that was aesthetically engaging and informative for potential donors, while also standing accessible and highly functional for visually impaired users. This balancing act provided an interesting lesson in not only accessible design, but design in general. Throughout this process, I discovered 3 considerations to keep in mind when designing a site that caters to visually disabled users: content hierarchy, layout, and navigation. These concepts are by no means new, but they play a unique  and vital role in designing an accessible site, as I will discuss below.

In a sense, designing this website was like designing two separate websites for two separate audiences. This required finding a happy medium between form and function. Not only do you have to consider typical visual cues such as color and the size of text, but also how a blind user will experience the site with a screenreader - left to right, top to bottom, in a very fixed, rigid fashion. This forced hierarchy presents a challenge in the way the content is prioritized and laid out. Being forced to rank website content makes you realize how much there actually is, which in turn enables you to cut the bulk and really hone in on what’s important. If you (or the client) can’t decide what content needs to be cut, refer to web analytics.

Layout is also vital to how the two distinct audiences experience the site. To a user who is most likely familiar with the objective of the site, the general purpose for their visit is to log in and listen to a program in as few clicks as possible. For example, login/sign up commands go at the very top of the site with media players directly underneath, so the screen reader picks up on these first, before hitting the navigation or calls to action (donate, volunteer, FAQs) at the very bottom. These action items are brightly colored and high in contrast, so a potential donor or volunteer will be drawn to these right away. Usability should inform design, not the other way around.

A final consideration when designing an accessible site is the navigation. Even though both hierarchy and layout contribute to navigation, there are a few other key details than can make the experience even smoother. In working with AINC, we implemented faceted search in addition to a traditional search box, so screen readers wouldn’t have to list off pages of results. We also added a playlist option, so instead of having to read through program listings of what’s on the air each hour of every day, users can set up an entire afternoon of listening with just a few clicks,. Examples like these are littered throughout the site. By just making a few minor adjustments, the website is more fluid and less frustrating for visually impaired users because all elements are placed in a calculated manner. After all, isn’t it our job to make websites simpler?

Aspects of accessible web design such as hierarchy, search functionality, and a sensical layout can (and should) be emphasized in every design. It is vital to think beyond aesthetics—to consider how your audience intends to use your site. Chances are, your company’s website will have a visitor at some point who is elderly, blind, or print disabled. By making a few minor changes in the way you approach a design, you can ensure that any site you make is accessible to some degree.