Accessibility of UI toggle switches

  • Resolved icepicksu

    (@icepicksu)


    1 year, 12 months ago

    Hello,

    I am writing to report an accessibility bug in the plugin UI. All of the toggle switches (i.e. on/off or enable/disable) are not properly made accessible to keyboard users and users of assistive technology like screen readers. Pressing the tab key should land on the control if it is in the tab sequence, but that does not work. In addition, an ARIA role and state (e.g. checkbox checked) is not announced.

    I’ve tested this with NVDA on latest Firefox and Chrome with v4.5.6 of the plugin. Please fix as it is now impossible for screen reader users to know whether the controls are on or off. Thanks.

    /

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author nintechnet

    (@nintechnet)

    Thanks for reporting the issue.
    I assume it is due to the display:none CSS directive that makes the checkbox hidden to screen readers.
    I just made a quick patch and uploaded it to the “trunk” folder.
    You can try it:

    1. Download this new version: https://downloads.www.ads-software.com/plugin/ninjafirewall.zip
    2. Go to the WordPress “Plugins” page, click “Add New” and then “Upload Plugin”.
    3. Upload the new version and confirm you want to replace the current version with that one.

    Go to the firewall settings and test if your screen reader can detect the checkboxes.

    Thread Starter icepicksu

    (@icepicksu)

    CSS display:none will certainly hide from screen readers, so yes that change now makes them fully operable. The remaining issue is the labels, which now read to a screen reader as “DisabledEnabled” or “NoYes”. They are already programmatically associated with the actual option (e.g. Debug Mode), so I don’t think these are necessary. Optionally you could keep just the affirmative label to reflect the checked state.

    Plugin Author nintechnet

    (@nintechnet)

    Thanks for confirming it works, I’ll add a patch to the next release of NinjaFirewall.

    Thread Starter icepicksu

    (@icepicksu)

    Again, the checkbox itself can be operated, but the labels are incorrect and confusing. They should also be fixed per my last comment.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Accessibility of UI toggle switches’ is closed to new replies.

Tags