I made an open-source toolkit for developing with HTML, CSS, and JS

Hi guys,

I made an open-source toolkit for developing with HTML, CSS, and JS. I started it because I wanted to speed up my workflow and make myself more productive. Then I realized that I want to share it with the world. I’m thinking about creating documentation that includes our guiding principles and techniques used to build and maintain the project.

You can see our collection of prebuilt components here:

Components

GitHub repository

2 Likes

Welcome to the forums, @outburst.

I had a look at some of your components and was disappointed to discover they are not keyboard accessible. frown Do you have plans to improve accessibility of these components?

6 Likes

Thank you for taking the time and effort in reviewing my work.

Could you please let me know which one do you think needs improvement?

You should absolutely never do this:

Outline is important for basic accessibility, meaning people who must navigate a page using only a keyboard due to various medical conditions. It also helps people who choose to navigate pages using only their keyboard, which is popular but not as important as taking considerations for people who have no other option. It’s ok to set outline to 0 in cases where you take special care in recreating a focus event so that you know where you’re currently selected.

aria-* attributes are also important for screenreaders and other assistive technology.

Here are some resources:

It’s important enough that there are court cases over non-accessible websites.

Edit: Had the wrong line selected.

5 Likes

I don’t know why I haven’t done this already. I guess my focus was elsewhere. I’ll definitely fix this in the next update.

4 Likes

The ones I tested were the navbar and both versions of the accordion.

To add to what @mawburn said above, keyboard accessibility is also important for visually-impaired visitors using screen readers.

https://webaim.org/techniques/keyboard/

https://webaim.org/techniques/javascript/

3 Likes

That keyboard testing cheat sheet is actually incredibly useful. I’m bookmarking this. Thanks!

1 Like

While we’re on this topic, this video is also very good:

1 Like