Responsive Social Links Webpage with Flexbox

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 28 days ago

  Hello BuildAndBreak

  Your code structure is clean and organized. However here are some recommendations for improving accessibility, SEO, and WCAG compliance:

  Accessibility

  • Alt Text for Images:

  Add a more descriptive alt text for the avatar image, such as "Photo of Tiago Pereira" to enhance clarity for screen readers.

  • Semantic HTML:

  Use semantic tags for improved accessibility and structure. For example:

  <section class="personal-info">
    <!-- Personal information content here -->
  </section>
  

  • Link Descriptions:

  Addaria-labelattributes for the social media links to provide screen readers with more context, especially if these links contain icons or brief text. For instance:

  <a href="https://github.com/BuildAndBreak" aria-label="Visit Tiago's GitHub profile">GitHub</a>
  

  • Accessible Quote:

  Avoid using quotation marks as stylized text. Instead, add them using CSS, or consider using<blockquote> for the quote with a CSS class to style it as desired.

  • SEO Descriptive Title and Meta Description:

  Improve the<title>with more context, such as "Tiago Pereira | Full Stack Web Developer | Social Links Profile". Add a <meta name="description" content="Profile of Tiago Pereira, an aspiring Full Stack Web Developer based in Zurich, Switzerland. Links to social media and developer profiles included.">. Address Element:

  Avoid using<address>for general text; it’s typically for contact information. Replace it with a <p> tag for the location or add a<span>with CSS.

  • Font Loading:

  Add font-display: swap; to avoid invisible text while the custom font loads:

  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">```
  - Focusable Elements:
  
  Ensure all interactive elements (like links) have focus states for keyboard navigation.
  With these adjustments, your code will be more accessible, SEO-friendly, and compliant with WCAG standards. 
  ***Great work on the initial structure!***
  

  Marked as helpful

  0