Hey folks!
I wanna share a few easy tips for improving user experience. You can use it for any apps because all improvements will be done using only HTML and CSS.
Let's go!
nav without aria-label is a bad pattern
A wrong code
<nav>
<!-- the elements of navigation are here -->
</nav>
A correct code
<nav aria-label="Main">
<!-- the elements of navigation are here -->
</nav>
Screen reader users can't find where the main navigation is if we don't tell them about it. So aria-label helps us to make it!
Throw input type="tel" in the trash
A wrong code
<label for="bd">Date of birth</label>
<input id="bd" type="tel">
A correct code
<label for="bd">Date of birth</label>
<input id="bd" inputmode="numeric">
Do you expect * or # symbols when typing date of birth? So input type="tel" is trash for typing numbers except typing a phone number. Laconic keyboards with numbers using inputmode="numeric" win!
Focus styles aren't equivalent to hover styles
A wrong code
.button:is(:hover, :focus-visible) {
background-color: #fed330;
}
A correct code
.button:hover {
background-color: #fed330;
}
.button:focus-visible {
outline: 3px solid #fbc604;
}
Focus styles can't be equal to hover styles because in this case users have to understand a focus state for every element. It's why outline is the most safe way!
Decorative lines are hidden in the Window High Contrast Mode
A wrong code
.heading::before {
content: "";
width: 5rem;
height: 2px;
background-color: #b87eef;
/* other CSS */
}
A correct code
.heading::before {
content: "";
width: 5rem;
border-top: 2px solid #b87eef;
/* other CSS */
}
background-color will be set with the same value for all elements in the Windows High Contrast mode. As a result, the elements will be hidden. So consider border as an alternative.
P.S. You can find more tips in my newsletters:
https://cssisntmagic.substack.com
SOCIAL SHARE CARD GENERATOR