Wszystko
No, prawie wszystko. Tylko strona z dużą ilością błędów i ostrzeżeń.
Nagłówki
Puste nagłówki
Pominięte nagłówki
To powinien być nagłówek 4!
Nagłówki, które są za długie
Czy nagłówek naprawdę jest nagłówkiem, jeśli jest długim zdaniem? A może autor treści po prostu kieruje się estetyką wizualną? Nagłówki dłuższe niż 160 znaków będą oznaczane jako ostrzeżenie.
Cytaty blokowe używane jako nagłówki
Jeśli cytat blokowy ma mniej niż 25 znaków, zostanie oznaczony jako ostrzeżenie.
O zespole
„Być albo nie być, oto jest pytanie”.
Pusty nagłówek zawiera ozdobny obraz
Nagłówek zawiera obrazek bez tekstu alternatywnego
Nagłówek zawiera obrazek z tekstem alternatywnym
Tekst pogrubiony używany jako nagłówek
Szukam<p><strong>Some text</strong></p>
O nas
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek W artykule był też wybór czekolady, a nie główny. Stres życia jest wynikiem kreskówki. Egestas macenas kołczan, aby uśpić chorobę lwa.
Nie należy tego oznaczać, ponieważ jest długi i niekoniecznie nagłówek. Może to być po prostu duży blok pogrubionego tekstu. Ma ponad 120 znaków.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek W artykule był też wybór czekolady, a nie główny. Stres życia jest wynikiem kreskówki. Egestas macenas kołczan, aby uśpić chorobę lwa.
Tekst pogrubiony używany jako nagłówek z podziałami wierszy
Szukam czegoś takiego jak... Ten test został zaprojektowany tak, aby był nieco wyrozumiały, aby zapobiec zbyt wielu ostrzeżeniom.
<p><strong>Fake
heading<br></strong> Followed by some
text.</p>
Ostrzeżenie
To zostanie oznaczone!
Bo to całkiem pokaźny akapit. Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek W artykule był też wybór czekolady, a nie główny. Stres życia jest wynikiem kreskówki. Egestas macenas kołczan, aby uśpić chorobę lwa.
Przechodzić
O nas
Nie będzie oflagowany, bo to mały akapit. Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek
Adres
105 Bond Street
Toronto, ON
M5B 2K3
To również nie zostanie oznaczone, ponieważ ten pogrubiony tekst jest długi i niekoniecznie stanowi nagłówek. Może to być po prostu duży blok pogrubionego tekstu. Ma ponad 120 znaków.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból. Elitarny smutek W artykule był też wybór czekolady, a nie główny. Stres życia jest wynikiem kreskówki. Egestas macenas kołczan, aby uśpić chorobę lwa.
Obrazy
Obrazy bez linków
Przechodzić
1. Obraz zawiera tekst alternatywny.
Ostrzeżenia
2: Tekst alternatywny zawiera podejrzane słowo stop.
3. Obraz jest dekoracyjny.
4. Obraz jest dekoracyjny z wykorzystaniem pustej spacji (alt=" ").
5: Tekst alternatywny jest za długi.
Błędy
6: Brak tekstu alternatywnego.
7: Tekst alternatywny ma rozszerzenie pliku.
8: Tekst alternatywny zawiera tekst zastępczy.
Obrazy z hiperłączami
Przechodzić
9: Obraz z hiperłączem z pustym tekstem alternatywnym, ale otacza tekst linku pod obrazem.
10: Obraz z hiperłączem z pustym tekstem alternatywnym, ale nad obrazem ma otaczający tekst linku.
11: Obraz rysunku z innym tekstem alt i podpisem.
12: Rysunek rysunku bez podpisu.
Ostrzeżenia
16: Obraz z hiperłączem zawierający zarówno tekst alternatywny, jak i tekst łącza.
17: Obraz dekoracyjny w elemencie <figure>.
18: Element Figure ma zduplikowany tekst alt i podpis.
20: Element figury z hiperłączem z podpisem graficznym.
Błędy
24: Obraz z hiperłączem z brakującym alt i otaczającym tekstem linku.
26: Obraz z hiperłączem, w którym zakotwiczenie ma aria-hidden="true".
Inne
27: Obraz z hiperłączem, w którym zakotwiczenie ma wartość aria-hidden="true" i tabindex="-1"
Dowiedz się więcej o Wyspach Kanaryjskich
28: Obraz z hiperłączem zawiera pominięty nagłówek. Błąd jest dodawany po hiperłączu, aby zapobiec zagnieżdżaniu przycisku wewnątrz hiperłącza.
Spinki do mankietów
Częściowe słowa stop
Błędy
Użycie dowolnego z powyższych słów samodzielnie spowoduje błąd, ponieważ nie jest on wystarczająco opisowy.
Przechodzić
Jeśli jednak zostanie użyty z dodatkowym tekstem, nie zostanie oznaczony jako błąd.
Częściowe słowa stop z wykluczeniami
Czasami motyw witryny może automatycznie dołączać tekst do łącza. Na przykład „(Link zewnętrzny)” zostanie zignorowany, co spowoduje poprawne oznaczenie tego linku jako błędu, ponieważ nie jest wystarczająco opisowy.
Puste hiperłącza
- Puste hiperłącze:
- Puste hiperłącze ze spacją:
- Pojedynczy znak: .
- Przestrzeń niełamliwa:
Puste hiperłącza z dziećmi
Puste hiperłącza z dostępną nazwą poprzez atrybut tytułu
Sprawdzone metody dotyczące tekstu linków
Zatrzymaj słowa
Link zawiera: "kliknij tutaj", ">", "<"
Długie adresy URL
Tylko długie adresy URL będą oznaczane.
Hiperłącza z ARIA
Etykieta ARIA
- Kod:
<a href="#" aria-label="Learn more about Sa11y">Learn more</a>
- Oczekiwany wynik: Dowiedz się więcej o Sa11y
Dziecko z etykietą ARIA
- Kod:
<a href="#">Learn more <span aria-label="about Sa11y"></span></a>
- Oczekiwany wynik: Dowiedz się więcej o Sa11y
Wiele dzieci z etykietą ARIA
- Kod:
<a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>
- Oczekiwany wynik: Dowiedz się więcej o Sa11y (zewnętrzne)
Pojedynczy atrybut ARIA-labelled by
jabłka- Numer referencyjny:
<span id="app">apples</span>
- Kod:
<a href="#" aria-labelledby="app">Learn more</a>
- Oczekiwany wynik: jabłka
Wiele atrybutów ARIA-labelledby
i banany- Identyfikatory referencyjne: samo
<span id="app">apples</span>
,x
które nie istnieje,<span id="ban">bananas</span>
- Kod:
<a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>
- Oczekiwany wynik: Dowiedz się więcej o jabłkach i bananach
Dziecko z atrybutami ARIA-labelled by
- Identyfikator referencyjny:
<span id="app">apples</span>
,x
który nie istnieje,<span id="ban">bananas</span>
- Kod:
<a href="#">Learn more <span aria-labelledby="app x ban"></span></a>
- Oczekiwany wynik: Dowiedz się więcej o jabłkach i bananach
ARIA Ukryta
- Kod:
<a href="#" aria-hidden="true">Learn more</a>
- Spodziewany wynik:
Stoły
Właściwy stół
Nazwa wydarzenia | Czas | Lokalizacja |
---|---|---|
Myśl przewodnia | 09:00 | Audytorium |
Lunch | 12:00 | Pokój Skyline |
Kolacja końcowa | 17:00 | Pokój Metropolitalny |
Brakujące nagłówki tabeli
Nazwa wydarzenia | Czas | Lokalizacja |
Myśl przewodnia | 09:00 | Audytorium |
Lunch | 12:00 | Pokój Skyline |
Kolacja końcowa | 17:00 | Pokój Metropolitalny |
Tabela z pustym nagłówkiem
Czas | Lokalizacja | |
---|---|---|
Myśl przewodnia | 09:00 | Audytorium |
Lunch | 12:00 | Pokój Skyline |
Kolacja końcowa | 17:00 | Pokój Metropolitalny |
Tabela z semantycznymi nagłówkami
Wydarzenie |
Czas |
Lokalizacja |
---|---|---|
Myśl przewodnia | 09:00 | Audytorium |
Lunch | 12:00 | Pokój Skyline
fałszywy nagłówek |
Kolacja końcowa | 17:00 | Pokój Metropolitalny |
Inne sprawy
.pdfDo wszystkich hiperłączy, które mają rozszerzenie pliku , dodawane jest ostrzeżenie . Ikona ostrzeżenia jest dodawana tylko do pierwszego pliku PDF wykrytego na stronie, aby uniknąć przytłoczenia autora treści. Wszystkie inne łącza PDF są wizualnie wyróżnione.
Tekst pisany wielkimi literami
To ostrzeżenie ma na celu zniechęcenie do używania tekstu pisanego wielkimi literami. Nie jest to wymaganie WCAG 2.1, jednak jest to odradzana praktyka w zakresie czytelności. Po drugie, niektóre słowa pisane wielką literą mogą zostać pomylone z akronimem i gotowe znak po znaku za pomocą czytnika ekranu. Ten warunek używa wyrażenia regularnego do znajdowania słów pisanych wielkimi literami, które mają co najmniej 3 znaki, jednak zostanie wskazany jako ostrzeżenie tylko wtedy, gdy w elemencie zostanie znalezionych co najmniej 5 słów pisanych wielkimi literami. Sprawdza tylko słowa pisane wielkimi literami w następujących elementach: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.
NA PRZYKŁAD ZOSTANIE TO ZOSTANIE OZNACZONE.
NA PRZYKŁAD NIE BĘDZIE to oflagowane.
- WIELKI TEKST W POCISKACH również będzie oflagowany.
Podkreślony tekst
To ostrzeżenie ma zniechęcić do używania podkreślonego tekstu, ponieważ łatwo go pomylić z linkami. Ten warunek sprawdza, czy tekst podkreślony został utworzony za pomocą znaczników <u> i stylów CSS w następujących elementach: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.
To zostanie oznaczone.
<u>podkreślone</u> w ten sposób zostanie oznaczone.
- Podkreślony tekst na listach również będzie oflagowany.
Ten nagłówek zostanie oznaczony.
Połączony tekst nie będzie oflagowany.
Listy niesemantyczne
a) Czasami ludzie tworzą listę ręcznie
b) używając fałszywych przedrostków
c) zamiast używać listy semantycznej.
1. Banany
2. Gruszki
3. Jabłka
Zduplikowane identyfikatory
Element 1 i Element 2 mają ten sam idatrybut.
Subscript and superscript formatting
A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.
A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.