Huddle-landing-page-with-single-introductory-section-master
Design comparison
Solution retrospective
Need help for the SVG background. Thanks for any feedback.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi SEIFELESLLAM SEIF, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=” true” to be ignored by screen readers and to avoid redundancy and repetition.
- Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem
The rest is great!
I hope it helps... 👍
Marked as helpful1@SEIFSEIF4Posted about 2 years ago@AdrianoEscarabote Thanks a lot for your feedback. yeah I have this extension . I forgot to convert it.
1@dusan-bPosted about 2 years ago@AdrianoEscarabote Actually there is no need to set
aria-hidden="true"
for decorative images. The accepted method is to have an emptyalt
attribute.In theory
aria-hidden="true"
would work, but that requires the technology to understand ARIA. Emptyalt
attributes have been established a lot longer and will be accepted by more assistive technologies so it's the appropriate way of having animg
element on the page that's not read out by screenreaders.Marked as helpful2
Please log in to post a comment
Log in with GitHubJoin 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