Design comparison
Solution retrospective
Hello everyone, hope you are good :)
I have few questions on this challenge !
-
First of all, how can i change the color of a SVG image, like in the footer, the logo should be green. I know how to change with filter but i need a specific color here not just white or black or greenish.
-
What do you think about my markup for testimonial items, i insert an image inside a blockquote, should i use figure tag here ?
-
What HTML do you use for social media links ? do you use nav tag ?
-
Here i use background image to set up the different images, is that good ? or should i use <img> tag ? I used it bc its visual image there is no link with the content.
-
What ALT do you write for 'arrow down' or link to social medias ?
Thank you ! Have a nice day
Community feedback
- @JimaLokoPosted about 2 years ago
on this website you can put the color you want in hex which will generate the filter automatically. congratulations on the solution
https://angel-rs.github.io/css-color-filter-generator/
Marked as helpful1 - @PhoenixDev22Posted about 2 years ago
Hi Victor Paumier,
Congratulation on completing this challenge. Excellent work! I have some suggestions regarding your solution if you don’t mind:
- Well done with adding the
aria-expandedandaria-controlson the toggle.
- As the button has no discernible name, put an
aria-labelon your trigger to describe its purpose. For example, you can have: aria-label='Mobile Navigation Trigger' or 'Open Menu.’
- You should use
aria-controlsattribute on the toggle element, it should reference theidvalue of the<ul>element.
- look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content. For decorative images, you set an empty
altto it with anaria-hidden=”true”to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.
- Use the
<nav >landmark to wrap the footer navigation witharia-label=”secondary “oraria-label=”footer”. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. Thenavelement in the header could use anaria-label="primary"oraria-label=”main”attribute on it. The reason for this is that, You should add thearia-labelfor a nav element if you are using the nav more than once on the pag..you can read more in MDN
- You may use semantic an unordered list
<ul>to wrap the social linksclass="footer__social-medias", you put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired users the most information possible about the contents of the navigation.
- The links wrapping the social images must have aria-label or sr-only text indicate where the link will take the user. Then add
aria-hidden=”true”to the images that make them be ignored by screen readers to avoid redundancy and repetition.
Overall, Your solution is good. Hopefully this feedback helps.
Marked as helpful1@lifeaddiktPosted about 2 years ago@PhoenixDev22 wow thank you for this very complete answer !
It is true that I have only superficially explored the aria attributes. I will have a deeper look in it and use all your remarks !
Thank's :)
0 - Well done with adding the
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