Observation: Interactive element uses non-semantic HTML

Priority: Critical Medium Page: Apple Watch Familienkonfiguration Observation Permalink

Observation Details

Footnote button in section "Jetzt Apple Watch SE mit Smart Connect M bestellen" is marked up as follows:

<span 
  data-url="/unterwegs/ajax?ssb_block=dynamic-mapping&amp;toGet=footnotes-popup&amp;productId=tariff:16309" 
  class="..." 
  data-tealium-rel="content" 
  id="legal-notes-18794751934">
  ::before
</span>

All interactive elements that do not use native, 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 non-semantic 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

Use semantic HTML button element <button> instead.

Using non-native, non-semantic HTML elements to build functionality, native, semantic HTML elements already provide should be a rare occasion. As the first rule of ARIA use describes, if there is a semantic HTML with needed or wanted functionality this should always be used instead of ARIA.

Ensure, semantic HTML elements are used for all interactive elements and components. Refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Button" for technical requirements for building interactive user interface components (buttons).