logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.9 - Use of Color part 2

A developer created a webpage for answering quizzes. To give the correct answer they decided to use the color green for correct and red for false. For the blind users they correctly used a non-visible text alternative in accordance to the WCAG guideline 1.1.1 for non-text content. The implementation of that can be seen in the JavaScript editor.

They thought they did all the actions necessary to make the webpage accessible but they did not. They failed to account for the 1% of the population that cannot distinguish the two colors.

Requirements

Pending requirement:

Make sure that a user with protanopia or deuteranopia can use the quiz application effectively. There are muliple ways to achieve that. You must at least change the function onSubmit found in the javascript editor. Assume that the first answer is correct and the second answer is wrong. Use your imagination on how to convey the information.
You could do one of the following:

  • Add some text below that either contains the word correct or wrong.
  • Add the font awesome icon fa-check-circle and fa-times-circle. Don't forget the class far, the aria-label attribute and role="img".
  • Simply remove the visuallyHidden class from the span that was added for the screen readers. Find it in the javascript code.
    This option is not the best design-wise.

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.9 - Use of Color part 2

A developer created a webpage for answering quizzes. To give the correct answer they decided to use the color green for correct and red for false. For the blind users they correctly used a non-visible text alternative in accordance to the WCAG guideline 1.1.1 for non-text content. The implementation of that can be seen in the JavaScript editor.

They thought they did all the actions necessary to make the webpage accessible but they did not. They failed to account for the 1% of the population that cannot distinguish the two colors.

Requirements

Pending requirement:

Make sure that a user with protanopia or deuteranopia can use the quiz application effectively. There are muliple ways to achieve that. You must at least change the function onSubmit found in the javascript editor. Assume that the first answer is correct and the second answer is wrong. Use your imagination on how to convey the information.
You could do one of the following:

  • Add some text below that either contains the word correct or wrong.
  • Add the font awesome icon fa-check-circle and fa-times-circle. Don't forget the class far, the aria-label attribute and role="img".
  • Simply remove the visuallyHidden class from the span that was added for the screen readers. Find it in the javascript code.
    This option is not the best design-wise.

Need help?

Show me the solution

Learning Material

Editor

Preview Page