By bob.dodd, 29 January, 2024

Hi, Im Bob Dodd and I work in digital accessibility. It's been my life and passion for over 25 years and I wanted to give something back to the community. 

I plan to provide a mix of free (as in speech) digital accessibility tools to support developers, testers, and auditors. I also want to give some guidance on the kind of issues to look for when testing a website. To that end, I'm starting with an ever-growing list of issues categorized according to subject matter e.g. language, Headings, Landmarks, with each issue described in detail with references back to WCAG.

What the issue is

Using heading tags (h1, h2, h3, etc.) for styling purposes rather than to structure content hierarchically misleads users who rely on assistive technologies. For example, choosing an <h4> tag because it visually matches the desired text size, despite it being a primary section title that logically should be an <h1> or <h2>. This misuse of headings disrupts the document's structure, leading users to misinterpret the level of importance of various sections on the page.

What the issue is

Using headings (h1, h2, h3, etc.) improperly by skipping levels in the page structure can make it confusing for users who rely on assistive technologies to navigate web content. For example, moving directly from an h1 to an h3 heading without an intervening h2 disrupts the hierarchical structure of a page.

What the issue is

The use of the "aria-labelledby" attribute is a powerful way to provide accessible names for buttons, especially when text alone does not convey enough context, or when aiming to combine text from multiple sources. 

What the issue is

Buttons that lack clear keyboard focus indicators make it difficult for users who rely on keyboard navigation to determine which element has focus. This issue typically arises in custom-styled web pages where the default focus styles provided by browsers have been overridden or removed. Without visible focus indicators, keyboard users may lose track of their current position on the page, leading to a frustrating and inefficient navigation experience.

What the issue is

Toggle buttons that do not clearly communicate their state (e.g., "on" or "off") to the user can lead to confusion and difficulty in understanding the current state of the interface. This issue is often observed in buttons that change function or appearance when activated but do not provide adequate feedback to signify this change, especially to assistive technology users. An example of this issue is a "mute" button that changes function to "unmute" when activated but does not change its label or provides any other form of state indication.

What the issue is

When the visible label text of a button does not match its accessible name (the name exposed to assistive technologies), it can lead to confusion and inconsistency for users relying on screen readers or other assistive technologies. An example of this issue is when a button labeled "Submit Form" on the screen has an accessible name of "Go" due to a mismatch in the `aria-label` attribute.

What the issue is

Buttons with text that is too small or lacks sufficient contrast against the button background can be difficult to read for many users. This readability issue can particularly impact users with vision impairments, including those with low vision or color vision deficiencies. Ensuring text within buttons is clearly legible is crucial for all users to identify and understand the function of each button.

What the issue is

Buttons that do not provide visual feedback when interacted with (e.g., via mouse hover, focus, or activation) can cause confusion and uncertainty for users. Visual cues such as changes in color, elevation, enclosing box,  or animation help indicate that a button can be interacted with and has indeed been activated or is currently focused. Without these cues, users, especially those with visual impairments or cognitive disabilities, may struggle to understand whether their actions have been registered.

What the issue is

Buttons that are inadequately labeled or utilize generic text such as "click here" or "submit" without providing context of the action being performed can significantly reduce accessibility. Users, especially those relying on screen readers, may not understand the purpose of the button or the action it initiates. This lack of clarity can lead to confusion and impede the ability to navigate and use a website effectively.