Nagłówki
- Nawigowanie po
<h1>i<h2>daje użytkownikowi wgląd w stronę i jej strukturę. Elementy od<h3>do<h6>zapewniają szybkie zrozumienie szczegółów w każdej sekcji. - Znaczniki nagłówków powinny być uporządkowane. To znaczy, że po
<h1>powinien następować<h2>, po<h2>powinien być<h2>lub<h3>i tak dalej. Można pominąć poziomy nagłówków, gdy przechodzi się do nadrzednej sekcji treści (np. z<h4>do<h1>). - Znaczniki nagłówków powinny być spójne. Niekonsekwentne wdrażanie nagłówków może powodować dezorientację i frustrację użytkowników korzystających z technologii wspomagających.
- Nie stylizuj tekstu, aby nadać nagłówkom wizualny wygląd - używaj rzeczywistych znaczników nagłówków.
- Nagłówki tytułują treść. Po nagłówku musi więc występować jakaś treść. Jeśli pod tekstem, który zamierzasz oznaczyć jako nagłówek, nie ma treści, oznacz go jako zwykły tekst albo inaczej, np. łącze.
Wytyczne WCAG 2.1
1.3.1 Informacje i relacje - Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu (Poziom A)
2.4.6 Nagłówki i etykiety - Nagłówki i etykiety opisują temat lub cel treści. (Poziom AA)
2.4.8 Nagłówki sekcji - Nagłówki sekcji są używane do porządkowania treści. (Poziom AAA)
Koduję,
ale nie zdaję sobie sprawy,
że minęły już godziny.
Moje oczy są przekrwione,
opuszki palców mi krwawią,
ale ja kontynuuję.
<section class="headings-section">
<div>
<h1>Koduję,</h1>
<h2>ale nie zdaję sobie sprawy,</h2>
<h3>że minęły już godziny.</h3>
<h4>Moje oczy są przekrwione,</h4>
<h5>opuszki palców mi krwawią,</h5>
<h6>ale ja kontynuuję.</h6>
</div>
</section>
Skopiowane!
Listy
- Tworzenie dostępnych list jest dość łatwe i proste, jeśli używasz odpowiedniego znakowania.
- Użyj znacznika
oldo grupowania list uporządkowanych; użyj znacznikauldo grupowania list nieuporządkowanych; i użyj znacznikadldo grupowania terminów z ich definicjami. - Proste listy oddzielone przecinkami mogą nie potrzebować znacznika listy, ale dłuższe listy lub grupy linków powinny go mieć.
Wytyczne WCAG 2.1
1.3.1 Informacje i relacje - Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu (Poziom A)
Lista uporządkowana
Best Nikola Tesla Quotes
- "Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."
- "The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane."
- "It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."
Lista nieuporządkowana
List of Unusual Dog Breeds
- Beauceron
- Belgian Malinois
- Entlebucher Mountain Dog
- Keeshond
- Kooikerhondje
- Mudi
- Petit Basset Griffon Vendéen
- Portuguese Podengo Pequeno
- Schipperke
- Xoloitzcuintli
Lista opisowa (definicji)
- Warzywa, które technicznie są owocami
- awokado
- papryka
- ogórki
- bakłażany
- dynia
- Pomidory
- Cukinia
<section class="lists-section1">
<h3>Lista uporządkowana</h3>
<h4>Best Nikola Tesla Quotes</h4>
<ol>
<li>"Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."</li>
<li>"The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane."</li>
<li>"It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."</li>
</ol>
</section>
<section class="lists-section2">
<div class="break"></div>
<h3>Lista nieuporządkowana</h3>
<h4>List of Unusual Dog Breeds</h4>
<ul>
<li>Beauceron</li>
<li>Belgian Malinois</li>
<li>Entlebucher Mountain Dog</li>
<li>Keeshond</li>
<li>Kooikerhondje</li>
<li>Mudi</li>
<li>Petit Basset Griffon Vendéen</li>
<li>Portuguese Podengo Pequeno</li>
<li>Schipperke</li>
<li>Xoloitzcuintli</li>
</ul>
</section>
<section class="lists-section3">
<div class="break"></div>
<h3>Lista opisowa (definicji)</h3>
<dl>
<dt>Warzywa, które technicznie są owocami</dt>
<dd>awokado</dd>
<dd>papryka</dd>
<dd>ogórki</dd>
<dd>bakłażany</dd>
<dd>dynia</dd>
<dd>Pomidory</dd>
<dd>Cukinia</dd>
</dl>
</section>
Skopiowane!
Tabele
- Tabele z jednym nagłówkiem i prostymi danymi są w miarę dostępne od razu po wyjęciu z pudełka i mogą nie wymagać dodatkowej poprawy dostępności. Zawsze używaj najprostszej możliwej konfiguracji tabeli.
- Kiedy twoje tabele stają się bardziej złożone, użyj elementu
<th>do identyfikacji komórek nagłówka poprzez dodanie atrybutuscope. Dla nagłówka wierszy użyj<th scope="row">. Dla nagłówka kolumn użyj<th scope="col">. - Dodaj opcjonalny element
<caption>przed treścią tabeli, aby dać użytkownikom więcej informacji na temat treści tabeli. Pomyśl o tym jako o tytule tabeli.
Zasoby
Wytyczne WCAG 2.1
1.3.1 Informacje i relacje - Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu (Poziom A)
Opcja #1: Tabela z jednym wierszem nagłówków
| Data | Wydarzenie | MIejsce |
|---|---|---|
| 3 lutego | Impreza niespodzianka | Miasto Imprez |
Opcja #2: Tabela z dwoma nagłówkami i podpisem
| Kolor | Francuski | Niemiecki | Włoski | Portugalski | Hiszpański |
|---|---|---|---|---|---|
| Czerwony | rouge | rot | rosso | vermelho | rojo |
| Pomarańczowy | orange | orange | arancione | laranja | anaranjado |
| Żółty | jaune | gelb | giallo | amarelo | amarillo |
| Zielony | vert | grün | verde | verde | verde |
| Niebieski | bleu | blau | blu | azul | azul |
| Purpurowy | pourpre | lila | porpora | roxo | morado |
Opcja #3: Tabela złożona
| Królestwo | Gromada | Klasa | Rząd |
|---|---|---|---|
| Zwierzęta | Strunowce | Saki | Drapieżne |
| Zwierzęta | Arthropoda | Insekty | Lepidoptera |
| Zwierzęta | Szkarłupnie | Rozgwiazdy | Forcipulatida |
| Rodzina | Rodzaj | Gatunek | Odmiana |
| Kotowate | Pantery | Tygrys azjatycki | Tygrys |
| Danaidowate | Dannaus | Wędrowne | Danaid wędrowny |
| Asteridae | Rozgwiazdy | Rozgwiazda | Gwiazda morska północnego Pacyfiku |
Opcja #4: Tabela responsywna
| House Side | House Address | Other | Other Address | Senate Side | Senate Address |
|---|---|---|---|---|---|
| Rayburn House Office Building | 50 Independence Ave, SW Washington, DC 20515 | Library of Congress | 101 Independence Ave SE, Washington, DC 20540 | Russell Senate Office Building | 2 Constitution Ave NE, Washington, DC 20002 |
| Longworth House Office Building | 15 Independence Ave, SW Washington, DC 20515 | Supreme Court | 1 First Street, NE Washington, DC 20543 | Dirksen Senate Office Building | 100 Constitution Ave NE Washington, DC 20002 |
| Cannon House Office Building | 25 Independence Ave, SE Washington, DC 20003 | Capitol Visitors Center | First & East Capitol St SE, Washington, DC 20004 | Hart Senate Office Building | 150 Constitution Ave NE Washington, DC 20510 |
| Capitol South Metro | 307 First Street SE Washington, DC 20003 | Federal Center Metro | 401 3rd Street SW Washington, DC 20024 | Union Station Metro | 701 First St. NE Washington, DC 20002 |
<section class="tables-section">
<h3>Opcja #1: Tabela z jednym wierszem nagłówków</h3>
<table class="tables" cellspacing="0" summary="Informacja o imprezie niespodziance">
<tr>
<th>Data</th>
<th>Wydarzenie</th>
<th>MIejsce</th>
</tr>
<tr>
<td>3 lutego</td>
<td>Impreza niespodzianka</td>
<td>Miasto Imprez</td>
</tr>
</table>
</section>
<section class="tables-section2">
<div class="break"></div>
<h3>Opcja #2: Tabela z dwoma nagłówkami i podpisem</h3>
<table class="tables" cellspacing="0">
<caption>Nazwy kolorów w wielu językach</caption>
<tr class="headers">
<th scope="col">Kolor</th>
<th scope="col">Francuski</th>
<th scope="col">Niemiecki</th>
<th scope="col">Włoski</th>
<th scope="col">Portugalski</th>
<th scope="col">Hiszpański</th>
</tr>
<tr>
<th scope="row">Czerwony</th>
<td>rouge</td>
<td>rot</td>
<td>rosso</td>
<td>vermelho</td>
<td>rojo</td>
</tr>
<tr>
<th scope="row">Pomarańczowy</th>
<td>orange</td>
<td>orange</td>
<td>arancione</td>
<td>laranja</td>
<td>anaranjado</td>
</tr>
<tr>
<th scope="row">Żółty</th>
<td>jaune</td>
<td>gelb</td>
<td>giallo</td>
<td>amarelo</td>
<td>amarillo</td>
</tr>
<tr>
<th scope="row">Zielony</th>
<td>vert</td>
<td>grün</td>
<td>verde</td>
<td>verde</td>
<td>verde</td>
</tr>
<tr>
<th scope="row">Niebieski</th>
<td>bleu</td>
<td>blau</td>
<td>blu</td>
<td>azul</td>
<td>azul</td>
</tr>
<tr>
<th scope="row">Purpurowy</th>
<td>pourpre</td>
<td>lila</td>
<td>porpora</td>
<td>roxo</td>
<td>morado</td>
</tr>
</table>
</section>
<section class="tables-section3">
<div class="break"></div>
<h3>Opcja #3: Tabela złożona</h3>
<table class="tables" cellspacing="0">
<tbody>
<tr class="headers">
<th id="co1" headers="blank">Królestwo</th>
<th id="co2" headers="blank">Gromada</th>
<th id="co3" headers="blank">Klasa</th>
<th id="co4" headers="blank">Rząd</th>
</tr>
<tr>
<td headers="co1">Zwierzęta</td>
<td headers="co2">Strunowce</td>
<td headers="co3">Saki</td>
<td headers="co4">Drapieżne</td>
</tr>
<tr>
<td headers="co1">Zwierzęta</td>
<td headers="co2">Arthropoda</td>
<td headers="co3">Insekty</td>
<td headers="co4">Lepidoptera</td>
</tr>
<tr>
<td headers="co1">Zwierzęta</td>
<td headers="co2">Szkarłupnie</td>
<td headers="co3">Rozgwiazdy</td>
<td headers="co4">Forcipulatida</td>
</tr>
<tr class="headers">
<th id="co5" headers="blank">Rodzina</th>
<th id="co6" headers="blank">Rodzaj</th>
<th id="co7" headers="blank">Gatunek</th>
<th id="co8" headers="blank">Odmiana</th>
</tr>
<tr>
<td headers="co5">Kotowate</td>
<td headers="co6">Pantery</td>
<td headers="co7">Tygrys azjatycki</td>
<td headers="co8">Tygrys</td>
</tr>
<tr>
<td headers="co5">Danaidowate</td>
<td headers="co6">Dannaus</td>
<td headers="co7">Wędrowne</td>
<td headers="co8">Danaid wędrowny</td>
</tr>
<tr>
<td headers="co5">Asteridae</td>
<td headers="co6">Rozgwiazdy</td>
<td headers="co7">Rozgwiazda</td>
<td headers="co8">Gwiazda morska<br>północnego Pacyfiku</td>
</tr>
</tbody>
</table>
</section>
<section>
<div class="break"></div>
<h3>Opcja #4: Tabela responsywna</h3>
<table class="responsive-table" id="responsive-tableID">
<thead>
<tr align="center">
<th class="responsive">House Side</th>
<th class="responsive">House Address</th>
<th class="responsive">Other</th>
<th class="responsive">Other Address</th>
<th class="responsive">Senate Side</th>
<th class="responsive">Senate Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="responsive">Rayburn House Office Building</td>
<td class="responsive">50 Independence Ave, SW Washington, DC 20515</td>
<td class="responsive">Library of Congress</td>
<td class="responsive">101 Independence Ave SE, Washington, DC 20540</td>
<td class="responsive">Russell Senate Office Building</td>
<td class="responsive">2 Constitution Ave NE, Washington, DC 20002</td>
</tr>
<tr>
<td class="responsive">Longworth House Office Building</td>
<td class="responsive">15 Independence Ave, SW Washington, DC 20515</td>
<td class="responsive">Supreme Court</td>
<td class="responsive">1 First Street, NE Washington, DC 20543</td>
<td class="responsive">Dirksen Senate Office Building</td>
<td class="responsive">100 Constitution Ave NE Washington, DC 20002</td>
</tr>
<tr>
<td class="responsive">Cannon House Office Building</td>
<td class="responsive">25 Independence Ave, SE Washington, DC 20003</td>
<td class="responsive">Capitol Visitors Center</td>
<td class="responsive">First & East Capitol St SE, Washington, DC 20004</td>
<td class="responsive">Hart Senate Office Building</td>
<td class="responsive">150 Constitution Ave NE Washington, DC 20510</td>
</tr>
<tr>
<td class="responsive">Capitol South Metro</td>
<td class="responsive">307 First Street SE Washington, DC 20003</td>
<td class="responsive">Federal Center Metro</td>
<td class="responsive">401 3rd Street SW Washington, DC 20024</td>
<td class="responsive">Union Station Metro</td>
<td class="responsive">701 First St. NE Washington, DC 20002</td>
</tr>
</tbody>
</table>
</section>
Skopiowane!
Panele z zakładkami - szkic
- Należy uważać na używanie paneli z zakładkami, ponieważ są one z założenia mniej widoczne.
- Po ustawieniu fokusu na przycisku panelu (zakładce), pozostałe panele można wybrać za pomocą klawiszy strzałek.
- Dostęp do treści w panelu można uzyskać za pomoca klawisza Tab (jeśli w panelu znajdują się elementy interaktywne) lub PgDn (jeśli w panelu nie ma elementów interaktywnych).
- Upewnij się, że aktualizujesz wartości atrybutów
aria-posinsetiaria-setsize, jeśli masz więcej niż trzy panele.
Zasoby
Wytyczne WCAG 2.1
2.1.1 Klawiatura - Wszystkie funkcjonalności w treści są obsługiwane za pomocą interfejsu klawiatury, bez wymogu określonego czasu użycia poszczególnych klawiszy, z wyjątkiem sytuacji, kiedy dana funkcja wymaga wprowadzenia informacji przez użytkownika w oparciu o ścieżkę ruchów, a nie w oparciu o punkty końcowe wejścia. (Poziom A)
Panel 1
Ważnym osiągnięciem Apollo było pokazanie, że ludzkość nie jest na zawsze przykuta do tej planety, a nasze wizje sięgają dalej, a nasze możliwości są nieograniczone.
<section class="tabs" aria-multiselectable="false">
<ul class="tabs__navlist" role="tablist">
<li class="tabs__nav-item is-active" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-1" role="tab" aria-setsize="3" aria-posinset="1" tabindex="0" aria-controls="tab-panel-1" aria-selected="true">Panel 1</button>
</li><li class="tabs__nav-item" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-2" role="tab" aria-setsize="3" aria-posinset="2" tabindex="-1" aria-controls="tab-panel-2" aria-selected="false">Panel 2</button>
</li><li class="tabs__nav-item" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-3" role="tab" aria-setsize="3" aria-posinset="3" tabindex="-1" aria-controls="tab-panel-3" aria-selected="false">Panel 3</button>
</li>
</ul>
<div class="tabs__panels">
<div class="tabs__panel is-current" id="tab-panel-1" role="tabpanel" aria-labelledby="tab-label-1" tabindex="-1">
<h3>Panel 1</h3>
<div class="panel-body">
<p>Ważnym osiągnięciem Apollo było pokazanie, że ludzkość nie jest na zawsze przykuta do tej planety, a nasze wizje sięgają dalej, a nasze możliwości są nieograniczone.</p>
</div>
</div>
<div class="tabs__panel" id="tab-panel-2" aria-hidden="true" role="tabpanel" aria-labelledby="tab-label-2" tabindex="-1">
<h3>Panel 2</h3>
<div class="panel-body">
<p>Nigdy nie ograniczaj się z powodu ograniczonej wyobraźni innych; nigdy nie ograniczaj innych z powodu własnej ograniczonej wyobraźni.</p>
</div>
</div>
<div class="tabs__panel" id="tab-panel-3" aria-hidden="true" role="tabpanel" aria-labelledby="tab-label-3" tabindex="-1">
<h3>Panel 3</h3>
<div class="panel-body">
<p>Po Apollo 17 Ameryka przestała patrzeć w kierunku następnego horyzontu. Stany Zjednoczone stały się krajem podróżującym w kosmos, ale go odrzuciły. Poświęciliśmy eksplorację kosmosu na eksploatację przestrzeni kosmicznej, co jest interesujące, ale mało wizjonerskie.</p>
</div>
</div>
</div>
</section>
Skopiowane!