What is an Accessible Website?

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>

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.
• •