Social Links Profile with React

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted 6 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE LINKS:

  • The links like Github, Frontend Mentor are needed to be wrapped up using li and ul elements.

  ---

  • This is the current markup,

  <div class="link-container">
     <a href="">Github</a>
      <a href="">Frontend-mentor</a>
     ...
  </div>
  

  ---

  • Using ul and li elements for navigation links can indeed improve accessibility, as they provide semantic meaning and structure that assistive technologies (such as screen readers) can better understand and navigate.

  ---

  • By using an unordered list (ul) and list items (li), you provide a more meaningful structure that indicates the links are part of a group or menu. Screen readers and other assistive technologies are designed to interpret and navigate these elements more effectively, making it easier for users with disabilities to understand the content and navigate between the links.

  ---

  • Here's an example of how you could restructure the code using ul and li:

  <ul class="link-container">
      <li>
         <a href="#">Github</a>
      </li>
      <li>
         <a href="#">Frontend Mentor</a>
       </li>
      ...
  </ul>
  

  ---

  • In this structure, the ul element represents the overall group of links, and each individual link is wrapped in an li element, indicating that they are part of the same list or menu.

  ---

  • While it may seem like a minor change, using the appropriate semantic elements for navigation and menu structures can significantly improve accessibility and usability for users with disabilities or those who rely on assistive technologies.

  ---

  • If you have any questions or need further clarification feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1