Book a demo
A complete introduction to web accessibility

A complete introduction to web accessibility

Not sure where to start with your web accessibility? Use this comprehensive guide to successfully plan and implement your accessibility plan.

Douglas Ross

Douglas Ross 20 October 2022

While all businesses should have a clear approach to their web accessibility, government bodies have a unique responsibility to ensure their digital services and tools are accessible to the 1 in 5 people who live with a disability. This is why governments around the world are increasingly focusing on web accessibility.

Why web accessibility is important

Good web accessibility ensures those temporarily or permanently living with disabilities have equal access to information and services. On top of this, websites are more discoverable by search engines like Google when they comply with web accessibility standards.

Without staying up-to-date with the accessibility of your website or digital products, you risk creating hurdles for those accessing your services or products. This means you can face increased complaints, poorer business results, and even regulatory action if yours is a government service website.

How to evaluate the accessibility of your website

Before you make any plans for your web accessibility, it’s useful to know where you stand. To find out how your website stacks up, w3.org has its own list of evaluation tools you can check out.

You can also engage accessibility consultants who can provide a report on your current status and give recommendations for how to begin updating your system.

Where to get started with web accessibility

Your go-to resource is the Web Content Accessibility Guidelines (WCAG) 2.2. These guidelines are the main focus of the Web Accessibility Initiative of the World Wide Web Consortium (W3C). As the main international standards organization for the internet, W3C has been publishing guidelines on web accessibility since 1999 and is the central resource for regulators when assessing a website’s level of accessibility.

You can work through WCAG 2.2. guidelines as a checklist to ensure you’re up to date with the latest international accessibility standards. Keep it by your side and work through it with your web developers. You’ll quickly find out what areas you need to focus on so you can generate a long-term plan.

Get to know your users

Knowing what’s driving user behavior will help you understand the context of why and where they’re dropping off your website or what’s behind the actions they take.

Understanding user behavior and drives also help shape your organization in other ways, as user research is the only way you can find out if your services truly match peoples’ needs.

There are two areas in which you can split your research.

Analytical tools

Analytical tools often come down to desktop research. They don’t always require interaction with your end users or internal stakeholders but can be valuable sources of insights. Some of the most common ways analytical tools inform web accessibility are below.

Google Analytics – this is your go-to, long-term tool for measuring and reporting on your web accessibility approach. Tools like Google Analytics show you who is using your website, when they use it, and how. This means you can measure the impact of changes you make – from visual design to your content. It’s important you provide your web accessibility resources with the training to effectively use Google Analytics. Ongoing training will help them report on data and make well-informed recommendations for your website and organization.

Google Analytics

Screen recorders – screen recorders and heatmaps like Hotjar are valuable, anonymous, and secure ways for you to understand where your website design or content is working and where it might be hindering peoples’ ability to access your services. These tools provide you with two valuable metrics. Heatmaps show you click and scroll behavior on your website, while screen recordings can give you a more granular view.

Hotjar

Customer service data – if you have a support service call center, feedback forms, or an email support service, these are important resources for data on user needs.

User research

This is some of the richest information you can gather to ensure your approach to web accessibility is working. The most common forms of user research include:

Competitor analysis and research – researching similar organizations or the services you provide can give you an ‘indirect’ conversation with people, as you begin to understand their drives.

Workshops (internal and external) – those within your organization come with different backgrounds, both personally and professionally, and can provide valuable insights.

User research – this is valuable for understanding how effectively your content helps users achieve their goals with your website. User research can include focus groups; moderated 1:1 user interviews where you can ask open-ended questions to explore thoughts, behaviors, and attitudes; and user testing, where you give a user a task and observe their behavior when interacting with your website or digital platform.

Surveys – these can help you get quick answers to specific questions about your website or about your user base.

Create an accessible visual design for your website

With 1.3 billion people living with visual impairments around the world, it’s highly likely you have visitors using assistive technologies, like screen readers, to navigate your content. In addition to clinical blindness, think of those with migraines, learning difficulties, dyslexia, myopia, glaucoma, and more.

One of the easiest ways to improve your web accessibility is by achieving good color contrast.

Web Content Accessibility Guidelines (WCAG) stipulate that you should have a contrast ratio of 7:1 for small text and 4.5:1 for large text. A great web accessibility tool is a color contrast checker, like Webaim.org or Coolors.co.

Because visual design is such a large area to cover, the easiest way to ensure you’re maintaining and promoting accessibility is to have your designers keep a live log/report of various aspects of your website’s design and how it relates to accessibility.

