Front-End Developer

← Back to Blog

Easy Accessibility Wins

Making a website more accessible often improves the experience for a range of people and not just those with a disability or impairment. Here’s a few simple tips and tricks you can do to make your site more accessible for all users.

Use the ‘lang’ Attribute

Adding the lang attribute onto the <html> element can lead to numerous benefits such as appropriate voice profiling with screen readers, spelling error highlighting in browsers and better indexing by search engines.

<!-- set the language to English (British in this case) -->
<html lang="en-GB"> 

Don’t Restrict Scaling

When setting the viewport meta tag, it is possible to disable a users ability to pinch-zoom. This is almost never a good idea as many people like to zoom in to see text more clearly or even to view an image or graphic in more detail.

<!-- Don't do this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Do this instead -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Use a Proper Heading Structure

A webpage is a document, so having a proper document outline allows people using screen readers to follow the structure of your page without getting lost. All webpages should have a single <h1> heading with any subheadings being marked up as <h2>. Any subheadings of these should being marked up as <h3> and so on. Heading levels should never be skipped, so for example you shouldn’t ever go from a <h2> to a <h4>.

Use Good Typesetting

Poor typesetting can make a website really difficult to read for everyone, particularly older people and those with vision and/or cognitive difficulties. To make sure you’re content is easy to read you should choose a legible font, a reasonable text size and choose an appropriate line-height and measure to allow the content to be read comfortably.

/* some basic typesetting */
body {
font-family: sans-serif;
font-size: 120%;
color: #444;
line-height: 1.5;
}
main {
max-width: 60rem;
margin: 0 auto;
}

Use Sufficient Colour Contrast

When designed components you should make sure that there is sufficient colour contrast between the foreground and background. Having too little contrast (such as a light grey on a white background) can make it difficult for users to read the text on your site. This doesn’t just apply to those with vision difficulties but also those viewing your content on a poor quality monitor/screen or even outdoors where sunlight may further reduce contrast. There are many online tools to check colour contrast such as Webaim’s contrast checker or accessible-colours.com

Use Labels on Form Elements

Form elements such as text fields, checkboxes, radio buttons and drop-down menus all need associated labels to describe their purpose. Using a <div> or <span> or even a <p> to provide a label is not sufficient as these are not properly associated with the form control. The best approach is to use a <label> element which is linked to the form element via a for attribute. This allows users to click the label to move focus into the form field.

<!-- clicking the label moves focus to the form element -->
<label for="firstname">First name: </label>
<input type="text" name="firstname" id="firstname">

Use Semantic Elements

HTML5 introduced a number of new elements such as <main>, <nav>, <article> and <section> which are associated with landmark roles. This allows assistive technology to provide extra information to users and can help them navigate around the page. You should be careful not too overuse these elements as this can be frustrating for people. If you just need a wrapper for styling purposes then an unsemantic <div> is often the right choice. See the W3C spec for more details about the sectioning elements.

Use Alt Text for Content Images

All <img> elements on a page should have an alt attribute. If the image makes up part of the meaningful content of the page then a short description should be added in the form of alt text. For any images which are purely decorative, an empty alt attribute should be used, to tell screen readers to skip over this image and not read out the image filename instead.

<!-- this image is meaningful -->
<img src="pancakes.jpg" alt="Stack of blueberry pancakes with powdered sugar">
<!-- this image is decorative -->
<img src="squiggle.png" alt="">

Use Descriptive Anchor Text

When linking to other pages you should try to create anchor text which makes it clear where the user will be taken. Anchor text such as ‘click here’ or ‘read more’ can be confusing to people using assistive technology as they may be navigating the page by just looking at links. Unhelpful or vague anchor text means they have to do some reading around the link to work out where it will take then.

Don’t Remove Focus Outlines

All browsers include a focus outline as part of their user agent stylesheet. This means that a user navigating a site with the keyboard will be able to see which part of the page they are on. Some themes and/or frameworks remove these outlines which can create a frustrating experience for many users. There are times when you may want to change or even remove the focus outline from individual elements, but you should never blindly remove them from your site altogether.

/* Please don't do this! */
:focus {
outline: 0;
}