@brunomoleta
Posted
Regarding accessibility, according to MDN:
<h1>is the element that describes the content of the page;
That means the h1 of our page shouldn't be the user's name but rather the Profile card of Victor Crest, which is more helpful for screen-readers.
Also, it's a good call to start the bottom part of the card with an h2 with User statistics
above it so it gives a good impression about the content to come next. Like <h2>Profile Statistics</h2>.
And then, it would be necessary to hide them in the CSS using: h1, h2 { display: none }
I learned that reading the code from Melvin Aguilar, one of the best-rated devs in the community.
Apart from that, your solution looks fine, Andreas.
Bis später :)
Marked as helpful
@andreasremdt
Posted
@brunomoleta
Thank you for your reply and helpful information. You are right, putting this sort of information into hidden headings for screen readers would make the solution even more accessible.
One thing though, don't use display: none to hide such elements, as most screen readers will ignore them. Same with the hidden HTML attribute. Instead, there's this technique:
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
More details and some background information can be found here.
Cheers!
@brunomoleta
Posted
@andreasremdt
ohhh great to know Andreas, thanks :)
