[Resolved] Search widget is not accessible

Home Forums Support [Resolved] Search widget is not accessible

Home Forums Support Search widget is not accessible

Viewing 15 posts - 46 through 60 (of 67 total)
  • Author
  • #2347392

    Hey David, added the code but it didn’t work. Still getting this error on all pages:


    Customer Support

    Hi Karen,

    Is that the only remaining error? As mentioned by David, that error should be a false positive because it’s not a skip or anchor link: https://generatepress.com/forums/topic/search-widget-is-not-accessible/page/3/#post-2323362

    Let us know.


    Seems to be getting a bit confusing with more than one person jumping in. Did you see my comment before his latest? The AC plugin developers submitted the issue to GP via Github and David gave me the new code after that.

    Lead Developer
    Lead Developer

    Hi there,

    David is away on vacation until the end of September.

    The code that he provided giving the link a button role is working as can be seen here: https://www.screencast.com/t/ZHeAk4WTBHa

    This should fix the accessibility issue until we change the element to a button. I’m not sure if the accessibility plugin you’re using checks for roles like this, which could be why it’s still flagging it.


    Hi GP team, checking in on the fixes for the accessibility issues with the GP search widget. The accessibility team I hired to do an audit said they updated the GitHub ticket. Can you guys give an ETA about that? Here is the issue that’s still happening (and see the GitHub ticket).

    Header search form missing submit button

    Summary Information:
    Severity: High
    Components Affected: header search
    Affected Populations: Blind/Low vision, Cognitive Disabilities
    Relevant WCAG Success Criteria: 3.2.2 On Input – Level A
    Relevant Techniques Documents: H32: Providing submit buttons
    G80: Providing a submit button to initiate a change of context
    Issue Description: The search form in the header is missing a submit button.

    WCAG asks us to provide a mechanism that allows users to explicitly request changes of context, which would include submitting search forms. Using the Enter or Return key alone is not sufficient as some users will be expecting a button interface and may not know how to submit the search without it.

    Customer Support

    Hi Karen,

    first off, thank you for taking the time on this matter.
    We have not set a time frame on making the necessary changes to the nav search yet, but it is high on our priority list.

    Considering all the points above, i have put this PHP together:

    // Addd role=button to toggle
    add_filter('generate_navigation_search_menu_item_output', function(){
        return sprintf(
            '<span class="menu-bar-item search-item"><a aria-label="%1$s" role="button" href="#">%2$s</a></span>',
            esc_attr__( 'Open Search Bar', 'generatepress' ),
            generate_get_svg_icon( 'search', true ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in function.
    // Add labels and submit button
    add_filter( 'generate_navigation_search_output', function() {
            '<form method="get" class="search-form navigation-search" action="%1$s">
            <label for="nav-search">Search:</label> 
            <div class="search-input-wrapper">
                <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
                <button type="submit" class="search-submit" value="%4$s">Search</button>
            esc_url( home_url( '/' ) ),
            esc_attr( get_search_query() ),
            esc_attr_x( 'Search', 'label', 'generatepress' ),
            esc_attr_x( 'Search', 'submit button' )
    } );

    and then some CSS to style it:

    .inside-navigation  .navigation-search {
    	top: 100%;
    	width: 400px;
    	max-width: calc( 100vw );
    	left: unset;
    .inside-navigation  .navigation-search .search-input-wrapper {
    	display: flex;

    I have made it so the search form appears below the navigation when opened.

    Let me know if that works for you


    Thanks David. I really appreciate it.

    I’m not sure if something is conflicting with our custom theme but the way it opens up below the search icon doesn’t look great and the Search button isn’t working (can’t click on it).


    I did another scan but the same errors are still there.


    I updated the above comment.

    Customer Support

    Is it possible to see this on the site ?


    Sure! I removed the code but feel free to add it back in. Totally fine with that and would prefer that so the search won’t show up like that. Or, I can a bit later if you’d prefer that.



    Customer Support

    Oh, sorry Karen, i misplaced your last reply.
    Ill take a look now.

    Customer Support

    Have a look now.
    Does the Submit work ? ( it did for me ).

    How would you like it styled ?


    Not following. Did you see my reply above? I removed the code so it’s the same as before. Can you login and add it again to see what happens for you? And then I can check the accessibility checker plugin. Here’s the github that Amber of ED added too for reference: https://github.com/tomusborne/generatepress/issues/430

    Customer Support

    I have added the PHP and the CSS to your Child Theme.
    If you can check it now ?

Viewing 15 posts - 46 through 60 (of 67 total)
  • You must be logged in to reply to this topic.