search

w3c / wai-wcag-quickref

How to Meet WCAG (Quick Reference)
https://wai-wcag-quickref.netlify.com
Other
69 stars 35 forks source link

Change background image to inline-image when button is selected #158

Closed HerinHentry closed 5 years ago

HerinHentry commented 6 years ago

Hi,

I just bumped into one issue in the tool. Not sure if it is an IE issue or something that we have to fix.

Step 1: Access WCAG Quick ref in Internet Explorer Step 2: Select few filters and you can see the selected filters have the blue colour and a white tick. Step 3: Go to Tools > Internet Options > General Tab > Accessibility > Check "Ignore Colours specified on the web page" and click OK two times.

Result: The filter section does not show what is selected and what is not selected.

Alternative way: The first line in the main content area says, Selected Filters: success criteria tagged with animation, color, or tab-order and all techniques

Screenshots: Image with website specified colours image

Image with colours ignored from the web page image

Question:

  1. Can this be considered as not an issue as there is a way of finding what is selected and not?
  2. As this is an interactive filter, users using alternative style sheets or ignoring website specific colours will have to cross-reference each time. What is the solution for this?

Code: <button class="btn btn-sm btn-primary" aria-selected="true" data-countint="0" data-countvis="11" data-countdev="0" data-countcon="0" data-tag="animation">animation</button>

CSS:

tags .btn-primary:after{content:"";

Failure related to this: http://www.w3.org/TR/WCAG20-TECHS/F87.html F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS

The user agent suport note for F87 says :before and :after are not supported by IE7 and lower. Should we mention as this is also not supported when the styles are ignored?

Thanks, Herin

yatil commented 6 years ago

Hi @HerinHentry, great observation. Thanks for bringing it up.

I think the page would pass the WCAG “letter of the law” as there are alternatives available (an aria attribute and the naming of selected buttons in the filter message), however, I think we should make sure that the page also passes “the spirit of the law” and add an indicator when background colors are removed.