Zugänglichkeit in html5

Question

Wir möchten Unterstützung für Menschen mit Behinderungen hinzufügen. Also habe ich darüber im Internet gelesen, bin aber von dort nicht zu viel geworden. Ich verstehe nicht, wann man aria verwendet und wann man role Attribute verwendet.

Ich habe einfaches HTML mit 3 Spalten. Ich habe Attribute in diesem verwendet und wollte wissen, was mehr an diesem HTML für Zugänglichkeit getan werden kann. Wie wenn wir aria-labelledby und aria-describedby verwenden möchten.

<div class="container"> 
    <div class="partners clearfix"> 
     <h2 role="My Content Heading">My Content Heading</h2> 
     <div class="row" role="partner type"> 
     <div class="col-xs-12 col-sm-4"> 
     <div class="partner__list text-center"> 
     <div class="center"> 
      <i class="service"></i> 
      <h2>Partner 1</h2> 
      <p>Partner 1 Description</p> 
      <div class="button-pos"> 
      <a href="link1">Learn More</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
     <div class="partner__list text-center"> 
     <div class="center"> 
      <i class="tech"></i> 
      <h2>Partner 2</h2> 
      <p>Partner 2 Description</p> 
      <div class="button-pos"> 
      <a href="link1">Learn More</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
     <div class="partner__list text-center"> 
     <div class="center"> 
      <i class="content"></i> 
      <h2 class="text-lg text-black text-ellipsis">Partner 3</h2> 
      <p>Partner 3 Description</p> 
      <div class="button-pos"> 
      <a href="link1">Learn More</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

Zwei Dinge sofort aus stehen die verbessert werden könnten:

1) Sie verwenden, was ein font-Symbol zu sein scheint, die Bedeutung, die hat zu haben scheint keine text alternative:

<i class="service"></i> 

Sie können dies mit einer aria-label property angeben. Darüber hinaus würde ich mit einer Spanne statt, wenn <1> empfehlen:

<span class="service" aria-label="service"></span> 

2) Der Text in Ihren Links ist repetitiv und hat keine spezifische Informationen über das Link-Ziel.Screenreader-Nutzer scannen oft die Links ein Gefühl für den Seiteninhalt zu bekommen und without the surrounding content this will be less useful that it could be („erfahren Sie mehr“, „erfahren Sie mehr“, „erfahren Sie mehr“)

<a href="link1">Learn More</a> 

Ich würde empfehlen, spezifische Informationen in der verknüpften Hinzufügen Text eher als die generische "mehr erfahren":

<a href="link1">Learn More about partner 1</a> 

Modified Markup für einen Abschnitt:

<div class="container"> 
    <div class="partners clearfix"> 
    <h2 role="My Content Heading">My Content Heading</h2> 
    <div class="row" role="partner type"> 
     <div class="col-xs-12 col-sm-4"> 
     <div class="partner__list text-center"> 
      <div class="center"> 
      <span class="service" aria-label="service"></span> 
      <h2>Partner 1</h2> 
      <p>Partner 1 Description</p> 
      <div class="button-pos"> 
       <a href="link1">Learn More about Partner 1</a> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

Dieser Code-Schnipsel ist bereits zugänglich. Der einfachste HTML-Code benötigt keine zusätzliche ARIA-Unterstützung. Text-to-Speech-Software wird nur in der Reihenfolge durchlesen, und Tastaturen können Tab auf die Links und drücken Sie die Eingabetaste, um sie zu klicken. ARIA ist für interaktive Widgets wie Tabs oder Kalender gedacht.

Rollenattribute sind Teil der ARIA-Spezifikation. Sie müssen keine Werte für die Beschreibung Ihres Inhalts erstellen. Sie sollten nur von this list verwendet werden, wenn sie auf Ihre Arbeit angewendet werden.

Sie könnten auch diese introduction to web accessibility Artikel und die anderen Ressourcen auf dieser Website nützlich finden, um mehr darüber zu erfahren.

Answer 3

Wie bereits erwähnt, ist der Code bereits zugänglich. Wenn Sie zum Erstellen von UI-Elementen kein JavaScript verwenden, sind normalerweise keine WAI-ARIA-Rollen oder -Attribute erforderlich.

Ich habe nur zwei Kommentare über Ihren Code:

• Warum verwenden Sie einen div um <a href="link1">Learn More</a> anstelle eines p? Bildschirmleser können zwischen Absätzen bewegen, aber div Elemente sind bedeutungslos, soweit ich weiß.
• Wenn die Partnerbeschreibungen wie eine Tabelle aussehen sollen, und insbesondere wenn es regelmäßige Zeilen- oder Spaltenüberschriften geben soll, sollten Sie Tabellen-Markup anstelle von CSS-formatierten div Elementen verwenden. Die regelmäßige Tabellenauszeichnung ist für einen Bildschirmleser sinnvoll. Das Entwerfen von Elementen div, die wie eine Tabelle aussehen, führt zu einem bedeutungslosen (d. h. aus der Sicht eines Browsers oder eines Bildschirmlesers) Code-Durcheinander.