Website Accessibility Tips & Tricks
Web accessibility is about anticipating the needs of your audience, not their browser or device, to successfully interact with your website’s content. Web accessibility specifically concerns individuals with disabilities that make it challenging, if not impossible, to navigate the web through traditional means.
These disabilities include but are not limited to blindness, color-blindness, deafness, limited fine motor control, and learning disabilities. Since web accessibility encompasses many disabilities, there is a range of accessibility techniques that need to be covered to ensure all users are able to access a website’s content.
Assistive technologies, like screen readers, rely on certain pieces of information from a website in order to effectively communicate the site’s content. When these pieces of information are not in place, it becomes increasingly difficult for these assistive technologies to relay the information on the screen.
5 Ways to Make Your Website More Accessible
Thankfully making an accessible website doesn’t have to be a difficult task. Here are five simple ways to make your website more accessible.
1. Structure Your HTML to be Semantic
Before structuring your site, it is incredibly important to consider the type of content you will be displaying on your web pages. Your content will determine your HTML structure. You should always use semantic HTML to properly convey the types of content your user will be interacting with.
Semantic HTML reinforces the meaning of the information rather than defining its appearance. For example, if you want a bolded header you wouldn’t want to use the <strong> tag, as it would be a misuse of the tag that is meant to convey important text. Instead use an appropriate tag for headers, like <h1>, and apply your bold styles in the CSS.
Code example:
<!--- Good semantics --- >
<h1 class=”bold-header”>Header</h1>
<!--- Bad semantics --- >
<strong>Header</strong>
<!--- Good semantics --- >
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
<!--- Bad semantics --- >
<div id=’’nav”>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
HTML5 has taken great strides in providing developers with more semantic elements like <nav>, <main>, <article> and <section>. When interacting with these elements, the user will have a better understanding of the type of content they are likely to encounter. For example, a user is more likely to anticipate navigation links within the <nav> element as compared to <div id=”nav”> which carries no semantic meaning.
Code example:
<!--- Good semantics --- >
<html>
<head></head>
<body>
<nav></nav>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
<!--- Bad semantics --- >
<html>
<head></head>
<body>
<div id=”nav”></div>
<div id=”main”></div>
<div id=”footer”></div>
</body>
</html>
2. Emphasis on Accessible Forms
Forms are a large part of our daily interactions with the web. When you consider that on any given day you will use a form to login into an account, submit a comment on a discussion post or enter payment information, you will soon realize how important forms are in accomplishing everyday tasks. Unfortunately forms are often not very accessibility friendly.
Each form element, like <input>, <select> and <textarea>, should have an accompanying <label>. Each <label> should have the “for” attribute which corresponds with the id of the form element.
Code example:
<!--- improper format for label --- >
First name: <input type=”text” id=”first-name” name=”first-name”>
<!--- proper format for label --- >
<label for=”first-name”>First Name</label>
<input type=”text” id=”first-name” name=”first-name”>
The inclusion of a label greatly benefits those reliant on screen readers as it makes it more obvious what information the form element requires from the user. Without a label, some screen readers will plainly read the type of input, like “Edit text, blank”, which proves to be extremely unhelpful for the user when determining what type of information they should input.
An unexpected benefit of adding a label is that it also increases clickable area for the input. This clickable area increase actually improves usability on mobile that is useful for disabled and non-disabled users alike.
To ensure that your form can be easily navigated on a keyboard, always wrap your input elements in a <form> tag and include a submit button if there is more than one input element for your form.
3. Alternative Text for Images
The simplest way to make your site’s accessibility is to always provide an alt, alternative text, attribute for images. While your alt attribute does not have to be extremely detailed, it should give the user a clear idea of exactly what the image is. For example, the difference between “dog” and “golden retriever puppy” is great in terms of their description level.
Filenames should also be taken into consideration. When an alt attribute isn’t provided, some screen readers will resort to reading out the filename. While filenames do not have to be as descriptive as the alt attribute, they should be somewhat insightful.
4. Incorporating ARIA
As the shift from static to dynamic websites continues, keeping dynamic content accessibility friendly has been extremely difficult. ARIA, Accessible Rich Internet Applications, allows dynamic content and advanced user interface controls developed through Ajax and JavaScript to be accessible. Fortunately ARIA allows developers to incorporate important accessibility information into their existing HTML. This information is added through three types of attributes: roles, states and properties.
The role attribute implicitly states the semantic role of an element that otherwise might offer incorrect or no semantics. This is commonly added to elements like, <div> and <span>, which do not carry any semantic meaning. The role attribute can also be used to reinforce the semantic value of an element that is not yet supported by all browsers, like <main>, which is unsupported in IE. This may appear redundant but it mostly serves as a precautionary measure.
The state and property attributes are incredibly similar but do have slight differences. Properties describe relationships with other elements and often do not change once they’re set. The exceptions being property attributes like aria-valuetext and aria-valuenow, which do change frequently. States are likely to change based on the user’s interactions.
Code examples:
<nav role=”navigation”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li>
<ul class=”dropdown-menu” role=”menu”>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</li>
</ul>
</nav>
<a href=”#” role=”button”>Login</a>
5. Provide Reasonable Contrast
Accessibility is not solely the responsibility of the developer but also the designer. Contrast between text and background can greatly affect accessibility. In fact, high contrast levels benefits all users as it increases readability.
The W3C (World Wide Web Consortium) outlines three levels of contrast: A, AA, AAA. Level A requires a ratio of 3:1. Level AA requires a ratio of 4.5:1. Level AAA requires a ratio of 7:1. Only Level A is required to be met while Level AA and AAA are merely suggested.
How to Test Accessibility
It’s time to test your site! You wouldn’t assume your website works perfectly without cross browser testing, would you? So surely, you cannot assume your site is accessibility friendly until you’ve tested it on a screen reader.
There are plenty of accessibility tools to assist you with your testing. If you’re on a Mac, the accessibility application VoiceOver comes preinstalled. To access it, simply hit “Command + F5”. If you’re on Windows, you can download NVDA or use the free trial for JAWS. There are even accessibility tools for mobile devices like TalkBack for Android and the previously mentioned VoiceOver for iOS. On Chrome, Accessibility Developer Tools extension can be incorporated into existing Developer Tools.
Testing on a screen reader is an invaluable experience as you are able to gain great insight into how a screen reader interacts with your site’s content and what you can do to improve the user’s experience.
Conclusion
The Web has drastically changed the way we do everyday tasks and handle social interactions. This is why web accessibility is such an incredibly important issue, as a person’s disabilities should not limit their access to the information available on the web. Incorporating these accessibility practices into your workflow will not only increase your website’s accessibility but also offers the additional benefits of improving search engine optimization, SEO, and mobile friendliness. Accessibility goes beyond catering to a particular group of individuals and ultimately benefits everyone.
Resources
Just in case anyone needs any more convincing on why to make a site accessible, review the W3C’s business case on how accessibility can positively affect your business.
There are many tools available that allow you to check the contrast ratio of your site like WebAIM’s Color Contrast Checker.
Learn how to use Voice Over to effectively test your site’s accessibility. Apple provides a comprehensive guide that allows you to properly test your site.
Keep up with the latest HTML5 Semantic elements from the W3C.