Accessibility Issues

Thanks for getting back to me, @mguenter. I did purchase pro, but for transparency reasons (for other members of the WP Accessibility Day organizing team), I prefer to post issues in a public place. I appreciate that I don’t need to open a new thread for each issue.

We did a comprehensive review of the modal as it is currently configured on https://template.wpaccessibility.day/. This testing was done by multiple accessibility professionals including one blind screen reader user. These are the issues that were identified:

1. The dialog is not consistently getting focus on load.
2. Modal heading should be an H2 instead of an H3.
3. The <dialog> tag needs aria-modal="true" added to it.
4. Show service information “links” (and any others) that expand hidden content need to be buttons. You can correct this by adding role="button" to them and adding support for space bar triggering.
5. Show service information buttons (currently coded as <a>) should have unique names.
6. Hide the middots from screen readers with aria-hidden="true" or by displaying them via CSS (better).
7. All links that have been made buttons with role=”button” need to have space bar handlers added so they can be triggered with the spacebar. Learn more about keyboard expectations when adding role="button".
8. When the “underline” style is set for links, the underline should disappear on hover so color alone is not being used to indicate the hover state.
9. There’s a focus order issue after expanding the individual settings options. This is because the link to configure individual settings is removed from the page when clicked. Removing an element from the DOM causes the keyboard to lose focus. The individual settings button should stay visible in the modal, and all the newly added content should be introduced after it (I.e., it should function like an accordion).
10. Consent choices checkboxes read the label three times because they’re over-engineered.
    <fieldset class="aa5be-ext-5-281"><legend class="aa5be-3">Individual Privacy Preferences: Essential</legend><span aria-hidden="true"><label class="aa5be-ext-7-252"><input name="checkbox[]" type="checkbox" disabled="" style="--aa5be-ext-7-253: 16px;" aria-labelledby="aa5be-251" class="aa5be-ext-7-260 aa5be-3" value="1"><div aria-hidden="true"><svg viewBox="64 64 896 896" focusable="false" style="width:auto;height:100%;" fill="currentColor"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></div><span><span id="aa5be-251" aria-hidden="true">Essential (2)</span></span></label></span><div class="aa5be-ext-5-285"><span>Essential services are required for the basic functionality of the website. They only contain technically necessary services. These services cannot be objected to.</span>&nbsp;&nbsp;•&nbsp;&nbsp;<a href="#" aria-expanded="false" aria-controls="aa5be-252" class="aa5be-ext-7-251">Show service information</a><div hidden="" id="aa5be-252"></div></div></fieldset>
    My recommendation on these is to:
    • Move the fieldset and legend from being wrapped around the parent input and just wrap it around the group of sub checkboxes.
    • Remove the aria-labelledby attribute from the input since it’s wrapped in the label tag already.
    • Remove aria-hidden=”true” from the span around the label text.
    • Add aria-describedby attributes to the checkbox inputs referencing the helper text.

Thank you very much for your attention to these issues. Please let me know if you have any questions or need more information about any of the listed issues. I’d love to see the plugin made fully accessible — I can see you’ve already put some effort in.

For public record, I believe the timeline above has inaccuracies. However, because I don’t believe that WordPress support forum is the appropriate place for personal disagreements, I will leave it at that and not go into detail.