Noen Ting Om `alt` Tekst

0
74

Jeg er sikker på at du vet om alt-tekst. Det er attributtet på bildet tag som har den viktige oppgaven å beskrive hva som bildet er for noen som ikke kan se det for noen grunn. Vennligst bruke dem.

Jeg ønsker ikke å dimish den kan du bruke dem meldingen, men noen interessante alt-tekst-relaterte ting som har kommet opp i min dag-til-dag i det siste som er i slekt.

Når du ikke

Hidde de Vries skrev Du ikke alltid trenger alternativ tekst nylig:

Men når et ikon har et ord ved siden av det, for eksempel ‘Logg ut’, selve ikonet er dekorative og ikke trenger en alternativ tekst:

<- knappen type=”button”><img src=”lukk.svg” alt=”” /> Lukk</button>

I dette tilfellet kan vi forlate alt-attributtet tom, som ellers er en screenreader ville kunngjøre “- knappen – lukk lukk”.

Jeg vil tro at i en perfekt verden, fordi at ikonet er helt dekorative som å bruke det via CSS ville være ideelt, men poenget står: hvis du har til å bruke et bilde, alt-tekst skader mer enn det hjelper her.

Kan vi få det gratis?

Datamaskiner er pretttttty smart i disse dager. Kanskje de kunne se på våre bilder, og tilbyr opp beskrivelser uten oss manuelt å skrive dem.

🔥 Jeg tror jeg brukt maskin lære å være hyggelig mot folk! I denne proof of concept, jeg er å lage dynamiske alt-tekst for screenreaders med Azure er Computer Vision API. 💫https://t.co/Y21AHbRT4Y pic..com/KDfPZ4Sue0

— Sarah Drasner (@sarah_edo) November 13, 2017

Sarah ‘ s demo bruker en Computer Vision API for å gjøre det.

Hva om figcaption?

Jeg hater å si det, men jeg er ikke spesielt flink til å skrive alt-tekst beskrivelser til bilder i blogginnlegg her på CSS-Triks. Det er et problem vi må løse med prosessen endringer. Vi gjør ofte bruk <figcaption> om å legge til tekst, som er knyttet til et bilde. Måten teksten er ofte utformet føles som alt-tekst for meg. Den beskriver hva som skjer i bildet.

Jeg ble spurt rundt om dette, og Zell Liew fortalte meg at han gjør det samme:

Jeg har faktisk det samme spørsmålet. De fleste av mine figcaptions er brukt for å beskrive bildet, slik at leserne kan forstå hva bildet handler om.

I mitt sinn, jeg tenkte det ville være verre å slippe eksakt kopi fra figcaption i alt-teksten, som noen som var å lese alt-teksten ville da i hovedsak lese den samme beskrivelsen to ganger.

Jeg har også snakket med Eric Bailey som hadde en interessant idé.

<figur>
<img src=”skjermbilde.png” alt=”Skjermbilde av Chrome viser en delt visning. På venstre side er en side som er full av miniatyrbilder sammenligning av pre-og post-optimalisering filstørrelse. På høyre side er Chrome utvikler verktøy som viser maling rasteriser varighet for bilder. Med en 6x CPU nedgang, den lengste Maling Raster tok 0.27 ms, AKA 0.00027 sekunder.”>
<figcaption aria-skjult=”true”>
Med en 6x CPU nedgang, den lengste Maling Raster tok 0.27 ms, AKA 0.00027 sekunder.
</figcaption>
</figure>

På dette:

  • Bevarer figur styling
  • Unngår nulling alt, noe som kan være problematisk for noen skjermlesere
  • Holder beskrivelse nær innhold og kommuniserer punkt til SR brukere
  • Kommuniserer betydelig takeaway å visuelle lesere uten å duplisere lesing for SR brukere
  • Bruker en arie eiendom designet for å brukes utenfor former

Jeg vil understreke at han anså dette bare en idé, og det har ikke vært sterkt utvalgte av de større tilgjengelighet samfunnet. Hvis det er noen av dere der ute som leser, hva tror du?

Eric ‘ s demo brukt en mer utførlig alt-tekst enn figcaption, men det virker som om mønsteret ville være fint, selv om de var identiske.

Liten påminnelse: har alt-tekst

Men du trenger å aktivere funksjonen.