semantic html accessibility

semantic html accessibility: Was kommt im Baum an?

Vergleichen Sie Divs, ARIA und native Elemente. Das Röntgenbild zeigt, welche Bereiche eine Rolle erhalten und wo HTML bereits Tastaturverhalten mitbringt.

Semantik-Röntgen

DOM → Accessibility-Tree

0/6Nur visuelle Struktur

Markup

  1. <div class="header">…</div>
  2. <div class="navigation">…</div>
  3. <div class="main">…</div>
  4. <div class="article">…</div>
  5. <div class="button">Speichern</div>
  6. <div class="footer">…</div>

Semantikbaum

  1. Kopfbereichkeine Rolle
  2. Hauptnavigationkeine Rolle
  3. Hauptinhaltkeine Rolle
  4. Eigenständiger Beitragkeine Rolle
  5. Aktion auslösenkeine Rolle
  6. Seitenabschlusskeine Rolle
0 nativ1 Bedienrisiko
<div class="header">…</div>
<div class="navigation">…</div>
<div class="main">…</div>
<div class="article">…</div>
<div class="button">Speichern</div>
<div class="footer">…</div>

Eine Rolle allein macht kein Element bedienbar. Namen, Verschachtelung und Verhalten brauchen zusätzlich einen Test der veröffentlichten Seite.