Responsive navigation menu for touch enabled pc’s

  • Resolved Saqib Ali

    (@saqali)


    8 years, 7 months ago

    I’m putting together a website and would like to have the navigation menu responsive to touch enabled pc’s by using the WAI-ARIA landmark html attribute aria-haspopup="tru"

    What is the best way to incorporate this html element on WordPress?

    Fyi if it makes a difference I’m using a Genesis Framework (magazine pro child theme).

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Making your navigation menu ‘responsive’ is not an easy task especially in a commercial theme, is there any way you could contact your theme authors about this?

    Thread Starter Saqib Ali

    (@saqali)

    Strictly speaking the navigation menu is responsive for most mobile devices. I was wondering how people have tried to tackle the issue of touch enabled pc’s and navigation menus in WordPress.

    For example if I had access to an index.html file on a non-cms website, I’d just include the html <li><a href="#" aria-haspopup="tru">About Us</a>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    ARIA doesn’t come with any functionality, it’s only used to indicate information to assistive technologies.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’d typically implement ARIA with JavaScript, which is something we can help you with. However you’ll need to separate the concept of touch functionality and ARIA, they are not related.

    Thread Starter Saqib Ali

    (@saqali)

    I’ll be taking the PHP approach to insert HTML into your navigation menu.

    RE separating ARIA and touch functionality, the W3C site begs to differ –

    https://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup

    The article you link to doesn’t say what you say it says, since it’s not standard behaviour. It sounds like this is something specific to IE: https://msdn.microsoft.com/en-us/library/jj152135(v=vs.85).aspx

    You’ll probably need to create a custom nav menu walker. However you’re using a commercial theme, Genesis, and will need to contact their support.
    https://codex.www.ads-software.com/Forum_Welcome#Commercial_Products

    There are cross platform ways to do this with JS & CSS. I’d recommend those.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    RE separating ARIA and touch functionality, the W3C site begs to differ –

    If you want, you can create a basic jsFiddle page to explore what actually happens? The W3C doesn’t say anything about it and as Jacob has pointed out, you have probably read a Microsoft-specific article.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    As you’re looking for a PHP solution, you ought to contact your commercial theme developers/ authors about this.

    Thread Starter Saqib Ali

    (@saqali)

    Appreciate the info guys.

    The developers have got back to me and have advised on taking the PHP route. Let’s see how long this rabbit hole goes on for…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive navigation menu for touch enabled pc’s’ is closed to new replies.

Tags