10 basic steps to make your website accessible

Notions of equity and fairness demand we acknowledge not all people possess the same ability to access website content and that we champion accessible design as a response.

It's important to understand that accessibility benefits everyone, not just people with disabilities. Consider a mother trying to nurse a baby while operating your website with one hand, or a student in a busy cafe trying to concentrate on your content in spite of the surrounding noise. The image below from Microsoft's Inclusive Design Kit which helps further illustrate this point.

But even taking a strictly pragmatic approach, if you are a website owner, it only makes sense to make your content available to as many people as possible. A website that does not value accessibility leaves potential customers free to go to a competitor.

But the ramifications of ignoring accessibility can be even more severe than lost business. Many countries worldwide, including Australia, have laws that either explicitly or implicitly demand that online services are accessible to people with disabilities. As a result, users with disabilities have successfully taken action against organisations such as Fox News and Dominos Pizza, forcing them to meet accessibility standards.

Meeting the entirety of the World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) may seem arduous. While we recommend speaking to an experienced web developer to maximise your website's accessibility, some common sense and know-how can help you put the basics in place.

With that in mind, here are ten steps for basic website accessibility.

The higher the contrast between your foreground and background colours, the easier that content is to read. This reduces eye strain, benefiting people with low vision or vision impairment.

Depending on your graphic design software, many tools are available to ensure your colour selection meets accessibility requirements. The most popular online tool is WebAIM's Contrast Checker. With this checker, you can enter your foreground and background colour values to determine whether you meet WCAG standards. If you’re a Figma user, you can take advantage of A11y or Contrast.

Always pair colour with symbols or other visual formatting when using it to distinguish one site element from another. For instance, pair colour changes with an underline to indicate part of a sentence is a link.

Colour isn’t always a reliable indicator for visitors to your website. Approximately 4% of the Australian population is affected by colour blindness, and an over-reliance on colour to convey information will exclude them. You need to use other visual indicators like symbols or formatting as well.

The size of your website copy is another essential aspect of website accessibility.

To keep page length to a minimum, it can be tempting to use smaller fonts. However, this can significantly impact your website's usability, particularly for people with impaired vision or those using high-resolution monitors.

To maximise your website's accessibility, use large font sizes. A good rule of thumb when selecting a font size is that body copy should be at least 16px in size. An additional benefit is larger fonts give your design room to breathe, making your site more visually appealing

Accessibility considerations aren't only confined to how you present your content; the readability of the content itself is also important.

According to the Australian Bureau of Statistics, 10% of the Australian adult population read at a primary school level; an additional 30% read at a level equivalent to high school students in years 7 to 10.

Depending on your audience, you may presume higher levels of literacy, but where possible, pitch your writing at a level a high school student can understand. Many writing assistants such as Grammarly offer readability assessment tools, but there are also plenty of free tools on offer such as Readability Formulas Readability Checker.

Whether viewing a website from a desktop computer or on the go via a mobile device, it’s essential to consider physical interactions when designing for accessibility.

Fine motor control should never be a requirement for using your website, as it can make access difficult for a significant proportion of your audience.

For this reason, make interactive elements on your website large and easy to click or tap. At the same time, ensure there is adequate spacing between clickable elements. Make it difficult to accidentally click the wrong thing by giving things like buttons room to breathe.

You can't count on all users to interact with your website via a mouse alone. Many people with physical disabilities navigate web content using their keyboard or specialised assistive technologies.

To support these people, ensure users can move through and interact with website content via their keyboard alone. This means using arrow keys to scroll down a webpage or the tab key to cycle through interactive elements. It's also imperative that the tab order of elements makes logical sense. As a guide, use the standard reading pattern of left to right, top to bottom to dictate the order in which users can cycle through interactive features using their keyboard.

Semantic HTML is simply HTML that describes its meaning to a web browser and not just its presentation. For example <div> is a common HTML element which is used to style certain web elements, however a <div> could be anything. Contrastingly, the <button> tag tells the web browser exactly what the element in question is — a button. In this regard the <div> tag is non-semantic while the <button> is semantic.

Semantic HTML is foundational for web accessibility because the assistive technologies that help disabled users use the Web rely on semantic HTML to convey meaning to their users.

For example, a screen reader (a standard assistive technology for visually impaired users) will encounter semantically marked-up headings (H tags) and identify them as such to their user. If those headings were only identifiable as headings thanks to visual style, the screen reader would only interpret them as standard text.

Some examples of semantic HTML:

<H1>, <H2>, etc for headings

<button> for buttons

<p> to indicate paragraphs

<header> to define the header of your website

<footer> to define page footers

<img> for non-decorative images

Always use HTML tags that exist to define specific site elements where relevant to maximise site accessibility.

One of the most appealing things about the Web is its ability to serve multimedia content to your audience. Images, videos, and audio can help make your web content more engaging. However, not all users can experience this content in its native form.

You should always provide text alternatives to ensure all users can engage with multimedia content.

In the case of images, this comes in the form of captions and alt tags (descriptions of images that are typically hidden to the user, but readable by assistive technologies to describe image content to those users).

Providing access to text transcripts for videos and audio content ensures a broader range of users can appreciate this content.

In the latter case, you’re not only helping people dealing with permanent disabilities but also those who may not be in the right environment for watching and listening to multimedia content, such as being on public transport without headphones or the content in question is personal.

The temptation is understandable. You have an excellent demo reel or wonderful spoken word audio selling your product to your visitors, and you want them to engage with it. The obvious solution? Autoplay. However, automatically playing multimedia content when a user lands on your website is a big accessibility no-no.

Even without factoring in accessibility impacts, users find autoplay content annoying. For example, a survey by Consumer World found that 92% of users found auto-playing videos with sound annoying, with 76% indicating they immediately look for a way to turn the sound off. When users couldn't find a way to turn off the sound, almost 69% said they would leave the site.

However, when considering accessibility concerns, the case against autoplay becomes even stronger:

• Users with cognitive disabilities can be confused or distracted by the media
• Some media may risk triggering seizures or other reactions
• Sounds accompanying autoplay can easily interfere with users' ability to use assistive technologies like screen readers.

None of this is to say you can't have multimedia on your site, but access should be consensual. In other words, users must request access by, for example, clicking a play button.

In 1988, the 38th episode of the anime Pokémon rose to infamy after a sequence involving repetitive visual effects resulted in the hospitalisation of 685 children across Japan due to seizures induced by the flashing images. More recently, the video game Cyberpunk 2077 caused a seizure in one of its reviewers, thanks to a scene involving fast flashing lights.

The lesson is clear; flashing content can be dangerous and has no place on your website.

Moving content doesn't carry the same risks as flashing content, but can distract users with cognitive disabilities. And if text is involved, there is a further issue for people with low literacy, as they may not have the opportunity to read the content before it is unavailable.

If you have a valid reason for moving content, give users the ability to pause the movement.

Accessibility should be a concern for every website owner. It is not a luxury that only needs consideration if your audience consists of many people with accessibility issues.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee (founder of the World Wide Web).

Meeting the maximum standards set by the W3C is typically the purview of dedicated web developers. However, meeting a baseline standard for accessibility that will prevent users from leaving your website is not an arduous task. If you follow the rules outlined in this article, your site will be more welcoming for your users regardless of their accessibility requirements.