Please note: the demo pages are automatic translations. Sa11y (the interface) was professionally translated only. You can improve the translation with a pull request.

## Allt

Tja, nästan allt. Bara en sida med många fel och varningar. 🤠

På den här sidan: Rubriker Bilder Länkar Tabeller Andra problem

## Rubriker

### Tomma rubriker

###

### Hoppade över rubriker

##### Det här borde vara en rubrik 4!

### Rubriker som är för långa

#### Är en rubrik verkligen en rubrik om det är en lång mening? Eller går en innehållsförfattare bara efter visuell estetik? Rubriker som är längre än 160 tecken kommer att flaggas som en varning.

### Avsiktligt dold rubrik

### Blockcitat som används som rubriker

Om ett blockcitat är mindre än 25 tecken kommer det att flaggas som en varning.

> Om laget

> "Att vara, eller inte vara, det är frågan."

### Tom rubrik innehåller en dekorativ bild

####

### Rubrik innehåller en bild utan alt-text

####

### Rubrik innehåller en bild med alternativ text

####

### Fet text som används som rubrik

Letar efter`<p><strong>Some text</strong></p>`

Om oss

Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det fanns också en önskan om att chokladen inte skulle följas. Främja sjö tecknade liv läxor fotboll resultat. Du behöver dalens maecena koger för att placera det sjuka lejonets urna.

Detta bör inte flaggas eftersom det är långt och inte nödvändigtvis en rubrik. Det kan bara vara ett stort block med fet text. Det är över 120 tecken.

Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det fanns också en önskan om att chokladen inte skulle följas. Främja sjö tecknade liv läxor fotboll resultat. Du behöver dalens maecena koger för att placera det sjuka lejonets urna.

### Fet text som används som rubrik med radbrytningar

Letar du efter något liknande... Den här kontrollen har utformats för att vara något förlåtande för att förhindra för många varningar. `<p><strong>Fake heading<br></strong> Followed by some text.</p>`

#### Varning

Detta kommer att flaggas!
För det är ett ganska omfattande stycke. Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det fanns också en önskan om att chokladen inte skulle följas. Främja sjö tecknade liv läxor fotboll resultat. Du behöver dalens maecena koger för att placera det sjuka lejonets urna.

#### Passera

Om oss
Kommer inte att flaggas eftersom det är ett litet stycke. Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh.

Adress
105 Bond Street
Toronto, ON
M5B 2K3

Detta kommer inte att flaggas heller eftersom den här fetstilta texten är lång och inte nödvändigtvis en rubrik. Det kan bara vara ett stort block med fet text. Det är över 120 tecken.
Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det är viktigt att ta hand om patienten, att följas av läkaren, men det är en tid av stor smärta och lidande. Elit duis ledsen sollicitudin nibh. Det fanns också en önskan om att chokladen inte skulle följas. Främja sjö tecknade liv läxor fotboll resultat. Du behöver dalens maecena koger för att placera det sjuka lejonets urna.

## Bilder

### Bilder utan länkar

#### Passera

1. Bilden har alternativ text.

#### Varningar

2: Alt-texten har ett misstänkt stoppord.

3. Bilden är dekorativ.

4. Bilden är dekorativ med tomt utrymme (alt=" ").

5: Alt-texten är för lång.

#### Fel

6: Saknar alt-text.

7: Alt-text har filändelse.

8: Alt-text har platshållartext.

### Hyperlänkade bilder

#### Passera

Lär dig mer om Tigers

9: Hyperlänkad bild med noll alt-text, men har omgivande länktext under bilden.

Lär dig mer om Tigers

10: Hyperlänkad bild med noll alt-text, men har omgivande länktext ovanför bilden.

Figurens bildtext.

11: Figurbild med annan alt- och bildtext.

12: Figurbild utan bildtext.

#### Varningar

13: Hyperlänkad bild med alt-text.

14: Hyperlänkad bild har alt-text som innehåller ett stoppord.

15: Hyperlänkad bild alt som är för lång.

Läs mer om Fiat.

16: Hyperlänkad bild som innehåller både alt-text och länktext.

Fikon. 1: Nambian öken (Källa: okänd)

