Skip to main content
CurbCut

PR-1-RUN2: demo/pr-1-quiz-signup

eziedutech/curbcut, main at 515a2b8 to demo/pr-1-quiz-signup at 250923a

quiz-signup.htmlOpen the page as reviewedOpen the page after IBM Bob's fixes
Proven

12

Flagged

9

Out of reach

18

Not scanned

0

Verified fixes

none

Screen reader narration

Before the fix

  1. link, Skip to main content
  2. link, OpenClass
  3. list
  4. link, Courses
  5. link, Biology basics
  6. link, Quiz sign-up
  7. link, Biology basics
  8. heading, Sign up for the Biology quiz, level 1
  9. img, image
  10. textbox, unlabeled
  11. textbox, Display name
  12. textbox, Course code
  13. combobox, Course
  14. textbox, Date
  15. radio, Starter, checked
  16. radio, Core
  17. radio, Stretch
  18. button, Help about levels
  19. button, Help about timing
  20. heading, Quiz terms, level 2
  21. button, unlabeled
  22. link, full quiz rules
  23. link, course list
  24. checkbox, I agree to the quiz terms
  25. link, Click here

After the fix

No fixed branch was scanned.

Findings

Perceivable (6)

ProvenseriousF007

SC 1.3.5: Display name field has an invalid autocomplete value

quiz-signup.html #display-name

Who is affected
People with cognitive disabilities and motor impairments who rely on browser autofill cannot use it on this field.
Measured
The autocomplete attribute value "nick-name" is not a recognized token; the valid token is "nickname" (no hyphen).
How to fix
Change autocomplete="nick-name" to autocomplete="nickname".
ProvenseriousF008

SC 1.4.3: Hint text fails minimum color contrast

quiz-signup.html .hint

Who is affected
People with low vision or color blindness cannot read the hint text "We only use this to send your quiz link."
Measured
Hint text has a contrast ratio of 2.81 against its white background; the required minimum for normal text at 14.4px is 4.5:1.
How to fix
Darken the hint color to at least #767676 on a white background to achieve 4.5:1 contrast.
FlaggedmoderateF013

SC 1.1.1: Badge image has a non-descriptive alt attribute

quiz-signup.html .quiz-badge img

Who is affected
Screen reader users hear the meaningless text "image" instead of understanding the badge's significance.
Why flagged
The badge image uses alt="image", which is not descriptive and does not convey the meaning of the Cell Explorer badge reward.
How to fix
Change alt to a description such as "Cell Explorer badge" or use alt="" if the image is purely decorative and the caption text alone is sufficient.
FlaggedseriousF014

SC 1.3.1: Email field label is a span, not a label element

quiz-signup.html #signup-form > div:nth-of-type(1)

Who is affected
Screen reader users hear the email field without a name, and people who click the label text cannot activate the input.
Why flagged
A span with class field-name is used in place of a label element, so there is no programmatic association between the visible text "Email" and the input.
How to fix
Replace <span class="field-name">Email</span> with <label for="email">Email</label>.
FlaggedmoderateF015

SC 1.3.3: Submit instruction uses color and position to identify the button

quiz-signup.html #signup-form

Who is affected
Color-blind users and screen reader users cannot identify which control the instruction refers to.
Why flagged
The instruction "press the green button on the right" relies solely on color and spatial position to identify the submit control.
How to fix
Replace the instruction with "press the Sign up button" so it identifies the control by its label text.
FlaggedmoderateF016

SC 1.4.11: Custom radio buttons and fake checkbox may lack sufficient non-text contrast

quiz-signup.html .level-radio, .fake-checkbox

Who is affected
People with low vision may not perceive the boundaries of the custom radio buttons or checkbox.
Why flagged
Custom radio buttons and the fake checkbox use appearance:none with borders defined in CSS; their boundary contrast against adjacent background was not measured by the engine.
How to fix
Verify that the 2px border on .level-radio and .fake-checkbox has at least 3:1 contrast against the surrounding background and test with a contrast checker.

Operable (7)

ProvencriticalF001

SC 2.1.1: Submit button is a div with click handler and is not keyboard accessible

quiz-signup.html #submit-signup

Who is affected
Keyboard-only users, switch access users, and screen reader users cannot submit the form because the submit control is unreachable by Tab.
Measured
The element has a pointer click listener but is not focusable and does not appear in the keyboard focus sequence, so keyboard users cannot activate it.
How to fix
Replace the div with a native button element, or add tabindex="0", a role="button", and a keydown handler for Enter and Space.
ProvencriticalF002

SC 2.1.2: Keyboard focus is permanently trapped in the terms section

