Några Saker Om `alt` Text

0
54

Jag är säker på att du vet om alt-text. Det är attributet på bilden tagg som har den viktiga uppgiften att beskriva vad bilden är för någon som inte kan se det av någon anledning. Använd dem.

Jag vill inte dimish den du använda dem budskap, men några intressanta alt-text-relaterade saker har kommit upp i min dag-till-dag på sistone som är relaterade.

När du inte

Hidde de Vries skrev att Du inte alltid behöver alternativ text som nyligen:

Men när en ikon som har ett ord nästa till det, till exempel ‘Logga ut’, själva ikonen är dekorativa och inte behöver en alternativ text:

<button type=”button”><img src=”närheten.svg” alt=”” /> Stäng</button>

I detta fall kan vi lämna den tomma alt-attribut, som annars är en talsyntes skulle kunna säga “- knappen stäng stäng’.

Jag skulle tro att i en perfekt värld eftersom den ikonen är helt dekorativa att tillämpa det via CSS skulle vara perfekt, men det står: om du måste använda en bild, alt-text skadar mer än det hjälper här.

Kan vi få det gratis?

Datorer är pretttttty smart i dessa dagar. Kanske de kunde titta på våra bilder och erbjuder upp beskrivningar utan att manuellt behöva skriva dem.

🔥 Jag tror att jag använde maskinen lära sig att vara snäll mot folk! I detta proof of concept, jag håller på att skapa dynamiska alt-text för screenreaders med Azure Dator Vision API. 💫https://t.co/Y21AHbRT4Y pic..com/KDfPZ4Sue0

— Sarah Drasner (@sarah_edo) 13 November 2017

Sarah ‘ s demo använder en Dator Vision API för att göra det.

Vad sägs om figcaption?

Jag hatar att säga det, men jag är inte särskilt bra på att skriva alt-text beskrivningar för bilder i blogginlägg här på CSS-Tricks. Det är ett problem som vi behöver rätta till med förändringar process. Vi gör ofta använda <figcaption> om vill lägga till text som är kopplad till en bild. Det sätt som texten är ofta utformad känns som alt-text till mig. Den beskriver vad som händer i bilden.

Jag frågade runt om det här, och Zell Liew sa till mig att han gör samma sak:

Jag har egentligen samma fråga. De flesta av mina figcaptions används för att beskriva bilden så att läsarna förstår vad bilden handlar om.

I mitt sinne, jag tänkte att det skulle vara värre att släppa exakt kopia från figcaption i alt-texten, som någon som läste alt-texten skulle då i huvudsak läsa samma beskrivning två gånger.

Jag har också pratat med Eric Bailey som hade en intressant idé.

<bild>
<img src=”skärmdump.png” alt=”Skärmdump av Chrome visar en delad vy. Till vänster är en sida full av miniatyrbilder att jämföra före och efter optimering filstorlek. Till höger är Chrome developer tools visar paint rastrera varaktighet för bilder. Med en 6x CPU nedgången, den längsta Färg Raster tog 0.27 ms, AKA 0.00027 sekunder.”>
<figcaption aria-hidden=”true”>
Med en 6x CPU nedgången, den längsta Färg Raster tog 0.27 ms, AKA 0.00027 sekunder.
</figcaption>
</bild>

Detta:

  • Bevarar figur styling
  • Undviker nulling alt, som kan vara problematiskt för vissa skärmläsare
  • Håller beskrivning nära till innehåll och kommunicerar peka på SR användare
  • Kommunicerar betydande takeaway visuella läsare utan att behöva upprepa behandlingen för SR användare
  • Använder en aria egendom avsedda att användas utanför former

Jag vill betona att han ansåg att detta bara är en idé och det har inte varit kraftigt prövas av större tillgänglighet i samhället. Om det är någon av er där ute som läser, vad tycker du?

Eric demo som används för en mer utförlig alt-text än figcaption, men det verkar som att mönstret skulle vara bra även om de var identiska.

Liten påminnelse: har alt-text

Men du behöver för att aktivera funktionen.