Design comparison
SolutionDesign
Solution retrospective
Guys kindly have a look and lemme know your reviews so I can improve π
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi again, @leorichy99!
There are a few changes you could make to this solution better.
- Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (
<img>
) so the screen reader will pronounce it as an image. - For images containing text, make sure the alternative text includes the image's text. In this case, the Ping logo should have an
alt
value of "Pingβ Reference β Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text <input>
must have an accessible name. Usearia-label
to give it an accessible name.- Use
<button type="submit"
>` for the "Notify Me" button. - There should not be text in
<span>
and<div>
alone. Wrap the text with a meaningful element like a paragraph element. - Remove the word "account" from every social media link.
I hope you find this useful. Have fun programming!
Marked as helpful0 - Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (
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