## Wszystko

No, prawie wszystko. Tylko strona z dużą ilością błędów i ostrzeżeń.

Na tej stronie: Nagłówki Obrazy Spinki do mankietów Stoły Inne sprawy

## 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ć

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

11: Obraz rysunku z innym tekstem alt i podpisem.

12: Rysunek rysunku bez podpisu.

#### Ostrzeżenia

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

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

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

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

18: Element Figure ma zduplikowany tekst alt i podpis.

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

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.

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.

29: Obraz z hiperłączem 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.

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.

pobierz
tę witrynę »
czytaj więcej >

#### Przechodzić

Jeśli jednak zostanie użyty z dodatkowym tekstem, nie zostanie oznaczony jako błąd.

Dowiedz się więcej o Sa11y

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

dowiedz się więcej (link zewnętrzny)

### 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", ">", "<"

Kliknij tutaj, aby wyświetlić nasze programy
Dalej >
< Poprzedni

#### Długie adresy URL

Tylko długie adresy URL będą oznaczane.

https://sa11y.netlify.app/developers/custom-checks/
https://sa11y.netlify.app

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

Ucz się więcej

#### Dziecko z etykietą ARIA

- Kod: `<a href="#">Learn more <span aria-label="about Sa11y"></span></a>`
- Oczekiwany wynik: Dowiedz się więcej o Sa11y

Ucz się więcej

#### 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)

Ucz się więcej

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

Ucz się więcej

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

Dowiedz się więcej o

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

Dowiedz się więcej o

#### ARIA Ukryta

- Kod: `<a href="#" aria-hidden="true">Learn more</a>`
- Spodziewany wynik:

Ucz się więcej

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

`.pdf`Do 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.

- Pobierz podręcznik rekrutacji (PDF)
- Zarys kursu (PDF)
- Ściągawka (PDF)
- Google Docs

### 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 `id`atrybut.

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