BustByte/coronastatus

Accessibility issues

Kilian opened this issue · 2 comments

To keep track of accessibility issues the site may have:

  • lack of (keyboard) focus styles
  • heading structure can be improved
  • all h4's in the form should be <label>s with proper for attributes
  • some fields have no labels

contrast issues:

  • .text-cvs-gold on #5d7979 is not sufficient on cta block
  • .text-cvs-green-dark on #e7f4f7 is not sufficient on list of symptoms and in footer
  • .text-red-500 on #e7f4f7 is not sufficient on list of symptoms
  • .text-cvs-red on #cde2e2 in form not sufficient

Suggestion for more accessible heading structure by @julezrules:

current:

1 Help ons de verspreiding van het coronavirus te ontdekken en voorspellen in uw omgeving
    2 Ongemelde gevallen
    2 Anoniem bijdragen
    2 Inzichtelijk voor iedereen
    2 Alles is open
    3 Totaal ingezonden
    3 Geïnfecteerd / is getest
    3 In nauw contact met een geïnfecteerde
    3 Hebben symptomen
    3 Meld uw gezondheidstoestand
    3 Demografie en geografie
        4 Uw leeftijd
        4 Biologisch geslacht/sekse
        4 Postcode (zonder letters)
2 Testen en symptomen
        4 Bent u in nauw contact geweest met iemand die positief is getest op COVID-19?
        4 Bent u getest op COVID-19?
        4 Symptomen die u heeft of hebt gehad
        4 Bent u gediagnostiseerd met één van de volgende aandoeningen?
        4 Momenteel ben ik
        4 Roken
        4 Wat is uw huidige lichaamstemperatuur? (Celcius)
2 Hoe worden mijn gegevens gebruikt?

better:

<H1> coronastatus.nl   ---> ALLEEN OP DE HOMEPAGE
<P> Help ons de verspreiding van het coronavirus te ontdekken en voorspellen in uw omgeving
<H2> Ongemelde gevallen
<H2> Anoniem bijdragen
<H2> Inzichtelijk voor iedereen
<H2> Alles is open
<H2> Cijfers  ----> NIEUW KOPJE: VISUALLY-HIDDEN/SCREENREADER-ONLY
<LI> Totaal ingezonden 1083
<lI> Geïnfecteerd / is getest  1/2      -----> IS DAT EEN HALF???
<LI> In nauw contact met een geïnfecteerde  51
<LI> Hebben symptomen   662
<H2> Meld uw gezondheidstoestand
<H3> Demografie en geografie        ----> MAG OOK FIELDSET ZIJN T/M VELD POSTCODE
<LABEL> Uw leeftijd
<FIELDSET><LEGEND> Biologisch geslacht/sekse
<LABEL> Postcode (zonder letters)
<h3> Testen en symptomen            ----> MAG OOK FIELDSET ZIJN T/M HUIDIGE LICHAAMSTEMPERATUUR
<FIELDSET><LEGEND> Bent u in nauw contact geweest met iemand die positief is getest op COVID-19?
<FIELDSET><LEGEND> Bent u getest op COVID-19?
<FIELDSET><LEGEND> Symptomen die u heeft of hebt gehad
<FIELDSET><LEGEND> Bent u gediagnostiseerd met één van de volgende aandoeningen?
<FIELDSET><LEGEND> Momenteel ben ik
<FIELDSET><LEGEND> Roken
<LABEL> Wat is uw huidige lichaamstemperatuur? (Celcius)
<H3> Hoe worden mijn gegevens gebruikt?   ----> MAG OOK FIELDSET ZIJN TOT DE KNOP
<H2> OVER DE SERVICE      ----> IS NU DIV

PR is ready, closing this.