Accessiblity issues on CoBlocks

[oversuman]

Is your feature request related to a problem? Please describe.

These are the issues reported by our former accessiblity developer who is vision impaired and works entirely with a screenreader:

• Alert: there is nothing to make it stand out to screen readers.
• Collage: not sure what it is or what it does.
• Logos: they look the same as normal text. Is this okay?
• Masonry Gallery: doesn’t display anything for me.
• Offset Gallery: shows nothing for me.
• Pricing Tables: no real way to jump from table to table, plan to plan.
• Row: they appear as normal text.
• Shape Divider: just appears as normal text.
• Stacked: does not show anything for me.
• Carousel: these are either empty or not accessible.

These are accessiblity issues reported by customers:

• Accordion: keyboard navigation was couldn't open it after landing on it. When I expand the drop down menu, there is visual focus only if using the tab key to navigate through. If I use the arrow key it announces the menu item but does not have a visual focus indicator.
• Author: No focus indicator when landing on the test author button.
• Hero: Contrast with the buttons and Hero Heading text

Describe the solution you'd like

Higher Ed has strict requirements in terms of accessibility and their sites must be accessible on the front end, it would be better to have the above listed accessiblity features/fixes in the core of the plugin.

---

From Campuspress Support

[jlemay-godaddy]

@TxSadhu Could we have more details on which bugs are backend related (the editor) and which ones are frontend related (the website)? For example, the Alert block was lacking some context on the frontend, but it looks like it's okay on the backend, while the Collage block is hard to use on the backend but okay on the frontend.

We want to be sure that we are fixing what's really causing accessibility problems. As we are not using keyboard navigation and screen readers on a daily basis, we could see bugs where there are none and miss critical stuff at the same time.

Thank you :)

[oversuman]

@jlemay-godaddy Sorry for the delayed response. But here is the further details which you requested. These issues are frontend related (the website), please note these are the issues reported by our former accessibility developer who is vision impaired and works entirely with a screenreader:

Accordion: Works. GIF: Inaccessible. Nothing shown. GIST: Works. Icon: Inaccessible. Nothing announced. Share: Works.

Social profiles: Works. Alert: Nothing marks this as an alert outside of the text that says it's an alert. Post Carousel: It works, but could use some improvement. Generally, these will never be perfect. Click to tweet: Works but could do with some improvements. Collage: Inaccessible. Cannot tell what this is outside of the reading text.

Dynamic HR: Works. Events: Works but very ugly. I wouldn't use it. Features: Will work fine in the correct context. Food & Drinks: Will work fine in the correct context. Form: Could use improvements but I think most users can use this.

Hero: Inaccessible. Just text and a couple buttons. Not sure what this should be communicating. Highlight: Works. logos: Inaccessible. Reads nothing. Google Map: Works as well as what there's support for now. Masonry Gallery: Inaccessible. Reads nothing.

Media & Text: Will work in proper context. Offset Gallery: Inaccessible. Do not read. Posts: Works. Pricing Table: Not a real table. Could use some work but it is likely accessible by most users. Row: No difference for screen readers.

Services: Works in the proper context. Shape divider: Not accessible. Nothing reads. Stacked: Not accessible. Nothing reads. Author: I would like some improvements but it works fine. Carousel: Oh this is super bad.

[olafleur-godaddy]

Hi @TxSadhu !

We've pushed a few a11y improvements on Accordion block and a few of the Gallery blocks in the new 2.18.0 version, if you want to take a look. That's a start, but feel free to tell us if we're going in the right direction :)