Design comparison
Solution retrospective
Honestly, it was pretty challenging to find how to position the background image in the place where I wanted it to be. (but now I'm happy with the result tho).
Now... Something that made me a little confused is something about the "followers, likes and photos". I think I heard something about screen readers having shortcuts to headings or something like that and decided to put them as h2 instead of the numbers. But on the screen, they don't look like headings to sighted people, which made me confused if it's alright to make it like that or if there is a better way to do it.
If you have other advice, other than about my question, it's also welcome.
Community feedback
- @correlucasPosted over 2 years ago
Hello Luiza, once again a really accurate solution. Congratulations for the good work.
About the H2/Stats section, in my opinion you keep the H2 heading and just apply one aria-label called "stats/profile stats" for the screen readers. Now that you open this discussion I'm curious if used the right tag, I used the span tag 😂 for the stats.
Which screeen reader do you use? I never fimd one in Windows, unfortunately isn't like Apple devices where the screen reader is built-in.
Well done, keep it up 👏👏
1@LuizaUszackiPosted over 2 years agoHi @correlucas, I usually use "Accessibility Insights for Web" to see landmarks and headings and I also use Screen Reader to hear they reading the page. To be honest, I don't know a lot of shortcuts to navigate through the page with the second, so I just use it to hear how it would sound.
And about the aria-label... I have:
<div class="social-info"> <h2>Photos</h2> <p>1.4K</p> </div>Should I add it to the h2 or the div?
0@correlucasPosted over 2 years ago@LuizaUszacki Usually I use aria-label to the most important blocks like section, article and etc. In this case you should add to the div because its the block thats wrapping the content you'll indicate with the aria-label.
Thanks for the tips about screen readers I'll check it because I've a lack of knowledge in this field.
Thanks Luiza.
1@LuizaUszackiPosted over 2 years ago@correlucas Then, I'll add it to the div. Thank you!
0
Please log in to post a comment
Log in with GitHub
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