Desktop-HTML,CSS-stats-preview-card-component

Community feedback

• 

  Rachel Cessna•195

  @cessnar516Posted about 3 years ago

  I think your solution looks really nice! Here are few suggestions to make your layout more accessible:

  • Heading levels should be used sequentially on a page. Right now, you have the card title set to an <h1>, so the next heading on the page should be an <h2> instead of an <h3>, and the next heading after that should be an <h3> instead of an <h6>. It's best to use the headings sequentially, and then adjust the CSS of the heading to be the size/style you want because screen reader users depend on the structure of the page to understand it's content. When heading levels are skipped, it can be confusing, and those users may think they're missing information.

  • To make the HTML for the stats section more semantic, I suggest using a <ul> instead of using headings because the information is a list of statistics instead of sections of content. Then, you can style the <ul> to remove the bullets and display horizontally. Your HTML might look something like this:

  <ul class="stats">
  <li><span>10k+</span> Companies</li>
  <li><span>314</span> Templates</li>
  <li><span>12M+</span> Queries</li>
  </ul>
  

  • One more thing that would help your accessibility would be to use some semantic HTML elements to define the sections of your page. I suggest adding a <main> element around your main-card div, and a <footer> element around the attribution information at the bottom of the page. These elements will provide helpful information to assistive technology to help those users understand the structure of the page.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  P

  Haitham Amireh•80

  @HaithamAmirehPosted about 3 years ago

  @cessnar516 Thank you for your help!

  0