Responsive Bookmark Landing page with Sass, Flexbox and CSS Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Really nice solution, well done! It's great to see you're clearly considering accessibility in your work. There's only a few issues I notice...

  • more buttons should be anchor tags
  • in some places you're misusing sections and articles... And figure. Eg the extensions list section has some really strange markup but there seems to be some confusion in a few places. Remember heading order and element choice is the most important part of semantics, not landmarks. Sections actually act exactly like divs unless explicitly labelled. To know the difference between section send article think of a newspaper - you have a sports section, but you also have lots of articles. They don't have to live inside each other and every chunk of headed content doesn't need to be an article. Only use if they really warrant some extra structure
  • the accordions don't open if I tap on the icon, only if I tap outside of it. I think pointer events none on the icons might fix that but not 100% sure tbh
  • remember accordions are a classic disclosure pattern much like the nav toggle - think aria expanded and controls
  • in the form, you don't link spans to their input with aria-labelledby on the span. Instead that error message should be wrapped in another element that has a unique ID and an aria-live attribute. Then the input just needs an aria-describedby pointing to that error message container. Note the element with aria live on it must remain present all the time, it can't be display none. It's the content inside it that needs to be hidden / shown on error.

  I hope this all helps you. Good luck

  Marked as helpful

  2

  ---

  

  Jose Sanchez•380

  @JRS-DeveloperPosted over 2 years ago

  @grace-snow Hi! Thank you for your tips, I tried to follow them all. Now the accordion work really well and I had to follow the aria example of w3c: https://w3c.github.io/aria-practices/examples/accordion/accordion.html

  About the articles and figures I removed then all and replaced them with divs. And with the form, I followed your instructions, I had to add a label and "hide" it. Thank you very much for your help!. :D

  0