Design comparison
Solution retrospective
On the first run through I got the mobile version looking great (without figma because I didn't pay for Premium, yet), however I made the mistake of not taking the desktop version into account when I got the layout set up. The result quickly became a complicated mess with special classes and cases all over the CSS document.
I learned that sometimes (read: a lot of the time) flex-boxes are a great tool to utilize for responsive layouts and there's not necessarily anything wrong with nesting them to get things working correctly.
Any feedback is always appreciated! I'm working on improving my self-taught skills in front-end development to set myself up for a career in web development when I leave the US Army in about a years time. So any tips, hints, resources, etc. that you feel like throwing my way will be greatly appreciated. Cheers!
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Robert! 👋
The alternative text of the logo should not be "logo". It should be the name of the company which in this case is "Clipboard". Also, you don't need to mention the size of the logo.
Also, don't include the word "logo" for the alternative text of the images inside
<section class="logos">. It is already an image element (<img>) so the screen reader will pronounce it as an image.For the download buttons, use
<a>withdownloadattribute instead.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.
Links must have accessible names. Right now, social media links do not have text content. So, I recommend using
aria-labelfor each anchor tag to provide an accessible name. This way, screen readers know how to pronounce the link.After that, you should hide the social media icons from assistive technologies. To do that, you need to use
aria-hiddenattribute to prevent them from getting pronounced by screen readers.Never use
pxunit for font sizes. Useremoreminstead. Relative units such asremandemcan adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSSRemove
font-weight: 400;from the<body>styling. It is already the default styling.Making the page layout into a desktop layout at 380px width is too early. I recommend adjusting the breakpoint. The site should only have the desktop layout when there is enough space.
I hope this helps. Have fun coding! 😄
Marked as helpful1@vanzasetiaPosted over 1 year ago@waffleflopper
For resources, I recommend checking out the following websites to learn more about web accessibility:
- FED Mentor - Grace Snow is an accessibility expert who writes amazing blog posts that can be easily understood by beginners. I highly recommend reading her blog posts.
- Solid Start - This is a good website for everyone that getting started to learn about web accessibility. It also provides some great resources.
- A11y Coffee - It is a friendly website that teaches web accessibility, starting from "What is 'a11y'?". You can read the article while enjoying a cup of coffee.
- Accessibility Myths - It is a small project debunking common accessibility myths. There are 22 myths that have been debunked.
Marked as helpful1@waffleflopperPosted over 1 year ago@vanzasetia Thanks! Accessibility is definitely something I need to get better at - it didn't exist when I first started using HTML and CSS. Thank you for all the tips and and links in the reply. Appreciate it!
0@vanzasetiaPosted over 1 year ago@waffleflopper
You are welcome! Good luck with your new career! 👍
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