Łącza i tabele
Łącza
Niepełne słowa i frazy
Jeśli poniższe słowa zostaną użyte jako sam tekst łącza, zostanie ono oznaczone jako błąd. Jeśli zostaną użyte z innym tekstem, nie zostaną oznaczone jako błąd: kliknij, kliknij tutaj, dowiedz się więcej, czytaj więcej, tę stronę, idź < > http:// https:// .aspx .html .php…
Przykład 1
Łącze zawiera opisowy tekst, ale będzie oznaczone jako problem, ponieważ słowa „Dowiedz się więcej” nie opisują łącza:
Dowiedz się więcejPrzykład 2
Jeśli jednak zostaną one użyte z dodatkowym tekstem, nie zostaną oznaczone jako błąd.
Dowiedz się więcej o LepszyWeb.plPrzykład 3
Kolejny przykład użycia niepełnych słów lub fraz w zdaniu. Odwiedź tę stronę aby dowiedzieć się więcej o naszej historii, lub możesz odwiedzić stronę tę stronę, aby dowiedzieć się więcej o tej funkcji.
Przykład 4
Puste łącza , a czasem pojedyncze znaki użyte jako tekst łącza.
Przykład 5
To jest demonstracja wyjątku. Czasami szablon witryny może automatycznie dołączać tekst do łącza. Na przykład, tekst biały na czarnym (Link zewnętrzny) zostanie zignorowany, co prawidłowo oznaczy to łącze jako błędne, ponieważ nie jest wystarczająco opisowe. Dowiedz się więcej (Łącze zewnętrzne)
Puste hiperłącza
Błąd: Często można zobaczyć hiperłącza z ikonami z fontów bez tekstu. Oto przykład jednego z nich
Dobrze: Oto przykład z etykietą ARIA.
Dobrze: Użycie atrybutu aria-labelledby powiązanego z nagłówkiem powyżej:
Dobrze: Użycie atrybutu title:
Dobrze: Puste hiperłącze z SVG lub elementem potomnym, który ma aria-label, aria-labelledby lub title.
Błąd: Puste hiperłącze z SVG lub elementem potomnym, który nie ma aria-label, aria-labelledby lub title.
Najlepsze praktyki dotyczące tekstów łączy
Jeśli łącza zawierają którekolwiek z poniższych słów lub znaków w obrębie łącza, zostanie ono oznaczone jako błąd.
Przykład 1
Hiperłącze zawiera tekst opisowy, ale nadal będzie oznaczane jako problem, ponieważ 'kliknij tutaj" jest zwrotem niejasnym:
Kliknij tutaj, aby zobaczyć ofertę LepszyWeb.pl
Przykład 2
Bardzo często autorzy treści używają symboli HTML dla estetyki wizualnej, szczególnie w przypadku przycisków-łączy.
O LepszyWeb.pl >Przykład 3
Jest to bardzo irytujące, gdy słyszy się, jak naprawdę długi adres URL jest odczytywany znak po znaku przez czytnik ekranu. https://www.ryerson.ca/programs/undergraduate/accounting-finance/
Przykład 4
Jeśli jednak adres URL nie jest zbyt długi, nie oznaczamy go. https://lepszyweb.pl/andi
Hiperłącze z ARIA
Hiperłącza zawierające atrybut aria-label lub aria-labelledby zostaną wskazane jako dobre i pokażą dostępną etykietę przekazaną technologii wspomagającej.
Przykład 3
Łącza z aria-hidden są zawsze ignorowane.
Łącza (Zaawansowane)
- Użyteczność: Czy łącza powinny się otwierać w nowych oknach? (Źródło: Smashing Magazine)
- Użyteczność: Uważaj, aby nie otwierać łączy w nowym oknie. (Źródło: webcredible)
- Dostępność: Otwieranie nowych okien i kart tylko wtedy, gdy jest to konieczne. (Źródło: W3/WCAG 2.1)
- Dostępność: Ostrzeganie użytkowników o otwieraniu nowego okna. (Źródło: W3/WCAG 2.1)
Łącza, które otwierają się na nowej karcie bez ostrzeżenia
Przykład 6
Dobrze: Przykład zwykłego tekstu z ukrytym wizualnie ostrzeżeniem.
Dowiedz się więcej o Google. (Otwiera nową kartę).
Łącza z identyczna nazwą powinny mieć równoważne przeznaczenie
Pomarańcze oraz Pomarańcze: przejdą test, ponieważ wskazują na ten sam URI.
dokument oraz Dokument i dokument: nie przejdą testu, bo mają taki sam tekst łącza, ale różne URI.
Dowiedz się więcej oraz Dowiedz się więcej: nie przejdą testu, bo mają taką samą dostępną nazwę, ale różne URI.
Łącza do PDF i innych plików bez ostrzeżenia
Tabele
Istnieją 3 proste testy dostępności tabeli. Tabele z role='presentation' zostaną zignorowane.
- Tabela musi zawierać co najmniej jeden nagłówek tabeli lub th
- Tabela nie może zawierać pustego nagłówka tabeli ani pustej komórki th
- Tabela nie może zawierać żadnych nagłówków semantycznych (H1, H2, H3...)
Przykład 1 - Dobrze
| Wydarzenie | Czas | Miejsce |
|---|---|---|
| Prezentacje | 9:00 | Audytorium |
| Obiad | 12:00 | Restauracja |
| Kolacja | 18:00 | Kawiarnia |
Przykład 2 - Brakujące nagłówki tabeli
| Wydarzenie | Czas | Miejsce |
| Prezentacje | 9:00 | Audytorium |
| Obiad | 12:00 | Restauracja |
| Kolacja | 18:00 | Kawiarnia |
Przykład 3 - Tabela z pustą komórką nagłówka
| Czas | Miejsce | |
|---|---|---|
| Prezentacje | 9:00 | Audytorium |
| Obiad | 12:00 | Restauracja |
| Kolacja | 18:00 | Kawiarnia |
Przykład 4 - Tabela zawiera semantyczne nagłówki
Wydarzenie |
Czas |
Miejsce |
|---|---|---|
| Prezentacje | 9:00 | Audytorium |
| Obiad | 12:00 | Restauracja |
| Kolacja | 18:00 | Kawiarnia |