# Web accessibility

**URL:** <https://forums.realmacsoftware.com/t/web-accessibility/49025>\
**Category:** Elements\
**Created:** [July 21, 2025, 9:01am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025 "2025-07-21T09:01:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [July 21, 2025, 9:01am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/1 "2025-07-21T09:01:22Z")

</div>

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](https://wave.webaim.org)**

> **[AccessibilityChecker.org - ADA & WCAG Compliance (Free Scan)](https://www.accessibilitychecker.org)**
>
> Quickly scan your website with our free web accessibility checker. Get an overview of every issue and clear instructions to fix them. Enter URL to begin.

> **[Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/test-evaluate/tools/list/)**
>
> Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).

---

<div class="post-metadata">

**Author:** ![Prehn](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@Prehn](https://forums.realmacsoftware.com/u/Prehn)\
**Post date:** [July 21, 2025, 9:36am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/2 "2025-07-21T09:36:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 21, 2025, 9:48am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/3 "2025-07-21T09:48:22Z")

</div>

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

 ![Screenshot 2025-07-21 at 12.02.28](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/d/bdfd04750fc05d6ade848a0f9d3ad11cba30b441.png)

edit.

---

<div class="post-metadata">

**Author:** ![Prehn](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@Prehn](https://forums.realmacsoftware.com/u/Prehn)\
**Post date:** [July 21, 2025, 9:51am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/4 "2025-07-21T09:51:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [July 21, 2025, 10:02am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/6 "2025-07-21T10:02:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 21, 2025, 10:04am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/7 "2025-07-21T10:04:26Z")

</div>

now. in english.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 21, 2025, 10:34am UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/8 "2025-07-21T10:34:59Z")

</div>

@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

> [@On another topic](https://forums.realmacsoftware.com/t/49028/4):
>
> 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:
> 
> ```auto
> <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:**
> 
> ```auto
> 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:
> 
> ```auto
> <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`:
> 
> ```auto
> <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](https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value) or check the [Elements Accessibility doc](https://docs.realmacsoftware.com/elements-docs/accessibility).  
> 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!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 21, 2025, 12:16pm UTC](https://forums.realmacsoftware.com/t/web-accessibility/49025/9 "2025-07-21T12:16:51Z")

</div>

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!