1.3.1 Info and Relationships (A) No proper semantic HTML used

Semantic HTML

Ensure, using proper semantic HTML. This means,

• If there is an HTML element with needed or wanted functionality, use it.

  • If a link is needed, use <a>, if a button is needed, use <button> – also, using links and buttons as intended (links to move to content and buttons to do an action) will help navigation immensely, as e.g. screen readers can return lists of buttons/links independently. So knowing what elements will keep you on the page (footnote buttons) and what elements will bring you somewhere (product detail page) is simply made possible by using the correct element.

  • If creating user interface components with input controls like checkboxes, radio buttons, etc., use the appropriate, native semantic HTML elements for them. Use <input type="">, <select>, <button>, ... to ensure accessibility.

  • If writing headings, use the proper semantic HTML headings (<h1>, <h2>, <h3>, <h4>)

  • If you are listing elements (color variants, storage options, products, ...), use semantic list elements (<ul> for lists, where the order is not relevant, <ol> for lists, where the order is relevant, <dl> for key-value-paired descriptions)

• Visual presentation MUST match code markup. If it looks like a heading, semantic HTML heading elements MUST be used. If it does not look like a heading, semantic HTML heading elements MUST NOT be used. Same goes for every other native HTML element.

• Grouping elements/objects/content for layout or styling purposes must only be done, using generic HTML elements.

  • There are only 2 generic HTML elements named in MDN docs – ARIA: generic role. No other element shall be used for this purpose. Those are <div>, <span>,

  • Additionally, the <section> element has the generic role, too. The section however comes with a very crucial limitation, as it "should always have a heading, with very few exceptions".

Best practice HTML nesting

Ensure, using as little nesting as possible. Every single level of nesting inside HTML code will impact website performance. Using a 10-level-hierarchy to create a button with <div>s etc., is completely unnecessary, as a <button>Button text</button> will result in accessible, robust, portable solution and will always outperform.

Outline / Heading structure

Ensure use of heading structure for a page's content. Headings are the most used method to navigate the broad structure of a website for users of screen readers. A clear heading structure will also increase SEO performance. The shop page only uses a single main heading and no more. A good structure could be:

<main>

  2 Passende Tarife zu den mobilen Routern
1 Mobile 5G-Router mit Vertrag
  2 Filter und Sortierung
  2 Geräteliste
    3 GERÄTENAME
    3 ...
  2 Verlässlicher Service rund um Ihre Bestellung
    <!-- as each "feature" has very limited content, headings may not be the best way to organize; evaluate use of list structure -->
  2 Mit den Surfsticks und mobilen ...
  2 Häufig gestellte Fragen ...
    3 ...

<aside>
  
  2 Auswahl ("Warenkorb")
    3 Tarif
    3 Gerät
  2 Vorteile im Überblick
    3 Unbegrenztes Datenvolumen
    3 MagentaEINS Vorteil