Buttons

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.

What the issue is

Buttons with insufficient size and spacing can significantly impede usability for many users. Small buttons or buttons placed too closely together can be difficult to target, especially for users with motor impairments who may have difficulty accurately clicking or tapping the desired button. Touchscreen users and those using alternative pointing devices, such as a stylus, also face challenges when interacting with small or closely spaced buttons.

What the issue is

Incorrect application of ARIA (Accessible Rich Internet Applications) roles to buttons can lead to significant accessibility challenges. For example, a <div> or <span> element being used as a button without an appropriate role="button" attribute fails to convey its function to assistive technology users. Similarly, misuse of ARIA attributes, such as using "aria-pressed" on buttons that do not toggle state, can provide misleading information.

What the issue is

Buttons across a web page that lack consistent activation methods pose a significant barrier to users, especially those relying on assistive technologies or different input methods (e.g., keyboard vs. mouse). If some buttons only activate on a mouse click without a corresponding keyboard event, such as pressing the "Enter" or "Space" key, this can prevent keyboard users from interacting with those elements entirely.