Make Your Website More Accessible With These 5 Tips

Optimizing a website to adhere to web accessibility standards allows for a wider audience and user base. An accessible website should allow users who use screen readers and/or depend fully on the keyboard to use every piece of functionality on the website, in a logical manner.

In a recent project for work, I was tasked with creating a web accessible media display that passed AA standards. The following information and tips are things I wish I had a few weeks ago in order to help with the process. I hope it helps someone else in the future!

Essentials:

  • Make sure everything is accessible by tab / shift+tab.
  • Err on the side of semantic html rather than forcing the use of the global tab index attribute. (In some cases, it will be unavoidable … like in certain description overlays or media lightboxes)
  • Provide a title to all <a> tags so that screen readers can read it.
  • Provide alt text to all images.
  • Use text as often as possible so that screen readers will successfully be able to provide voice over to the content. If it is not possible to use text due to specific styling concerns, make sure to be diligent about the alternate text that is associated with the image.
  • Choose colors with a high amount of contrast to make text easily readable.

5 Pro-Tips:

    1. Set up an event listener to add a class to the body of using-keyboard.

    This allows you to implement different :focus pseudo-class selectors when using/not using the keyboard.

    1
2
3
4
5
6
7

    $(document).keydown(function(e) {
  $('body').addClass('using-keyboard');
});

$(document).mouseup(function(e) {
  $('body').removeClass('using-keyboard');
});
    2. Write :focus and :active styles. 
    1
2
3
4
5
6
7
8
9
10
11

    * body.using-keyboard:focus {
  outline: 2px dashed red;
}

*:focus {
  outline: 2px dashed red;
}

*:active {
  outline: none;
}
    3. Use this function to make things behind an overlay inaccessible via keyboard. 
    1
2
3

    $('.the-last-element-you-want-to-tab').blur(function(){
  $('.the-first-element-you-want-to-tab').focus();
});

    Thank you to this post on stackoverflow for helping me solve this issue.

    4. Force a specific tabindex keyboard interaction flow

    If tab indexes aren’t working properly… which can be highly likely in Internet Explorer, you can force the route you want the user flow to go with this function. Note you will need to be very specific about the global tab index property.

    1
2
3
4
5
6
7
8
9
10
11

    var tabindex = $('*:focus').attr('tabindex');
var lastTabindex = 10;  // make this the highest tab index number you have on the page
$(document).keyup(function(e) {
  if (e.which === 9 && tabindex !== lastTabindex) {
    tabindex += 1;
    $('[tabindex=' + tabindex + ']').focus();
  } else {
    tabindex = 1;
    $('[tabindex=1]').focus();
  }
});
    5. Reset focus to triggering elements. This is applicable after visiting another page, overlay, lightbox, etc.

    An easy way to do this is to assign an id to the tag that triggers the page, overlay, or lightbox. After closing that region, reset focus to the triggering element with jQuery by focusing on the asset matching the id.

Additional Resources:

And if you were curious to interact with the final product, web accessible and all … you can check it out at:

firstdayofschool.target.com

Comments