Skip to content

Accessibility: Insufficient Contrast and Missing Form Labels Prevent WCAG 2.2 Compliance #31

@liamjberrisford

Description

@liamjberrisford

Describe the bug

There are two key accessibility issues in the current version of the package that prevent compliance with WCAG 2.2 standards:

1. Very Low Contrast on Question Box

The background color and foreground (text) color in the question box and answer areas have insufficient contrast. According to WCAG, the minimum contrast ratio should be 4.5:1 for normal text (7:1 for AAA) or 3:1 for large text. Currently, the contrast ratio is lower than these thresholds, which makes it difficult or impossible to read for users with low vision or color vision deficiency.

2. Missing Form Labels on Answer Inputs

The answer selection boxes (inputs) do not have associated <label> elements. This leads to the following problems:

  • Screen readers and assistive technologies cannot programmatically determine the purpose of the input fields.
  • Users have a harder time clicking the correct target or understanding what to enter/select.

Steps to reproduce

  1. Run any quiz using the package in a Jupyter environment.
  2. Use an accessibility checker such as WAVE or the browser's accessibility tools.
  3. Observe:
    • Contrast errors flagged for question/answer text and backgrounds.
    • Missing label errors for the answer inputs.

Expected behavior

  • All text and input fields should meet at least WCAG AA contrast requirements.
  • Every input must have a properly associated label for accessibility.

References

I would be happy to take a shot at making these changes myself and opening a PR if that is desireable?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions