ziolko / aria-devtools Goto Github PK

View Code? Open in Web Editor NEW

198.0 4.0 9.0 1.53 MB

Easily spot missing ARIA labels, misused ARIA roles, and incomplete keyboard support in your web applications.

Home Page: https://chrome.google.com/webstore/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck?hl=en

License: MIT License

JavaScript 0.58% HTML 0.37% TypeScript 99.05%

accessibility aria webapp

aria-devtools's People

Contributors

Stargazers

Watchers

Forkers

bayesimpact bogdancerovac alexbfree ctemplin icecream17 sgregson nobottyb arminbashizade toitzi

aria-devtools's Issues

[Question] What's the meaning of a thumbs down icon?

I have the following login screen as an example:

And I'm wondering what the thumbs down icon means, as there's no hover title to tell me what it is, not can I click it to see more info.

[Bug] Extension throws error due to table

Hi, great extension! Love using it.

On https://news.ycombinator.com/item?id=28167012, when clicking on the extension icon, for a moment the website turns black and then switches to normal again. The following is displayed in the console:

TypeError: a.rows[s] is undefined
    l moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    Se moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    computeValue moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    trackAndCompute moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    read moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    Se moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    computeValue moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    trackAndCompute moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    read moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    Se moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    computeValue moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    trackAndCompute moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    read moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    Se moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    computeValue moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    trackAndCompute moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    read moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    get moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:74
    C moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:114
    i moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:46
    m moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:46
    Se moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    track moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:44
    m moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:46
    i moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:46
    Si moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    uo moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    io moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    ao moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Bo moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Qu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Bu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Iu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    sa moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    unstable_runWithPriority moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:8
    ia moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    sa moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    ca moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Zu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    unstable_runWithPriority moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:8
    ia moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Gu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    Xu moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:12
    E moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:8
    onmessage moz-extension://d940bee7-cd33-d94f-baf3-2772ad7ba355/inject.js:8

I am on Firefox 90.0.2 (macOS). I expected that the extension doesn't throw an error and maybe display the usual content (even tho the websites still uses tables for the layout).

Crash on Google Flights Page

I was testing with this tool to understand it in the context of a full ARIA implementation, and was trying on a Google Flights page: https://www.google.com/travel/flights/s/dWU2

Seems to work fine on flights.google.com but breaks once you get into the search. I'll try cloning and messing with the source code, but I've never done any Chrome extension work and am new to ARIA, so I'm afraid its above my paygrade!

9inject.js:12 TypeError: Cannot read properties of undefined (reading 'trim')
    at B (inject.js:166:2002)
    at Array.map (<anonymous>)
    at B (inject.js:166:1935)
    at inject.js:116:1948
    at inject.js:44:3245
    at inject.js:44:3074
    at Se (inject.js:42:10232)
    at e.track (inject.js:42:22134)
    at m (inject.js:44:3051)
    at i (inject.js:44:3225)
_o @ inject.js:12
inject.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'trim')
    at B (inject.js:166:2002)
    at Array.map (<anonymous>)
    at B (inject.js:166:1935)
    at inject.js:116:1948
    at inject.js:44:3245
    at inject.js:44:3074
    at Se (inject.js:42:10232)
    at e.track (inject.js:42:22134)
    at m (inject.js:44:3051)
    at i (inject.js:44:3225)

role none is inherited by children but the plugin shows an error on children without an explicit role

I saw you're not actively working on this plugin, I just thought I'd write this here in case anybody was wondering what was happening and was trying to add roles to every child, too.

Cheers

Support the `progressbar` role

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role

Support the `log` role

See the description here
https://developer.mozilla.org/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role

on the website where I use it, I get an error message with ARIA DevTools

Unsupported role: log (tag: div)

support the role tree

Show the value of `aria-describedby`

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

This brings valuable information to screen reader, for instance on a "close" button. However this information is not shown in ARIA dev tools.

Duplicated labels when `input`/`label` pairings are siblings

Hi,

Great project, very useful :)

I wanted to check this behaviour is intentional ...

If I have the following bit of HTML

<label>
  <input type="radio" />
  Some text
</label>

Then we get the following result in the preview ...

However if I have the following HTML (which is also a valid) ...

<input id="my-radio" type="radio" />
<label for="my-radio'>Some text</label>

Then the output looks like ...

You can see the label text is duplicated

This is being raised as a bug in my project and I wanted to know if it really is what a screenreader would render?

Cheers,
Brendan

Unicode URL text, such as ￸'Ασφάλεια Υγείας' detection

First of all thanks for this great extension!

If you check the Ασφάλεια Υγείας Σύγκριση Τιμών Online και Προσφορές Ασφαλίσεων page you will see that when the innerText of some anchor doesn't contain English text, it gets detected as u￸n￸clear.

First heading one the page should be h1 but is h2

This issue pops up when the first heading in the DOM is not an h1.
This is a false positive, because it's totally fine to have an h2 first depending on where it appears in the markup.

For example, a nav element (that usually precedes the main content) should have a heading and this is often an h2 as there really should only be one h1 (reserved for the main content / page title).

It might be better to check for the amount of h1's and/or check it's within the main of the page.

More info: https://usability.yale.edu/web-accessibility/articles/headings

This would also allow you to get more people to test new features or confirm that bugs are fixed.

Thank you!