Social Links using Tailwind and animations

Community feedback

• 

  David Casanova 💫•180

  @DavidCasanova83Posted 5 months ago

  Hey, very nice work with your TailwindCSS .

  Just some advice about accessibility :

  List of Accessibility Improvements

  1. Add ARIA (Accessible Rich Internet Applications) tags:

     • Add ARIA roles for navigation and content elements.

     <div class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6" role="contentinfo">
     

  2. Improve image descriptions:

     • Add more detailed descriptions for images.

     <img alt="Profile picture of Jessica Randall" src="./assets/images/avatar-jessica.jpeg" class="rounded-full h-24 w-24" draggable="false"/>
     

  3. Add navigation attributes to links:

     • Add aria-label attributes to links to indicate their destination.

     <a href="#" class="w-full py-3 bg-grey rounded-lg hover:bg-primary hover:text-off-black transition-colors" aria-label="Jessica Randall's GitHub profile">GitHub</a>
     

  4. Add a container for the <main> tag:

     • Add a <main> tag to indicate the main content region.

     <main class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6">
     

  5. Use accessible links:

     • Ensure that external links open in a new tab while informing users.

     <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary visited:text-primary" aria-label="Frontend Mentor challenge opens in a new tab">Frontend Mentor</a>
     

  Marked as helpful

  1

  ---

  

  Brian Hammer•180

  @BrianHammerPosted 5 months ago

  @DavidCasanova83 Thanks for the feedback. I especially like the suggestion of opening the link inside a new page. I've looked into your suggested attributes and understand most of them, but I don't understand is the fifth suggestion with rel="noopener noreferrer". What is the benefit of setting these values?

  0