Skip to main content
CurbCut

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

eziedutech/curbcut, main at 736bb7f 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

11

Out of reach

13

Not scanned

0

Verified fixes

23/23

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

  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, Cell Explorer badge
  10. textbox, Email
  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, Close terms
  22. link, full quiz rules
  23. link, course list
  24. checkbox, I agree to the quiz terms
  25. link, View course rules
  26. button, Sign up

Findings

Perceivable (6)

ProvenVerified fixseriousF001

SC 1.3.5: Invalid autocomplete attribute value on display-name field

quiz-signup.html #display-name

Who is affected
People with cognitive disabilities and motor impairments benefit from browser autofill, which requires correct autocomplete values.
Measured
The autocomplete attribute value 'nick-name' is not a valid HTML autocomplete keyword; the engine confirmed the value is incorrectly formatted.
How to fix
Change autocomplete='nick-name' to a valid token such as autocomplete='username' or autocomplete='name'.
Fix applied
Changed autocomplete='nick-name' to autocomplete='username' on the display-name input, which is a valid HTML autofill token.
Test
test_pr1_F001.py: failed before the fix, passed after
ProvenVerified fixseriousF002

SC 1.4.3: Hint text has insufficient color contrast

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

Who is affected
People with low vision or color blindness struggle to read text that does not have sufficient contrast against its background.
Measured
Hint text has foreground color #9a9a9a on background #ffffff with a contrast ratio of 2.81:1, below the required minimum of 4.5:1 for normal-weight text at 14.4px.
How to fix
Change the hint text color to a darker shade that achieves at least 4.5:1 contrast against #ffffff; for example #767676 achieves exactly 4.5:1.
Fix applied
Changed the .hint text color from #9a9a9a to #767676, which achieves a 4.5:1 contrast ratio against #ffffff.
Test
test_pr1_F002.py: failed before the fix, passed after
FlaggedVerified fixseriousF003

SC 1.1.1: Non-descriptive alt text on badge image

quiz-signup.html .quiz-badge img

Who is affected
Blind users and people who cannot see images rely on text alternatives to understand visual content; 'image' conveys nothing about the badge.
Why flagged
The badge image has alt text 'image' which does not convey the purpose or meaning of the graphic (the Cell Explorer badge).
How to fix
Replace alt='image' with a descriptive alternative such as alt='Cell Explorer badge'.
Fix applied
Replaced alt='image' with alt='Cell Explorer badge' on the badge image to describe the graphic meaningfully.
Test
test_pr1_F003.py: failed before the fix, passed after
FlaggedVerified fixseriousF004

SC 1.3.3: Form instruction relies on color and position to identify the submit button

quiz-signup.html #signup-form > p:nth-of-type(2)

Who is affected
Blind users and people with color blindness cannot rely on visual or spatial characteristics alone to identify controls.
Why flagged
The instruction 'When you are ready, press the green button on the right' identifies the control only by color (green) and screen position (right), with no text label or other identifier.
How to fix
Replace the instruction with one that uses the button label, for example 'When you are ready, press Sign up'.
Fix applied
Replaced 'press the green button on the right' with 'press Sign up' so the instruction uses the button label instead of color and position.
Test
test_pr1_F004.py: failed before the fix, passed after
FlaggedVerified fixseriousF005

SC 1.4.1: Form validation error state indicated by color only

quiz-signup.html .signup-form .invalid

