Make efy WCAG compliant

[ChunkyProgrammer]

efy seems to have some accessibility issues.

Example issues:

• efy icons when used as buttons do not have text that can be used by screen readers (aria-label/title attributes)
• Missing label elements (also it might be good to make it so the slider has aria-hidden and tabindex=-1 as it's a bit weird to tab from the brightness input box to the brightness slider)

Here are some extensions which are useful for finding accessibility errors while testing: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ (this tool reports on what is currently visible, so you'd have to open all efy menus and run it to get detailed results) https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/

[dragos-efy]

Cool, thanks for feedback and solutions! I tried just now adding a title attribute to an efy icon and it helps, tho I have pointer-events: none on them cuz otherwise they cause issues inside buttons with event listeners, but it should still work with screen readers I'm guessing.

And for tabbing through 2 inputs, I thought about it too, like maybe tab once to switch from hue to saturation for example and arrows to navigate the 2 inputs inside hue or saturation , but I'll play with your aria-hidden and tabindex idea and see what happens.

I'll install the extensions too and test stuff with them on. I also added it to the github project where you can track the current status (now it's in soon, I'll probably be done by the end of the month depending on the speed and volume of other tasks)

If you have more feedback, lmk 🤟

[ChunkyProgrammer]

If you're using a Chromium based browser (ex: Brave) then there's also a Lighthouse tab in the devtools that does performance, accessibility and SEO analysis

[dragos-efy]

Thanks! Yeah, I use that for some stuff already. Sometimes it's off tho, like for example it registers our trans elements in efy as being another color than they are and it complains about accessibility issues when it fact it can be fine. But it's useful for spotting inputs without ids, slow dom loading etc.

Also, I didn't forget about your issue, I plan to double down on accessibility soon, but I try to not combine too many issues at once cuz that messes with my ADHD haha.

Thanks again and if you have any more feedback, lmk, I love all of it 🔥

[dragos-efy]

I fixed both of these:

• buttons do not have text that can be used by screen readers (I added titles for buttons that didn't have them)
• the slider has aria-hidden and tabindex=-1 as it's a bit weird to tab from the brightness input box to the brightness slider (I did exactly that, so number inputs are focused and range inputs are ignored)

And also improved the Lighthouse score. Mobile needs a bit more work, but that's only on the homepage, cuz efy itself on an empty page has 99 for performance and 100 for the rest (except for SEO cuz I INTENTIONALLY stopped indexing that page, so consider it 100 haha). So it's not cuz of the framework, but rather that page. For planner specifically, I'll improve that in Version 2 when it becomes more stable.

Desktop:

Mobile:

Mobile for just EFY on an empty page:

[ChunkyProgrammer]

Efy seems to be a lot more accessible now. Awesome job! I have a few more suggestions, however. 1) This setting should probably default to on (if someone can't use a mouse but isn't blind, it can be very hard for them to navigate to efy settings to enable this setting):

2) it seems like the efy menu doesn't get a display: hidden when closed which means the settings can be tabbed through when it's closed which probably shouldn't be the case

3) it seems like these buttons don't show an outline when focused

• the apps that say Soon should probably have a better visual indicator that they can't be clicked
• More Apps isn't keyboard navigable (this can be fixed by adding tabindex='0' but it seems like there might be another issue as after adding it I can't use space or enter to navigate to the Apps page)

4) (optional) I think it could be a good idea to add skip links (invisible links at the top of the page that can be used for navigating) to

• Skip to main content
• Skip to efy menu

(more details on Skips Links here: https://webaim.org/techniques/skipnav/#hidden)

[dragos-efy]

Great points again, love them 🔥

1. I planned to have something like auto, on & off (maybe not those names, but we'll see), so that by default the outline is on when using a keyboard, but otherwise not, on would always show up even with touchscreen / clicks and off would always be off

2. that's probably true cuz I noticed the focus being stolen by something, I wanna reduce stuff like that to 0 or close to it eventually

3. Oh nice catch, they actually had an outline, and proper focus, but I probably broke it without noticing. I'll fix it!

4. content and menu links could make sense, tho I'm not sure what would be a practical way to do it since the homepage has tabs, so technically if someone wants to go to the apps tab, it's shorter to just tab... I think that skipping to content is great if your page is all 1 "tab", just horizontal content, but if you have a 2D / 3D layout rather than 1D, then it's maybe not as useful, tho I think we can do something in the middle... I was planing to make the efy_tabs component use radios instead of buttons maybe, for arrow key navigation, or tab to skip all of them, so maybe that would skip a few tabs and make it quicker to navigate the top navbar

[dragos-efy]

I fixed 2, 3 and for 4 you can directly navigate the whole page with just 5 tab key presses: tabs, search, menu, buttons, apps. For each one you can use arrow keys to navigate inside the "category" so to speak. So basically tab to skip to a part and arrows to move inside deeper.

Also added this arrow navigation to the tabs and color picker components and a few places inside all apps, but I plan to extend this more in the future so that everything and every app is easily navigable by keyboard.

It's all live btw and I haven't started 1 yet, but I will soon, as well as fixing a few smaller accessibility bugs I've spotted recently