Giters

dequelabs / axe-core-maven-html

Tools for using axe for web accessibility testing with JUnit, Selenium, and Playwright

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to only check color contrast?

Tim-Cao opened this issue · comments

commented

Description
I've learned the getIncomplete can get color contrast from here #281. However, I met some trouble when I implement.
Could anyone help me?

Step to reproduce

  1. Clone this repo git@github.com:Tim-Cao/seleniumproject.git
  2. Change the chromedriver path in https://github.com/Tim-Cao/seleniumproject/blob/master/src/main/java/driver/BrowserDriver.java#L33
  3. Run this test https://github.com/Tim-Cao/seleniumproject/blob/master/src/test/java/com/liferay/selenium/AccessibilityTest.java#L52

Actual Results
No color contrast issue thrown

commented

Hey @Tim-Cao,

We'll have a look and get to you shortly.

if you only want to run color-contrast you can utilise withRules function:

new AxeBuilder()
            .withRules(Arrays.asList("color-contrast"))
commented

Many thanks @Zidious. Sorry, the tags already covered color-contrast.
axeBuilder.withTags(Arrays.asList("wcag2a", "wcag2aa", "wcag21a", "wcag21aa"));
I mean to only check the color-contrast based on WCAG 2.1 AA?
The following solution will return all violations.

        AxeBuilder axeBuilder = new AxeBuilder();

        axeBuilder.withRules(Arrays.asList("color-contrast"));

        axeBuilder.withTags(Arrays.asList("wcag2a", "wcag2aa", "wcag21a", "wcag21aa"));

        Results results = axeBuilder.analyze(webDriver);

        List<Rule> rules = results.getViolations();

Console

