blog na temat dostępności stron internetowych

Przejdź do głównej treści

Ukrywanie elementów strony

Czasem istnieją sytuacje, w których nie jest pożądane przedstawienie użytkownikom wszystkich treści zawartych w kodzie HTML. Istnieje wiele różnych metod ukrywania elementów stron, zastosowanie niewłaściwej w danej sytuacji techniki może jednak stworzyć problemy dla pewnych grup użytkowników. W tym artykule przyjrzymy się zatem głównym metodom ukrywania treści, ich zastosowaniu i skutkom.

Co i dlaczego chcemy ukryć

Na wstępie warto odpowiedzieć sobie na pytanie, przed kim i dlaczego chcemy ukryć wybrane treści, co chcemy osiągnąć oraz rozważyć, czy nie spowoduje to trudności w zrozumieniu treści i dostępie do informacji.

Ogólnie rzecz biorąc najczęściej mamy do czynienia z następującymi sytuacjami:

  • chcemy schować dany fragment strony przed wszystkimi użytkownikami, na przykład ukryć określoną sekcję dopóki użytkownik nie zdecyduje się na zapoznanie się z jej treścią (poprzez otwarcie panelu w akordeonie lub zakładkach, przejście do kolejnego slajdu w karuzeli, itp.)
  • chcemy ukryć dany element przed osobami widzącymi, ale nie przed technologiami asystujacymi – element ten ma być niewidoczny na ekranie, ale dostępny dla programów takich jak czytniki ekranu. Przykładem może tu być chowanie etykiet pól formularzowych (których cel jest wyjaśniony przy pomocy wizualnych poszlak), bądź też długiego opisu treści nietekstowej takiej jak wykres
  • chcemy ukryć dany element przed osobami korzystającymi z czytników ekranu, przy jednoczesnym pozostawieniu tej treści widocznej na ekranie (ikonki, wykres z legendą, który posiada osobno zapewniony alternatywny opis na użytek osób niewidomych, itp).

Metody ukrywania treści

Poniżej opisane są poszczególne techniki – każda z nich przedstawiona jest na przykładzie trzech bloków, z których drugi (B, szary) został schowany przy pomocy danej metody.

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ukrywanie treści przed wszystkimi użytkownikami

Jest to najprostszy przypadek, kiedy to chcemy by dany fragment strony był niewidoczny i niedostępny dla wszystkich. Metody te stosowane są na przykład do ukrywania nieaktywnych paneli w zakładkach albo akordeonie, czy też do chowania głównego menu strony na mniejszych ekranach.

display: none (CSS)

Jest to prawdopodobnie najczęściej używana właściwość CSS służąca do ukrywania treści. Powoduje ona, iż dany element jest niewidoczny (nie jest wyświetlony na ekranie), ale także że jest on nieobecny w drzewie renderowania przeglądarki, a co za tym idzie, jest ukryty przed technologiami asytującymi. Elementy interaktywne, np. linki, posiadające tę właściwość (bądź zawarte w ukrytej w ten sposób sekcji) nie otrzymują fokusa klawiatury.

Warto też pamiętać, że elementy-dzieci elementu z właściwością display: none pozostaną niewidoczne nawet wtedy, gdy same będą mieć nadaną właściwość display o innej wartości, np. display: inline-block.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<!-- zielony blok -->
<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<!-- szary blok -->
<div style="display: none;">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong style="display: inline-block;">consectetur</strong> adipiscing elit.</p>
</div>
<!-- żółty blok -->
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

visibility: hidden (CSS)

Podobnie jak display: none, właściwość ta ukrywa dany element wizualnie oraz przed technologiami asystującymi. Istnieją jednak dwie zasadnicze różnice pomiędzy tymi metodami:

  • element ukryty przy pomocy visibility: hidden, choć niewidoczny na ekranie, zachowuje miejsce w układzie strony, pozostawiając po sobie puste miejsce
  • właściwość ta może być użyta do pokazania elementu zawartego w sekcji ukrytej przy pomocy tej samej metody
Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div style="visibility: hidden;">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong style="visibility: visible;">consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

Atrybut hidden (HTML)

