Social Links Profile

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hey!

  Congrats with your new challenge =)

  I can give a couple of suggestions. I guess there is no need for aria-label tags here. Screen reader would be able to read text content of the link, so aria attributes need when there is no one.

  Than nav isn't really fit there. The purpose of this tag to provide navigation throughout the site or the page. you should use ul tag here with li inside it.

  And I really recommend you to use rem at least for the font size. It's a special units which value depends on browser fonts settings, so it provides better UX and responsiveness.

  Overall, your work is neat, keep doing =)

  1

  ---

  

  P

  Carson Haskell•120

  @Carson-HaskellPosted 4 months ago

  Thanks for the feedback, Alex!! I think I used aria-label in one of my attempts to get the accessibility tabbing to work, and then I forgot to remove it! Yeah, I wasn't sure about using the nav, but also using an ul with li for links felt weird to me and unintuitive. So, I did some research, and this is what I found. I'm curious to hear your thoughts!

  • In this article, they write: "The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes."
  • Because the social profile links are "navigation links," I thought maybe it would make sense, but I still wasn't convinced, until I read the next article (see below)

  MDN Doc

  • In the article below, the author makes the case for nav with nested a tags instead of ul nested with li links.
  • The author writes: "Either method of writing the navigation is valid HTML. However, if you are developing the web to work well for everyone, I recommend removing the unnecessary list element and simply using a nav with nested anchor tags. This makes your markup simpler, while still being valid, and provides screen readers content that is easy to understand."
  • To see an example of how a screen reader would read both, check out the article!

  Using nav without a list element

  Let me know what you think, and thanks again for the feedback!

  Oh, and lastly, I agree about the rem unites. I've always been bad at that and have had a hard time wrapping my head around rem and em units and what they are relative to and all that... I'll familiarize myself with them more! I just used rem in my latest project for the font sizes, thanks to your suggestion!

  @Alex-Archer-I

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @Carson-Haskell

  Oh, sorry, I wasn't very clear =)

  I didn't suggest you to use li element as link (it means "list item"). I was talking about use a inside them. Like this:

  <ul>
      <li><a href="#">It's a link here!</a></li>
      ...and more links here
  </ul>
  

  About the nav part it still seems to me, that it's main purpose to navigate inside one site - and this part says exactly about that Common examples of navigation sections are menus, tables of contents, and indexes.. For sure, nav could contains links cos the site are often have multiple pages, but still it is inner navigation.

  So, I can agree about using nav without ul (especially short one), but still, I guess this is not the case here.

  As for rem - it's value based on the font size of the root element. Default font size of roots in most browsers is 16px, so you can use it for your calculations. em is depends on font size value too, bot it takes it from it's parent element. That why em is less predictable and are used much less frequently.

  And thanks for the articles, they were useful and interesting =)

  0
• 

  Siyam Ahmed•30

  @Siyam1888Posted 4 months ago

  Congratulations on completing the project!

  I really appreciate your use of CSS variables for writing reusable code. Keep it up!

  0