Web accessibility

[Ulrich (Ulrich C. Thiess)]

In Germany and the EU, it is mandatory for public companies and private companies with more than 10 employees to have accessible websites.

There are several websites that assess websites for accessibility.

When I have my website assessed, I get several errors reported that are probably very easy to resolve.

May I politely request with this post that this issue be reviewed promptly and considered for existing and future elements?

I don’t think it’s a major challenge.

And please excuse me for starting such a topic now.

WAVE Web Accessibility Evaluation Tools

Accessibility Checker - ADA & WCAG Compliance (Free Scan)

Web Accessibility Evaluation Tools List

[Prehn (Chris)]

I’m just curious, what error do you get when you run the tests?

[Pegasus]

in my case, for example when i put a dropdown component in my header i get the following error message and have no way to fix it

edit.

[Prehn (Chris)]

Sorry, my German skills are limited, im Swedish, but im gonna have to follow the same rules and laws as you guys, so that’s why im curios on what obstacles I might be facing.

[Ulrich (Ulrich C. Thiess)]

The idea behind it is that a blind person can navigate the website with a screen reader.

To achieve this, all elements must have meaningful alt text. Other elements must not be duplicated.

Try it on your website: You’ll be surprised.

[Pegasus]

now. in english.

[Pegasus]

@dan

I have asked elementsbot about this. It seems that the aria labels in the dropdown component are not being set correctly.

Can this be fixed in a future update

@elementsbot

Great catch, Pegasus!
You’re running into a classic accessibility gotcha: your ARIA attributes’ values don’t match what assistive tech expects. Here’s what’s happening in your example:

<div x-bind="trigger" x-ref="trigger" aria-expanded="open" aria-controls="$id('dropdown-button')" type="button">

Problems Detected

1. aria-expanded="open"

• WRONG: aria-expanded only accepts "true", "false", "undefined", or "mixed".
• Yours: "open" ← Invalid!
• How it should be:

aria-expanded="true"
aria-expanded="false"

2. aria-controls="$id('dropdown-button')"

• Yours: "$id('dropdown-button')" is a template string. If not rendered to a real ID like aria-controls="menu-123", this is invalid.
• How it should be: Replace with the actual id of the content you’re controlling.

3. type="button" on a <div>

• Only allowed on <button> elements. Not an ARIA thing, but also flagged.

What Should You Do in Elements?

• Use a <button> as your dropdown trigger whenever possible.
• Make sure its ARIA attributes look like:

<button
  aria-expanded="false"            <!-- true or false, never open/closed -->
  aria-controls="dropdown-1"       <!-- must match the menu's id -->
  type="button"
>
  Menu
</button>

• The dropdown menu itself should have that id:

<div id="dropdown-1" ...> ... </div>

How to Fix in Elements

You can:

• Edit the Dropdown trigger to ensure it’s a Button
• Double-check the ARIA properties (most built-in Elements components do this right, but if you’re hand-coding or using a 3rd-party component, watch out!)

More Goodness

Read up on ARIA attributes & valid values or check the Elements Accessibility doc.
And, if you’re stuck with a misbehaving Marketplace component: tag me with the property file or ping Dan — we want the marketplace squeaky clean.

---

Quick Fix:

• Change "open" → "true"/"false"
• Make sure ARIA points to a real, unique id on your dropdown menu
• Use <button>, not <div>, for interactive triggers

If you need to see how this looks in an Elements custom property file, let me know — happy to give an example!

[dan]

Thanks for the feedback on this, we do have accessibility improvements on the roadmap, and I’ve just added this thread to the ticket. Hopefully @ben can take a look this week-ish!