quiz-signup.html #terms-first

Who is affected
Keyboard-only users become permanently stuck in the terms section and cannot reach the agree checkbox or any later interactive element.
Measured
Tab key cycles only between #terms-first and #terms-last; #agree and a link are unreachable and no Escape exit is provided.
How to fix
Remove the preventDefault() calls from the keydown Tab handlers in quiz-signup.js so focus follows the natural DOM order.
ProvencriticalF003

SC 2.2.1: Page auto-redirects after 300 seconds with no user control

quiz-signup.html meta[http-equiv="refresh"]

Who is affected
People with cognitive or motor disabilities who need more time to complete the form may lose their data when the page redirects.
Measured
A meta refresh tag forces navigation to course.html after 300 seconds without offering the user a way to turn off, adjust, or extend the time limit.
How to fix
Remove the meta http-equiv="refresh" tag and implement server-side session expiry with a warning dialog instead.
ProvenseriousF009

SC 2.4.7: Custom radio button has no visible focus indicator

quiz-signup.html #signup-form > div:nth-of-type(6) > div:nth-of-type(1) > label:nth-of-type(1) > input

Who is affected
Keyboard users cannot tell which radio button is currently focused.
Measured
The engine confirmed that the radio input's outline, box-shadow, border, background, color, and underline are identical with and without keyboard focus.
How to fix
Replace the .level-radio:focus-visible { outline: none; } rule with a visible focus style such as a box-shadow or outline with at least 3:1 contrast against the surrounding color.
ProvenseriousF010

SC 2.5.8: Help about levels button is too small to activate

quiz-signup.html button[aria-label="Help about levels"]

Who is affected
People with limited motor control and touch screen users cannot reliably activate the small button.
Measured
The button is 16x16 CSS pixels with a safe clickable diameter of only 8px; the minimum is 24x24px.
How to fix
Increase .help-icon width and height to at least 24px, or add sufficient padding to bring the safe click area to 24px.
ProvenseriousF011

SC 2.5.8: Help about timing button is too small to activate

quiz-signup.html button[aria-label="Help about timing"]

Who is affected
People with limited motor control and touch screen users cannot reliably activate the small button.
Measured
The button is 16x16 CSS pixels with a safe clickable diameter of only 8px; the minimum is 24x24px.
How to fix
Increase .help-icon width and height to at least 24px, or add sufficient padding to bring the safe click area to 24px.
FlaggedmoderateF017

SC 2.1.1: Selecting a course option causes unexpected page navigation

quiz-signup.html #course-select

Who is affected
Keyboard users and screen reader users may accidentally navigate away and lose form data when using arrow keys to browse options.
Why flagged
Changing the course dropdown to maths or writing immediately navigates to index.html via window.location.href without any warning or confirmation.
How to fix
Remove the change-event navigation and instead show a note that only Biology basics is available on this page, or require a separate confirm button.

Understandable (5)

ProvenseriousF012

SC 3.1.1: HTML element is missing a lang attribute

quiz-signup.html html

Who is affected
Screen reader users may hear the page content pronounced with the wrong language voice.
Measured
The html element has no lang attribute, so assistive technologies cannot select the correct voice or pronunciation rules.
How to fix
Add lang="en" to the html element.
FlaggedseriousF018

SC 3.2.2: Course select triggers navigation on input without user confirmation

quiz-signup.html #course-select

Who is affected
Keyboard users and people with cognitive disabilities are disoriented by a page change caused only by selecting a dropdown value.
Why flagged
The change event listener navigates away immediately when a non-Biology option is chosen; no prior warning is given.
How to fix
Remove the auto-navigation or wrap it in a confirmation dialog before redirecting.
FlaggedseriousF019

SC 3.3.1: Form validation errors are not communicated in text

quiz-signup.html #signup-form

Who is affected
Screen reader users and blind users cannot perceive color-only error indicators and never learn which field is invalid or why.
Why flagged
When email or date validation fails, the code adds an .invalid CSS class (red border and background) but provides no text error message.
How to fix
Insert a text error message (e.g., via aria-describedby pointing to an error span) and set aria-invalid="true" on each invalid input.
FlaggedseriousF020

SC 3.3.2: Email field has no programmatically associated label

quiz-signup.html #email

Who is affected
Screen reader users and people with cognitive disabilities cannot reliably associate the label text with the input.
Why flagged
The visible text "Email" is in a span rather than a label element, so the programmatic association required by this criterion is absent.
How to fix
Replace the span with <label for="email">Email</label>.
FlaggedmoderateF021

SC 3.3.2: Date field has no format instruction

quiz-signup.html #quiz-date

