Don’t disable your users

As the Paralympics showcase the incredible skills of athletes with diverse abilities, it’s a timely reminder to reflect on the accessibility of our digital world. Imagine a Paralympic gold medalist, celebrated for their outstanding physical skills, struggling to navigate something as essential as the internet: ordering a pizza, booking a flight, or simply finding information. Unfortunately, this is a reality for many.

A recent study revealed an average of 57 accessibility errors per page among the top one million homepages (see The WebAIM Million). It begs the question: Is it really that difficult to create an accessible website?

According to the Web Content Accessibility Guidelines (WCAG), websites need to be perceivable, operable, understandable, and robust. In simpler terms: all users should be able to read, understand, navigate, and interact with the site using their senses and assistive technologies.

Navigating the Web: Considering Different Abilities

When designing websites, it’s crucial to consider the diverse ways in which people navigate the web. As web developers, it is our responsibility not to impede their journey. Below, I outline some suggestions for improving accessibility. These thoughts are intended as a starting point for thinking about different abilities, rather than a comprehensive checklist.

Visual impairments affect how users see images and text. Users may be blind, have low vision, or deal with colour blindness or other visual challenges. Some might need to zoom in on pages or adjust contrast settings, while others might use older monitors that don’t display content as intended.

Web developers can enhance site accessibility for users with visual impairments by:

• Using semantic HTML to enable screen readers to easily access different areas of the page (correct headings <h>, defined <header> and <footer>, a correctly formatted navigation <nav> etc.)
• Providing descriptive alt text for images so screenreaders can announce them correctly.
• Ensuring sufficient contrast between text and background, aiming for a ratio of 4.5 to 1.
• Using relative units (em and rem) to define text sizes, allowing users to resize text as needed.
• Clearly labelling elements to indicate their purpose where it is not obvious from the visible name (think of search or menu buttons that use icons rather than words for their name).
• Providing a focus highlight on interactive elements to assist keyboard users.

Motor impairments can make using a mouse or keyboard challenging. Some users struggle with precise movements, while others rely on technology like eye trackers or voice activation to navigate.

To accommodate users with motor impairments, web developers should:

• Ensure all functionality is accessible via both, keyboard and mouse.
• Use semantic HTML for elements like buttons to ensure keyboard accessibility (a <button> element, for example, has built-in keyboard access, while a generic <div> does not).
• Design large, easily clickable buttons.
• Avoid placing small items too closely together.
• Provide alternatives for complex mouse actions.

Cognitive impairments encompass a wide range of challenges, including difficulties with attention span, memory, and language processing. Users with ADHD, autism, brain injuries, learning difficulties, or those on certain medications may find some websites overwhelming or hard to navigate.

To make websites more accessible for users with cognitive impairments, developers can:

• Use clear, simple language and design.
• Maintain a consistent and predictable layout.
• Avoid automatically playing videos or animations.
• Avoid unnecessary timers on forms.
• Use well-known, easy-to-recognize pictograms and icons.
• Use sans-serif fonts to aid users with dyslexia.
• Avoid long text blocks or overly-long lines.

Flashing content can trigger seizures for users with seizure disorders. To prevent this, developers can:

• Avoid using flashing images or animations.
• Provide options to disable animations.

Users with hearing impairments may have difficulty accessing audio content. To accommodate them, developers can:

• Provide captions and/or audio descriptions for multimedia content.
• Offer transcripts for audio content.

Technological Access: Access to technology varies widely. Not everyone has the latest devices or fast internet, and many users rely on mobile devices with limited connectivity. This can be due to structural inequalities, such as the digital divide between urban and rural areas or between developed and low-income countries.

To improve accessibility across the technological divide, developers can:

• Ensure compatibility with older devices and various operating systems.
• Optimise images and web fonts and reduce their number.
• Optimise server performance and enable caching.
• Use responsive design for mobile devices.
• Stick to standard HTML and CSS features that are widely supported.

These practices also contribute to a lower carbon footprint for your site and make maintenance easier. Triple win!

What We Do At Cogapp

Making a website fully accessible after it’s been created, is difficult and time-consuming. Instead, accessibility should be considered from the beginning — starting with design choices (e.g., choosing contrasting color schemes), information architecture (simple and consistent layout, logical navigation), and content creation (using semantic HTML).

At Cogapp, we train our developers in web accessibility. We have recently started using automated accessibility testing during the development phase of our sites to catch and deal with issues before they embed themselves in the project. Once a site is finished, I conduct a full accessibility audit. Any bugs identified are sent back to the developers for fixing. In the end, we create a Voluntary Product Accessibility Template (VPAT) that lists remaining issues, helping users with specific access needs understand which parts of the site may pose challenges. After launch, we continue working with our clients to improve accessibility over time.

While this detailed process may not be feasible for everyone, especially non-profits or very small businesses, significant improvements can be made with less effort.

Easy Wins

Fortunately, accessibility features are built into HTML and browsers. Using semantic markup guarantees that elements behave correctly on a variety of devices and for users of all abilities. A <button> element not only looks and behaves like a button but is also inherently focusable, can be activated using the keyboard, and is correctly recognized by screen readers. Everybody wins, including developers who save time and effort by incorporating these features.

A considerable amount of damage occurs when developers intentionally or unintentionally disrupt these features, such as removing focus highlights or tabindex on elements. Perhaps we should adopt a doctor’s mantra “do no harm” when creating websites.

There are many more easy wins for accessibility, such as using relative units, providing alt text, enabling automatic captions, and choosing contrasting color schemes. However, it requires insight into the various ways people use the internet to know when not to interfere with intended HTML features. Why not watch a video to learn how a blind user navigates a website? Or try simulating how certain impairments impact on using the web? Consider following a blog about web accessibility to deepen your understanding?

Improving accessibility begins with small steps — progress over perfection, as the accessibility educator Maryl Evans calls it. Of course, the ultimate goal is to make all websites fully accessible to everyone. But don’t let the complexity of the task overwhelm you. And don’t use it as an excuse not to start now.