Base Apparel by Jennifer

Community feedback

• 

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  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.

  1
• 

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  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

  1

  ---

  

  Jennifer•30

  @rosajen27Posted over 4 years ago

  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! :) )

  0

  

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  @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.

  0

  

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  @rosajen27 Forgot to add. The label will become visible so make sure you die it with

  'your label' { visibility: hidden; }

  Hope this helps :)

  0