Observation Details
Buttons using link elements and vice versa, Link elements without text. Link elements without href attribute, with empty href attribute or using href attribute not for link target.
Including:
"Preisübersicht anzeigen"
"Tarif ändern"
"Tarif entfernen"
"Zurück" in "Handyankauf" dialog window
All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:
Interactivity of element is not announced → user will not know, that element is interactive
Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change
Target resource is not announced → e.g. user will not know, where a link leads to
Interactive action is not announced → e.g. user will not know, that a dialog window will be opened
Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.
Remediation Notes
Ensure, using proper semantic HTML. This means, all interactive elements for actions use <button> elements and <a> elements are only used for moving to a different document (page, website, file). <a> elements must be used with href attribute which has a relative or absolute link target and uses # notation for on-page / anchor targets to existing IDs.
Please refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for technical requirements of links, buttons, etc.