Si të rregulloni problemet e aksesueshmërisë së faqes suaj të internetit
Njerëzit e verbër përdorin gjithashtu internetin, kështu që bërja e faqes tuaj të aksesueshme për ta—dhe për të tjerët me aftësi të kufizuara—do të përmirësojë përvojën e tyre me biznesin tuaj. Gjithashtu, nëse jeni kontraktor qeveritar, kjo mund t'ju kërkohet me ligj.
Çfarë është neni 508?
Seksioni 508 është një ligj federal që urdhëron që faqet e internetit federale të jenë të aksesueshme, pothuajse në të njëjtën mënyrë që ndërtesat janë projektuar me rampa për karriget me rrota dhe dyer automatike. Uebsajtet qeveritare duhet të jenë lehtësisht të shikueshme nga lexuesit e ekranit dhe të ofrojnë mjete të tjera aksesueshmërie. Seksioni 508 është posaçërisht vetëm për faqet e internetit .gov , por nëse merrni ndonjë formë parash nga qeveria, faqja juaj e internetit duhet gjithashtu të jetë e aksesueshme sipas seksionit 504 të Aktit të Rehabilitimit të vitit 1973, ose mund të paditeni dhe gjobitur.
Nëse jeni plotësisht në sektorin privat, nuk keni nevojë legalisht të pajtoheni me nenin 508/504. Por ju duhet të dizajnoni faqen tuaj të internetit duke mbajtur parasysh personat me aftësi të kufizuara. Shpesh, këta njerëz do të hyjnë në faqen tuaj të internetit me ndihmën e një pajisjeje për leximin e ekranit, e cila do t'u lexojë uebsajtin tuaj. Bërja që uebfaqja juaj të sillet siç pritet përmes një lexuesi të ekranit është një pjesë kyçe e pajtueshmërisë me aksesueshmërinë.
Si të kontrolloni aksesueshmërinë e faqes suaj të internetit
Një paketë e shkëlqyer veglash për shikimin e çështjeve të aksesueshmërisë është total11y nga Khan Academy. Është një plugin që instaloni në faqen tuaj të internetit duke shtuar një etiketë <script> me një lidhje në të; kjo është diçka që do të dëshironi të bëni me një version zhvillimi të faqes suaj të internetit sepse përndryshe do t'ua tregonte butonin të gjithëve.
Kjo shtojcë do të shfaqë gabime pranë elementeve përkatëse, më pas do t'ju tregojë se çfarë të bëni për t'i rregulluar ato:
Ai gjithashtu ka një mjet shumë të dobishëm që ju tregon se si një lexues i ekranit do të shikojë faqen tuaj të internetit.
Për më tepër, ju mund të drejtoni të gjithë faqen tuaj nëpërmjet një kontrolluesi të aksesueshmërisë si PowerMapper, i cili kontrollon përputhshmërinë me WCAG 2.0.
Problemet e zakonshme të aksesueshmërisë (dhe si t'i rregulloni ato)
Bërja e faqes suaj të aksesueshme nuk kërkon që ju të ridizajnoni gjithçka, thjesht shtypni disa gabime që mund të keni humbur gjatë krijimit të saj. Zakonisht, këto çështje janë të vogla dhe përfshijnë vetëm shtimin e disa elementeve shtesë.
Teksti Alt
Teksti alternativ në imazhe është një çështje kryesore. Teksti është i lehtë për t'u trajtuar nga lexuesi i ekranit, por imazhet nuk mund të përkthehen lehtësisht automatikisht. Kështu që ju duhet të siguroni një përkthim, edhe nëse është i shkurtër dhe i thjeshtë. Kjo mund të bëhet duke shtuar etiketën alt :
<img src="smiley.gif" alt="Smiley face">Përndryshe, një lexues i ekranit do të lexojë emrin e skedarit. Megjithatë, nëse imazhi është dekorativ dhe dëshironi që lexuesi i ekranit ta shpërfillë, mund të specifikoni një etiketë alt por ta lini përmbajtjen bosh.
Shkronjat e mëdha
Shkronjat e mëdha mund të shkaktojnë konfuzion për lexuesit e ekranit. Për shembull, fjala ne shpesh lexohet si SHBA. kur shkruhen me shkronjë të madhe. Për të rregulluar këtë problem, në vend të kësaj zgjidh përdorimin e veçorisë CSS text-transform në vend të shkronjave të mëdha të tekstit.
text-transform: uppercase;Kjo ka përfitimin e shtuar se është i zbatueshëm për të gjithë titujt dhe mund të ndryshohet lehtësisht nëse dizajni juaj ndryshon në të ardhmen.
Navigimi me tastierë
Faqja juaj e internetit duhet të jetë e aksesueshme duke përdorur tastin e skedës për të kaluar nëpër elementë. Një pjesë e rëndësishme e kësaj janë lidhjet Kapërceni navigimin. Uebsajtet shpesh kanë tituj në çdo faqe dhe futja në skeda e tyre është shumë zhgënjyese kur shfletoni. Pra, gjëja e parë që duhet të shohë një përdorues që lundron me tastierë është një etiketë <a> me një href në përmbajtjen tuaj kryesore.
Natyrisht, ju nuk e dëshironi këtë në kokën tuaj gjatë gjithë kohës, vetëm kur dikush e vendos mbi të. Kjo zakonisht bëhet duke vendosur një element me një z-index për të ndryshuar z-index kur fokusohet, duke përdorur modifikuesin e përzgjedhjes CSS :focus :
.show-on-focus:focus {
z-index: 1;
top: 0;
left: 0;
}Një çështje tjetër është mungesa e artikujve të tabelave. Pikat kryesore të referimit në faqen tuaj duhet të jenë të lehta për t'u futur. Ju mund ta bëni këtë thjesht duke shtuar atributin tabindex tek elementët:
<div tabindex="0"> ... </div>Mund të keni shumë indekse në të njëjtin numër dhe ato do të lexohen në rend zbritës, bazuar në pozicionin e tyre në HTML. Mund ta ndryshoni numrin për të llogaritur blloqet jashtë rendit.
Kontrasti
Ky nuk është vetëm një këshillë aksesueshmërie, pasi vlen për faqen tuaj në përgjithësi. Nëse kontrasti është shumë i ulët, njerëzit me dëmtime të shikimit mund të kenë probleme për ta parë atë, por kjo mund të prekë edhe njerëzit normalë nëse problemi është i rëndë.
Për fat të mirë, tota11y bën një punë të shkëlqyeshme për t'ju treguar se cilët elementë kanë probleme:
Madje do të sugjerojë ngjyra zëvendësuese që mund të përmirësojnë kontrastin tuaj. Vini re se kontrasti varet gjithashtu nga madhësia, pasi teksti më i vogël është më i vështirë për t'u dalluar në sfonde me ngjyra të ngjashme.
Etiketat hyrëse
Çdo etiketë <input> duhet të ketë një etiketë korresponduese <label> , në mënyrë që lexuesi i ekranit të dijë se për çfarë është hyrja. Ndonjëherë mund të kthehet në tekstin e mbajtësit të vendeve, por kjo nuk mjafton.
<label for="my-input">
Label text here...
</label>
<input id="my-input">Etiketa <label> vendoset drejtpërdrejt mbi hyrjen dhe lidhet me të me një atribut for=\\ që përmban ID-në e hyrjes.
Pikat e referimit ARIA
Këto janë të lehta për t'u shtuar dhe kategorizojnë rajonet e faqes tuaj në blloqe:
Ju mund t'i shtoni këto thjesht duke shtuar një atribut role në etiketat tuaja div :
<div role="navigation"> ... </div>Bëni elementet të padukshëm për lexuesit e ekranit
Nëse diçka po dëmton një lexues të ekranit, por duhet të jetë në sajtin tuaj, mund ta hiqni atë me atributin aria-hidden :
<span aria-hidden="true" tabindex="-1">Për më tepër, atributi i fshehur HTML dhe direktiva CSS shfaq: asnjë do të bëjnë që një element të jetë i padukshëm për lexuesit e ekranit. Ju do të dëshironi të siguroheni që lexuesi i ekranit nuk po lexon HTML nga vendet që nuk duhet të jetë në gjendje t'i shohë.