Profile card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Luiza, once again a really accurate solution. Congratulations for the good work.

  About the H2/Stats section, in my opinion you keep the H2 heading and just apply one aria-label called "stats/profile stats" for the screen readers. Now that you open this discussion I'm curious if used the right tag, I used the span tag 😂 for the stats.

  Which screeen reader do you use? I never fimd one in Windows, unfortunately isn't like Apple devices where the screen reader is built-in.

  Well done, keep it up 👏👏

  1

  ---

  

  Luiza Uszacki•250

  @LuizaUszackiPosted over 2 years ago

  Hi @correlucas, I usually use "Accessibility Insights for Web" to see landmarks and headings and I also use Screen Reader to hear they reading the page. To be honest, I don't know a lot of shortcuts to navigate through the page with the second, so I just use it to hear how it would sound.

  And about the aria-label... I have:

  <div class="social-info">
    <h2>Photos</h2>
    <p>1.4K</p>
  </div>
  

  Should I add it to the h2 or the div?

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @LuizaUszacki Usually I use aria-label to the most important blocks like section, article and etc. In this case you should add to the div because its the block thats wrapping the content you'll indicate with the aria-label.

  Thanks for the tips about screen readers I'll check it because I've a lack of knowledge in this field.

  Thanks Luiza.

  1

  

  Luiza Uszacki•250

  @LuizaUszackiPosted over 2 years ago

  @correlucas Then, I'll add it to the div. Thank you!

  0