mat-select is not level A compliant according to AInspector WCAG

Eugenia Pais

I'm using Angular material in my website and trying to make it WCAG level A compliant. Doing some checks with the AInspector (extension for Firefox) seems the mat-select component don't have aria-controls, aria-expanded attributes, but looking at the HTML generated those aria attributes are there, you can verify this here. My question is if I'm missing something in the configuration, or definitely mat-selects are non level A compliant to the WCAG rule 4.1.2?

slugolicious

The problem with accessibility tools is that they're advertised as being simple to use and you just need to read the results to fix things but it's extremely helpful if you have some accessibility background to accurately interpret the results. Accessibility tools are not infallible and many report false positives which is where accessibility knowledge comes in handy. You have to know how to read the results and how to filter out the junk. Accessibility tools are just written by developers that are using their interpretation of WCAG to generate results. A lot of WCAG can be subjective and one accessibility expert might say something fails whereas another says it passes.

With that said, in your particular case, when I run the basic example on the demo page with a screen reader, it correctly says "collapsed" when I navigate to the "favorite food" selector and then says "expanded" when I press spacebar to open it. That's a good sign that it's coded correctly. I can then arrow up/down through the dropdown list and it reads the value of the element as well as "1 of 3" (depending on your screen reader). These are all good signs.

If I look at the code, the <mat-select> has a plethora of ARIA attributes. Perhaps too many. ARIA is like salt. A little enhances the flavor but too much spoils it. It has:

aria-autocomplete="none"
aria-haspopup="true"
aria-labelledby="[list of ids]"
aria-expanded="false"
aria-required="false"
aria-disabled="false"
aria-invalid="false"

The last three are not needed. Having "false" values for those is the same as not having them at all.

One of the important ones (well, I guess they're all important), is aria-expanded. Setting it to false says that you have an expandable thing but that it's currently collapsed. That's a trigger to me (as a screen reader user) that I can press space to expand it. <mat-select> has it so I'm not sure why the tool is complaining about it.

It also has:

tabindex="0"
role="combobox"

Both of those are good.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2022-02-20

Comments

0 comments

TOP Ranking

Article

mat-select is not level A compliant according to AInspector WCAG

mat-select is not level A compliant according to AInspector WCAG

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Unable to use switch toggle for dark mode in material-ui

grouping by column variables and appending a new variable based on condition

BigQuery - concatenate ignoring NULL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Python Read Directory And Output to CSV

Remove adjacent duplicates in linked list in C

Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use

How to keep curl session alive between two php processes?

Limit number of characters in uitextview

JMeter: Why get error when try to save test plan

Always setting the text cursor on Textbox

MTKView Displaying Wide Gamut P3 Colorspace

Vector input in shiny R and then use it

How to implement an authentication method using Spring Boot and JPA?

Laravel getting value from another table using eloquent

org.springframework.web.client.HttpClientErrorException: 401 null

When I click any button in my view page the form is submitted