Ik heb het aria-attribuut overal gezien tijdens het werken met Angular Material. Kan iemand mij uitleggen wat het voorvoegsel aria betekent? maar het belangrijkste wat ik probeer te begrijpen is het verschil tussen aria-hiddenen hiddenattribuut.

Antwoord 1, autoriteit 100%

ARIA (Accessible Rich Internet Applications) definieert een manier om webcontent en webapplicaties toegankelijker te maken voor mensen met een handicap.

Het hiddenattribuut is nieuw in HTML5 en vertelt browsersom het element niet weer te geven. De eigenschap aria-hiddenvertelt schermlezersof ze het element moeten negeren. Bekijk de w3-documenten voor meer details:

https://www.w3.org/WAI/PF/ aria/states_and_properties#aria-hidden

Het gebruik van deze standaarden kan het voor mensen met een handicap gemakkelijker maken om internet te gebruiken.

Antwoord 2, autoriteit 11%

Een verborgen attribuut is een booleaans attribuut (True/False). Wanneer dit attribuut op een element wordt gebruikt, verwijdert het alle relevantie voor dat element. Wanneer een gebruiker de html-pagina bekijkt, mogen elementen met het verborgen kenmerk niet zichtbaar zijn.

Voorbeeld:

   <p hidden>You can't see this</p>

Aria-verborgen attributen geven aan dat het element en ALLE onderliggende elementen nog steeds zichtbaar zijn in de browser, maar onzichtbaar zullen zijn voor toegankelijkheidstools, zoals schermlezers.

Voorbeeld:

   <p aria-hidden="true">You can't see this</p>

Bekijk dit . Het zou al je vragen moeten beantwoorden.

Opmerking:ARIA staat voor Accessible Rich Internet Applications

Bronnen:Paciello Group

Antwoord 3, autoriteit 4%

Semantisch verschil

Volgens HTML 5.2:

Wanneer gespecificeerd op een element, geeft [het hiddenattribuut] aan dat het element nog niet, of niet langer, direct relevant is voor de huidige status van de pagina, of dat het wordt gebruikt om te declareren inhoud die door andere delen van de pagina kan worden hergebruikt in plaats van rechtstreeks door de gebruiker te worden geopend.

Voorbeelden zijn onder meer een lijst met tabbladen waarop sommige panelen niet zichtbaar zijn, of een inlogscherm dat verdwijnt nadat een gebruiker zich heeft aangemeld. Ik noem deze dingen graag ‘tijdelijk relevant’, dat wil zeggen dat ze relevant zijn op basis van timing.

p>

Aan de andere kant zegt ARIA 1.1:

[De status aria-hidden] geeft aan of een element wordt blootgesteld aan de toegankelijkheids-API.

Met andere woorden, elementen met aria-hidden="true"worden verwijderd uit de accessibility tree, die door de meeste ondersteunende technologie wordt geëerd, en elementen met aria-hidden="false"zal zeker worden blootgesteld aan de boom. Elementen zonder het attribuut aria-hiddenbevinden zich in de “undefined (default)”-status, wat betekent dat user-agents deze aan de boom moeten tonen op basis van de weergave. bijv. een user-agent kan besluiten om het te verwijderen als de tekstkleur overeenkomt met de achtergrondkleur.

Laten we nu de semantiek vergelijken. Het is gepast om hiddente gebruiken, maar nietaria-hidden, voor een element dat nog niet “tijdelijk relevant” is, maar dat wel relevant kan worden in de toekomst (in dat geval zou u dynamische scripts gebruiken om het kenmerk hiddente verwijderen). Omgekeerd is het gepast om aria-hiddente gebruiken, maar niet hidden, op een element dat altijd relevant is, maar waarmee je de toegankelijkheids-API niet wilt vervuilen; dergelijke elementen kunnen “visuele flair” bevatten, zoals pictogrammen en/of afbeeldingen die niet essentieel zijn voor de gebruiker om te consumeren.

Effectief verschil

De semantiekheeft voorspelbare effectenin browsers/user-agents. De reden dat ik een onderscheid maak, is dat het gedrag van gebruikersagenten aanbevolenis, maar niet vereistdoor de specificaties.

Het kenmerk hiddenmoet een element verbergen voor allepresentaties, inclusief printers en schermlezers (ervan uitgaande dat deze apparaten de HTML-specificaties respecteren). Als je een element uit de toegankelijkheidsstructuur envisuele media wilt verwijderen, zou hiddenhet lukken. Gebruik echter niet hiddenalleen omdatu dit effect wilt. Vraag uzelf eerst af of hiddeneerst semantisch correct is (zie hierboven). Als hiddensemantisch niet correct is, maar u het element toch visueel wilt verbergen, kunt u andere technieken gebruiken, zoals CSS.

Elementen met aria-hidden="true"worden niet weergegeven in de toegankelijkheidsstructuur, dus schermlezers zullen ze bijvoorbeeld niet aankondigen. Deze techniek moet zorgvuldig worden gebruikt, omdat deze verschillende gebruikers verschillende ervaringen zal bieden: toegankelijke user agents zullen ze niet aankondigen/weergeven, maar ze worden nog steeds weergegeven op visuele agents. Dit kan een goede zaak zijn als het correct wordt gedaan, maar het kan misbruikt worden.

Syntactisch verschil

Ten slotte is er een verschil in syntaxis tussen de twee attributen.

hiddenis een booleaans attribuut, wat betekent dat als het attribuut aanwezig is, het waar is, ongeacht de waarde die het kan hebben, en als het attribuut afwezig is, is het onwaar . In het echte geval is de beste praktijk om ofwel helemaal geen waarde te gebruiken (<div hidden>...</div>), ofwel de lege stringwaarde (<div hidden="">...</div>). Ik zou niethidden="true"aanbevelen omdat iemand die je code leest/bijwerkt, zou kunnen concluderen dat hidden="false"het tegenovergestelde effect zou hebben , wat gewoon onjuist is.

aria-hidden, daarentegen, is een opgesomd attribuut , waardoor een van een eindige lijst van waarden mogelijk is. Als de aria-hiddenkenmerk aanwezig is, moet de waarde "true"of "false"zijn. Als u wilt dat de “undefined (standaard)” -staat het attribuut helemaal verwijderen.

Verder lezen:
https://github.com/chharvey/chharvey.github.io/wiki / Verborgen-inhoud

Antwoord 4

Instelling Aria-verborgen om te vals en schakelt het op element.Show () werkte voor mij.

b.g

<span aria-hidden="true">aria text</span>
$(span).attr('aria-hidden', 'false');
$(span).show();

en bij het verbergen

$(span).attr('aria-hidden', 'true');
$(span).hide();