Submitted over 3 years ago

3-column preview card component

accessibility

Abanum Oliseyenum•230

@Codeyenum

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

Please does this properly follow semantic HTML and general best practices? I would really appreciate some feedback.

Code

Please log in to post a comment

Community feedback

Fazza Razaq Amiarso•2,320
@fazzaamiarso
Posted over 3 years ago
Hello Abanum! Great Work!

Your approach to accessibility is good. To fix the level-one heading error, which does not appear in the design. There is a workaround that keeps semantics that uses a visually hidden h1. Please add this class to your h1
```
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
```
I hope it helps! Cheers!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord