<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=652504974959061&amp;ev=PageView&amp;noscript=1">

Drupal for Business

At Duo, we build connections.

4 Ways to make your Drupal Website Accessible

It’s been four years since my understanding of user accessibility completely changed. Looking back on it, I’m embarrassed by my naivety, but the lessons I learned helped me become the person I am today. 

I was working at the time with an educational platform that needed its website more accessible to users with restricted abilities. Unfortunately, my instinctual reaction was to worry that the necessary adjustments for “such a small percentage of users” would compromise the usability of the site.

accessibility-808558-edited.jpgFirst off, I quickly learned the percentage of disabled users was far greater than I ever imagined, considering the US government and the Americans with Disabilities Act (ADA) defines someone with a disability as a person with “a physical or mental impairment that substantially limits one or more major life activity.” 

Once I understood that, I realized that accessibility does not mean giving all users the same experience. What it means is allowing all users to get the same value out of their experience. 

What do I mean by that?

 

Imagine you’re a marketing director for a university and you just produced a beautiful video that highlights all the “real-world” experiences students are able to take advantage of. There are stunning visuals from across the globe, dramatic music and inspiring testimonials. It’s a powerful recruitment tool that will resonate with prospective students and their parents alike.

You want to feature the video on your website, but you also want it to be more accessible, so you decide to insert captions within the video. You also provide a transcript of the video on the same page. You don’t need everyone to watch the video, but you want all of your users to have the chance to collect and process the content.  

 

Countless times I’ve met people who hear this and are scared they will need to tear their website apart and start from scratch in order to make it more accessible. And each time I hear that, my response is simply, “Relax.” There are ways to augment your current experience with accessible features without replacing your current site.

Here are four things you can do to make your site more accessible:

 

  1. Recognize that context matters

Users with either no vision or low vision oftentimes use a screen reader program that audibly says what is on the screen. Contrary to visual readers who can quickly skim the content and design of a page, a person using a screen reader has to navigate through a page linearly, item by item.

The two ways screen readers are able to skim content involves navigating from link to link or heading to heading within a page. What that means is someone should be able to understand what a link or heading is about, even if it is read out of order. For example, if you have a top navigation link titled “Campus” that showcases student activities and other events for students to participate in at your university, consider changing the name to “Campus Life” or “Get Involved.” That way all users — sighted and unsighted — have a better sense of what to find on that page.

You also should make sure to provide clues of where users are in the midst of a multi-step process. If you have an application on your page that takes 10 steps to complete, you can easily indicate which step people are on. 

Another way to offer clues is to use breadcrumbs. Although this type of navigation trail is a little dated, it is extremely helpful for someone who is browsing with a screen reader.

 

  1. Use “skip navigation"

    This one is so simple, and oftentimes it is the mistake I see most websites make. Think about your website for a minute. How much content do you have in your header and top navigation? Now remember what I said about screen readers and how they read linearly. Someone who is clicking through your site would need to go through each and every one of those items before ever getting to the main content of the page. If they clicked to go to another page on your site, they would have to click through each item again. That just doesn’t work.

    That is what a “skip navigation” link is for. The link is just what it sounds like: it gives a non-sighted user the opportunity to pass all the navigation content and move directly to the main content of the page. If you’re worried about the aesthetic of having a “skip navigation” link atop your page, don’t worry. You can easily code the link to be invisible.

  2. Always use alternate text for all images

    Screen readers only read text; they do not interpret charts or describe pictures. The “alt” tag in your code provides a textual description of an image. Since screen readers can’t read images, this tag gives the screen reader a way to read a picture. Along the same lines, never use an image to represent text or make a button with text on it. That’s not a friendly user experience for anyone, and it’s also just a bad practice since it doesn’t work well on mobile.

  3. Have a fallback for any on-screen alert

    When you want to alert your user about an action, make sure you notify them using more than one channel. If a user on your website forgets their password, how do you alert them? Does the box become red? Is there a sound notification? Is there an error message? You should have two different types of alerts to make sure the notification is recognized by as many users as possible.

    With that in mind, think about your online application form. If someone makes an error within one of the fields. how do you acknowledge this? If the page refreshes and there is a note above the field that says something is wrong, or even if the box turns red, it will be extremely difficult for an unsighted user to realize there was a mistake.
    Remember once again what I said about screen readers and how they read linearly. The screen reader would read every title, field and field entry above where the mistake was made. Only after navigating through all that content would the user be alerted of the error.

    The simple solution is to put two error messages on the page. The first can be on the top of the form that says “An error has been made” or “Please check the fields below.” You can then have a second error message above the field where the mistake was made.

  4. BONUS: Think about your audiences

    This post primarily focuses on individuals with visual disabilities, but don’t forget that ADA compliance is not limited to unsighted users. Remember to also consider users who suffer from cognitive, muscular or auditory disabilities.  We will examine accessibility as it relates to these audiences in future posts.

Do you have a question about accessibility and your website, or would you like to see us touch on a specific accessibility challenge in a future post? Feel free to email me directly and let me know.

Topics: Design Strategy

Popular Posts