1: Buttons must have discernible text
Description: Ensures buttons have discernible text
Help URL: https://dequeuniversity.com/rules/axe/4.3/button-name?application=axeAPI
Impact: critical
Tags: cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, ACT
		HTML element: <button class="class-toggle close close-icon cookie-alert" id="closeButton"> 
     <svg height="12" style="color: #FFF;" width="12"> 
      <use xlink:href="#closeIcon" target="_blank" rel="nofollow"></use> 
     </svg> </button>
		Selector: [#closeButton]


2: Elements must have sufficient color contrast
Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
Help URL: https://dequeuniversity.com/rules/axe/4.3/color-contrast?application=axeAPI
Impact: serious
Tags: cat.color, wcag2aa, wcag143
		HTML element: <span>Info For:</span>
		Selector: [#infoFor > span]
		HTML element: <a class="contact-sales w-button" href="/contact-sales" tabindex="4">Contact Sales</a>
		Selector: [.nav-items-wrapper > .contact-sales-container > .contact-sales.w-button[href$="contact-sales"]]


3: id attribute value must be unique
Description: Ensures every id attribute value is unique
Help URL: https://dequeuniversity.com/rules/axe/4.3/duplicate-id?application=axeAPI
Impact: minor
Tags: cat.parsing, wcag2a, wcag411
		HTML element: <clipPath id="clip0">
			<rect width="40" height="40" fill="white" transform="translate(0 0.000976562)"></rect>
			</clipPath>
		Selector: [#icon--service-pack-archive > defs > clippath]


4: Images must have alternate text
Description: Ensures <img> elements have alternate text or a role of none or presentation
Help URL: https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI
Impact: critical
Tags: cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT
		HTML element: <img class="h-100 position-absolute w-100" loading="lazy" src="/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true" data-fileentryid="456553576" srcset="https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=640/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 640w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=960/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 960w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=1280/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 1280w">
		Selector: [.h-100.position-absolute[data-fileentryid="\34 56553576"]]
		HTML element: <img class="h-100 position-absolute w-100" loading="lazy" src="/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true" data-fileentryid="456557216" srcset="https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=640/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 640w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=960/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 960w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=1280/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 1280w">
		Selector: [.h-100.position-absolute[data-fileentryid="\34 56557216"]]
		HTML element: <img class="w-100" loading="lazy" src="/documents/10182/360801865/desjardins-gray.svg/b5c0ff7b-bb4f-3dcb-f0ba-990e98de8d06/desjardins-gray.svg?t=1621275793802&amp;download=true">
		Selector: [div[data-lfr-editable-id="fvf27hxvumu"] > .w-100]


5: Links must have discernible text
Description: Ensures links have discernible text
Help URL: https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI
Impact: serious
Tags: cat.name-role-value, wcag2a, wcag412, wcag244, section508, section508.22.a, ACT
		HTML element: <a class="liferay-logo" href="/" tabindex="2"> 
       <svg height="40" viewBox="-.25 0 270 90" width="120"> 
        <use xlink:href="#liferayLogo"></use> 
       </svg> </a>
		Selector: [.primary-nav > .content-wrapper.align-center.flex > .liferay-logo[href="\/"]]
		HTML element: <a class="search-submit" id="searchSubmitBtn" href="/search" type="submit">
		Selector: [#searchSubmitBtn]
commented

If I understand your question, color-contrast falls under WCAG 2.1 (AA) and WCAG 2.0 (AA) so running that alone should suffice:

AxeBuilder axeBuilder = new AxeBuilder()
	.withRules(Arrays.asList("color-contrast"))

Results results = axeBuilder.analyze(webDriver);

// Any color-contrast violations 
List<Rule> violations = results.getViolations();

// Any color-contrast nodes that require manual checking 
List<Rule> incomplete = results.getIncomplete();
commented

Hi @Zidious
However, I tried this solution,

AxeBuilder axeBuilder = new AxeBuilder()
	.withRules(Arrays.asList("color-contrast"))

Results results = axeBuilder.analyze(webDriver);

// Any color-contrast violations 
List<Rule> violations = results.getViolations();

there are more violations found and they are based on higher standard than WCAG 2.1 AA. Would you mind double checking?

1: ARIA role should be appropriate for the element
Description: Ensures role attribute has an appropriate value for the element
Help URL: https://dequeuniversity.com/rules/axe/4.3/aria-allowed-role?application=axeAPI
Impact: minor
Tags: cat.aria, best-practice
		HTML element: <footer class="f-navigation-footer" data-swiftype-index="false" id="footer" role="contentinfo">
		Selector: [#footer]


2: Buttons must have discernible text
Description: Ensures buttons have discernible text
Help URL: https://dequeuniversity.com/rules/axe/4.3/button-name?application=axeAPI
Impact: critical
Tags: cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, ACT
		HTML element: <button class="class-toggle close close-icon cookie-alert" id="closeButton"> 
     <svg height="12" style="color: #FFF;" width="12"> 
      <use xlink:href="#closeIcon" target="_blank" rel="nofollow"></use> 
     </svg> </button>
		Selector: [#closeButton]


3: Elements must have sufficient color contrast
Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
Help URL: https://dequeuniversity.com/rules/axe/4.3/color-contrast?application=axeAPI
Impact: serious
Tags: cat.color, wcag2aa, wcag143
		HTML element: <span>Info For:</span>
		Selector: [#infoFor > span]
		HTML element: <a class="contact-sales w-button" href="/contact-sales" tabindex="4">Contact Sales</a>
		Selector: [.nav-items-wrapper > .contact-sales-container > .contact-sales.w-button[href$="contact-sales"]]


4: id attribute value must be unique
Description: Ensures every id attribute value is unique
Help URL: https://dequeuniversity.com/rules/axe/4.3/duplicate-id?application=axeAPI
Impact: minor
Tags: cat.parsing, wcag2a, wcag411
		HTML element: <clipPath id="clip0">
			<rect width="40" height="40" fill="white" transform="translate(0 0.000976562)"></rect>
			</clipPath>
		Selector: [#icon--service-pack-archive > defs > clippath]


5: Heading levels should only increase by one
Description: Ensures the order of headings is semantically correct
Help URL: https://dequeuniversity.com/rules/axe/4.3/heading-order?application=axeAPI
Impact: moderate
Tags: cat.semantics, best-practice
		HTML element: <h5 class="
		f-text-heading
		text-center
		mx-10
		font-size-heading-f5
		max-width-large
	" id="" style="
		opacity: 1;
	">
		Selector: [#fragment-0-fnxf > h5]
		HTML element: <h5 class="
		f-text-heading
		text-center
		mx-10
		font-size-heading-f5
		max-width-large
	" id="" style="
		opacity: 1;
	">
		Selector: [#fragment-0-lbpy > h5]


6: Images must have alternate text
Description: Ensures <img> elements have alternate text or a role of none or presentation
Help URL: https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI
Impact: critical
Tags: cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT
		HTML element: <img class="h-100 position-absolute w-100" loading="lazy" src="/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true" data-fileentryid="456553576" srcset="https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=640/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 640w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=960/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 960w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=1280/documents/10182/232910227/Commerce+sites.png/bc4d3a44-abce-ed08-09df-0574d7e5f5ad?t=1664984685582&amp;download=true 1280w">
		Selector: [.h-100.position-absolute[data-fileentryid="\34 56553576"]]
		HTML element: <img class="h-100 position-absolute w-100" loading="lazy" src="/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true" data-fileentryid="456557216" srcset="https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=640/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 640w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=960/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 960w,https://www-cdn.liferay.com/cdn-cgi/image/format=contain,format=auto,metadata=none,onerror=redirect,width=1280/documents/10182/232910227/External+sites+%281%29.png/4c81b828-419f-afd6-13c8-392e2691208b?t=1664984779494&amp;download=true 1280w">
		Selector: [.h-100.position-absolute[data-fileentryid="\34 56557216"]]
		HTML element: <img class="w-100" loading="lazy" src="/documents/10182/360801865/desjardins-gray.svg/b5c0ff7b-bb4f-3dcb-f0ba-990e98de8d06/desjardins-gray.svg?t=1621275793802&amp;download=true">
		Selector: [div[data-lfr-editable-id="fvf27hxvumu"] > .w-100]


7: Banner landmark should not be contained in another landmark
Description: Ensures the banner landmark is at top level
Help URL: https://dequeuniversity.com/rules/axe/4.3/landmark-banner-is-top-level?application=axeAPI
Impact: moderate
Tags: cat.semantics, best-practice
		HTML element: <header class="f-navigation-primary  nav-wrapper">
		Selector: [header]


8: Contentinfo landmark should not be contained in another landmark
Description: Ensures the contentinfo landmark is at top level
Help URL: https://dequeuniversity.com/rules/axe/4.3/landmark-contentinfo-is-top-level?application=axeAPI
Impact: moderate
Tags: cat.semantics, best-practice
		HTML element: <footer class="f-navigation-footer" data-swiftype-index="false" id="footer" role="contentinfo">
		Selector: [#footer]


9: Ensures landmarks are unique
Description: Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
Help URL: https://dequeuniversity.com/rules/axe/4.3/landmark-unique?application=axeAPI
Impact: moderate
Tags: cat.semantics, best-practice
		HTML element: <nav class="align-center flex justify-center utility-nav ">
		Selector: [.justify-center]


10: Links must have discernible text
Description: Ensures links have discernible text
Help URL: https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI
Impact: serious
Tags: cat.name-role-value, wcag2a, wcag412, wcag244, section508, section508.22.a, ACT
		HTML element: <a class="liferay-logo" href="/" tabindex="2"> 
       <svg height="40" viewBox="-.25 0 270 90" width="120"> 
        <use xlink:href="#liferayLogo"></use> 
       </svg> </a>
		Selector: [.primary-nav > .content-wrapper.align-center.flex > .liferay-logo[href="\/"]]
		HTML element: <a class="search-submit" id="searchSubmitBtn" href="/search" type="submit">
		Selector: [#searchSubmitBtn]


11: Elements should not have tabindex greater than zero
Description: Ensures tabindex attribute values are not greater than 0
Help URL: https://dequeuniversity.com/rules/axe/4.3/tabindex?application=axeAPI
Impact: serious
Tags: cat.keyboard, best-practice
		HTML element: <a class="font-size-paragraph-xsmall utility-nav-link" href="https://www.liferay.com/partners" tabindex="5"> Partners </a>
		Selector: [.utility-nav-left.align-center.flex > .utility-nav-link.font-size-paragraph-xsmall:nth-child(2)]
		HTML element: <a class="font-size-paragraph-xsmall utility-nav-link" href="https://www.liferay.com/developers" tabindex="5"> Developers </a>
		Selector: [.utility-nav-left.align-center.flex > .utility-nav-link.font-size-paragraph-xsmall:nth-child(3)]
		HTML element: <a class="font-size-paragraph-xsmall utility-nav-link" href="https://www.liferay.com/customers" tabindex="5"> Customers </a>
		Selector: [.utility-nav-link.font-size-paragraph-xsmall:nth-child(4)]
		HTML element: <a class="align-center flex skip-to-footer-wrapper" href="#footer" tabindex="1"> 
       <div class="align-center flex skip-to-footer-text">
         Skip to Footer 
       </div> </a>
		Selector: [.skip-to-footer-wrapper]
		HTML element: <div class="font-size-paragraph-xsmall language-selector language-dropdown-toggle utility-nav-link" tabindex="7">
		Selector: [.language-dropdown-toggle]
		HTML element: <a class="search-button w-inline-block" tabindex="6">
		Selector: [.search-button]
		HTML element: <a class="liferay-logo" href="/" tabindex="2"> 
       <svg height="40" viewBox="-.25 0 270 90" width="120"> 
        <use xlink:href="#liferayLogo"></use> 
       </svg> </a>
		Selector: [.primary-nav > .content-wrapper.align-center.flex > .liferay-logo[href="\/"]]
		HTML element: <div class="adt-nav-text focusable" tabindex="3">
		Selector: [.adt-nav-item.dropdown:nth-child(1) > .adt-nav-text.focusable]
		HTML element: <div class="adt-nav-text focusable" tabindex="3">
		Selector: [.adt-nav-item.dropdown:nth-child(2) > .adt-nav-text.focusable]
		HTML element: <div class="adt-nav-text focusable" tabindex="3">
		Selector: [.adt-nav-item.dropdown:nth-child(3) > .adt-nav-text.focusable]
		HTML element: <div class="adt-nav-text focusable" tabindex="3">
		Selector: [.adt-nav-item.dropdown:nth-child(4) > .adt-nav-text.focusable]
		HTML element: <div class="adt-nav-text focusable" tabindex="3">
		Selector: [.adt-nav-item.dropdown:nth-child(5) > .adt-nav-text.focusable]
		HTML element: <a class="contact-sales w-button" href="/contact-sales" tabindex="4">Contact Sales</a>
		Selector: [.nav-items-wrapper > .contact-sales-container > .contact-sales.w-button[href$="contact-sales"]]
commented

I would like to only check color contrast based on WCAG 2.1 AA standard.

commented

Hey @Tim-Cao,

My mistake, I referenced the wrong function. If you want to run only color-contrast you will need to use withOnlyRules. Below I have I have given an example which will run only color-contrast and print any violations and incomplete nodes:

AxeBuilder axeBuilder = new AxeBuilder();
WebDriver webDriver = new ChromeDriver();

axeBuilder.withOnlyRules(Arrays.asList("color-contrast"));

webDriver.get("https://www.liferay.com/");

Results results = axeBuilder.analyze(webDriver);

// Any color-contrast violations
List<Rule> violations = results.getViolations();
System.out.println("Color-contrast violations: " + violations);

// Any color-contrast nodes that require manual checking
List<Rule> incomplete = results.getIncomplete();
System.out.println("Color-contrast incompletes: " + incomplete);

webDriver.close();
commented

It works now. Many thanks @Zidious