Equalizer Landing Page [mobile first][vanilla HTML/CSS]
Design comparison
Solution retrospective
This is my first premium challenge. It is nice to work with Figma files!
My questions are:
- In a feedback on a previous challenge, I was recommended to add the
focusable
HTML attribute to false along witharia-hidden='false'
. While trying to implement that in this challenge, I read that thefocusable
HTML attribute is not well supported by all browsers and the use of javascript is recommended. Is there a best practice here ? - Any feedback are appreciated, especially on the layout strategy or better ones that I could have thought of.
For more context see the github readme file.
Thank you all!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Tanguy! π
About
focusable
attribute, you should use that on the<svg>
elements to prevent users that use Internet Explorer from focusing on SVGs.Reference: Contextually Marking up accessible images and SVGs
I am not sure about the support. But, since the purpose is fixing bugs on Internet Explorer, the support should be good. Can you share the link that shows the support of the
focusable
attribute? I can't find it on "Can I Use" and only find the specification of it.Can I use "focusable", 0 results found β "focusable" | Can I use... Support tables for HTML5, CSS3, etc
Interactivity β SVG Tiny 1.2
Scripting and Interactivity β SVG 2
Here are some suggestions for improvements.
- Alternative text for the Equalizer logo should only be "Equalizer". Remove the following phrases, "written in full as the site logo".
- Not every image needs alternative text. Decorative images should not have alternative text (
alt=""
). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page. - For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
- Use
<a>
withdownload
attribute for the download buttons. - The Android and Apple icons are decorative images. Don't add alternative text if you decide to add
aria-hidden="true"
to the<img>
element. - Put the visually hidden text inside the
<a>
to label each social media link. Also, you should only add the social media platform. Don't include the "Follow on" phrases. - Prefer unitless numbers for line-height values to avoid unexpected results. Learn more β line-height - CSS: Cascading Style Sheets | MDN
I hope this helps. Happy coding! π
Marked as helpful0@OignonFugacePosted almost 2 years agoHi @vanzasetia, thank you for taking the time to review my solution. This is of great value! See you.
0@vanzasetiaPosted almost 2 years ago@OignonFugace
You are welcome! Can you share the link that shows the support of the
focusable
attribute?0@OignonFugacePosted almost 2 years ago@vanzasetia
Oh yes I would if I could by actually it is chatGPT that told me so when I asked about the focusable attribute π : βIt is worth noting that the "focusable" attribute is not supported by all browsers and is not standardized in HTML. It is therefore advisable to use JavaScript or CSS techniques to manage the highlighting and selection of elements.β The tool is great, but not that much when it comes to references π
0
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