17: Dekorativ bild i ett <figur>-element.

Två zebror

18: Figurelementet har dubblett av alt och bildtext.

19: Hyperlänkat figurelement utan bildtext.

Svartvitt foto av två zebror.

20: Hyperlänkat figurelement med bildtext.

#### Fel

21: Hyperlänkad bild saknar alt-text.

22: Hyperlänkad bild som är dekorativ.

23: Hyperlänkad bild som är dekorativ med tomt utrymme (alt=" ").

Lär dig mer om Dahlior

24: Hyperlänkad bild med saknad alt och innehåller omgivande länktext.

25: Hyperlänkad bild har alt-text som innehåller platshållartext.

26: Hyperlänkad bild där ankare har aria-hidden="true".

#### Övrig

27: Hyperlänkad bild där ankaret har aria-hidden="true" och tabindex="-1"

27B: Hyperlänkad bild där ankare har aria-hidden="true" och tabindex="-1" och bilden har alt-text.

###### Lär dig mer om Kanarieöarna

28: Hyperlänkad bild innehåller överhoppad rubrik. Fel läggs till efter hyperlänken för att förhindra kapslingsknapp inuti hyperlänken.

29: Hyperlänkad bild öppnas i ny flik.

30: Hyperlänkad bild öppnas i ny flik. Alt text indikerar att länken öppnas i nytt fönster.

31: Buggtestning. Ignorera <noscript>-taggar.

## Länkar

### Partiella stoppord

#### Fel

Att använda något av orden ovan på egen hand kommer att resultera i ett fel eftersom det inte är tillräckligt beskrivande.

denna sida
Mer!
Läs mer >

#### Passera

Men om den används med ytterligare text kommer den inte att flaggas som ett fel.

Lär dig mer om Sa11y

### Partiella stoppord med uteslutningar

Ibland kan ett webbplatstema automatiskt lägga till text till en länk. Till exempel kommer "(Extern länk)" att ignoreras, vilket korrekt flaggar denna länk som ett fel för att den inte är tillräckligt beskrivande.

läs mer (Extern länk)

### Tomma hyperlänkar

- Tom hyperlänk:
- Tom hyperlänk med blanksteg:
- Enstaka tecken: .
- Icke-brytande utrymme:

### Tomma hyperlänkar med barn

- Tom hyperlänk med ikontypsnitt:
- Tom hyperlänk med ikontypsnitt (öppnar ny flik):
- Tom hyperlänk med SVG:
- Tom hyperlänk med SVG (öppnar ny flik):

### Tomma hyperlänkar med tillgängligt namn via title-attribut

- Tom hyperlänk med titel:
- Tom hyperlänk med mellanslag och titel:
- Non-breaking space och titel:
- Tom hyperlänk med ikontypsnitt och titel:
- Tom hyperlänk med ikontypsnitt (öppnar ny flik) och titel:
- Tom hyperlänk med SVG och titel:
- Tom hyperlänk med SVG (öppnar ny flik):

### Bästa metoder för länktext

#### Stoppa ord

Länken innehåller: "klicka här", ">", "<"

Klicka här för att se våra program
Nästa >
< Föregående

#### Långa webbadresser

Långa webbadresser kommer endast att flaggas.

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

### Hyperlänkar med ARIA

#### ARIA-etikett

- Koda: `<a href="#" aria-label="Learn more about Sa11y">Learn more</a>`
- Förväntat resultat: Lär dig mer om Sa11y

Läs mer

#### Barn med ARIA-etikett

- Koda: `<a href="#">Learn more <span aria-label="about Sa11y"></span></a>`
- Förväntat resultat: Lär dig mer om Sa11y

Läs mer

#### Flera barn med ARIA-etikett

- Koda: `<a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>`
- Förväntat resultat: Läs mer om Sa11y (extern)

Läs mer

#### Enstaka ARIA-märkt av attribut

äpplen

- Referens-ID: `<span id="app">apples</span>`
- Koda: `<a href="#" aria-labelledby="app">Learn more</a>`
- Förväntat resultat: äpplen

Läs mer

#### Flera ARIA-märkta av attribut

och bananer

