aria-label on disabled navigation

[sirganya]

I notice when the navigation dots are visible but not interactive the aria-label still reads "Go to step 1" etc.
Is this the correct behaviour or should that label be removed to prevent confusion?

[JeffreyQ]

Here is what chatgpt 4o says:

When navigation dots are visible but not interactive, having an aria-label that reads "Go to step 1" can indeed be confusing for users relying on screen readers. The aria-label suggests that the dots are interactive, which might not be the case if they are not clickable.

Best Practices for Accessibility

1. Remove or Modify Aria-label: If the navigation dots are not interactive, consider removing the aria-label or modifying it to reflect their non-interactive status. For example, you could change the label to "Step 1 (not clickable)" to clarify.

2. Use aria-disabled: If the navigation dots are part of the tab order and can receive focus, use the aria-disabled="true" attribute to indicate that they are not interactive.

3. Hide from Assistive Technologies: If the dots should not be part of the navigation experience at all, you might consider using aria-hidden="true" to hide them from screen readers.

Example Adjustment

Here's a conceptual example of how you might adjust the aria-label for non-interactive navigation dots:

<div
  role="button"
  aria-label={isInteractive ? "Go to step 1" : "Step 1 (not clickable)"}
  aria-disabled={!isInteractive}
  aria-hidden={!isInteractive}
>
  •
</div>

Conclusion

It's crucial to ensure that the accessibility features of your application accurately reflect the user interface's behavior. Misleading aria-labels can create confusion and hinder the user experience for those relying on assistive technologies. Adjusting the labels or attributes as suggested can help maintain clarity and accessibility. If you need further assistance with implementation, feel free to ask!