Пропустить ссылку перейдет на липкую навигацию вместо содержимого

Привет всем, я пытаюсь создать доступный в Интернете сайт WordPress с помощью Foundation от Zurb, используя начальную тему под названием JointsWP. Сайт расположен по адресу: http://twps.psadeaf.org/v3/ Я создал липкую навигацию, которая придерживается вершины, но когда вы прокручиваете страницу вниз, она превращается в кнопку навигации, когда она находится над или выбрана, она показывает полную навигация, отображаемая в верхней части страницы.

Сильфон это разметка навигации:

<div data-sticky-container>
    <div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%">
        <div class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
          <button class="menu-icon" type="button" data-toggle></button>
          <div class="title-bar-title">Menu</div>
        </div>

        <div class="top-bar psad-nav" id="top-bar-menu">
            <div class="top-bar-left show-for-medium">

    <a href="http://twps.psadeaf.org/v3">
        <img class="logo" src="http://twps.psadeaf.org/v3/wp-content/themes/JointsWP-CSS-master/assets/images/psad_logo.png" alt="PSAD Logo" style="width:200px;height:200px;" >
    </a>

            </div>
            <div class="top-bar-right">
                <ul id="menu-menu" class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"><li id="menu-item-932" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-932 active"><a href="http://twps.psadeaf.org/v3/">Home</a></li>
<li id="menu-item-933" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-933"><a href="#">About PSAD</a>
<ul class="menu">
    <li id="menu-item-914" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-914"><a href="http://twps.psadeaf.org/v3/about-psad/">Mission and History</a></li>
    <li id="menu-item-924" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-924"><a href="http://twps.psadeaf.org/v3/bylaws/">Bylaws</a></li>
    <li id="menu-item-913" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-913"><a href="http://twps.psadeaf.org/v3/officers-committees/">Officers</a></li>
    <li id="menu-item-925" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-925"><a href="http://twps.psadeaf.org/v3/meeting-minutes/">Meeting Minutes</a></li>
    <li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-916"><a href="http://twps.psadeaf.org/v3/about-psad/psad-hall-rules/">PSAD Hall Rules</a></li>
    <li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="http://twps.psadeaf.org/v3/about-psad/meetingevent-hall-rental-information/">Meeting/Event Hall Rental</a></li>
</ul>
</li>
<li id="menu-item-934" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-934"><a href="#">Get Involved!</a>
<ul class="menu">
    <li id="menu-item-920" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-920"><a href="http://twps.psadeaf.org/v3/get-involved/">How to Get Involved</a></li>
    <li id="menu-item-923" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-923"><a href="http://twps.psadeaf.org/v3/committees/">Committees</a></li>
    <li id="menu-item-935" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-935"><a href="#">Programs</a>
    <ul class="menu">
        <li id="menu-item-915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-915"><a href="http://twps.psadeaf.org/v3/about-psad/programs/">Programs</a></li>
        <li id="menu-item-928" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-928"><a href="http://twps.psadeaf.org/v3/about-psad/programs/asl-club/">ASL Club</a></li>
        <li id="menu-item-930" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-930"><a href="http://twps.psadeaf.org/v3/about-psad/programs/movie-nights/">Movie Nights</a></li>
        <li id="menu-item-931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-931"><a href="http://twps.psadeaf.org/v3/reunion/">Evergreen State Public/State Schools and Colleges Deaf/HH Reunions</a></li>
    </ul>
</li>
    <li id="menu-item-929" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-929"><a href="http://twps.psadeaf.org/v3/get-involved/meetings/">Meetings</a></li>
    <li id="menu-item-921" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-921"><a href="http://twps.psadeaf.org/v3/gallery/">Gallery</a></li>
    <li id="menu-item-926" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-926"><a href="http://twps.psadeaf.org/v3/links/">Links/Resources</a></li>
    <li id="menu-item-918" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-918"><a href="http://twps.psadeaf.org/v3/about-psad/newsletters/">Historical Newsletters</a></li>
</ul>
</li>
<li id="menu-item-927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-927"><a href="http://twps.psadeaf.org/v3/donate/">Donate</a></li>
<li id="menu-item-936" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-936"><a href="#">Membership</a>
<ul class="menu">
    <li id="menu-item-911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-911"><a href="http://twps.psadeaf.org/v3/become-a-member/">Become a Member</a></li>
    <li id="menu-item-922" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-922"><a href="http://twps.psadeaf.org/v3/member-reward-points/">Member Reward Points</a></li>
</ul>
</li>
<li id="menu-item-910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-910"><a href="http://twps.psadeaf.org/v3/contact-us/">Contact Us</a></li>
<li id="menu-item-912" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-912"><a href="http://twps.psadeaf.org/v3/calendar/">Calendar</a></li>
</ul>            </div>
        </div>
        <div class="psad-nav-button hide expanded"  aria-hidden="true">
            <button class="expanded button" type="button">
                ^ Navigation ^
            </button>
        </div>
    </div>
</div>

Ниже приведен jQuery, используемый для эффекта прокрутки навигации:

jQuery(window).scroll(function() {
    var psad_scroll = jQuery(this).scrollTop();
    var psad_nav = jQuery( ".psad-nav" );
    var psad_nav_button = jQuery( ".psad-nav-button" );

    function psad_show_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav.show();
            psad_nav_button.addClass( "hide" ) ;
        }
    }

    function psad_hide_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav_button.removeClass( "hide" );
            psad_nav.hide();
        }
    }

    if (psad_scroll >= 30) {
        psad_hide_nav();
        psad_nav_button.on({
            click: psad_show_nav,
            mouseenter: psad_show_nav
        });

    }
    if (psad_scroll < 30) {
        psad_show_nav();
    }
});

Теперь моя проблема в том, что я создал пропущенные ссылки, которые переходят на страницу навигации и основное содержание страницы. Теперь при выборе ссылки "Пропустить" я перехожу к кнопке навигации, которая появляется при прокрутке вниз к выбранному разделу, вместо выбора раздела, на который ссылается кнопка. Это означает, что программа чтения с экрана считывает кнопку навигации, которая придерживается сверху вместо содержимого, которое было выбрано в ссылке пропуска. Я пытался добавить aria-hidden="true" на кнопку и содержащий div без успеха. Как я могу обойти эту проблему, сохраняя липкую навигацию?

Ниже приведена разметка пропущенных ссылок вверху содержимого тела:

<div id="psad-skip-links" class="expanded" role="navigation" aria-label="Skip Links">
    <a class="show-on-focus expanded button" href="#menu-menu-1">Skip to Navigation</a>
    <a class="show-on-focus expanded button" href="#main">Skip to Content</a>
</div>

0 ответов

Другие вопросы по тегам