- Referens-ID: sig själv, `<span id="app">apples</span>`, `x`som inte finns,`<span id="ban">bananas</span>`
- Koda: `<a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>`
- Förväntat resultat: Lär dig mer om äpplen och bananer

Lära sig mer om

#### Barn med ARIA-märkta av attribut

- Referens-ID: `<span id="app">apples</span>` , `x` som inte finns,`<span id="ban">bananas</span>`
- Koda: `<a href="#">Learn more <span aria-labelledby="app x ban"></span></a>`
- Förväntat resultat: Lär dig mer om äpplen och bananer

Lära sig mer om

#### ARIA Dold

- Koda: `<a href="#" aria-hidden="true">Learn more</a>`
- Förväntat resultat:

Läs mer

## Tabeller

### Rätt bord

Event namn | Tid | Plats
--- | --- | ---
Grundton | 09:00 | Hörsal
Lunch | 12:00 | Skyline rum
Avslutningsmiddag | 17:00 | Metropolitan rummet

### Tabellrubriker saknas

Event namn | Tid | Plats
Grundton | 09:00 | Hörsal
Lunch | 12:00 | Skyline rum
Avslutningsmiddag | 17:00 | Metropolitan rummet

### Tabell med tom rubrik

| Tid | Plats
--- | --- | ---
Grundton | 09:00 | Hörsal
Lunch | 12:00 | Skyline rum
Avslutningsmiddag | 17:00 | Metropolitan rummet

### Tabell med semantiska rubriker

#### Händelse | #### Tid | #### Plats
--- | --- | ---
Grundton | 09:00 | Hörsal
Lunch | 12:00 | Skyline rum falsk rubrik
Avslutningsmiddag | 17:00 | Metropolitan rummet

## Andra problem

### PDF

En varning läggs till för alla hyperlänkar som har ett `.pdf`filtillägg. En varningsikon läggs bara till den första PDF-filen som upptäcks på sidan för att undvika att en innehållsförfattare blir överväldigad. Alla andra PDF-länkar är visuellt markerade.

- Ladda ner Antagningshandboken (PDF)
- Kursöversikt (PDF)
- Fuskblad (PDF)

### Versal text

Denna varning är till för att motverka användningen av versaler. Detta är inte ett WCAG 2.1-krav, men är en avskräckande praxis för läsbarhet. För det andra kan vissa ord med versaler förväxlas med en akronym och klara ut tecken för tecken med en skärmläsare. Detta villkor använder regex för att hitta versaler som är minst 3 tecken långa, men det indikeras endast som en varning om minst 5 versaler i ett element hittas. Den letar bara efter versaler inom följande element: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

TILL EXEMPEL KOMMER DETTA FLAGGAS .

TILL EXEMPEL, detta KOMMER INTE att flaggas.

- VERSALER TEXT I PUL kommer också att flaggas.

### Understruken text

Denna varning är till för att avråda från att använda understruken text eftersom den lätt kan förväxlas med länkar. Detta villkor kontrollerar efter understruken text skapad med <u>-markering och css-stilar inom följande element: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

Detta kommer att flaggas.

<u>understrukna</u> på detta sätt kommer att flaggas.

- Understruken text i listor kommer också att flaggas.

#### Denna rubrik kommer att flaggas.

Länkad text kommer inte att flaggas.

### Icke-semantiska listor

a) Ibland skapar människor manuellt en lista
b) med falska listprefix
c) istället för att använda en semantisk lista.

1. Bananer

2. Päron

3. Äpplen

### Dubbletter av ID

Element 1 och Element 2 har samma `id`attribut.

### Nedsänkt och upphöjd formatering

En nedsänkt eller upphöjd är ett tecken som sätts något under respektive över den normala raden. Den är vanligtvis mindre än resten av texten. Nedsänkta texter visas vid eller under baslinjen, medan upphöjda texter är ovanför. Wikipedia.

En nedsänkt eller upphöjd är ett tecken som sätts något under respektive över den normala raden. Den är vanligtvis mindre än resten av texten. Nedsänkta texter visas vid eller under baslinjen, medan upphöjda texter är ovanför. Wikipedia.