Who is affected
People with color blindness or low vision cannot distinguish an error state indicated by color alone.
Why flagged
Invalid form fields are indicated by changing the border to red (#d93025) and background to light red (#fdecea), with no text message, error icon, or aria-invalid attribute to convey the error state without color.
How to fix
Add a visible error message in text, set aria-invalid='true' on invalid fields, and link each field to its error message with aria-describedby.
Fix applied
Added aria-invalid='true' to invalid fields on submit, added a visible field-error paragraph with a text error message for each field, and added the .field-error CSS rule.
Test
test_pr1_F005.py: failed before the fix, passed after
FlaggedVerified fixmoderateF006

SC 1.4.13: Help popups lack a keyboard-accessible dismiss mechanism

quiz-signup.html .help-icon

Who is affected
Users with low vision who zoom in and users with motor disabilities often need to move the pointer to read tooltip content without it closing.
Why flagged
Help buttons toggle hidden text panels on click but provide no Escape-key dismiss handler and no hover persistence, leaving keyboard and low-vision users unable to dismiss or re-read the content.
How to fix
Add an Escape key listener to dismiss open help panels and ensure pointer users can move onto the revealed content without it closing.
Fix applied
Added a document-level Escape key listener that hides all open help panels so keyboard users can dismiss them.
Test
test_pr1_F006.py: failed before the fix, passed after

Operable (9)

ProvenVerified fixcriticalF007

SC 2.1.1: Submit button implemented as a div and is not keyboard accessible

quiz-signup.html #submit-signup

Who is affected
Keyboard-only users, switch access users, and screen reader users cannot use a mouse and depend entirely on keyboard access.
Measured
The submit control is a div with a click listener but is not focusable and is not a native interactive element, so keyboard-only users cannot reach or activate it.
How to fix
Replace the div with a native <button type='submit'> element, which is focusable and keyboard-operable by default.
Fix applied
Replaced the div#submit-signup with a native button[type=submit] and changed the JS handler from a click listener on the div to a form submit listener so the button is keyboard-operable by default.
Test
test_pr1_F007.py: failed before the fix, passed after
ProvenVerified fixcriticalF008

SC 2.1.2: Keyboard focus trap in the terms section

quiz-signup.html #terms-first

Who is affected
Keyboard users become stuck in the terms section and cannot navigate to the rest of the form or complete the sign-up.
Measured
Repeated Tab presses cycle focus only between #terms-first and #terms-last; the #agree checkbox and a page link are unreachable by keyboard.
How to fix
Remove the keydown handlers that intercept Tab in the terms section. If modal-style focus containment is intended, implement it only while the modal is explicitly open and provide an Escape key to exit.
Fix applied
Removed the keydown handlers on #terms-first and #terms-last that intercepted Tab and trapped keyboard focus in the terms section.
Test
test_pr1_F008.py: failed before the fix, passed after
ProvenVerified fixcriticalF009

SC 2.2.1: Meta refresh redirects the page after 5 minutes with no user control

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

Who is affected
People with cognitive or motor disabilities need more time to complete tasks and may be unable to finish the form before the page redirects.
Measured
The meta refresh tag forces a page redirect after 300 seconds with no mechanism for the user to turn off, adjust, or extend the time limit.
How to fix
Remove the meta refresh tag. If a session timeout is required, replace it with a server-side mechanism that warns the user and offers options to extend the session.
Fix applied
Removed the meta[http-equiv=refresh] tag that redirected the page after 300 seconds with no user control.
Test
test_pr1_F009.py: failed before the fix, passed after
ProvenVerified fixseriousF010

SC 2.4.7: Custom radio inputs have 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 element is active without a visible focus indicator and may become disoriented navigating the quiz level options.
Measured
The element's outline, box-shadow, border, background, color, and underline were identical with and without keyboard focus, confirming the focused state is invisible.
How to fix
Remove the CSS rule '.level-radio:focus-visible { outline: none; }' and replace it with a visible focus style such as 'outline: 3px solid #4a4a55; outline-offset: 2px'.
Fix applied
Replaced '.level-radio:focus-visible { outline: none }' with a visible 3px solid outline so keyboard focus on the radio buttons is visible.
Test
test_pr1_F010.py: failed before the fix, passed after
ProvenVerified fixseriousF011

SC 2.5.8: Help button 'Help about levels' has insufficient target size

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

Who is affected
People with limited motor control struggle to accurately tap or click small targets, especially on touch screens.
Measured
Target size is 16px by 16px and safe clickable space has a diameter of 8px, both below the required minimum of 24px.
How to fix
Increase the .help-icon width and height to at least 24px and add padding so the safe clickable space reaches at least 24px in diameter.
Fix applied
Increased .help-icon width and height from 16px to 24px (meeting the 24px minimum target size) and updated line-height to match.
Test
test_pr1_F011.py: failed before the fix, passed after
ProvenVerified fixseriousF012

SC 2.5.8: Help button 'Help about timing' has insufficient target size

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

Who is affected
People with limited motor control struggle to accurately tap or click small targets, especially on touch screens.
Measured
Target size is 16px by 16px and safe clickable space has a diameter of 8px, both below the required minimum of 24px.
How to fix
Increase the .help-icon width and height to at least 24px and add padding so the safe clickable space reaches at least 24px in diameter.
Fix applied
The same .help-icon CSS change that fixes F011 also raises the 'Help about timing' button to 24px, meeting the minimum target size.
Test
test_pr1_F012.py: failed before the fix, passed after
FlaggedVerified fixcriticalF013

SC 2.4.3: Focus order is disrupted by the terms section keyboard trap

quiz-signup.html #terms-box

Who is affected
Keyboard users and screen reader users become confused when focus does not move in a logical sequence and important form controls are unreachable.
Why flagged
The programmatic focus trap between #terms-first and #terms-last prevents keyboard focus from reaching the agree checkbox and other subsequent elements, breaking the logical Tab order through the form.
How to fix
Remove the Tab-intercepting keydown handlers so focus flows naturally through the terms content and on to the #agree checkbox and remaining form controls.
Fix applied
The removal of the Tab-trapping keydown handlers (F008 fix) also restores the natural focus order through the terms section, resolving this finding.
Test
test_pr1_F013.py: failed before the fix, passed after
FlaggedVerified fixseriousF014

SC 2.4.4: Link with ambiguous text 'Click here'

quiz-signup.html a[href="course.html#rules"]

Who is affected
Screen reader users often navigate by listing all links on a page; ambiguous link text makes it impossible to choose the right one.
Why flagged
The link text 'Click here' does not describe its destination or purpose; screen reader users listing page links cannot determine where it leads.
How to fix
Replace 'Click here' with a descriptive phrase such as 'View course rules' that identifies the destination.
Fix applied
Replaced the link text 'Click here' with 'View course rules' so the link purpose is clear from its text alone.
Test
test_pr1_F014.py: failed before the fix, passed after
FlaggedVerified fixmoderateF015

SC 2.4.6: Date field has no format instructions

quiz-signup.html #quiz-date

Who is affected
Screen reader users and users with cognitive disabilities need labels or instructions that clearly describe what each input expects.
Why flagged
The date field has a label 'Date' but provides no hint about the expected format; the JavaScript validates DD/MM/YYYY but users are never told this requirement.
How to fix
Add visible hint text or a placeholder (e.g., placeholder='DD/MM/YYYY') and link it to the input with aria-describedby.
Fix applied
Added placeholder='DD/MM/YYYY', a visible hint paragraph 'Format: DD/MM/YYYY, for example 25/09/2026', and aria-describedby linking the date input to both the hint and the error element.
Test
test_pr1_F015.py: failed before the fix, passed after

Understandable (5)

ProvenVerified fixseriousF016

SC 3.1.1: HTML element missing lang attribute

quiz-signup.html html

Who is affected
Screen readers use the language attribute to select the correct voice and pronunciation rules; without it, content may be spoken incorrectly.
Measured
The html element does not have a lang attribute, as confirmed by the axe html-has-lang rule.
How to fix
Add lang='en' to the opening <html> tag.
Fix applied
Added lang='en' to the opening html element so screen readers select the correct language voice and pronunciation rules.
Test
test_pr1_F016.py: failed before the fix, passed after
FlaggedVerified fixseriousF017

SC 3.2.2: Course select navigates the page on value change without warning

quiz-signup.html #course-select

Who is affected
Keyboard users and people with cognitive disabilities are disoriented by unexpected page navigation triggered by a form input change.
Why flagged
The course select element's change listener immediately navigates to index.html when 'maths' or 'writing' is chosen, with no prior warning to the user.
How to fix
Remove the automatic navigation on change. If the intent is to route users to a different sign-up flow, add an explanatory message and a manual continue button instead.
Fix applied
Removed the course select change listener that immediately navigated to index.html when 'maths' or 'writing' was chosen, eliminating the unexpected context change.
Test
test_pr1_F017.py: failed before the fix, passed after
FlaggedVerified fixseriousF018

SC 3.3.1: Form errors identified by color only with no text description

quiz-signup.html #email, #quiz-date

Who is affected
Blind users and people with cognitive disabilities need errors described in text to understand what went wrong and which field to correct.
Why flagged
When validation fails the script applies a red border class but provides no text error message, no aria-invalid attribute, and no aria-describedby pointing to an error description.
How to fix
Add aria-invalid='true' to invalid fields on submit, insert a visible error message for each field that explains what is wrong, and link each field to its error message using aria-describedby.
Fix applied
The F005 fix also covers F018: aria-invalid is set on invalid fields and a visible text error message is shown, so errors are no longer indicated by color alone.
Test
test_pr1_F018.py: failed before the fix, passed after
FlaggedVerified fixmoderateF019

SC 3.3.2: Date field lacks format instructions

quiz-signup.html #quiz-date

Who is affected
People with cognitive disabilities and screen reader users need clear instructions to understand what format each form field expects.
Why flagged
The date input has the label 'Date' but no instruction about the required format; the JavaScript expects DD/MM/YYYY but this is not communicated to the user.
How to fix
Add hint text next to the field indicating the required format, for example 'Format: DD/MM/YYYY', and reference it via aria-describedby.
Fix applied
The F015 fix also covers F019: a visible hint paragraph with the required format is shown next to the date field and linked via aria-describedby.
Test
test_pr1_F019.py: failed before the fix, passed after
FlaggedVerified fixmoderateF020

SC 3.3.3: Validation errors lack specific correction suggestions

quiz-signup.html #email, #quiz-date

Who is affected
People with cognitive disabilities and screen reader users need concrete suggestions to correct mistakes without having to guess.
Why flagged
When email or date validation fails no correction suggestion is provided; users are not told what a valid value looks like.
How to fix
Show specific error messages such as 'Enter a valid email address, for example name@example.com' and 'Enter the date as DD/MM/YYYY, for example 25/09/2026'.
Fix applied
The F005/F018 fix also covers F020: specific error messages with correction examples are now shown for both the email and date fields on validation failure.
Test
test_pr1_F020.py: failed before the fix, passed after

Robust (3)

ProvenVerified fixcriticalF021

SC 4.1.2: Custom checkbox missing required aria-checked attribute

quiz-signup.html #agree

Who is affected
Screen reader users rely on name, role, and value to understand and interact with every control; without aria-checked, the checkbox state is invisible to them.
Measured
The span element with role='checkbox' is missing the required aria-checked attribute, so assistive technology cannot announce or update the checked state.
How to fix
Add aria-checked='false' to the span initially and update it to 'true' via JavaScript when the user activates the checkbox.
Fix applied
Added aria-checked='false' to the #agree span initially and updated the click handler to toggle the attribute between 'true' and 'false' so assistive technology can announce the checked state.
Test
test_pr1_F021.py: failed before the fix, passed after
ProvenVerified fixcriticalF022

SC 4.1.2: Close-terms button has no accessible name

quiz-signup.html #close-terms

Who is affected
Screen reader users cannot understand what the button does and may not know how to dismiss the terms section.
Measured
The button contains only an aria-hidden SVG icon and has no aria-label, aria-labelledby, title, or inner text, leaving it with no accessible name.
How to fix
Add aria-label='Close terms' to the button element.
Fix applied
Added aria-label='Close terms' to the #close-terms button so its purpose is announced to screen reader users.
Test
test_pr1_F022.py: failed before the fix, passed after
ProvenVerified fixcriticalF023

SC 4.1.2: Email input has no programmatic label

quiz-signup.html #email

Who is affected
Screen reader users cannot determine what information the email field requires without a programmatic label.
Measured
The email input has no explicit label element, no implicit wrapped label, and no aria-label or aria-labelledby attribute, so assistive technology cannot announce its purpose.
How to fix
Replace <span class='field-name'>Email</span> with <label for='email'>Email</label> so the label is programmatically associated with the input.
Fix applied
Replaced the span.field-name for the Email field with a proper label[for=email] element so the input has a programmatic label.
Test
test_pr1_F023.py: failed before the fix, passed after

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 changed pages.
Out of reach 1.2.2 Captions (Prerecorded)
No prerecorded video content is present in the changed pages.
Out of reach 1.2.3 Audio Description or Media Alternative (Prerecorded)
No prerecorded synchronized media is present in the changed pages.
Out of reach 1.2.4 Captions (Live)
No live media is present in the changed pages.
Out of reach 1.2.5 Audio Description (Prerecorded)
No prerecorded video is present in the changed pages.
Out of reach 1.4.4 Resize Text
Verifying that text remains readable at 200% browser zoom requires runtime manual testing that cannot be performed from static code alone.
Out of reach 1.4.10 Reflow
Checking that no horizontal scrolling occurs at 320 CSS pixels requires runtime responsive testing that cannot be performed from static code alone.
Out of reach 1.4.12 Text Spacing
Verifying that content survives override text spacing requires runtime browser testing with injected CSS that cannot be performed from static code alone.
Out of reach 2.3.1 Three Flashes or Below Threshold
Detecting rapidly flashing content requires frame-by-frame video analysis that cannot be performed from static code alone.
Out of reach 2.4.5 Multiple Ways
Confirming more than one navigation route to the new page requires reviewing the full site information architecture beyond this pull request.
Out of reach 3.2.3 Consistent Navigation
Verifying that navigation appears in the same order across all pages requires a cross-page review that goes beyond the changed files in this pull request.
Out of reach 3.2.4 Consistent Identification
Confirming that functionally identical components are labeled consistently across the whole site requires a cross-page review beyond this pull request.
Out of reach 1.4.11 Non-text Contrast
No engine fact was produced for non-text contrast; verifying control boundary contrast for the custom radio and checkbox against adjacent colors requires manual measurement outside code review.

Run

Engine facts
13 in 6.16 s, digest 86fc0656842b
After the fix
0 facts on demo/pr-1-fixed
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.