Keyboard accessibility for screen readers

  • I (unwisely it seems) have designed a website that does not have direct links to pages from the main menu options in the horizontal menu bar. From the perspective of accessibility, this structure prevents tabbing through the complete menu structure using a keyboard, which is a particular problem for people using screen readers in conjunction with keyboard commands. As an example of my structure, I have a heading Key Services which does not link to an associated page but the drop down menu then lists different services each of which does link to its own page, e.g. Home Visiting, Early Intervention, etc.

    I was advised that the solution is to change the main headings so they do link to a page (as it seems most websites indeed do) but this means making up some redundant text that isn’t necessary and will waste people’s time reading through, or alternatively redesigning the site. This would be a shame as I have had very positive feedback from testing. My problem is how to solve the problem that a menu bar that doesn’t have links in prevents keyboard tabbing through the menu structure?

    I tried Graham Armfield’s Keyboard Accessibility Drop Down Menus plugin 0.4.1 which worked perfectly, tabbing through each column in turn, skipping the non-link headings. The problem was this then introduced problems in selecting from the menus when using a mouse. So I have had to disable the plugin in the end. Is there another plugin solution to this or (preferably) would it be possible to address this issue in the next update to Simone?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show us a page of the inaccessible content that you’re referring to? It sounds like it’s not on the theme’s demo.

    Thread Starter Martin Greaves

    (@martin-greaves)

    At the moment the website is still in development. You can have a look at the site here: If you try to tab through the page you will find it jumps to the search and social media menu bar without tabbling through the man menu bar.

    https://mab.org.uk.gridhosted.co.uk/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s because your links don’t have ‘href’ attributes – you can just add that with JS if you want

    Thread Starter Martin Greaves

    (@martin-greaves)

    As I understand it, if I add link attributes, these then appear as ‘links’ to the screenreader which confuses the user as they then try to open the pages. I had marked them with hash tags – which also solves the problem in respect of tabbing but screenreaders then announce these items as contatining links, so again you have the problem that a blind user would assume that these should open into pages. Ideally, as per Graham’s solution, I would like them to be skipped over when tabbing so that screenreader users are not confused by these items.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh I see the issue now. Links are not ideal but you can give them the role of button, as you’re trying to make the best of the situation you’ve got…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hang on, why are you using this funky custom menu?

    Thread Starter Martin Greaves

    (@martin-greaves)

    Yes, that’s a good question. While I have developed all of the content, we have a volunteer who is a web programmer by profession who set up the Simone theme and customised the layout for us. Poor guy wasn’t expecting me to then do something like this with regard to the menu structure and it didn’t occur to me that having this style of dropdown menu would cause problems when navigating with a keyboard. So I’m learning as I go along on this.

    I am not a web programmer but I am comfortable using WordPress to add content and configure the site and can get by in html but I accept I might be doing something that from a programming perspective is a stupid idea. I wanted to see if there was a solution though that avoided changing the design as I have had very positive feedback from people using screen magnifiers regarding the overall layout and the content. I have one screenreader user who managed to navigate the site in spite of this problem but I have had two that became unstuck trying to find their way through. I am reaching the conclusion though that I will have to make the top menu into linked pages and add some content of some description as much as I don’t want to.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Cool, well if you look at the menu on the theme’s demo and compare it to the menu on your site, I don’t think there is much difference? I mean, it doesn’t look like the menu on your site does something special. Maybe you can revert back to the theme’s original menu because that doesn’t seem to have the issue.

    You’re very welcome to post your “how to”s here on the forum, i.e. “I’m using the Simone theme, I have the default menu and I want to control the speed of how it opens. How do I do that?”.

    Thread Starter Martin Greaves

    (@martin-greaves)

    Okay, thanks. Yes, I think I’m going to have to do something like that. A shame that Graham’s plugin seems to cause problems with mouse users as that seems the perfect solution. Thanks for your help and advice though, was good to be able to talk to someone about it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Keyboard accessibility for screen readers’ is closed to new replies.