Accompanying Files
Observation Details
The "Empfehlung" badge is added to the tariff option section when selection is changed in section "Welchen Sport wollen Sie live bei MagentaTV sehen?".
This change of content mimics what is usually built with ARIA live regions. Those can be used to announce content changes without moving the current focus, providing information about changed content in other parts of the page. Live regions are often used for alerts, notifications, etc.
The "Empfehlung" badge is added / removed, depending on prior button selection. Changes of adding or removing however are not announced to assistive technology. Without proper announcement, the changes will happen silently and cannot be accessed by certain user groups.
Remediation Notes
Use of ARIA live regions can remediate this issue. For information about ARIA live regions, refer to "MDN docs – Guides – ARIA live-regions", "GOV.UK Design System – Notification banner", and "dequeUniversity – Live Region Playground".
A few remarks about ARIA live regions:
Basis of an ARIA live region is an empty container that must exist on page load. Adding a container later on will not work with ARIA live regions.
As the change, happening on this page, is not an alert, the ARIA
role="status"should be used to implicitly setaria-live="polite"Do not announce every change; this can be done by setting a timeout on announcements, so a user clicking multiple image buttons is not interrupted on every click
Most of the time there also is a "work-around" for ARIA live region use-cases. ARIA live regions can solve the problem of unwanted, unexpected, and inaccessible content changes. On this page, the selection in one section, leads to a different tariff option to be recommended as "Empfehlung".
Easier than a live region structure would be a change of method altogether. Some possible ways to accommodate the functionality:
A form structure, showing the possible (and recommended) tariff option after submit
Tabular data of what sports channels / leagues are included in which tariff option
A hint / description at the beginning of the selection section, informing the user of possible changes, like "Wählen Sie alle Ligen(?), für die Sie sich interessieren. Je nach Auswahl empfehlen wir eine andere Sportoption, die Sie unter 'Die Sportoptionen im Überblick' finden können". This way, the content changes become expected and there is no need to announce every change after each click