How to create accessible content

11 May 2018

When a website is designed with accessibility in mind and built correctly to be inclusive to everyone, users will have equal access to its information and functionality. A site that is not built accessibly will present barriers to people with disabilities that prevent them from accessing the content or using the site at all.

So when you’re creating content for a site – or updating a current website’s content – it’s useful to know what the most common barriers to access are, so you can avoid them.

The following information is thorough and therefore we have included points that will be controlled by the coding of the website (e.g. the text size and colours) but it is useful for you to be aware of.

Eight Most Common Barriers to Access

The Web Content Accessibility Guidelines (WCAG http://www.w3.org/TR/WCAG20/) has 65 checkpoints. Research has found that 82% of access problems are related to 8 of these points – some of which will affect the creation of content. We’ve included all 8 barriers here as they help to explain a little about how people with disabilities use the web:

Divide blocks of information into more manageable units

Check all the text and try to make it clear and concise and avoid long, wordy passages.

You can divide the info up by adding photos and images, and organise it into subject areas and use headers. Breaking it down into smaller chunks will also make it easier to digest.

WHY: adding headings and splitting the text into smaller chunks make content easier to understand. Many users (including those with reading difficulties such as dyslexia or those with visual impairments) will find long and wordy passages hard to wade through – breaking it down will help them and many others to understand what you’re trying to say.

Add an overview to every page: add a short description at the start of each page saying what the section is about, to help give the user an idea of what the main content is and what their main options are. 

WHY: some users can’t glance at or scroll around a page to get an idea of what’s there (e.g. if they’re a blind screen reader user or using adapted hardware due to restricted movement). One or two lines about what’s on this page will help clarify what’s coming up and decide whether to spend more time on the page or not. It’s a quick snapshot of what’s coming up in case they can’t see or process the visual information themselves, and will save them time and energy of having to move around slowly and work it out for themselves.

Increase ‘leading’ (space between lines of text) – it’s harder to read blocks of text when the lines are close together.

WHY: increased space between lines improves legibility for everyone.


Ensure that foreground and background colours have sufficient contrast

Contrast between text and background colours needs to be high to provide good contrast

Another point related to overall legibility (rather than colour contrast) is to ensure that a clear font is used throughout, and some effects such as italics are avoided – many partially sighted users find these effects harder to read.

WHY: increased colour contrast and clear font choices makes it easier for users with reading difficulties to read. Conversely low contrast, such as grey text on a beige background, make it much harder to read.


Avoid creating pop-ups and new windows without informing the user

If any content opens in a new browser tab or window it’s polite to inform users this is about to happen so they know what to expect.

WHY: if the user isn’t told that a new window is about to open up, they can get ‘lost’ within that window and not know how to get back to the original site. This is especially frustrating for some assistive technology users, e.g. a blind screen reader user won’t know that they’ve moved to a new window and might become stuck there or at least frustrated that they have to work their way back.


Provide a text equivalent for every non-text element

Add captions and descriptive alt text to all photos, images and maps used throughout the site.

WHY: Adding information and alt text to every image makes visual content more accessible to partially sighted magnifier users and blind screen reader users as well as compatible with other assistive technologies. A short text description of an image can unlock the information within a picture and enrich the experience and understanding of a story for users – alternatively, without it, images will be inaccessible for blind and partially sighted users. Related to this, images do help to liven up the content, but ensure that images used as simple and with high contrast if possible.

Add captions and transcripts of the audio element of all videos and any audio clips. It would be even more useful if you could also provide transcripts (the written script) of written or spoken content. To make video accessible to BSL users, it’s also good practice to include at least an introductory ‘welcome’ video with BSL. This would give BSL users an initial flavor of the site and venue – and feel welcomed by them.

WHY: adding captions and a transcript increases accessibility of any written or audio content for everyone, including Deaf or hard of hearing users, or users trying to understand the content without access to speakers or in a quiet environment. As a minimum, add a link to a transcript which outlines all the spoken and audio and visual content within video or audio files. This enables any user to review it separately or makes is easier to copy and share information.


Clearly identify the target of each link

Ensure all links are consistently labelled, that they look suitably different to the normal body text and that they look like links. Avoid labelling links as ‘here’ or ‘click here’ as out of the context of the page they don’t tell the user anything about where they’ll lead them.

WHY: links need to make sense even if they stand alone, as many assistive technology users will short-cut to a list of links on a page as a way of getting a quick impression of what content is available on that page. Making links look consistent follows standard conventions for navigation and will make the site as usable and accessible as possible, as users will know what to expect as they explore the site.

Review how the main menu options are presented and simplify them where possible. Keep the top menu bar as uncluttered as possible (as well as the further drop-down options). Options need to be separated out very clearly to make them easy for users to differentiate.

WHY: we should simplify navigation options as much as possible, adding lines between each of the options to help users to see more clearly what the different options are. Without them the options will potentially all run together (especially for those with reading difficulties or those who are partially sighted). There are other ways of helping the user to work out where they are on the site and to keep their thread, including the use of a crumb-trail.


Use the clearest and simplest language appropriate for the site’s content

Where possible use clear and simple language to make it as easy as possible to understand, and avoid using jargon. You could include some content in Easy Read format, which was created to make content more accessible for users with learning difficulties, e.g. see some examples on the BILD site (British Institute of Learning Disabilities): http://www.bild.org.uk/resources/easy-read-information/


Use a large clear font – in terms of font size, a lot of the text on the site is too small. Ensure that the default font throughout the site is larger.

WHY: increasing the font size will make the text easier for everyone to read, and will be essential for people with reading difficulties. Some users will need to make it larger still so all text needs to be scalable.


Ensure that pages work when scripts and applets are not supported

A site should work independently if Java Script or applets are switched off/not supported.

Related to this, I recommend that clients explain very clearly how to change any in-built accessibility features that are included on the site, and add some information about how to adjust different devices to increase accessibility – via a link to an Accessibility Options section.

WHY: accessibility options or controls built into websites vary a lot, so it’s helpful to list any features that have been included so the user knows that they’re there and how to use them, e.g. how to adjust the font size or change the background colours and colour contrast options. It’s also good practice to include a contact email or number for users to send any accessibility feedback or suggestions, to demonstrate that you see accessibility as an ongoing process and are looking for how to support your users as well as possible.

The Accessibility section could include: a list of the access features on the site, suggestions for how to adjust settings and an appeal for feedback from users.  I suggest adding this content via a link which appears prominently on the site (e.g. via the top menu bar) – there are many examples of how to present this information, e.g. see the Brighton Museums Web Accessibility page:   http://brightonmuseums.org.uk/about-us/policies/accessibility/web-accessibility/


Avoid movement until it can be frozen.

e.g. A moving image slider on the home page is a barrier to access, as it can’t be paused.

WHY: research from user testing has found that many users, including those with learning difficulties and reading difficulties, can find a sliding carousel of images very distracting and reduces their ability to understand the content. At a minimum it needs to be clear how to pause this moving content.

Related

Stay informed with our newsletter

Follow us