10 namigov za preprosto dostopnost, ki jih lahko vsak uporabi

Danes je svetovni dan zavedanja o dostopnosti (Global Accessibility Awareness Day). Da to obeležimo in pomagamo promovirati dostopnost, je tukaj 10 preprostih namigov za dostopnost; namigov, ki jih lahko skoraj vsak že danes uporabi v HTML-ju in CSS-ju svoje spletni strani in jo tako naredi bolj dostopno.

1. Dodajte dodatno besedilo k svojemu logotipu

Dodatno besedilo se prikaže za slepe uporabnike bralnikov zaslona namesto slik, ki jih ne morejo videti. Vsaka slika, ki predstavlja vsebino ali ima funkcijo na vaši spletni strani, bi morala imeti dodatno besedilo. No pa začnimo, če dodate dodatno besedilo k logotipu vaše strani, ki je ime vašega podjetja ali organizacije, bo to uporabnikom pomagalo vedeti na kateri strani so.

Preprosto najdite svojo sliko z logotipom v vaši kodi in, če ga ni, dodajte alt atribut katerega vrednost je ime vašega podjetja ali organizacije.

<img src="webaimlogo.jpg" alt="WebAIM - Web Accessibility In Mind">

2. Dodajte osnovne mejnike

ARIA mejniki označujejo velika področja strani ter jim dajejo pomen ter omogočajo, da lahko s tipkovnico lažje navigiramo po njih. Na voljo je več vrst mejnikov, ampak, če preprosto dodate 3 – glavna stran, navigacija, in iskanje – lahko to občutno poveča dostopnost vaše strani. Najdite elemente na vaši strani, ki obdajajo ali omejujejo glavno vsebino, glavno navigacijo ter iskanje po strani (ta bo verjetno <form> element) in dodajte primeren atribut v vlogi mejnika (role="main", role="navigation", ali role="search". Če vaša stran uporablja HTML5 <main> ali <nav>, dodajte vlogo k tem elementom.

<div id="maincontent" role="main">

<form action="search.php" role="search">

3. Izboljšajte kazalce fokusa

Uporabniki tipkovnice, ki niso slepi ponavadi navigirajo po povezavah in obrazcih na spletni strani z uporabo Tab in Shift+Tab tipk na tipkovnici. Da lahko vidijo na kateri povezavi ali polju obrazca se nahajajo, zagotovite tako, da dodate sledeče k svoji CSS datoteki:

a:focus {
outline:1px solid red;
background:yellow;
}

Barve bo verjetno potrebno prilagoditi, da se bodo ujemale z oblikovanjem vaše strani, ampak morale bi biti prepoznavne.

Če želite narediti še dodaten korak v tej smeri lahko v svojih CSS datotekah poiščete a:hover in to pri vsakem primeru spremenite v a:hover, a:focus. Tako boste zagotovili, da bodo uporabniki tipkovnic dobili enak vidni poudarek, kot ga dobijo uporabniki miške, ko bodo navigirali po strani.

4. Določite obvezna polja obrazcev

Če ima vaš obrazec mešanico obveznih in neobveznih polj, dodajte atribut aria-required="true" k vsakemu vnosu, ki je obvezen. To jih bo razkrilo kot obvezne za uporabnike bralnikov zaslona.

<input type="text" name="username" aria-required="true">

5. Naredite svoj naslov strani <h1>

Vaš naslov strani (ki ga ne smemo zamešati s <title> elementom, čeprav bi naj ta bil kratek opis vsebine strani) je ponavadi veliko, krepko besedilo, ki ponavadi stoji na začetku glavne vsebine ter opisuje vsebino ali funkcijo tiste strani. Sicer je dobra struktura naslovov za vaš celoten dokument odlična za dostopnost, bo prav tako pomagalo pri navigaciji na strani in njenem razumevanju, če svoj glavni naslov strani naredite <h1>.

6. Določite glave tabel

Če ima vaša stran podatkovne tabele, jih boste naredili mnogo bolj dostopne tako, da pravilno označite celice v glavi tabele. Najdite glave vrstic ali/in stolpcev (skoraj vedno celica v prvi vrstici in prvem stolpcu) in se prepričajte, da so označene s <th> elementom (kratica za table header), namesto s <td> elementom (kratica za table data). <th> element naj dobi scope vrednost atributa col če je glava stolpca ali row če je glava vrstice.

Spremenite <td>Date</td> v <th scope="col">Date</th>

7. Določite napise tabel

Večina tabel ima kratko opisno besedilo takoj pred podatkovno tabelo, ki opisuje to tabelo. Ta opis ali napis tabele lahko povežete s samo tabelo tako, da uporabite <caption> element. Ta element bi moral biti prva stvar v vaši <table> oznaki.

Na primer, to
<p>Class Schedule</p>
<table><tr>....

vi spremenili v to
<table>
<caption>Class Schedule</caption>
<tr>....

8. Izogibajte se "Klikni tukaj"

Preiščite vašo stran in najdite besede „Klikni tukaj“. To link text je dvoumno za vse uporabnike, ampak še posebej težko je za uporabnike bralnikov zaslona. Vedno doda dodatno nepotrebno besedilo. Spremenite besedilo povezave tako, da bolje opisuje vsebino ali funkcijo povezave.

Na primer, to
<a href="prices.htm">Kliknite tukaj</a> za cenik

bi spremenili v to
<a href="prices.htm">Cenik</a>

9. Odstranite tabindex

Preiščite kodo vaše strani za vse tabindex atribute. Če je vrednost atributov 1 ali več in niste popolnoma prepričani zakaj je bila dodana ali, če je bila dodana pravilno, odstranite ta atribut. Tabindex določa vrstni red navigacije tipkovnice, ampak skoraj vedno povzroči več težav z dostopnostjo, kot jih reši. Če vaš vrstni red navigacije ni logičen (to lahko preverite tako, da navigirate s Tab tipko), prestrukturirajte svojo kodo na strani tako, da bo logična.

10. Preverite svojo stran v WAVE

Orodje WAVE web accessibility evaluation tool je preprosto za uporabo in vam nudi povratne informacije o vaši spletni strani ter omogoča dodatno preverjanje. Pojdite na http://wave.webaim.org/, vnesite URL vaše spletne strani in pritisnite gumb, da dobite povratne informacije o dostopnosti vaše spletne strani.