ARIA (Accesibile Rich Internet Applications) definește un mod de a face conținutul Web și aplicații Web mai accesibil pentru persoanele cu dizabilități.

La "ascunse" atribut este nou în HTML5 și spune browsere nu este pentru a afișa elementul. A `aria-ascuns de proprietate spune cititoare de ecran dacă ar trebui să ignore element. Avea o privire de la w3 docs pentru mai multe detalii:

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

Utilizarea acestor standarde poate face mai ușor pentru persoanele cu handicap pentru a utiliza web.

Un atribut ascuns este un atribut boolean (True/False). Atunci când acest atribut este folosit pe un element, se elimină toate relevante pentru acel element. Atunci când un utilizator vizualizează pagina html, elemente cu atributul ascuns nu ar trebui să fie vizibile.

Exemplu:

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

Aria-atribute ascunse indică faptul că elementul și TOȚI urmașii lui sunt încă vizibile în browser-ul, dar va fi invizibil pentru instrumente de accesibilitate, cum ar fi cititoarele de ecran.

Exemplu:

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

Uită-te la acest. Acesta ar trebui să răspundă la toate întrebările dumneavoastră.

Notă: ARIA standuri pentru Accesibile Rich Internet Applications

Surse: Paciello Group

Diferență Semantică

Potrivit HTML 5.2:

atunci Când este specificat pe un element, [la "ascunse" atribut] indică faptul că elementul nu este încă, sau nu mai este direct relevante pentru pagina curentă de stat, sau care este utilizată pentru a declara conținut pentru a fi reutilizate de alte părți ale paginii spre deosebire de a fi accesate direct de către utilizator.

Exemplele includ o fila listă, în cazul în care unele panouri nu sunt expuse, sau un log-in ecran, care dispare după ce un utilizator se loghează. Îmi place să numesc aceste lucruri "temporal relevant", adică acestea sunt relevante bazate pe sincronizare.

Pe de altă parte, ARIA 1.1 spune:

[A aria-ascuns de stat] indică dacă un element este expus la accessibility API.

Cu alte cuvinte, elementele cu aria-ascuns="adevărat" sunt eliminate din [**accesibilitate tree**](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree), care mai de tehnologie asistivă onoruri, și elemente cuaria-ascuns="false" va fi cu siguranta expuse la copac. Elemente fără aria-ascuns atribut sunt în "nedefinit (default)" de stat, ceea ce înseamnă agentii utilizator ar trebui să-l expuneți la copac pe baza de redare. E. g. un agent utilizator poate decide pentru a elimina, dacă textul acesteia culoare se potrivește culoarea de fundal.

Acum să comparăm semantica. Este oportun să se utilizeze "ascunse", dar nu aria-ascuns, pentru un element care nu este încă "temporal relevant", dar care ar putea deveni relevante în viitor (în cazul în care ați folosi script-uri dinamice pentru a elimina "ascunse" atribut). Dimpotrivă, este necesar să se folosească aria-ascuns, dar nu "ascunse", pe un element care este întotdeauna relevant, dar cu care nu vrei să dezordine accessibility API; astfel de elemente ar putea include "fler vizual", cum ar fi icoane și/sau imagini care nu sunt esențiale pentru utilizator de a consuma.

Eficientă Diferenta

La semantica au previzibil efecte în browsere/agentii utilizator. Motivul pentru care fac o distincție este că agentul utilizator comportament este *recomandat, dar nu obligatoriu ** prin caietul de sarcini.

La "ascunse" atribut ar trebui să ascundă un element de toate prezentări, inclusiv imprimante și cititoare de ecran (presupunând că aceste dispozitive onoare HTML specificatii). Dacă doriți să eliminați un element de accesibilitate copac , precum mass-media vizuală, "ascunse" ar face truc. Cu toate acestea, nu utilizați "ascunse" doar pentru vrei acest efect. Întreabă-te dacă "ascunse" este semantic corect în primul rând (a se vedea mai sus). Dacă "ascunse" nu este semantic corect, dar totuși doriți pentru a ascunde vizual element, puteți folosi alte tehnici, cum ar fi CSS.

Elemente cu `aria-ascuns="adevărat" nu sunt expuse la accesibilitatea copac, astfel încât, de exemplu, cititoare de ecran nu vor anunta ei. Aceasta tehnica ar trebui să fie utilizate cu atenție, deoarece va oferi experiențe diferite pentru utilizatori diferiți: accesibil agentii utilizator nu va anunța/le face, dar ele sunt încă prestate pe visual agenți. Acest lucru poate fi un lucru bun atunci când este făcută corect, dar are potențialul de a fi abuzat.

Sintactice Diferenta

În cele din urmă, există o diferență în sintaxă între cele două atribute.

"ascunse" este un boolean atribut, adică dacă acest atribut este prezent, este adevărat, indiferent de ce valoare ar putea avea—și dacă atributul este absent. este un fals. Pentru adevărata caz, cea mai bună practică este de a utiliza fie nici o valoare, la toate (<div ascuns>...</div>), sau valoare șir gol (<div ascuns="">...</div>). Mi-ar nu recomanda ascunse="adevărat"pentru că cineva a citit/actualizarea cod s-ar putea deduce căascuns="false" va avea efectul opus, care este pur și simplu incorect.

aria-ascuns, prin contrast, este o atribute enumerate, permițându-una dintr-o listă finită de valori. Dacă aria-ascuns atribut este prezent, valoarea acestuia trebuie să fie "adevărat" " sau " "false". Dacă vrei "nedefinit (default)" de stat, scoateți atribut cu totul.

Lecturi suplimentare: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

setarea aria ascunse, false și comutarea pe element.show() a lucrat pentru mine.

e.g

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

și când ascunzi

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