Can't make menus accessible in TwentyTwelve template on Mac with Voiceover

  • Unknown's avatar
    charlesmyers4 · Member ·

    The menu structure in WP’s builtin themes (twenty eleven, twenty twelve) does not allow navigation through multilevel menus. I set up a small site at http://twentytwelvemenuaccessibility.wordpress.com/ to show the issue (there is a second level menu under “the specification”). If you’re on a mac with voiceover, you’ll see/hear that the voiceover does not go into the second level menus. (the menus are there with a mouse, but voiceover does not go into them.

    I will note that other themes do this properly, so it’s not the browser or voiceover. See this studiopress theme as an example: http://demo.studiopress.com/news/, even if the menus are tedious as demonstrations.

    The testing environment is Mac OS 10.8 with Safari or Chrome (and Apple’s voiceover).

    Is this an issue with the template, or my setup. I’ll note that I’ve just done very simple menus with this demonstration website. I have also beefed up the sample website with some videos.

    This problem occurs on both self-hosted wordpress.org and wordpress.com sites, as I believe it stems from the theme. I will post this on wordpress.com as well, but would great;ly appreciate some assistance from the wordpress accessibility community for assistance with this theme for our accessibility site.

    I have posted a much more precise definition of the problem at http://twentytwelvemenuaccessibility.wordpress.com/the-specification/ as well as a screen capture of the problem, both menus and voicover interaction on youtube (1:21… the detail of the problem starts at about :40).

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    I’m afraid this is only something staff can respond to. I’ll tag this for their attention and hopefully someone will be around to reply soon. I’ll also have this thread moved to the themes forum. The theme team monitors the themes forum.

  • Unknown's avatar
    amightywp · Member ·

    Hi there, @charlesmyers4!

    Thanks for reaching out to us!

    It definitely looks like there is some sort of glitch at work in that menu, and I appreciate you letting us know about it. I’ve gotten in touch with some of our developers from our themes department and they are going to take a look at it as soon as possible.

    As soon as I have anything from them (any information, questions, etc), I’ll get back to you.

    Thanks again for bringing this to us!

  • Unknown's avatar
    charlesmyers4 · Member ·

    Thanks. I told a few friends about this issue as well, and one found this interesting thread on the wordpress.org site

    http://wordpress.org/support/topic/theme-twenty-twelve-excellent-base-for-child-themes

    For reference, the main reason Twenty Twelve’s menu gets all messed up in IE8 is because the default menu is the mobile one while the ‘regular’ menu is in the media queries. A simple swap of the style code fixes this issue. The way it’s laid out now assumes only HTML5 – ready devices will access the site. This is an unnecessary restriction and as far as I’m concerned it’s non-standard. The best practice is to make the ‘regular’ menu the standard style set and place the mobile small-screen menu in the media queries.

    The one thing I’ll note is that the menus that work are plain HTML. The ones that don’t are the ones that use the <nav tag.

  • Unknown's avatar
    amightywp · Member ·

    Ooo, excellent information! I will pass this along as well!

    Thanks for sharing this too.

  • The topic ‘Can't make menus accessible in TwentyTwelve template on Mac with Voiceover’ is closed to new replies.