Sometimes known as a style guide, this report can include references to:

  • Use of color and contrast (see above ratio)
  • Backend set up for screen readers
  • Use of alt text for images
  • Rules/approach for video transcripts
  • Font types, sizes, and weights
  • Use of spacing and white space across your website
  • Use of imagery (sizing, use of colors, how to upload, etc.

Style guide

Create accessible content layouts

Approximately 50-60% of global internet traffic is accessed via mobile phone. This will increase and evolve as new technologies come online. It’s important to make sure the layout and design of your web pages and their content are intuitive, concise, and optimized for the web.

Some things to consider when assessing the layout of your web pages and content include:

Your choice of fonts – Those with vision impairments may have font sizes set larger than other users. Consider if your content layout is accessible for them. Do they need to scroll both horizontally and vertically to read content when it’s enlarged? If so, this makes it very difficult to engage with information.

Also, consider your choice of fonts and sizes on a page, to improve scannability. Have no more than two font types on a page (for instance, a serif font for your titles and a sans serif font for your paragraphs).

Website responsive design – how does your website function on different screen sizes and devices? It should be an easy, intuitive experience on all devices.

Responsive

Calls To Action – these are buttons, links, or just text that invites users to take an action on our outside of your website. Think about having clear rules around these, such as where they’re positioned on the page, color and contrast design for buttons, and the maximum number you might have on a page.

Remember your buttons and links should be descriptive and simple in their use of language.

Buttons

Content design – is it easy to navigate the copy on a page? Consider tools such as accordions, which can reduce the visual load when someone lands on a page and can help them scan/navigate your content.

Accordions

Static design – keep your website designs static so they can be accessed across different browsers and with tools such as screen readers.

4. Create a readable and inclusive copy

Jackob Nielsen’s eye-tracking study from 2008 indicated that only 20-28% of the content is read on the average webpage. It’s an old study, but it’s still relevant today when we consider the average attention span of Gen Z is 8 seconds.

Users typically scan web pages in an F-shaped pattern. To match this behavior, place your most important information at the top of your page.

The layout of your content can also impact this behavior. Your choice of headings, bullet lists, and links can all influence how someone interacts with your content.

F-shaped pattern

A content style guide can sit alongside your visual design guide and helps all stakeholders understand what’s required of them when commissioning or writing content for your website.

Some things to include in your content style guide include:

Readability – there are some great web accessibility tools that measure the readability of your copy. Hemingway Editor, Grammarly, and Datayze are all useful tools for keeping your language simple, engaging, and concise. The W3C guidelines don’t specify the required reading level of web copy. This is because it depends on what the copy is for (an online medical journal vs. a website full of recipes). However, a good goal is to aim for a Flesch-Kincaid Grade Level of below grade 10.

The tone of voice – workshopping with different stakeholders can help you understand your organization’s tone of voice. Government services typically lean towards having a supportive, concise and positive tone.

Heading structure – make sure you set out rules for your backend heading structure. This means you ideally have a single [H1] tag for the main heading on a page, followed by [H2] tags for each subheading. Any headings that fall within those subsections then follow a logical designation of [H3] or [H4] tags.

Well-structured content hierachy

Content structure – remember to weigh your content with the most important/relevant information at the top. This is so users access important information as soon as they land on a page, and nothing important is hidden further down.

Inclusive writing – beyond creating simple and engaging writing, biases need to be considered when it comes to thinking about accessibility. Cultural assumptions embedded in copy can create hurdles for people from different cultures.

5. Simplify the user journey

The ‘user journey’ is how someone interacts with different elements of your website and how they achieve their goals.

The fewer obstacles you put in the path of a user, the better your website accessibility will be. Those with mobility and cognitive impairments will benefit from having relevant information presented to them as soon as possible in their journey.

A simple audit of your website is usually the first step in simplifying the user journey.

To get started, play around with reorganizing your website or digital platform into fewer ‘levels’, starting from your homepage. Online tools like Miro can be a great way to collaborate during this process.

Simplify the user journey

By doing this, you start to generate a more friendly “Information Architecture” (IA) for your website. This means creating a logical structure for your website so that users make as few ‘clicks’ as possible to access services, products, or information. Your IA will depend on the complexity of your content and service/product but aim for no more than three clicks (levels of information) before your users can achieve their goals.

Meet your users’ expectations

Consistency is important when creating an accessible web experience.

In large organizations, it’s common for content to be created by people from different departments. This can lead to a website being fragmented in its tone of voice, look and feel, right through to its structure.

  • ​​Have a consistent design across all your web pages so that users don't have to re-learn how to use your website after each interaction
  • Try to create a similar structure for your copy where possible, avoiding pages with large chunks of copy vs pages with short paragraphs.
  • Place your buttons and links consistently. Your style guide should have rules on hyperlinks and button placement.
  • Avoid pages overloaded with videos and imagery which could slow down the page speed.
  • Be consistent with formatting, from bullet points through to grammar.
  • Stay on top of any 404 pages and create redirects to relevant pages.

Shaping a manageable approach to your website accessibility

To prevent inconsistencies across your website, think about setting out clear responsibilities for digital production – sometimes known as a ‘Governance plan’ or ‘Publication workflow’. There should ideally be a single gatekeeper who can sign off on updates and new pages. That person can have the authority to push back when content comes in that does not meet web accessibility guidelines.

Of course, this can create a big workload for that person, so consider processes that can help them, such as checklists authors and stakeholders can tick off to ensure their content has a better chance of being published without changes.

Other things you can do to support a long-term strategy for your web accessibility include:

  • Investing in a full-time accessibility resource or training existing staff to incorporate this into their role/s.
  • Having a long-term/multi-year approach to your web accessibility, so you don’t bite off more than you can chew at the start.
  • Maintaining a cross-disciplinary approach. The greater the diversity of voices you have, the more effective your decisions.
  • Set clear goals and work towards them. For instance, you might aim to transfer 200 PDFs to web pages within a year. This helps you with budgeting and placing resources on a task.