{"id":1402,"date":"2017-12-28T17:33:08","date_gmt":"2017-12-28T16:33:08","guid":{"rendered":"https:\/\/axesslab.com\/?p=1402"},"modified":"2025-09-07T08:11:41","modified_gmt":"2025-09-07T06:11:41","slug":"practical-accessibility-improvements","status":"publish","type":"post","link":"https:\/\/axesslab.com\/practical-accessibility-improvements\/","title":{"rendered":"Practical Examples of Accessibility Improvements"},"content":{"rendered":"

“It would be great to see actual examples of accessibility in action. Like before and after accessibility improvements.” I got this great comment from a woman in the audience at a meetup. So let’s make that idea a reality!<\/p>\n<\/div>

\"Teddy<\/div><\/div>
\n

Offer alternatives<\/h2>\n

Accessibility is a lot about offering people alternatives.<\/p>\n

Here’s an example from “real life”. When I was user testing with people with disabilities<\/a>, this slider proved to be an obstacle for people with motor impairments. It was difficult to set it to the specific value the users wanted to.<\/div>

\"Slider<\/div><\/div>
<\/p>\n

We solved it by offering an alternative. Users can now either use the slider or input the numbers directly in the input fields.<\/div>

\"Slider<\/div><\/div>
<\/p>\n

This turned out great for mobile users as well. Their fingers were previously covering the value under the slider as they were adjusting it. Now they could see it above the slider in the input fields as well. A win for everyone.<\/p>\n

Here are some other examples of offering alternatives to users:<\/p>\n

Instead of forcing people to call<\/strong> customer service, offer an alternative to write<\/strong> in a chat or email.<\/div>

\"Call,<\/div><\/div>
<\/p>\n

Instead of forcing people to understand a diagram<\/strong>, offer an alternative to see the data in a table<\/strong>:<\/div>

\"Diagram<\/div><\/div>
<\/p>\n

Instead of forcing people to read<\/strong> an article, offer an alternative to watch<\/strong> a video:<\/div>

\"Video<\/div><\/div>
<\/p>\n

Note that it’s the combination of alternatives that’s the key. Not just a video or just text, but the combination of them. Let the user choose!<\/p>\n

Colors<\/h2>\n

There are two main things to keep in mind when it comes to colors and accessibility: color contrasts and not relying solely on color.<\/p>\n

Color contrasts<\/h3>\n

Good contrasts between text and background is important to make your content accessible to low vision users, or users who have sunlight reflecting off their screens.<\/p>\n

Here’s an example of light gray text on Squarespace that doesn’t fulfill the contrast guidelines in the Web Content Accessibility Guidelines (WCAG):<\/p>\n<\/div>

\"Tiny,<\/div><\/div>
\n

A normal contrast failure is for link colors. Mediatemple have links that are far from acceptable:<\/p>\n<\/div>

\"Light<\/div><\/div>
\n

To give you a feel for how little it takes to make your contrast sufficient, here is an example of failing contrasts for both the gray text and blue link, and an example of sufficient contrasts for the gray text and blue link.<\/div>

\"Comparison<\/div><\/div>
<\/p>\n

You wouldn’t believe how hard I sometimes have to fight with art directors to get them to increase the contrasts to an acceptable level. Even though \u2013 in my view \u2013 everyone benefits and there’s not that big a difference aesthetically. Or is it just me?<\/p>\n

Anyway, it’s easy to measure contrasts yourself. Here are some free contrast checkers we recommend<\/a>!<\/p>\n

Don’t rely solely on color<\/h3>\n

Some people with color vision deficiencies can’t tell different colors apart.<\/p>\n

Here’s an example that would create problems:<\/div>

\"Color<\/div><\/div>
Simply labeling your colors is a way to make color pickers accessible:<\/div>
\"Color<\/div><\/div>
<\/p>\n

A common fail to this criteria is links that are only blue:<\/div>

\"Two<\/div><\/div>
<\/p>\n

Viewing this in grayscale makes it clear why this is important:<\/div>

\"Previous<\/div><\/div>
<\/p>\n

Some ways to make your links pop out is underlining them, giving them link icons or making them look like buttons:<\/div>

\"Links<\/div><\/div>
<\/p>\n

If you want to know more on this subject, check out our article on color blind accessibility<\/a>.<\/p>\n

Keyboard accessibility<\/h2>\n

Some users with motor impairments navigate using their keyboard. Many assistive technologies like switches<\/a>, magnification<\/a> and screen readers<\/a> also rely on keyboard accessibility. But what does it mean to make your site or app keyboard accessible?<\/p>\n

Focus indication<\/h3>\n

Make sure that it’s clear which element has focus when tabbing around in your interface.<\/p>\n

The default focus indicator varies between browsers, but it’s often not very easy to spot.<\/p>\n<\/div>

\"Thin,<\/div><\/div>
\n

Some sites, like Only.in<\/a>, have even removed the default focus indicator. Most likely because someone googled how to remove it because they thought it looked ugly when focus was on their search field.<\/p>\n<\/div>

\"Arrow<\/div><\/div>
\n

On gov.uk<\/a> focus is indicated with an orange background that really stands out from the surrounding:<\/div>

\"Clear<\/div><\/div>
<\/p>\n

So design a clear focus indicator and implement it using the :focus selector in your css.<\/p>\n

Skip-links<\/h3>\n

Skip-links are a bit magical! They don’t show up for most people, but if you navigate with a keyboard you’ll find them very helpful.<\/p>\n

They are made visible only when they receive focus and basically provide a shortcut past all the links in the site header and menus, so you quickly can get to the content of the page.<\/p>\n

Here’s a skip-link in action at www.starbucks.com<\/a>.<\/div>

\"Skip<\/div><\/div>
<\/p>\n

Try it out yourself by going to Starbucks<\/a> and pressing the tab key on your keyboard until you see it (in any other browser than Safari, where keyboard navigation first needs to be activated in settings for some reason).<\/p>\n

Screen reader accessibility<\/h2>\n

Making your site or app accessible for users with visual impairments who use screen readers is a lot about coding correctly and following the html-standard. For example: instead of building buttons and links out of spans, use the button and link elements.<\/p>\n

Another thing you need to do is add alt-texts to images, which conveys their meaning to people who can’t see them. Editors need to learn how to do this in their Content Managment System. It takes about 5 seconds for each image.<\/div>

\"Alt-text<\/div><\/div>
You should check out our Ultimate Guide to Alt-texts<\/a>!<\/p>\n

Accessibility is a lot about simplicity and usability. Make your interface intuitive and use a clean layout and you’ll help all users, including screen reader users.<\/p>\n

Sometimes online shopping is more accessible than health care<\/a>, simply because e-commerce sites focus so heavily on usability and streamlined design.<\/p>\n

Wrapping it up<\/h2>\n

There is of course more to accessibility than I’ve listed above. But the point is that it’s not rocket science. Also, making your site or app accessible does not mean you have to make it boring and remove all colors, images and videos.<\/p>\n

Accessible sites can \u2013 and should \u2013 be made awesome and beautiful! If you want our help achieving this in your projects, let’s work together<\/a>!<\/p>\n

Finally, I’d want to recommend the world’s best tumblr:<\/p>\n

a11ywins.tumblr.com<\/a><\/p>\n

It’s a collection of accessibility wins \u2013 that is, examples of awesome accessibility solutions on sites and apps. Jump over there and read it all!<\/p>\n","protected":false},"excerpt":{"rendered":"

“It would be great to see actual examples of accessibility in action. Like before and after accessibility improvements.” I got this great comment from a woman in the audience at a meetup. So let’s make that idea a reality! Offer alternatives Accessibility is a lot about offering people alternatives. Here’s an example from “real life”. […]<\/p>\n","protected":false},"author":2,"featured_media":1424,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"coauthors":[23],"class_list":["post-1402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/posts\/1402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/comments?post=1402"}],"version-history":[{"count":3,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/posts\/1402\/revisions"}],"predecessor-version":[{"id":5458,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/posts\/1402\/revisions\/5458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/media\/1424"}],"wp:attachment":[{"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/media?parent=1402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/categories?post=1402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/tags?post=1402"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/axesslab.com\/wp-json\/wp\/v2\/coauthors?post=1402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}