Best practice verwenden aria-label als Selektor für das styling

Bin ich styling, eine Tabelle, Tabellenzellen mit (nicht-interaktiven) Haken. Das Häkchen-Symbole Hinzugefügt werden, per CSS. Da es keine zugänglichen Inhalt im es, ich fügte hinzu, ein aria-label. Jetzt Frage ich mich, ob es eine gute Idee, verwenden Sie dieses Attribut als CSS-Selektor für die Häkchen-Symbole wie diese:

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

Habe ich gelernt, dass die Verwendung von ARIA-Attribute als Selektoren ist generell eine gute Praxis, zumindest für den Staat bezogene Attribute wie aria-hidden, aria-expanded etc. In diesem Fall machte es Sinn für mich zu haben, die td-styling, verbunden mit dem entsprechenden label. Aber natürlich, wenn diejenigen, die Etiketten ändern sich, irgendwann werde ich anpassen müssen, um die CSS zu.

Kennen Sie irgendwelche anderen Nachteile, außer dass? Oder haben Sie Ideen auf, wie zu lösen dieses mehr aus?

InformationsquelleAutor josi | 2017-03-27

2

Darstellen control-Staaten, die nicht nativ vermittelt in HTML, wie erweitert (zum Beispiel), dann stützte sich auf die ARIA-Attribute wie Stil-Selektoren kann eine gute Passform.

In diesem Fall werden Sie sich auf CSS hinzufügen von Inhalt zu einer Seite basierend auf dem ARIA-ich glaube nicht, dass Sie brauchen. Erstens, Unterstützung für aria-label (auf <td>s sowie andere Elemente) kann wackelig auf ältere browser /screen reader combos, und zweitens, Unterstützung für CSS-generierte Inhalte, die durch ältere browser /screen reader combos kann mehr wackelig. Ich weiß nichts über Ihre Benutzer, jedoch, zu wissen, ob diese Fragen.

Diese übernimmt auch die CSS-Lasten ohne Problem (Netzwerk-Tropfen, etc).

Bedeutet dies, dass einige Nutzer können nie hören oder sehen den Wert in der Zelle.

Ich versuche, um sicherzustellen, dass der raw-Daten ist unabhängig davon verfügbar, ob das CSS lädt es Stil, und ich auch versuchen zu begrenzen, mein Vertrauen auf ARIA.

Dass gesagt wird, die aria-hidden Unterstützung ist in der Regel historisch besser als die zwei Probleme, die ich anspreche oben.

Lassen Sie mich werfen Sie noch eine Idee Ihren Weg. Dies ist nicht unbedingt besser, aber ich denke, es ist eher robust, wenn man bedenkt unbekannter Benutzer AN Konfigurationen und mögliche Netzwerk-Probleme.

Ich beide, text und Häkchen in das <td>. Wenn die CSS-nie geladen wird (oder der Benutzer ist auf einen sehr alten browser), keine große Sache. Das Schlimmste, dass passieren wird, ist ein Benutzer sieht /hört "ja überprüfen."

Dann die aria-hidden stellt sicher, dass das Häkchen nicht angekündigt-Bildschirm-Leser. Die CSS wird der text von Sehbehinderung. Und ich denke, Sie haben den Effekt, den Sie wollen.
```
<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
```
Vielen Dank für deine Antwort, ich wusste nicht, dass die Unterstützung für aria-label ist so schlecht. Unter Berücksichtigung all dieser Punkte, deine Lösung ist definitiv besser. Da ich die Entwicklung einer Art style-guide und nur eine markup-Schnipsel, meine Absicht war, zu zwingen (oder "ermuntern", um es positiv ;)) die Menschen bauen die Website um einige Inhalte. In Ihrem Fall ist es möglich, nur das auslassen der "visuell-hidden" Teil ohne optischen Unterschied. Aber natürlich ist dies nicht schwerer Wiegen als die Nachteile, die mein Ansatz.
Es ist nicht so, dass aria-label support schlecht ist, sondern wickelte Sie in eine Tabelle, und sich auf jeder aktuellen kit ist manchmal schwierig, ohne zu wissen, das Publikum. Ich ermutige Sie, dies zu betrachten-support-Tabelle: powermapper.com/tests/screen-readers/aria "Zuverlässigkeit, wenn Sie richtig eingesetzt (65% im Durchschnitt)"
Ich habe nur editiert, die Antwort zu enthalten links zu den support-Informationen. Sorry ich habe es Links in der originellen Antwort.

InformationsquelleAutor aardrian
1

Kennen Sie irgendwelche anderen Nachteile, außer dass?

Auf mit aria-label Attribut als ein Selektor für das styling, es ist technisch kein problem.
- Über diese Verwendung von aria-label
Es sich noch nicht ausreichend genug, um eine gültige alternative text für alle Art von Zugänglichkeit betrifft.

Sehr wenige Menschen, die einen screen-reader. Wenn aria-label kann eine Hilfe für Sie (je nach screen-reader-Unterstützung, siehe @aardrian Antwort), es ist von keinem nutzen für einen großen Teil der Bevölkerung.

Eine spezielle UTF-8-code repräsentiert ein Häkchen ist nichts anderes optisch als ein Bild, und die Benutzer können erwarten, zum Beispiel, um einen tooltip. Für diese Angelegenheit, die title Attribut wird empfohlen, verwendet, gemeinsam mit aria-label für eine bessere browser-und Screenreader-Unterstützung.

Jemand mit einer Bildschirm-Lupe oder mit einer kognitiven Störung, kann dann Zugriff auf den alternativen text das Häkchen, ohne zu scrollen, um der Tabelle eine überschrift für die Spalte.

Das problem wird noch wichtig sein für jemand mit motorischen Behinderungen, weil mit Blättern zu sehen, die überschrift oder verwenden Sie die Maus, um zu sehen, was diese Markierung bedeutet, ist immer noch sehr schwierig.

TLDR: ARIA nicht die Universelle Zugänglichkeit für alle Arten von Behinderungen

Ihr Punkt über das Häkchen-Zeichen ist korrekt. Zu diesem Ende, da ich lieber vermeiden title wenn möglich (wegen der Probleme, die ich erlebt habe im Internet Namen-Berechnung) habe ich manchmal Folgen Sie diesem Verfahren: tink.uk/zugänglich-emoji, Die ich auch gezwickt zu werden Tastatur erreichbar: adrianroselli.com/2016/12/accessible-emoji-tweaked.html (keine Kritik an deiner Antwort, dachte nur, vielleicht finden Sie diese Beiträge nützlich)
Danke, das ist eine gute Technik

InformationsquelleAutor Adam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.