Who is affected
All users, especially people with cognitive disabilities, may enter dates in the wrong format and receive no guidance on what is expected.
Why flagged
The date input requires a dd/mm/yyyy format (enforced by the JS regex) but shows no visible hint or placeholder about the expected format.
How to fix
Add a visible description or placeholder such as "DD/MM/YYYY" and link it with aria-describedby so screen readers can announce it.

Robust (3)

ProvencriticalF004

SC 4.1.2: Custom checkbox is missing the required aria-checked attribute

quiz-signup.html #agree

Who is affected
Screen reader users cannot tell whether the agree checkbox is checked or unchecked because its ARIA state is never exposed.
Measured
The element has role="checkbox" but no aria-checked attribute; JavaScript only toggles a CSS class and never updates the ARIA state.
How to fix
Set aria-checked="false" on the element initially and toggle it to "true" / "false" in the click handler in quiz-signup.js.
ProvencriticalF005

SC 4.1.2: Close-terms button has no accessible name

quiz-signup.html #close-terms

Who is affected
Screen reader users cannot identify or activate the button because it has no accessible name.
Measured
The icon-only button contains an SVG with aria-hidden="true" and has no aria-label, title, or visible text.
How to fix
Add aria-label="Close terms" to the button element.
ProvencriticalF006

SC 4.1.2: Email input has no associated label

quiz-signup.html #email

Who is affected
Screen reader users cannot determine what data to enter in this field.
Measured
The email input has no explicit label element, no aria-label, no aria-labelledby, no title, and no placeholder; screen readers cannot announce the field purpose.
How to fix
Replace the span with <label for="email">Email</label> so the input is programmatically associated with its visible label.

Out of reach

CriterionWhy it is not checked
Out of reach 1.2.1 Audio-only and Video-only (Prerecorded)
No audio-only or video-only content is present in the diff; criterion is not applicable to this change.
Out of reach 1.2.2 Captions (Prerecorded)
No prerecorded video content is present in the diff; criterion is not applicable to this change.
Out of reach 1.2.3 Audio Description or Media Alternative (Prerecorded)
No prerecorded synchronized media is present in the diff; criterion is not applicable to this change.
Out of reach 1.2.4 Captions (Live)
No live audio content is present in the diff; criterion is not applicable to this change.
Out of reach 1.2.5 Audio Description (Prerecorded)
No prerecorded video content is present in the diff; criterion is not applicable to this change.
Out of reach 1.3.2 Meaningful Sequence
Evaluating whether DOM order matches visual reading order requires rendering the page at runtime; static markup review is insufficient.
Out of reach 1.3.4 Orientation
Testing orientation lock requires runtime device rotation; it cannot be determined from static HTML and CSS alone.
Out of reach 1.4.1 Use of Color
Verifying that error states and status indicators are differentiated by more than color requires rendering the page and testing with the validation error active.
Out of reach 1.4.2 Audio Control
No audio content is present in the diff; criterion is not applicable to this change.
Out of reach 1.4.4 Resize Text
Verifying that content remains usable at 200% browser zoom requires a live rendering session.
Out of reach 1.4.5 Images of Text
No images containing text are present in the diff; criterion is not applicable to this change.
Out of reach 1.4.10 Reflow
Verifying horizontal-scroll-free layout at a 320px viewport requires runtime testing that is not possible from code review alone.
Out of reach 1.4.12 Text Spacing
Verifying that layout does not break under modified text-spacing requires a live browser session with custom CSS injected.
Out of reach 1.4.13 Content on Hover or Focus
Whether the help popups can be dismissed and remain visible long enough requires live interaction testing.
Out of reach 2.3.1 Three Flashes or Below Threshold
Detecting flash rates requires a video analysis tool; it cannot be determined from static code.
Out of reach 2.4.5 Multiple Ways
Verifying that multiple navigation paths exist to reach a page requires site-level analysis beyond a single page diff.
Out of reach 3.2.3 Consistent Navigation
Comparing navigation order across all pages of the site requires access to all pages, not a single diff.
Out of reach 3.2.4 Consistent Identification
Verifying that components with the same function are labeled consistently across the site requires reviewing all pages.

Run

Engine facts
13 in 5.08 s, digest 86fc0656842b
Engine
axe-core 4.13.0, Chromium 153.0.8010.12

What CurbCut does not check

  • It does not certify WCAG conformance. Testing with disabled people cannot be replaced.
  • It does not judge real screen reader experience, cognitive load, or caption quality.
  • Flagged findings are IBM Bob's judgment and can be wrong.
  • Benchmark numbers come from a demo app with planted issues. Other code bases may differ.