accessibility – two problems

This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by David.

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

Author

Posts
March 5, 2020 at 4:52 am #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.
```

<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
March 5, 2020 at 5:07 am #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

March 5, 2020 at 7:24 am #1186017

David
Staff
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

March 5, 2020 at 8:07 am #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

March 5, 2020 at 8:11 am #1186071

Robert

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

March 5, 2020 at 12:17 pm #1186316
David
Staff
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;
}
```
March 5, 2020 at 1:17 pm #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>

March 5, 2020 at 1:28 pm #1186369

David
Staff
Customer Support

I edited the code here – try that

March 5, 2020 at 9:44 pm #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

March 6, 2020 at 3:50 am #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

March 6, 2020 at 4:32 am #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

March 6, 2020 at 5:32 am #1186864

David
Staff
Customer Support

Updated Code here

March 6, 2020 at 9:10 am #1187220

Robert

Hi

Errors 0
Contrast Errors 0

Thx a lot!

Robert

March 6, 2020 at 12:13 pm #1187351

David
Staff
Customer Support

You’re welcome
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] accessibility – two problems

Popular Articles

Start building better websites today.