Shaf Mansour, Product Manager, The Access Group Not for Profit, offers three pillars to ensuring your charity’s website is accessible.
According to a recent study, only 2% of the internet is truly accessible to the entire disabled community. Disabilities vary a lot between audiences, so there’s no such thing as a one-fix approach to making your website easily accessible to all.
For those who are blind or visually impaired, many people use screen readers, which automatically read the text displayed on the screen, translating it into audio. For the motor impaired, they may use a keyboard instead of a mouse to operate a computer easier. For people who are deaf or hard of hearing, video or audio content can be difficult to understand, while for those with a cognitive impairment, text can be hard to read or understand if not properly structured.
Accessibility is a crucial theme for all websites. But many charities may find that their core audience base suffers with a disability that affects their ability to access a website. As a result ensuring they implement a multi-layered, disciplined strategy to support all audiences is crucial.
In doing so, you’ll not only make your website easier to navigate, but a fully accessible website will likely improve brand loyalty too, making it easier for people to donate and sign up.
However you choose to create your website, there are three ways to ensure that your site is accessible to the communities that use it. Here, we draw on three key themes from The Access Group’s new NFP Successful Charity Website Playbook:
1 – DESIGN
Users must be able to easily perceive the content on the page, and the colour and contrast chosen is vital for good readability. Use an online tool such as fourpointfive.dev to quickly see the contrast ratio between your selected colours, and if it meets Web Content Accessibility Guidelines for acceptable accessibility.
Many websites are simply not designed with accessibility in mind, or at least at the forefront of their design. While quick changes such as darkening the colour of a button can improve the accessibility of a website, the entire site needs to be designed with the audience in mind and not just reactive, quick changes.
It’s also important to make sure you take into account the design of your navigation bar. Ultimately, website visitors will use this to find their way to donate, sign up, or to find out more information about your not for profit. Some users will control a computer using the keyboard only, as they struggle to shift between a keyboard and the mouse due to a cognitive disorder. They will use keyboard shortcuts and quick keys instead, so it’s key that the navigation bar is well structured and clearly represents each section of the website.
2 – CODE
A website’s code is the backbone of a webpage. To make sure your website is accessible, you need to know some basic coding skills to ensure that the structure of your site is easy to read for everyone to read easily.
Firstly, your headings are one of the most important factors – they’re what people use to define the copy that they’re about to read. However, headings are not just a visual element – when you label them correctly, screen readers and assistive technologies can use headings as signs when providing in-page navigation, so it’s crucial you make sure that your headings are accurately labelled and reflect the copy below.
Many website building platforms enable you to label your headings as you build your site. As a guide, this is when you should include different headings:
Heading 1 / <h1> – only ever have one of these on a page so people know which is the main heading.
Header 2 / <h2> – these highlight additional sections on a page, so people can easily read and navigate between different sections and identify them. Unlike H1s, you can have several H2s on your website.
Header 3 / <h3> or Header 4 / <h4> – these are often subsections to identify a subsection within a H2. As a general rule of thumb, any subsection within a H3 becomes a H4, and so on.
Skipping heading ranks can be confusing, so try to avoid doing this. For example, you shouldn’t follow a h1 with a h3.
If you add an image, it’s often because you want your website to be more visually appealing. However, it can be extremely frustrating for people with visual impairments to navigate your site if they cannot understand valuable information on an image.
While the headings can structure your text, alt-text will help you to describe any images in your webpage using HTML code. On the surface, alt-text is simple – it’s alternative text which is used for people who are visually impaired and use screen readers to access websites or other software to describe images.
That said, any images which are there purely for decorative purposes should be given a blank alt-text label – as it should only be used for informative images. And if you use an image as a hyperlink, then the alt-text needs to describe where the image leads to, and not describe the image itself.
3 – CONTENT ACTIONS
To make your website truly accessible, consider these tips when writing your copy:
Write accurate hyperlink copy – When writing text which is designed for people to click on, make sure that you describe exactly what the URL is about. For example, you shouldn’t just write ‘click here’ with no further explanation as to where people are going. Instead, you should write ‘click here for more information on our services’. This is especially useful for those who use screen readers when deciphering whether or not they should click on a link.
Stay precise – A good rule to follow when it comes to website copy is to avoid including any adjectives or extra words which are not needed. Use your valuable text space wisely, with meaningful words that efficiently get across your message. This not only helps those with cognitive difficulties, but also users who may speak English as a second language. If you do need to include technical terms, ensure that you explain clearly what they mean.
Remember audio/visual content – If you create audio-only content, such as a podcast, it’s a good idea to always provide a transcript. Alongside this, if you have an audio and visual piece of content, ensure that you include captions – this isn’t just on websites, but also for anything you share on social media, too.
Accessibility is complicated, technical and cross-functional. Whether you make one person responsible for it, like many companies have done for GDPR and cybersecurity; employ a web partner; or train your entire digital team, one thing is certain – in a digital-first world, accessibility cannot be compromised.