Øvelse – Løse tilgjengelighetsproblemer med visualobjekter

Fullført

I forrige øvelse brukte du indikatorene for tilgjengelighetsfeil i skjemaelementene på eksempelnettsiden. I denne øvelsen bruker du Tilgjengelighetsinnsikt for nettet til å finne og løse problemer med tilgjengelighet for visualobjekter.

1. Kjør programmet, og kjør deretter FastPass. Du bør se tre fargekontrastproblemer oppdaget.

   

2. Utvid det første problemet for å vise flere detaljer.

   

Her er den viktige delen:

"Elementet har utilstrekkelig fargekontrast på 4,44 (forgrunnsfarge: #6c757d, bakgrunnsfarge: #f8f9fa, skriftstørrelse: 12.0pt (16px), skrifttykkelse: normal). Forventet kontrastforhold på 4,5:1 tommer

Denne informasjonen forteller deg at tilgjengelighetsstandardene anbefaler et kontrastforhold på 4,5:1, men den grå teksten (ved hjelp av klasse text-muted) på en grå bakgrunn (fra klasse bg-light) er bare 4,44:1.

Hvis du ser på de andre kontrastfeilene, kan du se at alle har samme problem.

Du har to enkle alternativer: Fjern den grå bakgrunnen eller bruk standard svart tekst. Når du har en rask chat med designeren, bestemmer du deg for å bruke svart tekst på den grå bakgrunnen.

1. Rediger HTML-koden, og fjern text-muted klassen fra de tre bg-light avsnittene. Den resulterende HTML-koden under skjemaet skal se ut som eksemplet nedenfor.

   <p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>
   <p class="bg-light">We make it fresh every day, sometimes up to three times a day!<br><br>
   We love to make pizza!
   </p>
   
   <div class="text-center">
     <img width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">
   </div>
   
   <p style="font-size: 30px"><b>We take your privacy seriously!</b></p>
   <p class="bg-light">Unlike other pizza restaurants that share your pizza preferences, we care about your privacy.<br><br>
   Want to know more? <a href="/Privacy">Click here.</a>
   </p>
   
   <p style="font-size: 30px"><b>Delivery options</b></p>
   <p class="bg-light">There are a few ways we can get the pizza to you:<br>
     - Postal mail<br>
     - Dog sled<br>
     - Drone (experimental!)
   </p>
   

2. Kjør programmet og FastPass på nytt for å bekrefte at problemer med fargekontrast er fjernet.

Notat

Hvis et enkelt fargekontrastproblem gjenstår for Klikk her koblingstekst, kan du ignorere den. Problemet er ikke relatert til denne modulen.

I neste enhet skal vi se nærmere på å gjøre innhold tilgjengelig for skjermlesere.