Mit Bootstrap modal habe ich diese aria Attribute oft gesehen, aber ich wusste nie, wie man sie nutzt.Was sind diese Attribute: `aria-labelledby` und` aria-hidden`
Weiß jemand, welche Fälle diese Attribute verwenden? Ich habe gegoogelt - ich habe keine einfachen Antworten gefunden.
HTML5 ARIA Attribut ist, was Sie suchen. Es kann in Ihrem Code auch ohne Bootstrap verwendet werden.
Accessible Rich Internet Applications (ARIA) definiert Möglichkeiten, Web Inhalte und Web-Anwendungen (vor allem diejenigen, entwickelt mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen zu machen.
für Ihre Frage genau zu sein, hier ist das, was sind Ihre Attribute
aria-labelledbyals ARIA attribute states and model genannt: Bezeichnet das Element (oder Elemente), die das aktuelle Element markiert.
aria-hidden (state): Zeigt an, dass das Element und alle seine Nachkommen für jeden Benutzer nicht sichtbar oder wahrnehmbar sind als vom Autor umgesetzt.
Die Hauptkonsumenten dieser Eigenschaften sind Benutzerprogramme wie Screenreader für Blinde. In dem Fall mit einem Bootstrap-Modal hat das Modal divrole="dialog". Wenn der Bildschirmleser bemerkt, dass ein div sichtbar wird, der diese Rolle hat, wird es die Bezeichnung für das div sprechen.
Es gibt viele Möglichkeiten, Dinge zu beschriften (und ein paar neue mit ARIA), aber in manchen Fällen ist es angebracht, ein existierendes Element als Etikett (semantisch) zu verwenden, ohne das <label> HTML-Tag zu verwenden. Bei HTML-Modeln ist das Label normalerweise ein <h> Header. Im modalen Bootstrap-Fall fügen Sie also aria-labelledby=[IDofModalHeader] hinzu, und der Bildschirmleser spricht diesen Header, wenn das Modal angezeigt wird.
Im Allgemeinen wird ein Screenreader bemerken, wann immer DOM-Elemente sichtbar oder unsichtbar werden, so dass die Eigenschaft aria-hidden häufig redundant ist und wahrscheinlich in den meisten Fällen übersprungen werden kann.
ARIA ändert nicht die Funktionalität, es ändert nur die präsentierten Rollen/Eigenschaften für Benutzer von Bildschirmleseprogrammen. WebAIM’s WAVE toolbar identifiziert ARIA-Rollen auf der Seite.
Werden Rollen und Eigenschaften nicht geändert, sodass Screenreader-Benutzer eine andere Erfahrung erhalten, die genau unter die Definition einer Funktionsänderung fallen? –
aria-hidden="true" werden dekorative Elemente wie Glyphicon-Symbole aus Bildschirmlesern ausblenden, die keine sinnvolle Aussprache hat, um keine Verwirrungen zu verursachen. Es ist eine schöne Sache, als gute Praxis zu tun.
Dies ist viel spezifischer als die angenommene Antwort – mizurnix
Dies ist eine hilfreichere Antwort IMO. – amflare