Project Comp:
When designing a new web component there's several things we need to consider: what kind of elements and attributes is it going to use? How accessible is it? What kind of functionality should it have when someone interacts with it? To get a good sense of these things I found a comparison:
This is an example of what I want to create, a "learning card" that can be broken down into several elements such as:
- An Icon at the top
- A banner with a header and sub-header
- HTML slots at the bottom When designing these elements I'd have to consider what kinds of color contrasts should there be? Is there a light mode and dark mode? I'd also have to make sure that the font is readable and correctly color contrasted.
Potential Difficulties:
I have two main issues I'm concerning about when designing this card. The first is that I am not entirely sure yet how I can put a link either in the header banner or within the card content. I think I will try to figure this out by comparing my previous web components using buttons and seeing what kind of comparisons I can draw from that as well as find some open source projects of cards with links in them. My second concern is trying to create a state for the card for mobile use. I think I can solve this by using media queries and adjusting the screen size to detect for the pixel length of mobile devices.
What's Manageable:
So far I think its been pretty ease to create different accessibility and color contrast states that made the card look readable and easily accessible. Changing the different border colors, text colors, fonts, and background colors have made the card look accessible and easy to read. While not all of the elements within the card are accessible yet, most the the card could be read by a screen reader.
What's next:
While the card is at a good base level of readability, I still want to make it have more functionality such as having a state for mobile devices, and having links within the card. While the card still leaves a bit left to desired I believe it will be in a very polished state in the near future.
Top comments (0)