Misleading toggle announcement

[aek5ba]

What's the issue The 'Calendar' and 'Date Range' buttons are separate buttons. However, both use the attribute aria-pressed, which is misleading as it implies that the button can be "pressed" and then "un-pressed" by activating the same trigger, when in actuality the user must press the adjacent button.

Simplified Code Sample

Calendar Date Range

Why it matters Screen reader users will have certain expectations on how to interact with an element or component based what is announced. If an attribute is added but the matching functionality is missing, the user will not be able to properly interact with the element or component.

Our recommendation

Group the buttons so users will know they are related. On the parent

, add role="group". Give the group of buttons a name to clarify the group's purpose. On the parent

, add aria-label="Calendar / Date range view toggle" (or select more appropriate text for the aria-label). On both buttons, replace the aria-pressed attribute with aria-current. Toggle the values between true when the button is active and false when not active.

Code example

Calendar Date Range

Type WCAG 2

Success Criteria 1.3.1 Info and Relationships (A)

Severity Medium

Item Calendar / Date Range toggle buttons

Section Modal - Modal as Overlay