Elementy z artybutem hidden są ukryte poprzez domyślne arkusze styli przeglądarek przy pomocy właściwości display: none. 
Atrybut ten działa we wszystkich współczesnych przeglądarkach, ale nie w starszych wersjach IE (IE < 11) (http://caniuse.com/#feat=hidden).

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div hidden>
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

Ukrywanie treści przed osobami widzącymi

Najczęstsze przypadki, w jakich autorzy stron chcą, by dane elementy nie były wyświetlone na ekranie, ale pozostawały dostępne dla osób posługujących się technologiami asystującymi, to ukrywanie etykiet pól formularza, skip linków, bądź dłuższych alternatywnych opisów treści nietekstowych.

Umieszczenie treści poza ekranem (CSS)

.element-hidden {
  position: absolute;
  left: -999em;
}

Podane powyżej właściwości CSS przesuwają dany element z domyślnej pozycji w lewo o 999 jednostek em. Jako że technika ta stosuje właściwość position: absolute, element ten nie pozostawia po sobie pustego miejsca na stronie. Stosując tę metodę należy pamiętać, że jest ona właściwa jedynie dla języków “ltr” (left-to-right), czyli np. języka polskiego.

Drugą rzeczą, o której należy pamiętać, jest fakt, że ukryty w ten sposób element interaktywny nadal otrzymuje fokus klawiatury. Dlatego też zazwyczaj nie jest to właściwa metoda do ukrywania treści interaktywnych, chyba że chcemy, by element ten był dostępny dla osób posługujących się klawiaturą. Należy wtedy pokazać go na ekranie, gdy element ten posiada fokus (więcej na ten temat można przeczytać w artykule “Skip linki – czym są i do czego służą“).
W poniższym przykładzie, gdy naciśniemy klawisz Tab, by przenieść fokus klawiatury do linku w pierwszym, zielonym elemencie, a następnie ponownie naciśniemy Tab, fokus klawiatury zniknie, gdyż zostanie przeniesiony do  elementu ukrytego poza ekranem.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div class="element-hidden">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

“przycinanie” elementu (CSS)

Drugą popularną metodą wizualnego ukrywania treści jest tzw. przycinanie elementu, na przykład przy pomocy następujących właściwości CSS:

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

Element z powyższą klasą zostanie “przycięty” – zastosowane właściwości CSS zredukują jego wymiary do zera. Metoda ta działa we wszystkich językach (ltr i rtl). Elementy interaktywne ukryte w ten sposób nadal będą otrzymywać fokus klawiatury.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div class="visually-hidden">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

text-indent (CSS)

Metoda ta często jest stosowana w przyciskach bądź linkach, których cel przekazany jest za pomocą ikonki. Aby upewnić się, że osoby niewidome również będą w stanie zrozumieć, jakie jest przeznaczenie tego typu elementu, konieczne jest dodanie do niego tekstu, który może być ukryty przy pomocy tejże właściwości.

Należy pamiętać, że właściwość text-indent działa jedynie na tekst zawarty w danym elemencie, a nie na sam element, czy też zawarte w nim elementy nietekstowe, takie jak np. obrazki.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div style="text-indent: -999em;">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

opacity: 0 (CSS)

Ukryta w ten sposób treść jest niewidzialna (przezroczysta), ale pozostaje na swoim domyślnym miejscu, zachowując miejsce na stronie. Elemeny interaktywne nadal otrzymywać będą fokus klawiatury.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div style="opacity: 0">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong style="opacity: 1;">consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

Ukrywanie treści przed czytnikami ekranu

Jest to odwrotna sytuacja od opisanej powyżej: tym razem chcemy, by dane elementy były widoczne, ale nie chcemy, by były dostępne dla osób korzystających z czytników ekranu. Sytuacje, w których jest to porządane, to np. ukrywanie ikonek, albo wykresu z legendą, który posiada osobny alternatywny opis.

aria-hidden (ARIA)

Właściwość ta w żaden sposób nie wpływa na to, w jaki sposób dany element jest wyświetlony na ekranie, lecz czyni go niewidocznym dla czytników ekranu.

Przykład:

A – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

B – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

C – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div>
  <p>A - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div aria-hidden="true">
  <p>B - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>
<div>
  <p>C - Lorem ipsum dolor sit <a href="#">amet</a>, <strong>consectetur</strong> adipiscing elit.</p>
</div>

Elementy interaktywne

Ilekroć ukrywamy dany fragment strony, zawsze należy sprawdzić, czy zawiera on (lub, jeśli może być edytowany za pomocą systemu zarządzania treścią, czy potencjalnie może zawierać) przyciski, linki, pola formularza, itd. Jak wspomniałam wyżej, elementy interaktywne schowane przy pomocy niektórych metod nadal będą otrzymywać fokus klawiatury. Osoby widzące posługujące się klawiaturą mogą być zdezorientowane faktem, że fokus klawiatury znika z ekranu.

Jeśli ukryty element otrzymuje fokus klawiatury, a jest to w danej sytuacji niepożądane, należy dodać do niego atrybut tabindex="-1". Dzięki temu nie będzie możliwe przeniesienie do tego elementu fokusa klawiatury.

Wyjątkiem jest tu metoda aria-hidden: true, ukrywająca treści przed osobami niewidomymi. Należy unikać dodawania tego atrybutu do elementów interaktywnych, bądź też do elementów, w których są zawarte. Nawet jeśli element ten będzie posiadał atrybut tabindex="-1" i nie będzie otrzymywał fokusa klawiatury, nadal będzie możliwe przeniesienie do niego wirtualnego fokusa czytnika ekranu. Treść ta, zamiast zostać całkowicie zignorowana, zostanie przedstawiona osobom niewidomym jako pusty i pozbawiony etykiety element interaktywny.

Porównanie poszczególnych metod

Zestawienie metod ukrywania treści
Metoda Ukrywa treść przed: Rezerwuje miejsce
osobami widzącymi technologiami asystującymi klawiaturą
display: none tak tak tak nie
visibility: hidden tak tak tak tak
hidden tak tak tak nie
umieszczenie za ekranem tak nie nie nie
przycięcie tak nie nie nie
opacity: 0 tak nie nie tak
text-indent: -999em tak nie nie nie
aria-hidden nie tak*
(*przed czytnikami ekranu)
nie tak

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>