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

Piękny plac.

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ć

Duże góry piasku na pustyni Nambii.

1. Obraz zawiera tekst alternatywny.

Ostrzeżenia

Wizerunek foto ptaka.

2: Tekst alternatywny zawiera podejrzane słowo stop.

3. Obraz jest dekoracyjny.

4. Obraz jest dekoracyjny z wykorzystaniem pustej spacji (alt=" ").

Zebry to kilka gatunków afrykańskich koniowatych (rodzina koni) połączonych charakterystycznymi czarno-białymi pasiastymi umaszczeniami.  Ich paski mają różne wzory, unikalne dla każdej osoby.  Są to na ogół zwierzęta towarzyskie, które żyją od małych haremów po duże stada.  W przeciwieństwie do swoich najbliższych krewnych, koni i osłów, zebry nigdy nie zostały naprawdę udomowione.  Źródło: Wikipedia.

5: Tekst alternatywny jest za długi.

Błędy

6: Brak tekstu alternatywnego.

ptaszek.jpg

7: Tekst alternatywny ma rozszerzenie pliku.

obraz

8: Tekst alternatywny zawiera tekst zastępczy.

Obrazy z hiperłączami

Przechodzić

Dowiedz się więcej o Tygrysach

9: Obraz z hiperłączem z pustym tekstem alternatywnym, ale otacza tekst linku pod obrazem.

Dowiedz się więcej o Tygrysach

10: Obraz z hiperłączem z pustym tekstem alternatywnym, ale nad obrazem ma otaczający tekst linku.

Tekst alternatywny dla rysunku.
Tekst podpisu ryciny.

11: Obraz rysunku z innym tekstem alt i podpisem.

dwie zebry czarno-białe

12: Rysunek rysunku bez podpisu.

Ostrzeżenia

Duże góry piasku na pustyni Nambii.

13: Obraz z hiperłączem z tekstem alternatywnym.

grafika Wizerunek ptaka.

14: Obraz z hiperłączem zawiera tekst alternatywny zawierający słowo stop.

Zebry to kilka gatunków afrykańskich koniowatych (rodzina koni) połączonych charakterystycznymi czarno-białymi pasiastymi umaszczeniami.  Ich paski mają różne wzory, unikalne dla każdej osoby.  Są to na ogół zwierzęta towarzyskie, które żyją od małych haremów po duże stada.  W przeciwieństwie do swoich najbliższych krewnych, koni i osłów, zebry nigdy nie zostały naprawdę udomowione.  Źródło: Wikipedia.

15: Obraz z hiperłączem, który jest za długi.

Napraw to ponownie Tony!Dowiedz się więcej o Fiacie.

16: Obraz z hiperłączem zawierający zarówno tekst alternatywny, jak i tekst łącza.

Zdj. 1: Pustynia Nambijska (Źródło: nieznane)

17: Obraz dekoracyjny w elemencie <figure>.

dwie zebry
Dwie zebry

18: Element Figure ma zduplikowany tekst alt i podpis.

dwie zebry czarno-białe

19: Element figury z hiperłączem bez podpisu graficznego.

dwie zebry czarno-białe
Czarno-białe zdjęcie dwóch zebr.

20: Element figury z hiperłączem z podpisem graficznym.

Błędy

21: Obraz z hiperłączem bez tekstu alternatywnego.

22: Obraz z hiperłączem, który jest dekoracyjny.

23: Obraz z hiperłączem, który jest dekoracyjny z wykorzystaniem pustej przestrzeni (alt=" ").

Dowiedz się więcej o daliach

24: Obraz z hiperłączem z brakującym alt i otaczającym tekstem linku.

obraz

25: Obraz z hiperłączem zawiera tekst alternatywny zawierający tekst zastępczy.

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.

Napraw to ponownie Tony!

29: Obraz z hiperłączem otwiera się w nowej karcie.

Dwie zebry.  Otwiera się w nowej karcie.

30: Obraz z hiperłączem otwiera się w nowej karcie. Tekst alternatywny wskazuje, że łącze otwiera się w nowym oknie.

test

31: Testowanie błędów. Zignoruj ​​znaczniki <noscript>.


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

  • Pusty hiperłącze z czcionką ikony:
  • Pusty hiperłącze z czcionką ikon (otwiera nową zakładkę):
  • Puste hiperłącze z SVG:
  • Pusty hiperłącze z SVG (otwiera nową kartę):

Puste hiperłącza z dostępną nazwą poprzez atrybut tytułu

  • Pusty hiperłącze z tytułem:
  • Pusty hiperłącze ze spacją i tytułem:
  • Spacja niełamliwa i tytuł: 
  • Pusty hiperłącze z czcionką ikony i tytułem:
  • Pusty hiperłącze z czcionką ikony (otwiera nową kartę) i tytułem:
  • Pusty hiperłącze z SVG i tytułem:
  • Pusty hiperłącze z SVG (otwiera nową kartę):

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

  • 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

  • Identyfikatory referencyjne: samo <span id="app">apples</span>, xktó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

PDF

.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.