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. 🤠
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
9: Hyperlänkad bild med noll alt-text, men har omgivande länktext under bilden.
10: Hyperlänkad bild med noll alt-text, men har omgivande länktext ovanför bilden.
11: Figurbild med annan alt- och bildtext.
12: Figurbild utan bildtext.
Varningar
16: Hyperlänkad bild som innehåller både alt-text och länktext.
17: Dekorativ bild i ett <figur>-element.
18: Figurelementet har dubblett av alt och bildtext.
20: Hyperlänkat figurelement med bildtext.
Fel
24: Hyperlänkad bild med saknad alt och innehåller omgivande länktext.
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.
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.
Passera
Men om den används med ytterligare text kommer den inte att flaggas som ett fel.
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.
Tomma hyperlänkar
- Tom hyperlänk:
- Tom hyperlänk med blanksteg:
- Enstaka tecken: .
- Icke-brytande utrymme:
Tomma hyperlänkar med barn
Tomma hyperlänkar med tillgängligt namn via title-attribut
Bästa metoder för länktext
Stoppa ord
Länken innehåller: "klicka här", ">", "<"
Långa webbadresser
Långa webbadresser kommer endast att flaggas.
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
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
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)
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
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
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
ARIA Dold
- Koda:
<a href="#" aria-hidden="true">Learn more</a>
- Förväntat resultat:
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
En varning läggs till för alla hyperlänkar som har ett .pdffiltillä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.
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 idattribut.
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.