Ispravno sakriti sadržaj

Nisu sve metode skrivanja sadržaja pogodne za korisnike programa za čitanje ekrana ili drugih pomoćnih tehnologija. Na ovoj stranici opisani su osnovni načini skrivanja sadržaja za sve korisnike i za korisnike programa za čitanje ekrana.

Učiniti sadržaj nevidljivim (vizuelno sakrivenim)

Ako je element na stranici:

• interaktivni element, ali ga treba učiniti nevidljivim, a da i dalje može biti tematski (na primer, link, checkbox, prekidač ili kontrola forme sa prilagođenim stilovima),
• naslov ili oznaka za nešto čija je svrha očigledna (i stoga naslov/oznaku nije potrebno prikazivati vidljivim korisnicima; na primer, oznaka sekcije ili oznaka polja forme),
• ne treba da bude vidljiv vidljivim korisnicima, ali treba biti vidljiv korisnicima programa za čitanje ekrana,

... tada treba da ga učinite nevidljivim (vizuelno sakrivenim).

To možete postići:

davanjem elementu klase visually-hidden,
u Drupalu 8 podesite polja na stranici za upravljanje prikazom za podtipove entiteta (na primer polje „Tags“ u tipu sadržaja Article) tako da oznaka polja bude postavljena na „- Visually Hidden -“,
koristeći CSS da ga pozicionirate van vidljive oblasti stranice, ili,
koristeći CSS

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

na elementu.

Primer:
Skrivanje naslova poruke o grešci, upozorenja i statusa.

Obrazloženje:
U većini tema poruke o statusu su istaknute u obojenim okvirima, pa privlače pažnju vidljivih korisnika, ali u skladu sa odeljkom 1.3.3 WCAG 2.0, razumevanje i korišćenje sadržaja ne sme zavisiti samo od senzorskih karakteristika komponenti kao što su oblik, veličina, vizuelni položaj ili orijentacija.

Bez naslova koji ukazuje o kakvim se porukama radi, korisnici programa za čitanje ekrana mogu biti zbunjeni.

Većina programa za čitanje ekrana može preskočiti stranicu koristeći naslove na stranici. Dodeljivanje naslova porukama olakšaće njihovo pronalaženje.

Učiniti sadržaj nevidljivim dok neko ne dođe do njega pomoću tastature

Ako je element na stranici:

• link koji pomaže korisnicima da pređu na glavni sadržaj ili glavnu navigaciju,
• alternativa drugim elementima koji se mogu koristiti samo mišem, ili,
• jednostavno ne treba biti vidljiv vidljivim korisnicima, osim ako ne koriste tastaturu za navigaciju kroz stranicu,

... tada treba da ga učinite nevidljivim dok neko ne dođe do njega pomoću tastature.

To možete postići:

• davanjem elementu OBA klasa visually-hidden i focusable, ili
• korišćenjem CSS-a

css_selector_for_my_element {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

Gde je css_selector_for_my_element selektor za element koji želite da učinite nevidljivim dok neko ne dođe do njega pomoću tastature.

Primer:
Link „Idi na glavni sadržaj“ na vrhu svake stranice u glavnim temama.

Obrazloženje:
Korisnici koji koriste samo tastaturu i čitače ekrana žele brzo da pređu na glavni sadržaj stranice.

Da biste ispunili standarde WCAG 2.0 odeljak 2.4.1, morate omogućiti način da se preskoče blokovi sadržaja koji se ponavljaju na više stranica.

Potpuno sakriti sadržaj za sve korisnike

Ako je element na stranici:

• ne treba da bude prikazan dok neki JavaScript događaj ne učini vidljivim,
• nije relevantan za vidljive korisnike ili korisnike čitača ekrana u tom kontekstu,
• sadrži vrednosti koje JavaScript čita/piše, ali nikada ne treba direktno prikazati, ili,
• generalno ne treba da bude vidljiv vidljivim korisnicima ili korisnicima čitača ekrana,

... tada treba potpuno da ga sakrijete od svih korisnika.

To možete postići:

• davanjem elementu klase hidden (u D8),
• ako je to polje u podtipu entiteta, podesite njegov format na „- Skriveno -“ na stranici za upravljanje prikazom za taj podtip entiteta,
• ako je to oznaka polja u podtipu entiteta, podesite prikaz oznake na „- Skriveno -“ na stranici za upravljanje prikazom za taj podtip entiteta, ili
• korišćenjem CSS pravila: display: none;

Primer:
Sakrivanje oblasti pregleda kolor modula dok se ne pokrene JavaScript:

/* color.css (Drupal 7 i 8) */
#preview {
  display: none;
}

Obrazloženje:
Pregled ne funkcioniše ako JavaScript ne radi, pa nije potreban nikome.

Zloupotrebe

Česta nepravilna upotreba „display:none“ je uklanjanje oznake ili naslova forme radi promene izgleda stranice. Međutim, to će učiniti element forme nepristupačnim korisnicima programa za čitanje ekrana!

Na primer, ako uklonite oznaku forme pomoću „display:none“, korisnik programa za čitanje ekrana može reći: „Imam obavezno tekstualno polje za unos, ali nemam pojma za šta služi“. U takvoj situaciji bolje je sadržaj učiniti nevidljivim (vizuelno skrivenim).

Učiniti sadržaj nevidljivim za programe za čitanje ekrana

Ako je element na stranici:

• sam po sebi zbunjujući, ili,
• treba da bude vidljiv samo vidljivim korisnicima,

... tada treba da ga učinite nevidljivim za programe za čitanje ekrana.

To možete postići:

• davanjem elementu atributa aria-hidden="true"

Primer:
Kontrola za uklanjanje filtera pretrage prikazuje „x“ samo vidljivim korisnicima i pruža pristupačne vizuelno skrivene instrukcije korisnicima programa za čitanje ekrana:

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Obrazloženje:
Već postoji pristupačan alternativni tekst.

Samo slušanje „x“, čak i nakon što je alternativni tekst pročitan, može zbuniti korisnike programa za čitanje ekrana.

Zloupotrebe

Pravljenje sadržaja nevidljivim za programe za čitanje ekrana znači da korisnici pomoćnih tehnologija ne mogu da ga percipiraju ili interaguju sa njim. Da biste ispunili zahteve WCAG 2.0, odeljak 1.1, morate obezbediti pristupačan alternativni sadržaj, inače korisnici pomoćnih tehnologija neće moći da koriste taj sadržaj.

Više o nevidljivom sadržaju

• Preporuke WebAIM-a
• display:none problem za programe za čitanje ekrana