Design comparison
Solution retrospective
Every feedback is welcome! :)
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @finng1337,
I have some suggestions regarding your solution:
-
Whenever you include interactive elements(links , buttons , inputs , textarea ), make sure you include clearly visible focus-visible styles .
-
<svg> 's
do not add important information to a document should be considered decorative. You can usearia-hidden="true"
to hide the SVG from screen readers.focusable="false"
is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG. -
Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.
-
you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech).
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.
- You should use
em
andrem
units .Bothem
andrem
are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Usingpx
will not allow the users to control the size of the page based on their needs.
Hopefully this feedback helps.
Marked as helpful1@finng1337Posted almost 3 years ago@PhoenixDev22 wow, thats very exhaustive feedback. This is one of my first projects and I am still in the beginning of learning, so that helped me a lot. Thanks for your time!
1 -
- @NaveenGumastePosted almost 3 years ago
Hay ! Good Job finng
These below mentioned tricks will help you remove any Accessibility Issues
-> Add
Main
tag after body like it should be your container. For 1st heading orh1
tag, use header tag and then inside the header put yourh1
orh2
etc . But use header tag only once in main heading element.Keep up the good work!
1@finng1337Posted almost 3 years ago@Crazimonk hey Naveen, thanks for the feedback. I just rly dont know what should I write as h1 heading(thats why its not there haha). Should I write something in it even though the design doesnt have any heading or should I just leav it blank(thats not a good idea I think)?
1@NaveenGumastePosted almost 3 years ago0@finng1337Posted almost 3 years ago@Crazimonk oh yes, i get it now, thanks for your time!
1
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