addyosmani/a11y

False positives on custom elements that do not appear with the Chrome extension

Opened this issue · 1 comments

I'm working on implementing some custom elements for basic web design pattern like tabs ect... I am seeing a few errors that a11y is reporting that do not appear when auditing via the Chrome extension.

± a11y http://localhost:3000/

  ✖ Elements with ARIA roles must be in the correct scope

  CALCITE-TABS > .tab-nav

  ✖ Text elements should have a reasonable contrast ratio

  CALCITE-TABS > .tab-nav > A:nth-of-type(2)
  CALCITE-TABS > .tab-nav > A:nth-of-type(3)

  ✖ This element has an unsupported ARIA attribute

  CALCITE-TABS


  ✔ This element does not support ARIA roles, states and properties
  ✔ This element has an invalid ARIA attribute
  ✔ ARIA state and property values must be valid
  ✔ Elements with ARIA roles must use a valid, non-abstract ARIA role
  ✔ An element's ID must be unique in the DOM
  ✔ These elements are focusable but either invisible or obscured by another element
  ✔ The web page should have the content's human language indicated in the markup
  ✔ The purpose of each link should be clear from the link text
  ✔ Meaningful images should not be used in element backgrounds
  ✔ The web page should have a title that describes topic or purpose
  ✔ Elements with ARIA roles must have all required attributes for that role
  ✔ Elements with ARIA roles must ensure required owned elements are present
  ✔ Avoid positive integer values for tabIndex

calcite_ui_kit_kitchen_sink_and_calcite-web_js_-_users_patricklocal_code_calcite-web-atom_and_index_html-_users_patricklocal_code_calcite-web-ui-kit-_atom

Is this just a version mismatch?

Can you provide some more information about the site/app you're testing with? Ideally, some sample code we can run to try comparing the output between the binary and the extension would be great.

Note: the extension is able to run audits at any point in time against the page (e.g when dynamic behaviour has been injected) whilst we only run at page load time and are somewhat limited in how well we handle the dynamic use case. This may be one possible explanation for what you're seeing.