ARIA (Accessible Rich Internet Applications) opredeljuje način, kako narediti spletno vsebino in spletne aplikacije bolj dostopne invalidom.

Atribut hidden je novost v jeziku HTML5 in brskalnikom sporoča, naj elementa ne prikažejo. Lastnost aria-hidden pove zaslonskim bralnikom, ali naj element ignorirajo. Za več podrobnosti si oglejte dokumente w3:

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

Uporaba teh standardov lahko invalidom olajša uporabo spleta.

Skriti atribut je logični atribut (True/False). Če je ta atribut uporabljen za element, se odstrani vsa pomembnost tega elementa. Ko si uporabnik ogleda html stran, elementi s skritim atributom ne smejo biti vidni.

Primer:

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

Atributi aria-hidden označujejo, da so element in VSI njegovi potomci še vedno vidni v brskalniku, vendar bodo nevidni za orodja za dostopnost, kot so bralniki zaslona.

Primer:

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

Oglejte si to. Odgovori na vsa vaša vprašanja.

Note: ARIA pomeni Accessible Rich Internet Applications (Dostopne bogate internetne aplikacije).

Izvori: Paciello Group

Semantična razlika

V skladu s HTML 5.2:

Če je določen za element, [atribut hidden] označuje, da element še ni ali ni več neposredno povezan s trenutnim stanjem strani ali da se uporablja za deklariranje vsebine, ki jo bodo ponovno uporabili drugi deli strani, namesto da bi do nje neposredno dostopal uporabnik.

Primeri vključujejo seznam zavihkov, kjer nekatere plošče niso izpostavljene, ali prijavni zaslon, ki po prijavi uporabnika izgine. Te stvari rad imenujem "časovno pomembne", kar pomeni, da so pomembne glede na čas.

Po drugi strani pa ARIA 1.1 pravi:

[Stanje aria-hidden] označuje, ali je element izpostavljen API za dostopnost.

Z drugimi besedami, elementi z aria-hidden="true" so odstranjeni iz drevesa dostopnosti, kar večina podporne tehnologije spoštuje, elementi z aria-hidden="false" pa bodo zagotovo izpostavljeni drevesu. Elementi brez atributa aria-hidden so v "nedoločenem (privzetem)" stanju, kar pomeni, da ga morajo uporabniški agenti izpostaviti drevesu glede na njegovo prikazovanje. Uporabniški agent se lahko npr. odloči, da ga odstrani, če se barva njegovega besedila ujema z barvo ozadja.

Zdaj primerjajmo semantiko. Za element, ki še ni "časovno pomemben", vendar bi lahko postal pomemben v prihodnosti (v tem primeru bi uporabili dinamične skripte za odstranitev atributa hidden), je primerno uporabiti hidden, ne pa tudi aria-hidden. Nasprotno pa je primerno uporabiti aria-hidden, ne pa hidden, za element, ki je vedno pomemben, vendar z njim ne želite obremenjevati API za dostopnost; takšni elementi lahko vključujejo "vizualno okrasje", kot so ikone in/ali slike, ki za uporabnika niso bistvenega pomena za uporabo.

Učinkovita razlika

Semantika ima predvidljive učinke v brskalnikih/uporabniških agentih. Razlikujem zato, ker je vedenje uporabniškega agenta priporočeno, ne pa zahtevano v specifikacijah.

Atribut hidden bi moral skriti element pred vse predstavitvami, vključno s tiskalniki in bralniki zaslona (če te naprave upoštevajo specifikacije HTML). Če želite element odstraniti iz drevesa dostopnosti tako kot iz vizualnih medijev, bo to storil atribut hidden. Vendar pa ne uporabljajte hidden samo zato, ker želite ta učinek. Najprej se vprašajte, ali je hidden semantično pravilen (glejte zgoraj). Če hidden ni semantično pravilen, vendar še vedno želite vizualno skriti element, lahko uporabite druge tehnike, na primer CSS.

Elementi z aria-hidden="true" niso izpostavljeni drevesu dostopnosti, zato jih na primer bralniki zaslona ne bodo objavili. To tehniko je treba uporabljati previdno, saj bo različnim uporabnikom zagotovila različne izkušnje: dostopni agenti jih ne bodo objavili/prikazali, vendar bodo še vedno prikazani na vizualnih agentih. To je lahko dobro, če je pravilno izvedeno, vendar se lahko tudi zlorabi.

Sintaktična razlika

Nazadnje je med obema atributoma razlika v sintaksi.

hidden je boolean atribut, kar pomeni, da če je atribut prisoten, je resničen - ne glede na to, kakšno vrednost bi lahko imel - in če atributa ni, je napačen. V primeru true je najboljša praksa, da ne uporabite nobene vrednosti (<div hidden>...</div>) ali vrednosti praznega niza (<div hidden="">...</div>). Ne priporočam hidden="true", ker bi lahko nekdo, ki bere/posodablja vašo kodo, sklepal, da ima hidden="false" nasprotni učinek, kar je preprosto napačno.

V nasprotju s tem je aria-hidden numeriran atribut, ki omogoča eno od končnega seznama vrednosti. Če je atribut aria-hidden prisoten, mora biti njegova vrednost bodisi "true" bodisi "false". Če želite stanje "nedefinirano (privzeto)", atribut popolnoma odstranite.

Nadaljnje branje: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content