WCAG 2.0 AA Guidelines (Part Two): Tips & Tricks to making your website WCAG compliant

January 15, 2016

Last time we talked about ways to test your website for accessibility. This time we have compiled a list of tips and tricks to help others increase their websites’ accessibility.

  1. Structure HTML5 content inside semantic elements with ARIA labels

Aside from the most commonly used <body> element, there are several other elements that you should have on every page of your website:

  • Heading tags should be used instead of using CSS styles to distinguish section titles. Every page of the website must have a <h1> tag that contains the content of the heading to the page. Heading tags should not be used for subheadings, subtitles, alternative titles and taglines (read it here http://www.w3.org/TR/html5/common-idioms.html#common-idioms)
  • Every page should also have a <nav role=”navigation”> tag, for defining section of the site containing all the menu links.

Notice I added role attribute to the nav tag above. Why use them, you ask? It creates landmarks for your pages and increases accessibility for screen reader users. There are several tags which should have defined roles. For a list of ARIA usage chart visit (http://www.w3.org/TR/aria-in-html/), scroll down until you see the chart. Let’s go over some of the suggested tags to use for every page of your site:

  • <main role=”main”>, as the name suggests, it is used for the main section of the site. It contains all the HTML content that is not the header or the footer.
  • <header role=”banner”>, the role banner suggests that it is the main header of the page. Notice header tags can be used throughout the page, inside <article> tags for example, the role “banner” should only be used for the header of the entire website. Otherwise, assign any global aria-* attribute.

Make sure to wrap all the HTML elements inside containers with defined roles, so that screen readers can navigate through your site without missing content.

  1. Provide text alternatives for all non-text content

  • All images must have alt tags. It is best to use actual text to define the image, otherwise try to be as descriptive as possible.

<a href=”blah.html”><img src=”blah.jpg” >Blah</a> instead of

<a href=”blah.html”><img src=”blah.jpg” alt=”Blah”></a>

Images that are considered decorative can be given null alt text.

<img src=”divider-line.png” alt=””>

  • Add alternative text to all audio and video
  • Use aria labels for buttons

<button aria-label=”Close”>X</button>

  • Remember to label your icons, one trick is to hide the labels


<a aria-label=”Share on LinkedIn” href=”http://www.linkedin.com/shareArticle?mini=true&amp;url=http://yourarticle.com” target=”_blank”>

<span aria-hidden=”true” class=”social-icon icon-linkedin”></span>

<span class=”icon-label”>Share on LinkedIn</span>



.icon-label {

clip: rect(0 0 0 0);

overflow: hidden;

position: absolute;

height: 1px;

width: 1px;


  1. Make your sites responsive

Make sure the site works on all screen resolutions.

  1. Make sure your site works in all the browsers

That’s right. They should work in all browsers including Internet Explorer 8!

  1. Underline external links

You must be thinking: “Oh no, not the ugly underlines!” They are back! To be honest, I am starting to like using them, because it is very easy to distinguish links inside a large body of text. One trick I use to make them less noticeable is using a dotted line instead of a solid line. Since text-decoration-style: dotted doesn’t work in Internet Explorer and Chrome, you can try setting the border-bottom-style instead:

a {

border-bottom: 1px solid #000000;

display: inline;


  1. Style your focus borders

Focus borders are important for keyboard users to navigate through your site so make sure they are styled visible.

  • Add to your CSS *:focus, a:focus { outline: #ffffff dotted 1px; } and make sure all the <a> tags have appropriate sizes
  • Use jQuery events focus/blur/keypress to show mouseenter/mouseleave/click events instead
  1. Use descriptive titles

Descriptive titles not only help with accessibility, but also SEO [ link to search engine optimization ]. Make sure the titles are different for each page of your website.

  1. Make sure all forms have input assistance

  • Define label tag with all form input fields

<label>user name <input type=”text”></label> or

<label for=”uname”>user name</label> <input type=”text” id=”uname”>

  • Highlight the input fields with a border to indicate which fields need to be corrected
  • Create a popup
  1. Define language of the content

  • HTML language must be defined at the start of the page using <html lang=”en”>.
  • If there are any content on the website that is not in the main language, add a language attribute to the HTML element. For example, <p lang=”fr”>.
  • For links that are in a different language, define <a href=”http://blah.com/fr” hreflang=”fr”>FR</a>
  • For a list of language codes visit http://www.w3schools.com/tags/ref_language_codes.asp
  1. Read more, learn more and share your findings!

Check back soon for part three of our WCAG 2.0 AA Guidelines series.