Ø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.

    Skjermbilde av FastPass-resultater, som viser problemer med fargekontrast.

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

    Skjermbilde som viser detaljer om et problem med fargekontrast i Tilgjengelighetsinnsikt for nettet.

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.