aria-expanded

[samikeijonen]

Do you think responsive nav should add aria-expanded on button/link that toggles the navigation for better accessibility? aria-expanded=false when nav is closed and aria-expanded=true when nav is open.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

[samikeijonen]

Or I could just use init, open and close methods. Example:

        var buttonTop = document.getElementById( 'top-nav-toggle' );
        var navTop = responsiveNav(".top-navigation", { // Selector
            transition: 350,                 // Integer: Speed of the transition, in milliseconds
            customToggle: "#top-nav-toggle", // Selector: Specify the ID of a custom toggle
            init: function () {
                buttonTop.setAttribute( 'aria-expanded', 'false' );
            },
            open: function () {
                buttonTop.setAttribute( 'aria-expanded', 'true' );
            },
            close: function () {
                buttonTop.setAttribute( 'aria-expanded', 'false' );
            },
        });

[arielsalminen]

@samikeijonen Possibly! I need to read more about this feature to know for sure tho.

[samikeijonen]

I am no accessibility expert but I've been trying to learn it as much I can. This is how I'm using the Nav now.

    // Nav toggle button
    var button = document.getElementById( 'nav-toggle' );

    // Responsive Nav
    var nav = responsiveNav(".main-navigation", { // Selector
        transition: 350,             // Integer: Speed of the transition, in milliseconds
        customToggle: "#nav-toggle", // Selector: Specify the ID of a custom toggle
        init: function () {          // Set ARIA for menu toggle button
            button.setAttribute( 'aria-expanded', 'false' );
            button.setAttribute( 'aria-pressed', 'false' );
            button.setAttribute( 'aria-controls', 'menu-primary' );
        },
        open: function () {
            button.setAttribute( 'aria-expanded', 'true' );
            button.setAttribute( 'aria-pressed', 'true' );
        },
        close: function () {
            button.setAttribute( 'aria-expanded', 'false' );
            button.setAttribute( 'aria-pressed', 'false' );
        },

    });

I come from WordPress world and Twenty Fifteen have been doing lot's of good stuff in their menu.

https://twentyfifteendemo.wordpress.com/

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/js/functions.js

[arielsalminen]

@samikeijonen Thanks for this!

[samikeijonen]

Just a heads up that this solution is a valid option for accessible-ready responsive menu in WordPress themes.

https://themes.trac.wordpress.org/ticket/24376