Looking to hire developers?
@InterplanetaryDragon
Posted
Quick update. That 'id' 'label' fix worked for me.
Another tip, if you get a HTML error related to Google fonts, which just happened to me, replace the pipe | in the code with %7C. I think it happens if you have more than one font family.
@InterplanetaryDragon
Posted
May be able to help with your first question. I uploaded a solution and have two accessibility issues which are worded very similar. For me they concern a hidden checkbox. I believe I need to add an 'id' to the checkbox, then use the 'id' as a label for a screen reader.
This is the example they give for my issue. <input type="checkbox" id="tequila"> <label for="tequila">Chamukos tequila</label>
This page may help you to: https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/
I image you also need to given an 'id' and 'label' or something very similar.
I haven't started to learn JS yet so can't help you there. Refactoring wise, I wouldn't get too hung up early on. I spent quite a bit of time looking at how I could minimise the code, often for tiny gains and it wasn't worth it, as you learn better ways of implementing things. I find that I pick something up each time and adjust how I layout the CSS and comment it. I think readability is the most important thing-=knowing you could go back to it in 6/12 months and know what is what straight away. I really liked this layout when I came across it: https://codepen.io/mor10/pen/NjeqyX/ it's also a great example of CSS grid. This is the video that goes with it, if you haven't already seen it: https://www.youtube.com/watch?v=7kVeCqQCxlk
@rosajen27
Posted
Thank you for your feedback. I really appreciate it!
The context for that error message is this code:
<input type="email" id="email" name="email" required="required" placeholder="Email Address">
I have name and id, so I'm a bit confused with understanding what you mean. (Sorry, I'm a newbie! :) )
@InterplanetaryDragon
Posted
@rosajen27
I had to add a label for the id underneath. Looking at your example I'd take a guess at: <label for="email">Enter email address</label>
Change "enter email address" to whatever you want the screen reader to read.
@InterplanetaryDragon
Posted
@rosajen27 Forgot to add. The label will become visible so make sure you die it with
'your label' { visibility: hidden; }
Hope this helps :)
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
