Accessibility errors

This topic contains 2 replies, has 2 voices, and was last updated by cjouper cjouper 4 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #19159
    cjouper
    cjouper
    Participant

    I have used both Ajax Search Lite and Ajax Search Pro on my website. I prefer Pro, of course, because it is so flexible. However, I am very committed to making my website accessible to all users and Pro introduces a large number of errors because of empty form labels. I am trying to figure out how to make changes in the CSS code to eliminate those errors. For some reason, these errors do not appear with the Lite version. I am using a service called Dinolytics which scans the entire site using the WAVE tool by WebAIM. I will attach the error report I get from Dinolytics. If you click on the hyperlink for each page it will take you to that page and identify the errors. If you are not familiar with the WAVE tool it can be a little confusing, so I’ll paste the examples of code that is missing a form label here.

    <div class=”asp_option asp-o-last”>
    <div class=”asp_option_inner”>
    1
    <input type=”checkbox” value=”exact” id=”set_exact2_1″ aria-label=”Exact matches only” name=”asp_gen[]”>
    11
    <label aria-hidden=”true” for=”set_exact2_1″></label>
    </div>

    <div class=”asp_option hiddend” aria-hidden=”true”>
    <div class=”asp_option_inner”>
    <input type=”checkbox” value=”title” id=”set_title2_1″ name=”asp_gen[]” checked=”checked”>
    1
    <label for=”set_title2_1″>
    </div>
    </div>
    1

    <div class=”asp_option hiddend” aria-hidden=”true”>
    <div class=”asp_option_inner”>
    <input type=”checkbox” value=”content” id=”set_content2_1″ name=”asp_gen[]” checked=”checked”>
    1
    <label for=”set_content2_1″>
    </div>
    </div>

    <input type=”checkbox” value=”excerpt” id=”set_excerpt2_1″ name=”asp_gen[]” checked=”checked”>
    1
    <label for=”set_excerpt2_1″>
    </div>
    </div>
    1
    <div class=”asp_option hiddend” aria-hidden=”true”>
    <div class=”asp_option_inner”>
    <input type=”checkbox” value=”comments” id=”set_comments2_1″ name=”asp_gen[]”>
    1
    <label for=”set_comments2_1″>
    </div>
    </div>


    1
    <div class=”asp_option hiddend” aria-hidden=”true”>
    <div class=”asp_option_inner”>
    <input type=”checkbox” value=”excerpt” id=”set_excerpt2_1″ name=”asp_gen[]” checked=”checked”>
    1
    <label for=”set_excerpt2_1″>
    </div>
    </div>

    <fieldset class=”asp_sett_scroll hiddend asp_checkboxes_filter_box”>
    1
    <legend>
    Filter by Custom Post Type
    </legend>
    1
    <div class=”asp_option_inner hiddend” aria-hidden=”true”>
    <input type=”checkbox” value=”page” id=”2_1customset_2_11″ name=”customset[]” checked=”checked”>
    1
    <label for=”2_1customset_2_11″>
    </div>
    <div class=”asp_option_label hiddend”>
    </fieldset>
    <div style=”clear:both;”>
    </form>

    This one is labeled as an empty button:
    <div class=”proinput”>
    1
    <form action=”#” autocomplete=”off” aria-label=”Search form 2″>
    1
    <input type=”search” class=”orig” placeholder=”Search…” name=”phrase” value=”” aria-label=”Search input 2″ autocomplete=”off”>
    1
    <input type=”text” class=”autocomplete” name=”phrase” value=”” aria-label=”Search autocomplete, ignore please” aria-hidden=”true” autocomplete=”off” disabled=””>
    11
    <input type=”submit” aria-hidden=”true” style=”width:0; height: 0; visibility: hidden;”>
    </form>
    </div>

    These errors occur when I install Ajax Search Pro, but are gone if I deactivate it. I have used it with several different themes, and see the problems with all of them. As I said, I don’t get these errors with Lite.

    I really like Ajax Search Pro and want to continue using it, so I hope you can help me with these issues.
    Thanks!
    Cindy Jouper

    Attachments:
    You must be logged in to view attached files.
    #19169
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Thank you for the proper details. I think the evaluation tool in this case cannot take invisible elements into account. All of these labels within the code are invisible to the user (by styling), and it is marked with the aria-hidden attributes as well, which explicitly tells the browser to not interact with that element (and their descendants) at all.
    The compliance check tool probably ignores the ‘aria-hidden’ attribute and the styling as well, thus causing the errors to appear. I cross-checked the lite version, and the only difference there is, that the labels actually have the text printed, but it is of course invisble to the user.
    Same goes to the empty button as well, the ‘aria-hidden’ attribute is ignored, and raises an error because of the missing text (which is actually not missing either, as it is invisible).

    I think you can safely ignore these warnings, as all of the elements are both visually invisible, and marked with the aria-hidden attribute as well.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #19183
    cjouper
    cjouper
    Participant

    Thanks for your response. I’ll talk to the accessibility checker vendor next!
    Cindy

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.