Strādājot ar Angular Material, esmu redzējis aria atribūtu. Vai kāds var man paskaidrot, ko nozīmē priedēklis aria? bet pats galvenais, ko es cenšos saprast, ir atšķirība starp aria-hidden
un hidden
atribūtiem.
ARIA (Accessible Rich Internet Applications) definē veidu, kā tīmekļa saturu un tīmekļa lietojumprogrammas padarīt pieejamākas cilvēkiem ar invaliditāti.
Atribūts hidden
ir HTML5 jaunums, un tas norāda, ka bruseriem šis elements nav jāattēlo. Īpašība aria-hidden
norāda ekrānlasītājiem, vai tiem jāignorē elements. Sīkāku informāciju skatiet w3 dokumentos:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden.
Izmantojot šos standartus, cilvēkiem ar invaliditāti var atvieglot tīmekļa lietošanu.
Slēptais atribūts ir bula atribūts (True/False). Ja šis atribūts tiek izmantots elementam, tas noņem jebkādu atbilstību šim elementam. Kad lietotājs skatās html lapu, elementiem ar slēpto atribūtu nav jābūt redzamiem.
Piemērs:
<p hidden>You can't see this</p>
Aria-hidden atribūti norāda, ka elements un VISI tā pēcnācēji joprojām ir redzami pārlūkprogrammā, bet būs neredzami pieejamības rīkiem, piemēram, ekrāna nolasītājiem.
Piemērs:
<p aria-hidden="true">You can't see this</p>
Paskaties šo. Tam vajadzētu atbildēt uz visiem jūsu jautājumiem.
Piezīme: ARIA nozīmē Accessible Rich Internet Applications (Pieejamas bagātīgas interneta lietojumprogrammas).
Avoti: Paciello Group.
Saskaņā ar HTML 5.2:
Slēptais atribūts] norāda, ka elements vēl nav vai vairs nav tieši saistīts ar lapas pašreizējo stāvokli vai ka tas tiek izmantots, lai deklarētu saturu, ko atkārtoti izmantos citas lapas daļas, nevis lai lietotājs tam tieši piekļūtu.
Piemēram, cilnes saraksts, kurā daži paneļi nav redzami, vai pieteikšanās ekrāns, kas pēc lietotāja pieteikšanās pazūd. Man patīk šīs lietas saukt par "laika ziņā būtiskām", t. i., tās ir būtiskas, pamatojoties uz laiku.
No otras puses, ARIA 1.1 teikts:
[aria-hidden
stāvoklis] norāda, vai elements ir pakļauts pieejamības API.
Citiem vārdiem sakot, elementi ar aria-hidden="true"
tiek izņemti no pieejamības koka, ko lielākā daļa palīgtehnoloģiju respektē, bet elementi ar aria-hidden="false"
noteikti tiks pakļauti kokam. Elementi bez atribūta aria-hidden
ir "nedefinētā (noklusējuma)" stāvoklī, kas nozīmē, ka lietotāja aģentiem tas ir jāatklāj kokā, pamatojoties uz tā atveidi. Piemēram, lietotāja aģents var nolemt to izņemt, ja tā teksta krāsa sakrīt ar fona krāsu.
Tagad salīdzināsim semantiku. Ir lietderīgi izmantot hidden
, bet ne aria-hidden
elementam, kas vēl nav "laika ziņā būtisks", bet kas var kļūt būtisks nākotnē (tādā gadījumā jūs izmantotu dinamiskos skriptus, lai noņemtu hidden
atribūtu). Un otrādi, ir lietderīgi izmantot aria-hidden
, bet ne hidden
elementam, kas vienmēr ir būtisks, bet ar kuru nevēlaties pārblīvēt pieejamības API; šādi elementi var ietvert "vizuālo izsmalcinātību", piemēram, ikonas un/vai attēlus, kas nav būtiski lietotājam.
semantikai ir paredzams iedarbības efekts pārlūkprogrammās/lietotāju aģentos. Iemesls, kādēļ es to nošķīru, ir tāds, ka lietotāja aģenta uzvedība ir ieteicama, bet ne prasīta specifikācijās.
Atribūtam hidden
vajadzētu paslēpt elementu no visām prezentācijām, tostarp no printeriem un ekrāna lasītājiem (pieņemot, ka šīs ierīces ievēro HTML specifikācijas). Ja vēlaties izņemt elementu no pieejamības koka līdztekus vizuālajiem medijiem, hidden
paveiks šo uzdevumu. Tomēr neizmantojiet hidden
tikai tāpēc, ka vēlaties šādu efektu. Vispirms pajautājiet sev, vai hidden
ir semantiski pareizs (sk. iepriekš). Ja hidden
nav semantiski pareizs, bet jūs tomēr vēlaties vizuāli paslēpt elementu, varat izmantot citas metodes, piemēram, CSS.
Elementi ar aria-hidden="true"
nav pakļauti pieejamības kokam, tāpēc, piemēram, ekrāna nolasītāji par tiem nepaziņos. Šis paņēmiens jāizmanto uzmanīgi, jo tas nodrošinās atšķirīgu pieredzi dažādiem lietotājiem: pieejamie lietotāju aģenti tos nepaziņos/neizrādīs, bet vizuālie aģenti tos joprojām atveidos. Ja tas tiek darīts pareizi, tā var būt laba lieta, taču to var arī ļaunprātīgi izmantot.
Visbeidzot, starp abiem atribūtiem ir sintakses atšķirība.
hidden
ir dēla atribūts, kas nozīmē, ka, ja atribūts ir klāt, tas ir patiess - neatkarīgi no tā, kāda vērtība tam varētu būt, un, ja atribūta nav, tas ir nepatiess. Patiesā gadījumā labākā prakse ir vai nu neizmantot nekādu vērtību (<div hidden>...</div>
), vai arī izmantot tukšu virknes vērtību (<div hidden=""">...</div>
). Es neiesaku lietot hidden="true"
, jo kāds, kas lasa/atjaunina jūsu kodu, var secināt, ka hidden="false"
radīs pretēju efektu, kas ir vienkārši nepareizi.
Turpretī aria-hidden
ir izskaitļots atribūts, kas pieļauj vienu no galīga vērtību saraksta. Ja ir atribūts aria-hidden
, tā vērtībai jābūt vai nu "true"
, vai "false"
. Ja vēlaties "nedefinētu (noklusējuma)" stāvokli, atribūtu vispār noņemiet.
Turpmāka lasīšana: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content