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

Showcase
1

1600×1200 114 KB

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
4

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
5

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?

6

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.
https://www.usatoday.com/story/money/2019/10/07/dominos-pizza-website-accessibility-supreme-court-wont-hear-case/3904582002/

Edit: Had the wrong line selected.

6 Likes
7

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.

5 Likes
10

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/

4 Likes
11

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

2 Likes
12

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

2 Likes
14

It looks good, did you create all those tookit?

15

This topic was automatically closed after 91 days. New replies are no longer allowed.