Accessibility Fixes Needed

  • Hi, I was testing the demo of your plugin to see if it was accessible and wanted to provide some feedback. Can you please make these fixes so that it’ll be fully accessible for screen reader users?

    1. The tabs should be button elements within the li element, so that they are read as a button and can be selected with the space bar. If you are concerned about breaking CSS changes, you can add role=”button” to the li element and then add the space bar support with JavaScript.
    2. The active tab should have aria-selected=”true” on it so it is clear which tab is active and which ones are not.
    3. You need to remove the outline:none CSS from .responsive-tabs .responsive-tabs__heading–active:focus, .responsive-tabs .responsive-tabs__list__item–active:focus — This CSS makes it impossible for keyboard-only users to be able to see where their keyboard focus is.

    Here are some resources that you might find helpful.

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

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

    (@numeeja)

    Thank you for your suggestions. I will look into this when resources allow

    I have to hop on the Accessibility train here as well… We use Tabby throughout https://www.hmns.org for the Houston Museum of Natural Science and as a Public Non-Profit they have a responsibility to serve content in the most accessible ways possible. It would be VERY awesome if Tabby could conform to accessibility standards of being tab-able, have the tab titles be focusable and navigable with keyboard controls, use the proper HTML markup (buttons, roles, aria-labels, aria-selected, etc).

    Is there something we can do to help you along? Perhaps a donation? What would it take to get a commitment to work on this stuff?

    Plugin Author cubecolour

    (@numeeja)

    I have been working on a new version of the plugin with an all new code base. The aims for the new version in addition to addressing accessibility requirements were to be as lightweight as possible and use vanilla javascript rather than relying on jQuery. I currently have a version working which uses no javascript at all, although I will need to add some javascript to add in aria support.

    The new version is a work in progress and it is a lot of work to ensure feature parity and backwards compatibility with the existing version of the plugin, so any donation would be gratefully received.

    It would be very helpful if you would be able to test the new version to help with ensuring that accessibility needs are met. Please contact me via the contact form on cubecolour.co.uk if you are able to help with testing.

    Thread Starter Amber Hinds

    (@alh0319)

    @numeeja I might be able to help test depending upon when you have it ready.

    The other thing you can do is ask in the #accessibility channel in Make WordPress Slack. There are several people there who can answer questions, and there are open office hours every Wednesday at 14:00 UTC. If you can come there and have a demo site set up, you can ask someone to test during office hours.

    The WordPress Accessibility Facebook group is also a good place to get testing help and feedback.

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