HTML & CSS (No Javascript)

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Hi

  Although the idea to use interactive form elements here is valid, you've not quite implemented it correctly here.

  First some general pointers

  • try to use classes only for styling, not IDs
  • once using classes you can reduce all the repetition in your css by using one reusable class per element
  • if using interactive elements leverage their pseudo state in CSS. That would be :selected for radios or :checked for checkboxes
  • when using interactive elements never hide them using display none. As soon as you do that they are not keyboard interactive any more or accessible to screenreaders. Instead use properties like opacity and height 0, position absolute etc. And when the element is focused, show that visually with an outline or something on a sibling element that is visible on screen (in this case the question)

  Now for the implementation

  • Firstly, radios are an unusual choice for this. Expected behaviour for collapsible sections is for more than one to be able to be open at once, so checkboxes feel like a more appropriate choice.
  • at the moment, markup is invalid because you've got paragraphs and images inside a label element. Get rid of that label, use a div or whatever you need if you need a wrapper at all. Instead use aria-labelledby="id-of-question-paragraph" on each input, with a unique ID on each question (that's what IDs are for, not styling, they are anchors).
  • I'd also recommend making those chavron icons into background images on the question.
  • If you do want to keep them in as image tags, they should not have an alt value (so yes your css hook would need to change as well). It's very important for images like that (meaningless images/icons) to have instead alt="" aria-hidden="true" (the empty alt tells most screenreaders to ignore the image, the aria hidden is just needed if it's an svg because of an apple voiceover bug)

  The only other things I notice is your font styles, line heights and background color/gradient doesn't match the design.

  Good luck with this, I hope these tips are helpful.

  3

  ---

  

  Muhammad Hisham•675

  @mohamedhesham221Posted over 3 years ago

  Thank you for your tips @grace-snow this is very helpful, I will be care about this concepts next time and I will do my best.

  0

  

  Muhammad Hisham•675

  @mohamedhesham221Posted over 3 years ago

  @grace-snow but i should use checked not selected on the radio button :selected not possible use on radio

  here is my reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

  0

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Oh yeah it's the same on both, forgot that.

  0
• 

  Galdino•215

  @GaldinoMatPosted over 3 years ago

  Hey man, good job! But I think your solution has some issues. Regarding the box image, try putting the container in position:relative, so the box doesn't move when we try to check for responsiveness. This can also be checked for the mobile image, since it gets on the text's way when the device is 760 - 500px wide. Also, check the container's size for lower resolution devices, since it gets too big. My tips is: try to design the solution using a mobile first approach, and limit yourself to 2 media queries, since too many rules can cause conflicts and weird behaviours. But good job with the radio-buttons. I used a similar approach on my own solution and was quite happy with it. Be proud of yourself!

  2

  ---

  

  Muhammad Hisham•675

  @mohamedhesham221Posted over 3 years ago

  Thank you for notes @GaldinoMat I will do my best next time And this my first time to do task like that without Javascript

  1