I did an accessbility test at accesibity test site
, and it came up with these two issues
Menu items that have a dropdown menu include an "aria-haspopup" attribute that equals to "true".
2 Failed Elements
<button aria-expanded="false" class=" features-link text-uppercase me-4" >Features<img aria-hidden="true" class="ms-2 features-close" src="images/icon-arrow-up.svg" alt="" width="10" height="6" ><img aria-hidden="true" class="ms-2 features-open" src=...
<button aria-expanded="false" class="company-link text-uppercase me-4" >Company<img aria-hidden="true" class="ms-2 company-close" src="images/icon-arrow-up.svg" alt="" width="10" height="6" ><img aria-hidden="true" class="ms-2 company-open" src="imag...
So do I need to add this aria attribute as well? I could not find any decent information about this online. The examples just show with either attribute not both.
And this one, even though it seems correct with aria-hidden=true and empty alt tags:
Images should have an alternative text description that describes both the objects and the embedded text that the image contains, using the "alt" attribute.
3 Failed Elements
<img aria-hidden="true" class="me-4" src="images/logo.svg" alt="" width="84" height="27">
<img aria-hidden="true" class="ms-2 features-open" src="images/icon-arrow-down.svg" alt="" width="10" height="6">
<img aria-hidden="true" class="ms-2 company-open" src="images/icon-arrow-down.svg" alt="" width="10" height="6">
The most annoying from their site(accessibe) is the use of this float-on-top window , that I keep closing accidentally, so that’s hardly ‘accessible’. Typical.
No. You only use aria-haspopup if the thing popping up has a role of menu, listbox, tree, grid, or dialog. This is written in the specification. Since you aren’t using any of those roles then you don’t use aria-haspopup.
Empty alt text is perfectly fine if the images are purely decorative (which these are). In fact, you don’t even need aria-hidden="true" since the empty alt text will automatically hide the image from assistive technology. Technically, there is no harm in adding aria-hidden="true" to an image that already has empty alt text, but most accessibility specialists will tell you to get rid of it because it just isn’t needed.
What you are experiencing here are the limits of automated accessibility testers. Automated testers have no way of knowing whether an image is decorative or actually needs descriptive alt text. The best it can do is guess. It definitely should not be considered a failure. The aria-haspopup error is just plain wrong. My guess is that since you are using aria-expanded on these buttons, the tests are assuming you need aria-haspopup, which as stated above, is incorrect if you aren’t using one of the required roles for the popup content.
I’m not sure accessiBe is the best accessibility checker. Just seeing these two incorrect examples leads me to believe they aren’t concerned with false positives and are going to give you bad information. There are also other issues with the company that I won’t go into here other than to say that they are not held in high regard in the accessibility community.
There is nothing wrong with using an accessibility checker to catch the issues that can actually be caught with an automated process. I would recommend you use one of the several more reliable browser extensions to check accessibility.
Just remember that an automated checker will not catch all accessibility issues. Most people estimate they can catch 25-40%. The more complicated your page is, the less they will be able to catch. Definitely use them as they will find the easy stuff. But don’t assume that because one of these checkers says you have no issues that you really have no issues.