Base Apparel coming soon page using CSS grid areas

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hello Pranshu,

  you structured your HTML well and made it accessible for AT users, nice going! There are just a few changes I would consider.

  Heading level order

  Even though it's technically allowed to have multiple <h1> elements on one page, it's not considered as good practice and should be avoided. The order of headings is an important guidance to AT users as this is one of their ways to navigate through content.

  Landmarks

  The page content inside <main> should also contain the <picture> element, which is part of unique, non-repeating content. Genereally speaking, you should avoid having semantic HTML elements outside of a landmark (header, main, footer etc.).

  Button with label containing "button"

  Screen reader usually announce focused elements like buttons and links with their role names, after reading out the label. That means that the word "button" will be announced twice if that word is in the label. This redundancy can cause confusion to AT users. A label like "Submit email" would be easier to understand and prevents word repetition.

  Besides that, I think you made a good job building accessible HTML.

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Pranshu Sahu•770

  @Pranshu-SahuPosted about 2 years ago

  thanks @dusan-b ,it helped me to solve accessibility issue.

  Can you provide me resources to learn about a11y ?

  0

  

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  @Pranshu-Sahu Sure, here are some useful resources:

  • https://developer.mozilla.org/en-US/docs/Learn/Accessibility
  • https://web.dev/learn/accessibility/
  • https://www.a11ymatters.com/

  Have fun!

  0