Checkbox Accessibility

  • Hi,

    I’m trying to make my form accessible for keyboard navigation and screen readers. The issue I’m running into is each checkbox field doesn’t seem to have a unique ID. So when using a screen reader it’s reading the first checkbox label for all checkbox questions.

    For example:
    The first checkbox label is “What is your favorite color?” with color options.
    When I use the screen reader on the next checkbox field label question it repeats the same label “What is your favorite color” instead of “What’s your favorite food?”.

    This makes it impossible for screen readers to know which boxes to check without the correct question.

    Is there a fix or workaround for this?

    Thanks, Ashley

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @astreck2

    I hope you are doing well today.

    I’m not able to replicate this on my lab site and each ID of the checkbox is different and uses numbers by default. I assume we talk about the title attribute here.

    Please export your form, upload it to Google Drive, and share a link in your next reply so that we can be on the same page when it comes to the main issue and avoid misunderstanding of main label of the checkboxes field and separate labels of each checkbox from the list.

    Kind Regards,
    Kris

    Thread Starter astreck2

    (@astreck2)

    Hi,

    Here is the link to exported form: https://docs.google.com/document/d/1eZZnUH34xZAK_pPZDX5tIz0UOLtAX6xW_CgEvxZyyQQ/edit?usp=sharing

    The form label span IDs and aria-labelledby for both checkbox fields are the same
    #forminator-checkbox-group-673cf5aa0bd12-label (first checkbox field)
    #forminator-checkbox-group-673cf5aa0bd12-label (second checkbox field)

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @astreck2,

    I’m not able to find an issue with the Screen reader picking and repeating the checkbox options. I’m afraid, we’ll need a bit more information regarding the issue.

    Could you please confirm if you are able to replicate the issue with more than one screen reader? Or the issue is specific to any one?

    If its only specific to one reader, then possible to know which screen reader you are using so that we could have a better idea.

    Looking forward to your response.

    Kind Regards,

    Nithin

    Thread Starter astreck2

    (@astreck2)

    Hi – I’m using the NVDA screen reader on the Chrome, Edge and Firefox browsers. It’s not repeating the checkbox options just the first label question for all checkbox fields.

    When using screen reader on my form in left hand column here https://webdevelopmenta.com/gelbgroup-test/. Here is what the screen reader is reading:

    **Clickable Utilities for Yardi Voyager. Check all that you’d like a demo of.* grouping
    ABF Area Remeasure Permission check box not checked
    Account Group Security Copy check box not checked
    Account Property Security Copy check box not checked
    Add/Delete Source check box not checked
    Please specify any custom development needs edit multi line blank
    Focus mode
    **Utilities for Yardi Voyager. Check all that you’d like a demo of.* grouping
    ABF Budget to Reforecast Variance – New, released in 2024! not checked
    Browse mode
    Account Property Security Listing check box not checked
    Account Tree Details check box not checked
    And so on…

    ** indicated the repeated checkbox label even though the second label should be reading “Reports for Yardi Voyager. Check all that apply.”

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.