SOLVED: Minor Accessibility Improvements for Accordions, Tabs and Builder

First, thank you for improving the accessibility of the Accordion, Tabs, and their nested counterparts. The improvements are very much welcomed. Here are a few things that can be implemented to improve accessibility further.

Accordion and Nestable Accordion

For the regular accordion:

  1. The role="presentation" should be on the <ul class="brxe-accordion">, not the li. Doing that would convert the ul > li into a regular div. In the case of the nestable accordion, there is no need for the role="presentation" as it is already a div.
  2. The accordion trigger should have the structure h3 > button > span.text + span.icon. Currently, the button is wrapping everything. Ideally, a button element should only contain phrasing content.
  3. Where possible, use the semantic HTML for the button rather than a <div role="button">.
  4. Make the default heading tag an <h3> rather than <h5>.

Tab and Nestable Tab

In the case of the tab and nestable tab, here are a few suggestions:

  1. The role="tablist" should be on the <ul class="tab-menu">, not the wrapper div.
  2. The role="presentation" on the <div class="tab-content"> isn’t needed because it is already a div.
  3. The home and end keys on the tablist should only move the focus to either the first or last tab item; they shouldn’t also move the page up or down.

Builder Accessibility

Thanks for including the focus state for the builder tab items, but I suggest that it includes a visible focus outline rather than relying on colour change only. I would also recommend possibly using Tippyjs for the tooltip to be announced properly.

6 Likes

Small correction made. I meant to say that we should have <ul class="tab-menu" role="tablist"> for the tablist in the Tab HTML structure.

1 Like

Hi @Daveden2,

Thanks a lot for your detailed feedback! I’ve added your suggestions to our to-do list, and we’ll aim to cover as much as possible.

Some items, like the h3 > button > span.text + span.icon structure for accordions, may not be feasible due to backward compatibility, but we’ll look into it.

Regarding the Tippy.js suggestion, we’re trying to avoid adding dependencies. Could you share what improvements are needed with our current tooltips so we can address any accessibility issues without extra libraries?

Thanks again for your input, it’s really appreciated!

2 Likes

Yes, I figured it would be difficult to change the HTML structure.

Regarding the tooltip, here are a few potential problems related to the current approach:

  1. I noticed that the tooltip disappears if the browser zoom is 200% or above.

  2. Side note: the top bar items should ideally be buttons or links, depending on their purpose, wrapped inside the <li> tag. However, this leads to problems with the pseudo-element not being announced by screen readers. An example is the WordPress logo not being announced.

  3. It is recommended to use text in the DOM rather than relying on pseudo-elements, as some assistive technologies ignore content in pseudo-elements in certain cases.

2 Likes

@Daveden2 I’ve added this as a separate task in our internal bug tracker :beetle: thank you for all the details :slight_smile:

2 Likes

Hi guys,

We’ve fixed this in Bricks 1.11, now available as a one-click download from your dashboard.

Please let us know if you are still experiencing issues.

You can see the full changelog here: Bricks 1.11 Changelog – Bricks

Best regards,
Matej

1 Like

Thanks for the update. I did a quick test during my latest YouTube livestream and there are still some minor things that need improving in the nested elements.

Nested Accordion

There is no longer any <button> element in the accordion title, so the whole element is not keyboard-focusable. That can probably be fixed easily by the user but it would be nice to include the default as a button instead of a <div>

It might also be nice to include the <div role="region" aria-labelledby="accordion-title-id"> to the accordion panel.

Nested tabs

  1. The tab panel wrapper <ul class="tab-content"> needs the additional role="presentation" if you cannot change the actual ul>li into a div structure.
  2. The aria-labelledby on the individual tab panels are referencing the wrong tab ID

I believe most of the other things are in good shape. (I still secretly wish we could make the button to be the child of the h3 not the other way round. But I understand the limitations.)

2 Likes

Hi @Daveden2,

Thank you very much for the feedback! Yes looks the <button> is now missing, great catch! I’ve added all your suggestions to an internal bug ticket. I’ll also revisit the possibility of making the button a child of the heading, though last time we reviewed it, it seemed unfeasible without causing a breaking change.

3 Likes

Hi @charaf

May I add something I noticed after the update? Actually aria-expanded=“false” doesnt appear on the first load of the accordion. Here you have a screenshot:

After opening and closing the accordion:

Best regards

3 Likes

Thank you for mentioning it @phillencolin! I caught that as I was working on @Daveden2’s feedback :slight_smile:

3 Likes

Hi guys,
We’ve fixed this issue in Bricks 1.11.1, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.11.1 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse