Zugänglichkeit von Text

10.1 Zugänglichkeit

Zugänglichkeit (accessibility) von Web-Inhalten ist ein wichtiger Bestandteil modernen Webdesigns. Ziel ist es, sicherzustellen, dass alle Benutzer, einschließlich Menschen mit Behinderungen, problemlos mit Webseiten interagieren können.

Eines der wichtigsten Werkzeuge zur Erreichung dieses Ziels sind ARIA-Attribute (Accessible Rich Internet Applications), die die Zugänglichkeit von Web-Inhalten verbessern, indem sie sie verständlicher und zugänglicher für unterstützende Technologien wie Bildschirmleseprogramme machen.

Was ist ARIA?

ARIA (Accessible Rich Internet Applications) ist eine spezielle Attributsammlung, die man zu HTML-Elementen hinzufügen kann, um deren Zugänglichkeit zu verbessern. Diese Attribute bieten zusätzliche Informationen über die Struktur und das Verhalten von Elementen, was unterstützenden Technologien hilft, Web-Inhalte besser zu interpretieren und damit zu interagieren.

Wichtigste ARIA-Attribute zur Verbesserung der Lesbarkeit von Text:

Das Attribut aria-label

Das Attribut aria-label wird verwendet, um einem Element ein Textlabel zu geben, das von einem Bildschirmleser gelesen wird. Dieses Attribut ist nützlich, wenn ein Element kein sichtbares Label hat oder wenn eine detailliertere Beschreibung erforderlich ist.

Verwendungsbeispiel:

    
      <button aria-label="Dialogfenster schließen">X</button>
    
  

Das Attribut aria-labelledby

Das Attribut aria-labelledby verknüpft ein Element mit einem anderen Label auf der Seite, indem es die id des Labels verwendet. Dies ist nützlich, wenn ein Element mit einem bereits bestehenden Label verknüpft werden muss, um Kontext und Beschreibung bereitzustellen.

Verwendungsbeispiel:

    
      <h2 id="section-title">Abschnittsüberschrift</h2>
      <p aria-labelledby="section-title">Dies ist ein Textabsatz, der zur Abschnittsüberschrift gehört.</p>
    
  

Das Attribut aria-describedby

Das Attribut aria-describedby verknüpft ein Element mit einem oder mehreren Elementen, die eine Beschreibung enthalten, indem es deren id verwendet. Dieses Attribut ist nützlich, um einem Element zusätzliche Informationen oder Kontext bereitzustellen.

Verwendungsbeispiel:

    
      <input type="text" aria-describedby="input-description">
      <p id="input-description">Bitte geben Sie Ihren Namen ein.</p>
    
  

10.2 Rolle

Das Attribut role

Das Attribut role definiert die Rolle eines Elements und gibt unterstützenden Technologien an, wie dieses Element interpretiert werden soll. Es gibt viele Rollen wie button, navigation, main, article und viele andere.

Verwendungsbeispiel:

    
      <nav role="navigation">
        <ul>
          <li><a href="#home">Startseite</a></li>
          <li><a href="#about">Über uns</a></li>
          <li><a href="#contact">Kontakt</a></li>
        </ul>
      </nav>
    
  

Das Attribut aria-live

Das Attribut aria-live wird für dynamisch aktualisierte Inhalte verwendet. Es informiert den Bildschirmleser, dass sich der Inhalt innerhalb des Elements geändert hat und vorgelesen werden soll. Werte umfassen off, polite und assertive.

Verwendungsbeispiel:

    
      <div aria-live="polite">
        <p>Hier werden wichtige Informationen angezeigt.</p>
      </div>
    
  

Das Attribut aria-hidden

Das Attribut aria-hidden gibt unterstützenden Technologien an, ob ein Element für Benutzer zugänglich sein soll. Der Wert true verbirgt das Element vor unterstützenden Technologien, während der Wert false es zugänglich macht.

Verwendungsbeispiel:

    
      <div aria-hidden="true">
        <p>Dieser Text wird von Bildschirmlesern verborgen.</p>
      </div>
    
  

Das Attribut aria-expanded

Das Attribut aria-expanded gibt an, ob ein Element erweitert oder minimiert ist. Es wird häufig in Steuerelementen verwendet, wie z.B. "Akkordeons" und Dropdown-Menüs.

Verwendungsbeispiel:

    
      <button aria-expanded="false" aria-controls="menu">Menü</button>
      <ul id="menu" hidden>
        <li><a href="#item1">Element 1</a></li>
        <li><a href="#item2">Element 2</a></li>
        <li><a href="#item3">Element 3</a></li>
      </ul>
    
  

Das Attribut aria-controls

Das Attribut aria-controls gibt an, welches Element vom aktuellen Element gesteuert wird. Es wird zusammen mit Attributen wie aria-expanded verwendet, um interaktive Steuerelemente zu erstellen.

Verwendungsbeispiel:

    
      <button aria-controls="content" aria-expanded="false">Anzeigen/Verbergen</button>
      <div id="content" hidden>
        <p>Verborgener Inhalt.</p>
      </div>
    
  

1

Umfrage/Quiz

Textgestaltung, Level 15, Lektion 5

Nicht verfügbar

Textgestaltung

Textgestaltung

Öffnen