5 easy ways to make your website more accessible

Stop for a moment and think about yesterday. Picture how much you used your computer to navigate your day. Did you order something you needed online? Did you apply for a job? Did you schedule a doctor’s appointment?

Let’s face it, we all rely more and more on websites today than we have at any point in history. You don’t even have to leave your house to pay bills, grocery shop or even visit with a doctor. We’ve also all had those frustrating moments when something just doesn’t work properly on a website. Now, imagine if that was an everyday problem for you.

Websites are supposed to be “user friendly,” but that often isn’t the case for everyone. Many times, websites aren’t designed with accessibility in mind so that anyone with a disability can use them.

According to 2012 data, close to one in five Americans lives with a disability of some type. Worldwide, approximately one billion people – or 15% of the world’s population – lives with a disability. As part of Thursday’s eighth Global Accessibility Awareness Day, Thrive Internet Marketing Agency is committed to helping raise awareness for digital access and inclusion affecting all people with different disabilities.

Thrive designers and developers work closely with clients and recommend using Americans with Disabilities Act best practices.

“My job is to solve problems,” Thrive Digital Designer Shawna Armstrong said. “How do I get this product in front of more people? How do I make this product more efficient? If I’m ignoring a large part of the population then I’m not doing my job well.

“Every person no matter what they’re dealing with, if it’s a temporary or permanent disability, deserves to be able to use a website. The web is so integrated into our daily lives – we watch movies, we apply to jobs, we shop for gifts. To take that ability away from someone is not acceptable.”

5 easy ways to make your website more accessible

By improving the accessibility of your website, you make it more usable for anyone, whether they’re dealing with a permanent disability (such as visual impairment) or temporary disability (such as a broken arm) or even a situational disability (such as bright sun on a screen).

Also, you expand your potential audience reach, ensuring you don’t seclude any user or potential customer.

Don’t fear, you don’t have to commit a lot of extra resources to making your website more accessible. 

1. Make sure your site is usable without a mouse

All users should be able to clearly and logically navigate your website content. However, not everyone can use a mouse or trackpad. Assistive technologies help people with disabilities access websites, helping to ensure the information and functionality is accessible to every visitor. Some people use a keyboard, single-switch input, mouth sticks (used as a typing stick or page turner) or screen readers.

Avoid elements that only activate when a user hovers over items with a mouse because keyboard-only users or screen readers usually aren’t able to access them. You can easily test your site by trying to navigate it without a mouse.

Ask yourself these questions:

• Is all content accessible using only the tab function on a keyboard?
• Do I have a clear focus state?
• Does the tab order flow logically?

For some additional help you can visit WebAIM, which provides a guide for keyboard accessibility design.

2. Add alt text to all images

Another way to ensure your website is accessible for screen readers is to add alt text to all of your images.

Alt text is a brief description of the image, such as “Young person with glasses working on their laptop in a busy coffee shop”. Most users never see the descriptions, but screen readers rely on them. A screen reader is a form of assistive technology that is used by people who are blind or visually impaired. The software application uses a Text-to-Speech (TTS) engine to translate on-screen information into speech.

What makes good alt text? The text should contain the message you wish to convey through the image and it should be fairly descriptive. This is vital for content such as chart and infographics. If there is text included within the image, that text should also be included in the alt format.

However, you can leave the alt text empty if the image is only being used for decoration.

Ask yourself these questions:

• Does every critical image (non-decorative elements) have alt text?
• Is my alt text descriptive?
• Is all information displayed visually (such as a chart) represented by alt text or another method?

Well-crafted alt text can actually improve your site’s SEO as well. That could mean more traffic and conversions for you. Make sure you provide descriptive summaries for your images – and include keywords when applicable – to boost your SEO through alt text.

3. Rethink color choices

Color is a critical but often overlooked element of a website. Different people perceive colors in unique ways, so your site won’t look the same to everyone. Color blindness is a common disability. Red-green is the most common form of color deficiency followed by blue-yellow. You should design websites using a high color contrast and additional methods than color alone for hyperlinks, such as bold or underlined text.

Trello has a great feature that uses patterns instead of colors to represent different labels.

“Call-to-action buttons on websites are usually represented by bright colors,” Armstrong said. “Most people skim websites, so if the call-to-action button is in a color range someone struggles to see, then you might miss a sale.”

Your text can also be difficult to read for some if there is low contrast between the background and foreground text. Make sure your text stands out against whatever background you choose.

Not sure how to measure contrast between colors? You can find some color contrast checking tools at WebAIM. We also really like Contrast Checker.

4. Don’t use auto-playing media

Here’s another way to improve a website’s accessibility, one we can all get behind: Don’t use media elements that start without the user first prompting them.

“It’s really annoying for everyone when you visit a page and it starts blasting noise,” Armstrong said. “While most of us quickly click the distraction ‘off,’ those reliant on assistive technology may not be able to turn it off very easily, or at all. It’s a quick way to lose visitors.”

Figuring out how to turn off the media can be especially difficult when using a screen reader. Most websites today use JavaScript to add interactivity and functionality, but dynamic content can cause problems for screen readers. So, developers have to keep that in mind to ensure proper accessibility.

Not only can auto-playing media be annoying, but it also can be a health hazard for anyone with photosensitive epilepsy (PSE) who is sensitive to rapidly flashing lights and moving patterns.

Here’s a free PSE analysis tool developers can use, via the University of Maryland’s College of Information Studies Trace Research & Development Center, to identify seizure risks in their web content and software.

Also, it’s best to avoid carousels and sliders in design to keep from frustrating a user who needs more time to absorb the information before moving onto the next image or slide.

Ask yourself these questions:

• Can all content be started by the user (with no auto-play)?
• Can all media players be used with a keyboard?
• Are there rapidly flashing lights and moving patterns anywhere?
  

Pro tip: If you have the time and resources, include closed captioning and transcripts for all media.

5. Give your links unique and descriptive names

Another easy way to make your website more ADA-friendly is to use text that properly describes where your link will go. For example, using “Click Here” isn’t very descriptive. That’s ineffective for a screen reader user who may not read the link within the context of the rest of the page. You should be more specific, such as “Read About Us” rather than simply “Read More.” That’s much easier for visitors using speech recognition software to follow.

Another example: If you have an email sign-up form, instead of the final button reading “Submit,” you’d want to use “Subscribe Now” instead. That provides a clearer description of what the user is about to do.

Screen reader users often navigate links by searching via the first letter, so be sure to present the most unique content of the link first.

Conclusion:

These five easy ways to make your website more accessible doesn’t cover everything, but it’s a great start to making your site more usable for everyone. Remember, you’re making these design changes to remove any barriers that keep people from visiting your site and — perhaps — buying your products or services.

“There is definitely more awareness these days towards accessibility,” Armstrong said. “More companies are realizing that it’s easier to make websites accessible. They’re starting to see there are a lot of small changes they can do that can make a big difference.

“Making any changes is a step in the right direction – it creates awareness and inclusion, showing your users that everyone is welcome.”

If you’re looking to make your website more accessible, contact us today. We can perform an accessibility audit on your website.