I am working on a new project. Basically, I'm writing a web component that works as a car. There will be a header in a block, body, and an icon. When you are building a web component there are a lot of considerations to take into account, especially accessibility ones.
Design consideration
When were designing you have to decide what you want the object to do. For this card I wanted to allow the user to customize it well. I want to allow for changing the header, background colors, icons, body content, and size. The body content should be able to have lists, links, and buttons.
Accessibility Concerns
In order to account for non visual users it has to be accessible via keyboard. This means that any buttons inside of the card can be tabbed to. The icon needs alt-text so you know what the icon is. Any text inside should render for the screen reader as well as a translator for different languages. It also needs to support color contrast and dark modes for visually impaired users.
Expected Difficulties
Even though I haven't done much with the card yet I can look forward to what I expect to happen. I don't think the changing of properties will be very hard. The title, color and body shouldn't be hard. Changing the button inside may come with complications, especially if we want it to be tabable. I am mostly concerned with the translations. I believe that will be difficult to do.
Helpful Skills
Luckily, I have some experience in this area. I recently made a button and that was tabable. This should help with those problems in the case that they occur. I also have made dark modes for projects before and would love to implement that into the card.
Thanks for reading! Follow along with the repository here!
Top comments (0)