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.

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.

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.

Make your sites responsive

Make sure the site works on all screen resolutions.

Make sure your site works in all the browsers

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

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;

}

Style your focus borders

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

“Pixelcarve is the best website company in Toronto. Their ability to capture the mood and direction of what you want from a site is the best I have ever experienced. There are many interactive agencies out there but Pixelcarve is the only one I would ever trust to interpret my brand.”

“”

John Muscat,

Owner, Line Knitwear

“Working with the Pixelcarve team was an extremely positive experience right from the start. BELLOSOUND was looking to collaborate with a creative company that would understand our vision and that would generate a product that was unique and innovative. We are very proud of the final result. BELLOSOUND.com is a very special website and the feedback has been outstanding.”

“”

Daniel Buckman,

CEO, Bellosound

“Effectively integrating a superior digital presence is only possible if your creative’s are able to become intimately involved in your business. By aspiring for genuine innovation and holding in high regard AVENUE ROAD’s brands integrity, Pixelcarve has and continues to deliver at the highest of levels.”