What is an Accessible Website?
Imagine, as someone with a disability, going into a restaurant and there being no wheelchair ramp. Or no space to navigate a walker. These are simple things to include in a restaurant design, yet they mean the difference between exclusion or inclusion for someone with a mobility disability.
A website is the same thing. For many companies and organizations, their website is like their storefront, and accessibility is just as important in the digital space as it is in a physical space.
But creating an accessible website can feel a bit challenging. Where best to start? And what does an accessible website mean?
In this article, we’ll cover what an accessible website is, and give some solutions for building a website that’s as accessible and disability-friendly as possible.
What is web accessibility?
HubSpot offers a good definition of web accessibility, saying it’s the “practice of making websites usable for all visitors, including those with disabilities, impairments and limitations.”
In other words, web accessibility means designing websites and accompanying digital tools to be accessible to all folks with disabilities.
Ensuring accessibility means that disabled individuals can:
- Perceive, understand, navigate, and interact with your website
- Contribute to your website in a meaningful way, which can include reading materials, downloading information, accessing contact information, and making purchases or engaging in learning.
Disabilities are wide-ranging, from physical disabilities to neurocognitive disabilities. It’s important that your website is accessible to all disabilities, as much as possible.
Disabilities can include:
- Auditory (Deaf and hard of hearing)
- Cognitive (ADHD, dyslexia)
Of course, making your website accessible to all disabled people might be a challenge, but in our opinion, it’s entirely worth it.
Why is web accessibility important?
As mentioned above, creating an accessible digital space for your entire audience is crucial, and in many regions of the world, a legal obligation.
Obligations aside, creating an accessible website ensures that all potential users have an easy, friendly, and welcome experience with your website, which can go a long way in ensuring that you are building trust and compassion.
Here are three reasons why website accessibility is important:
1. Web accessibility helps with inclusivity
Website accessibility benefits not just people with permanent disabilities, but folks with episodic or temporary disabilities, such as those who have non-permanent vision loss, limb injuries, traumatic brain injuries, or are using medications that can affect how they are able to interact with your website.
2. Web accessibility promotes brand positivity and authority
Marketers and business owners strive to build a brand that is positive and authoritative. A large part of that is making sure your business is a leader in positive messaging and inclusivity. Now, more than ever, clients and customers are looking for businesses that are not just trustworthy and offer exactly what they need, but that are also socially responsible and equitable.
3. Regulatory requirements
While in many regions around the world, website accessibility isn’t enforceable. But in Ontario, Canada, AODA website accessibility requirements are in effect. These website accessibility requirements fall under the Accessibility for Ontarians with Disabilities Act (AODA) and are enforceable by law under Ontario provincial jurisdiction. That means, businesses (nonprofit and for-profit) that are located in Ontario and have 50+ employees must fulfill these requirements, regardless of where their website is being accessed geographically. However, there are different requirements depending on if your business is for-profit or nonprofit.
However, if your business doesn’t fall under these requirements – or isn’t located in Ontario – it’s best practice to ensure your website is accessible to all visitors, regardless of legal obligations.
Web accessibility international standards
In 2006, the United Nations formed the Convention on the Rights of Persons with Disabilities (CRPD). Over the years since the first iteration, web accessibility has moved to the forefront of accessibility and access conversations. Primarily, how to make the internet accessible to everyone, regardless of ability or geographic location.
Since then, the W3C Web Accessibility Initiative (WAI) has created technical specifications, techniques, and guidelines to help everyone create an accessible virtual environment. These guidelines are in line with international standards for web accessibility.
Features of an accessible website
Approaching how to make an accessible website isn’t the same as creating an accessible physical space. There are features that need to be working in the background as well.
Here some of the key features of an accessible website:
For folks who are visually impaired or blind, alt-text is fundamental to accessibility. This means that all non-text items on your website – images, videos, and audio content – must have text alternatives. These items are read through a text-to-voice application that is accessible to people with blindness or visual impairments or who have challenges reading.
Time-based media, which consists of audio and video content, is a popular way to consume information. However, audio content can be a challenge for many Deaf/hard of hearing folks.
The most common solution to this is to provide a full transcript of all audio recordings. There are many services that offer this, including AI. For video content, captions that are accurate and properly synched with the audio are helpful.
Design with contrast
This is a fairly simple, front-end choice when it comes to website design and accessibility. Ensuring your font is legible, colours have enough contrast, and design isn’t too cluttered makes for a website that is easy to navigate, not just for visitors with disabilities, but elderly folks who might find it difficult to see your website.
Use large buttons and links to ensure individuals with visual or motor disabilities can easily click through to hyperlinked pages.
Keep the copy accessible
What does accessible copy mean? Well, it’s pretty simple – keep it simple. Don’t clutter your language with words that someone needs to look up, or unnecessary adjectives or adverbs. For many visitors to your website, English might not be their first language, or their reading level might not be as high as yours. Alternatively, you can also include translation toggles for those individuals whose first language isn’t English.
Keyboard navigation is fundamental to a lot of accessibility needs. For folks who use assistive technology, like screen readers to navigate your website, keyboard navigation is required. This helps individuals with a range of motor, sensory, and/or cognitive impairments. I can also help individuals with neurocognitive disabilities such as ADHD and dyslexia.
Logical layout and headings
Logical layout and heading organization are not just website design good practice, but essential for accessibility and inclusion. A website that is chaotic and illogical is difficult for a lot of assistive technologies to navigate.
Ensure your headings are properly organized and your content is slotted into a hierarchical structure. Deadlinks should be removed and active hyperlinks should be logical and organized.
How to audit your own website accessibility
When designing, redesigning, or auditing your website, make accessibility a pillar of your audit. Identify the key points of website accessibility, and test and address problems early. There are simple steps you can take, such as changing browser settings. However, there are some more comprehensive things you can do that take a bit more thought and time.
WC3 WAI has a great tool for website accessibility audits. Here are a few of the initial checks you can do without the aid of accessibility software or a website developer:
1. Review your page titles
Just like it sounds, page titles are the titles that are shown in the window title bar (some browsers), in the tabs if multiple web pages are open, displayed in SERPs, and used in browser bookmarks.
For folks with visual disabilities, page titles are read by screen readers, so must be plainly worded. For example, “Services – Sparked Digital” is a page title that is displayed in a window title bar, and is easy to scan and picked up by screen readers. It also helps flag website organization.
When reviewing your page titles, try using a screen reader. Check that your titles are appropriate for the content and give brief descriptions of the page content. Also, make sure none of your page titles are duplicated.
2. Ensure you’re using image text alternatives (alt-text)
You may have seen this in various social media platforms. Sometimes there is an auto generated alt-text feature, and sometimes the user gives a brief explanation of the images in the description or comments section. They’ll indicate it with [ID: description…].
Alt-text descriptions on webpages are a little different and are something that can easily be done in the backend when uploading images. Alt-texts are used by visitors with visual impairments and, like page titles, are read by screen readers.
The alt-text should provide an equivalent user experience to those with visual abilities, and not merely an image description. For all images, including graphics, hero headers, and photographs, use alt-text and be as thorough as possible.
3. Enable heading hierarchy
As we’ve mentioned above, using headings and subheadings in your content isn’t just a good way to organize your information; it’s a way for disabled folks to easily navigate your website.
Heading hierarchy should look like:
- Heading 1 <h1>
- Heading 2 <h2>
- Heading 3 <h3>
- Heading 2 <h2>
To make your headings accessibility-friendly, they need to be marked up. Marking up your headings refers to the webpage code, HTML. To check your webpage markup, in most browsers you can select from the menu: View > Source. This is also something a skilled web developer will look after for you as it can be tedious.
4. Check your contrast ratio (colour contrast)
For visually impaired people, appropriate contrast is the only way they can read text. For example, using a light coloured text over a light background can be difficult for some people to read. This should be considered in your design.
Using colour contrasts such as a light background and darker text, such as white background and navy blue text, is much easier for folks to read, even if they don’t have visual impairments. You can check your website by doing quick scans of colour contrasts and making appropriate adjustments.
5. Consider multimedia alternatives
Multimedia alternatives refer to audio and video content, including transcripts and captions. For hard of hearing and Deaf people, audio and video content can be difficult. For visually impaired, videos can be a challenge as well.
If your website includes alternative multimedia content, ensure you’ve got transcriptions and captions available, as well as descriptions that can be read by screen readers.
Additionally, keyboard access is necessary to ensure that media players are read and controlled easily.
6. Reconsider moving, flashing, and blinking content
Dynamic websites are attractive, and can really underscore branding and visuals. However, for many disabled people, these elements can be prohibitive to a smooth and pleasant visit to your website. There are accessibility issues that can arise with this content, and getting around these issues may not be possible.
When addressing this content, check for:
- Blinking, scrolling, or moving information that is automatic and lasts more than 5 seconds. If your website does include this, ensure there is a clear and easy way for visitors to disable this. Better yet, just don’t include overly animated content.
- For automated update content, check if your users can easily and clearly stop and restart these updates in order for their screen readers to pick up this information.
- Flashing or blinking content can be harmful for some users with neurocognitive or neurological disorders, such as epilepsy or autism. More than 3 blinks per second is too much. Again, better to just avoid blinking or flashing content.
Work with an accessible web designer and developer
An accessible website can be a difficult task to undertake. There are a number of considerations, not to mention regulations. Work with a website design and copywriting partner who is solution oriented and skilled in effective website development and accessibility.
At Sparked, we work with our clients to develop customized website designs that are not only effective and on-brand, but meet accessibility needs.