[Resolved] accessibility – two problems

Home Forums Support accessibility – two problems

This topic contains 13 replies, has 2 voices, and was last updated by  David 2 months, 3 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1185698

    Robert

    Hi

    I did make a accessibility test for http://ocrm2.pogotowie.opole.pl/
    on https://wave.webaim.org/

    And I can’t make better two low contrast errors:

    1.

    </head>
    <body class="home page-template-default page page-id-56 wp-custom-logo wp-embed-responsive post-image-aligned-left slideout-enabled slideout-mobile sticky-menu-fade mobile-header mobile-header-logo no-sidebar nav-float-right fluid-header one-container active-footer-widgets-4 header-aligned-left dropdown-hover elementor-default elementor-kit-35 elementor-page elementor-page-56" itemtype="https://schema.org/WebPage" itemscope="">
    Redundant title textVery Low Contrast
    <a href="#content" title="Przeskocz do treści">
    Przeskocz do treści
    </a>

    2.

    <!-- #site-navigation-->
    <div class="slideout-overlay">
    <button class="slideout-exit ">
    Very Low Contrast
    <span class="screen-reader-text" style="color: rgb(255, 255, 255); background-color: rgb(112, 146, 165);">
    Close
    </span>
    </button></div>

    how and where I could make it in the code?

    Kr
    Robert

    #1185708

    Robert

    sorry – again my code withtout “<…>”

    /head
    body class=”home page-template-default page page-id-56 wp-custom-logo wp-embed-responsive post-image-aligned-left slideout-enabled slideout-mobile
    sticky-menu-fade mobile-header mobile-header-logo no-sidebar nav-float-right fluid-header one-container active-footer-widgets-4 header-aligned-left
    dropdown-hover elementor-default elementor-kit-35 elementor-page elementor-page-56″ itemtype=”https://schema.org/WebPage” itemscope=””

    Redundant title textVery Low Contrast
    a class=”screen-reader-text skip-link” href=”#content” title=”Przeskocz do treści”
    Przeskocz do treści
    /a>

    !– #site-navigation–
    div class=”slideout-overlay”
    button class=”slideout-exit ”
    Very Low Contrast
    span class=”screen-reader-text” style=”color: rgb(255, 255, 255); background-color: rgb(112, 146, 165);”
    Close
    /span
    /button>/div

    #1186017

    David Customer Support

    Hi there,

    Both of those elements are for screen reader only so shouldn’t be visible.
    I am not sure what would be required to stop them from being reported.

    During our own accessibility tests – our consultants have never flagged them as an issue

    #1186068

    Robert

    Hi there,

    Could I simply delete 100% these two elements in the code or is there any other passibilty to
    something to do with it?

    Thx
    Robert

    #1186071

    Robert

    or can I just change the colors in the code so that the test on
    https://wave.webaim.org/ would be positive ?

    #1186316

    David Customer Support

    The thing is they are meant to be invisible, but you can try this CSS:

    a.screen-reader-text, span.screen-reader-text {
        color: #000 !important;
    }
    
    .generate-back-to-top span.screen-reader-text {
        background-color: #fff;
    }
    #1186360

    Robert

    Hi

    Your CSS code works with the first ting! 🙂
    thx…

    but the last one show still the problem:
    https://wave.webaim.org/report#/http://ocrm2.pogotowie.opole.pl/

    !– #site-navigation–>
    div class=”slideout-overlay”
    button class=”slideout-exit “>
    Very Low Contrast
    span class=”screen-reader-text”>
    Close
    /span>
    /button>
    /div>

    #1186369

    David Customer Support
    #1186614

    Robert

    Hi

    I used Your edited code but unfortunately it not helps,
    there is still the last one contrast problem:

    https://wave.webaim.org/report#/http://ocrm2.pogotowie.opole.pl

    Kr
    Robert

    #1186806

    Robert

    Hi again,

    I made a accessibility test with CHROME and he found 2 problems:

    1.
    Links do not have a discernible name
    Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.
    Failing Elements
    a

    a class=”ab-item” aria-haspopup=”true” href=”http://ocrm2.pogotowie.opole.pl/wp-admin/post-new.php”>span class=”ab-icon”></span><span class=”ab-label”>Dodaj</span>

    2. NAVIGATON
    Some elements have a [tabindex] value greater than 0
    A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.
    Failing Elements

    Przejdź do paska narzędzi
    a class=”screen-reader-shortcut” href=”#wp-toolbar” tabindex=”1″>Przejdź do paska narzędzi

    can I repair it ?

    Thx
    Robert

    #1186822

    Robert

    I don’t know why buy CHROME shows now 100% accessibility 🙂
    – so this is done!

    But there is still the last one problem with the test on:
    https://wave.webaim.org/report#/http://ocrm2.pogotowie.opole.pl

    Thx
    Robert

    #1186864

    David Customer Support
    #1187220

    Robert

    Hi

    Errors 0
    Contrast Errors 0

    Thx a lot!

    Robert

    #1187351

    David Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.