Doctor Digital's Check Up - Accessibility
Making your website accessible
One in five Australians live with a disability, so ensuring that your website is inclusive and easy to use is a necessity. Websites are used in many different contexts and by users with a wide range of needs, so taking the time to consider accessibility is important to make your website a enjoyable experience for all.
One of the ways that accessibility is standardised on the web is through the Web Content Accessibility Guidelines (WCAG). These guidelines help website creators to better meet the needs of their users by highlighting the different ways in which people browse the web.
Understanding the needs of your customers is an important starting point when considering accessibility, so I’d recommend doing your own research where possible. These needs could include catering for low vision, impaired movement, deafness and hearing loss, photosensitivity, and other cognitive limitations.
My check up tests your website against some aspects of the WCAG, so keep on reading to find out how your website ranks for access and engagement. Below are some additional resources that can be useful to start making steps towards a more accessible website.
Increase contrast between background and text colour to aid legibility
Having sufficient contrast between the background and text colours provides better accessibility for visually impaired users, particularly those with colour blindness. It’s not just those with reduced vision who win here, just viewing the website on a mobile screen outside where it’s bright and sunny can make things harder to see!
Checking and changing the contrast on your website can provide a quick win for accessibility, as these properties can typically be accessed through your template website or CMS. Take a look at elements such as text, icons, links and buttons, and check the contrast using the colour checker linked below. For those with a website created by a designer or developer, get in touch with them to talk about updating themes and colours.
Add "alt" text to all images, with descriptions for users who can't see them
Screen readers are a fantastic tool to help those with visual impairments navigate the web. These tools read the HTML code on each page and announce what each component is, and the content it contains. Images can contain a thousand words, so providing detailed and specific descriptions about the images on your page will help with understanding of how these images add context to your website for those that can’t see them.
Most template websites or CMS’s will allow for you to add alternative text (“alt text”) to an image when you upload it or put it into a page. I’ve provided a link below that explains how to write effective alt text. Taking the time to make a meaningful description will help to add context, but make sure to keep it around 125 characters long at most.
Add labels to all form fields to clearly describe the content required
Similar to images, form fields also need to be identifiable by screen readers. This is achieved by associating each form field with an accompanying label, describing the content that is required.
These labels not only help screen readers, they also inform all your users about what specific information is required. If these labels are descriptive and concise, it will help to minimise form errors and frustrations – making your forms a breeze to fill out!
Most template websites or CMS’s should have a label section associated with each form field, so don’t forget to fill this out when you create your forms. If you have a custom form or are embedding forms from other providers (such as Mailchimp), get in touch with your web developer to see how you can improve their usability.
Add a title element on each page to describe the content of the page
The ‘title’ HTML element, is used to describe the content and purpose of a page. This title is also what shows up in search engines and bookmarks, so it is critical that they give an accurate representation of what to expect. This element is the first port of call for those using screen readers, helping users to determine whether they are interested in the page content.
If you can’t see a field for “title” in your CMS or website editor, it probably uses the page name. The easiest way to work it out is to look at what appears in your browser tab when you load the page – that’s your title!
Add captions to all video + audio
There are few different approaches to take when making your audio and video content more accessible. Providing supplementary content such as captions, transcripts, and audio descriptions all help to open up content for users with varying needs. Not only does this become more inclusive for those with visual or hearing impairments, there can be benefits for those watching content with no sound if they are in a public place, or if they don’t have enough mobile data to watch a video.
See the links below for more detailed information about the different types of supplementary content you can add to your video and audio. You may also need to configure settings on platforms such as YouTube and Vimeo if you host videos externally to your website, so I’ve linked some handy resources above to cover those too. Don’t forget to contact your digital coach or IT specialist if you need assistance with configuration.