Pola wyboru
- Element
<fieldset >otacza grupę pól wyboru lub przycisków radiowych.<legend >zapewnia opis grupy pól. - Niektóre technologie wspomagające odczytują tekst legendy dla każdego zestawu pól, więc legendy powinny być krótkie i opisowe. Pomaga to osobie korzystającej z technologii wspomagającej zrozumieć pytanie, na które odpowiada za pomocą grupy pól wyboru.
- WAI-ARIA zapewnia
role=group, która działa podobnie dofieldsetilegend. W opcji nr 2 elementdivmusi miećrole=group, aby wskazywać, że zawarte w nim elementy należą do grupy, a atrybutaria-labelledbyodwołuje się do id tekstu, który będzie służył jako etykieta dla grupy. Uwaga: Ta metoda nie jest obsługiwana przez wszystkie przeglądarki/technologie wspomagające.
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
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)
3.3.2 Etykiety lub instrukcje - Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje.. (Poziom A)
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
Opcja #1: Stosowanie zestawu pól do grupowania opcji
Opcja #2: Stosowanie ARIA do grupowania opcji
Kto jest najlepszym Beatlesem?
<section class="checkboxes-section">
<h3>Opcja #1: Stosowanie zestawu pól do grupowania opcji</h3>
<fieldset>
<legend>Kto jest twoim ulubionym XIX-wiecznym naukowcem?</legend>
<div class="checkbox column">
<input id="bell" type="checkbox" name="scientist" value="bell"/>
<label for="bell">Alexander Graham Bell</label>
<input id="curry" type="checkbox" name="scientist" value="curry"/>
<label for="curry">Marie Curie</label>
<input id="lovelace" type="checkbox" name="scientist" value="lovelace"/>
<label for="lovelace">Ada Lovelace</label>
<input id="nobel" type="checkbox" name="scientist" value="nobel"/>
<label for="nobel">Alfred Nobel</label>
<input id="pasteur" type="checkbox" name="scientist" value="pasteur"/>
<label for="pasteur">Louis Pasteur</label>
<input id="tesla" type="checkbox" name="scientist" value="tesla"/>
<label for="tesla">Nikola Tesla</label>
</div>
</fieldset>
<div class="break"></div>
<h3>Opcja #2: Stosowanie ARIA do grupowania opcji</h3>
<div role="group" aria-labelledby="beatle_head">
<h4 id="beatle_head" class="bold">Kto jest najlepszym Beatlesem?</h4>
<div class="checkbox row">
<input id="beatle_john" type="checkbox" name="beatle" value="beatle_john"/>
<label for="beatle_john">John Lennon</label>
<input id="beatle_paul" type="checkbox" name="beatle" value="beatle_paul"/>
<label for="beatle_paul">Paul McCartney</label>
<input id="beatle_george" type="checkbox" name="beatle" value="beatle_george"/>
<label for="beatle_george">George Harrison</label>
<input id="beatle_ringo" type="checkbox" name="beatle" value="beatle_ringo"/>
<label for="beatle_ringo">Ringo Starr</label>
</div>
</div>
</section>
Skopiowane!
Szukaj
- Owiń komponent wyszukiwania w element z
role="search", aby zwiększyć jego wykrywalność w technologiach wspomagających. - Gdy tylko jest to możliwe, użyj elementu
label, aby wyraźnie powiązać etykiety z polami formularza. Atrybutforelementulabelmusi być dokładnie zgodny z identyfikatorem pola formularza. - Niekiedy pola formularza nie potrzebują jawnego elementu
label, gdy znajdują się obok przycisku z opisowym tekstem. Np. pole wyszukiwania obok przycisku z etykietą wyszukiwania. W tych przypadkach powinieneś nadal zapewnić elementlabel, ale możesz go wizualnie ukryć. - Należy pamiętać, że oznaczenia zastępcze (
placeholder) nie są rozpoznawane przez wszystkie technologie wspomagające, a tym samym nie są odpowiednimi zamiennikami dla etykiet. Dodatkowo, technologie wspomagające, które ogłaszają symbole zastępcze, najpierw odczytają je, potem etykietę pola, a następnie typ pola. Należy więc pamiętać, aby nie powtarzać etykiety pola jako jej symbolu zastępczego, w przeciwnym razie zostanie ona ogłoszona wielokrotnie.
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
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)
3.3.2 Etykiety lub instrukcje - Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje.. (Poziom A)
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
Opcja #1: Pole wyszukiwania z widoczną etykietą
Opcja #2: Ukryta etykieta
Opcja #3: Zastosowanie aria-label
<section class="search-section">
<h3>Opcja #1: Pole wyszukiwania z widoczną etykietą</h3>
<div role="search">
<label for="search_1" style="display: block;">Szukaj w serwisie:</label>
<input type="search" name="search" id="search_1" class="search-form__input" />
<button type="submit"><span class="visuallyhidden">Wykonaj</span>Szukaj</button>
</div>
<div class="break"></div>
<h3>Opcja #2: Ukryta etykieta</h3>
<div role="search">
<label for="search_2" class="visuallyhidden">Szukaj w serwisie:</label>
<input type="search" name="search" id="search_2" class="search-form__input" placeholder="szukaj..." />
<button type="submit"><span class="visuallyhidden">Wykonaj</span>Szukaj</button>
</div>
<div class="break"></div>
<h3>Opcja #3: Zastosowanie aria-label</h3>
<div role="search">
<input type="search" name="search" aria-label="Szukaj">
<button type="submit"><span class="visuallyhidden">Wykonaj</span>Szukaj</button>
</div>
</section>
Skopiowane!
Lista wyboru
- Element
<fieldset >otacza całą grupę pól wyboru lub przycisków radiowych.<legend >zapewnia opis grupy pól. - Niektóre technologie wspomagające odczytują tekst legendy dla każdego zestawu pól, więc legendy powinny być krótkie i opisowe. Pomaga to osobie korzystającej z technologii wspomagającej zrozumieć pytanie, na które odpowiada za pomocą grupy pól wyboru.
- W przypadku wyboru elementów z grupami opcji do wskazania takich grup można użyć elementu
optgroup. Atrybutlabelelementuoptgroupjest używany do określenia etykiety grupy. Jest to szczególnie przydatne w przypadku list z wieloma powiązanymi opcjami.
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
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)
3.3.2 Etykiety lub instrukcje - Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje.. (Poziom A)
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
Opcja #1: Lista wyboru bez grupowania
Option #2: Lista wyboru z grupowaniem
<section class="select-section">
<h3>Opcja #1: Lista wyboru bez grupowania</h3>
<div class="select">
<label for="section1" class="visuallyhidden">Etykieta dla sekcji 1</label>
<select id="section1" name="section1">
<option label="Pierwszy wybór" disabled selected>Pierwszy wybór</option>
<option label="Opcja 1.1">Opcja 1.1</option>
<option label="Opcja 1.2">Opcja 1.2</option>
</select>
<div class="select__arrow"></div>
</div>
<div class="select">
<label for="section2" class="visuallyhidden">Etykieta dla sekcji 2</label>
<select id="section2" name="section2">
<option label="Drugi wybór" disabled selected>Drugi wybór</option>
<option label="Opcja 2.1">Opcja 2.1</option>
<option label="Opcja 2.2">Opcja 2.2</option>
</select>
<div class="select__arrow"></div>
</div>
<div class="break"></div>
<h3>Option #2: Lista wyboru z grupowaniem</h3>
<div class="select">
<label for="lecture" class="visuallyhidden">Wybierz wykład</label>
<select id="lecture" name="lecture">
<option label="Wybierz wykład" disabled selected>Wybierz wykład</option>
<optgroup label="1.0 Historia świata: Część I">
<option label="Wykład 1.1" value="1.1">Wykład 1.1: Na początku</option>
<option label="Wykład 1.2" value="1.2">Wykład 1.2: W środku</option>
<option label="Wykład 1.3" value="1.3">Wykład 1.3: Na koniec</option>
</optgroup>
<optgroup label="2.0 Historia świata: Część II">
<option label="Wykład 2.2" value="2.1">Wykład 2.1: Czekaj! Jest ich więcej.</option>
</optgroup>
</select>
<div class="select__arrow"></div>
</div>
</section>
Skopiowane!
Pole tekstowe i obszar tekstowy
- Zachowaj prostotę - nie wszystkie przeglądarki poprawnie eksponują wiele etykiet, które są powiązane z tym samym elementem formularza.
- Użyj etykiet dla każdego pola i sprawdź, czy wartości
for=""iid=""są zgodne. Identyfikatory muszą być unikalne na każdej stronie, tylko jedna etykieta może być powiązana z każdym unikalnym elementem formularza. - Wymagane pola należy uwidocznić za pomocą wskaźnika - zmiana koloru obramowania, gwiazdka, tekst opisu, itp.
- Pola z walidacją błędów powinny mieć
aria-describedby, aby zapewnić, że powiązany komunikat o błędzie na poziomie pola jest odczytywany przez technologię wspomagającą. Jeżeli komunikat o błędzie maid="my-komunikat-bledu", wówczas pole danych powinno miećaria-describedby="my-komunikat-bledu".
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
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)
3.3.2 Etykiety lub instrukcje - Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje.. (Poziom A)
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
<section class="text-inputs-section">
<form>
<label for="first-name">Imię</label>
<input id="first-name" type="text" name="textfield">
<label for="last-name" class="required-field">Nazwisko</label>
<input id="last-name" type="text" name="textfield" aria-describedby="required-message" required>
<div id="required-message" class="visuallyhidden">To pole jest wymagane.</div>
<label for="username">Nazwa użytkownika</label>
<input id="username" type="text" name="textfield" aria-describedby="username-help-text" aria-invalid="true">
<span id="username-help-text">W polu powyżej wystapił błąd</span>
<label for="city">Miasto</label>
<input id="city" type="text" name="textfield" aria-describedby="city-help-text" aria-invalid="false">
<span id="city-help-text">Dane powyżej zostały wprowadzone poprawnie.</span>
<label for="address">Wpisz nazwę ulicy</label>
<textarea id="address" name="addresstext"></textarea>
<input type="submit" value="Wyślij">
</form>
</section>
Skopiowane!
Przełączniki
- Jeśli możesz, użyj elementu
<button>i dołączaria-pressedlubrole="switch"dla swoich przełączników. - Możesz dodać opcjonalne etykiety do swoich przełączników, po prostu upewnij się, że element etykiety zawiera
id, a przycisk przełącznika zawiera znacznik zaria-labelledbyz pasującą etykietą. - Upewnij się, że istnieje
aria-checkedna przełącznikach, z JavaScriptem zmieniającym stan po kliknięciu ztruenafalse(lub odwrotnie). - Upewnij się, że kontrast tekstu przełącznika na tle jest wystarczający (jeśli tekst jest używany).
Zasoby
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
Uwaga: Jeśli zawartość nietekstowa jest czystą dekoracją, jest używana tylko do formatowania wizualnego, lub nie jest prezentowana użytkownikom, to nie potrzebuje alternatyw tekstowych.
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
<section class="toggles-section">
<div>
<button type="button" data-action="aria-switch" aria-labelledby="toggle_label" aria-checked="false" role="switch">
<span></span>
</button>
<span id="toggle_label" class="optional-label">Opcjonalna etykieta</span>
</div>
<button type="button" data-action="aria-switch" aria-label="Tekst przełącznika" aria-checked="true" role="switch" class="text">
<span></span>
</button>
<button type="button" data-action="aria-switch" aria-label="Odwrotne przełączenie" aria-checked="true" role="switch" class="reverse">
<span></span>
</button>
<button type="button" data-action="aria-switch" aria-label="Odwrotne przełączenie z tekstem" aria-checked="false" role="switch" class="reverse text">
<span></span>
</button>
<button type="button" data-action="aria-switch" aria-label="Odwróć" aria-checked="false" role="switch" class="flip">
<span></span>
</button>
</section>
Skopiowane!
Podpowiedzi
- Element podpowiedzi (Tooltips) nie powinien otrzymywać fokusu. Fokus powinien pozostać na polu, przycisku lub łączu, o którym mowa w etykiecie.
- Podpowiedzi nie powinny być ujawniane przed upływem krótkiego czasu (~1-5 sekund).
- Zależnie od wybranej opcji Tooltip, może istnieć dodatkowe oznakowanie ARIA, które należy zastosować. Dodaj
aria-describedby="przyklad1"dla polu danych i połącz je z powiązaną sekcją o odpowiadającym ID selektoraid="przyklad1". - Jeśli to możliwe, użyj opisowego tekstu na polach formularza, który musi być aktywowany przez zdarzenie
focuslubhover. Podpowiedzi mogą być problematyczne dla niektórych technologii wspomagających.
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)
2.4.6 Nagłówki i etykiety - Nagłówki i etykiety opisują temat lub cel treści. (Poziom AA)
3.3.2 Etykiety lub instrukcje - Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje.. (Poziom A)
4.1.2 Nazwa, rola, wartość - Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. (Poziom A)
Opcja #1: Prosta podpowiedź bez JS
Opcja #2: Podpowiedź z łączem
Jaki jest ulubiony owoc Beethovena? A ba-na-na-na.Opcja #3: Podpowiedź z przyciskiem
Składają się one na wszystko!Opcja #4: Pole z podpowiedzią po prawej
Nie mógł zobaczyć, jak to robi.<section class="tooltips">
<h3>Opcja #1: Prosta podpowiedź bez JS</h3>
<form action="#" class="no-js-tooltip">
<fieldset>
<legend>Logowanie</legend>
<div>
<label for="username">Użytkownik</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Wypróbuj swój adres e-mail</div>
</div>
<div>
<label for="password">Hasło</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Jest to najprawdopodobniej 1234</div>
</div>
</fieldset>
</form>
<div class="break"></div>
<h3>Opcja #2: Podpowiedź z łączem</h3>
<span class="a11y-tip a11y-tip--no-delay">
<a href="#" class="a11y-tip__trigger">
Jaki jest ulubiony owoc Beethovena?
</a>
<span role="tooltip" class="a11y-tip__help a11y-tip__help--top">
A ba-na-na-na.
</span>
</span>
<div class="break"></div>
<h3>Opcja #3: Podpowiedź z przyciskiem</h3>
<span class="a11y-tip">
<button type="button" class="a11y-tip__trigger" aria-describedby="tt_id">
Nie ufaj atomom
</button>
<span id="tt_id" role="tooltip" class="a11y-tip__help a11y-tip__help--bottom">
Składają się one na wszystko!
</span>
</span>
<div class="break"></div>
<h3>Opcja #4: Pole z podpowiedzią po prawej</h3>
<label for="test">
Dlaczego niewidzialny człowiek odrzucił ofertę pracy?
</label>
<span class="a11y-tip">
<input id="test" class="a11y-tip__trigger" aria-describedby="test_desc" type="text">
<span id="test_desc" role="tooltip" class="a11y-tip__help a11y-tip__help--right">
Nie mógł zobaczyć, jak to robi.
</span>
</span>
</section>
Skopiowane!