I’m wondering if it would be possible to add/remove some items to make things a little more useable for screen reader users. I’ve made some of these changes on a child theme after having a pro screen reader run through it and deliver me a report, but since some of these changes reside in some Talon specific hooks, they’ll be replaced if the theme is ever updated.
Here’s what I’m thinking:
- The off canvas feature for the mobile page causes two menus to be loaded on the page. I have tried adding aria-hidden=”true” to one, but you cannot hide a focusable element with aria-hidden. Is there any way to keep two menus from loading for screen readers?
- There is tags for footer, and also a div for footer (sidebar-footer) which is marked as role=”complementary”. Since footer in HTML5 already assumes this to be a footer, the role=”complementary” is not necessary and causes a nesting problem. Can this be removed?
- Similarly, all of the widgets are marked as asides. Asides are announced as complementary, so you end up with footer > complementary > complementary, which causes a mess for screen readers. In my child I changed the asides to a regular div, which cleaned up the mess considerably. Can we get the asides converted?
- The skip to content link should appear before any menu items, and should be directly under the opening body tag. Can it be moved there?
- Pages without logo images in the header have the site title marked as H1. This should probably be just styled appropriately rather than using a header, given people with screen readers use headers to navigate.
I’m also having a problem with the navigations not being identified as such in the screen reader, but it has role=”navigation” properly and is in a nav tag, so I’m not sure about that.