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

Ett vackert torg.

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

Stora berg av sand i den nambianska öknen.

1. Bilden har alternativ text.

Varningar

En bild av en fågel.

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

3. Bilden är dekorativ.

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

Zebror är flera arter av afrikanska hästdjur (hästfamiljen) förenade av sina distinkta svart-vitrandiga pälsar.  Deras ränder finns i olika mönster, unika för varje individ.  De är i allmänhet sociala djur som lever i små harem till stora flockar.  Till skillnad från sina närmaste släktingar, hästar och åsnor, har zebror aldrig varit riktigt domesticerade.  Källa: Wikipedia.

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

Fel

6: Saknar alt-text.

birdy.jpg

7: Alt-text har filändelse.

bild

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.

Alt text för figur.
Figurens bildtext.

11: Figurbild med annan alt- och bildtext.

två zebror svartvita

12: Figurbild utan bildtext.

Varningar

Stora berg av sand i den nambianska öknen.

13: Hyperlänkad bild med alt-text.

En bild av en fågel.

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

Zebror är flera arter av afrikanska hästdjur (hästfamiljen) förenade av sina distinkta svart-vitrandiga pälsar.  Deras ränder finns i olika mönster, unika för varje individ.  De är i allmänhet sociala djur som lever i små harem till stora flockar.  Till skillnad från sina närmaste släktingar, hästar och åsnor, har zebror aldrig varit riktigt domesticerade.  Källa: Wikipedia.

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

Fixa det igen Tony!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
Två zebror

18: Figurelementet har dubblett av alt och bildtext.

två zebror svartvita

19: Hyperlänkat figurelement utan bildtext.

två zebror svartvita
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.

bild

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.

Fixa det igen Tony!

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

Två zebror.  Öppnas i ny flik.

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

testa

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.

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

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

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

  • 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

  • Referens-ID: sig själv, <span id="app">apples</span>, xsom 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

PDF

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.