@Alex-Archer-I
Posted
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 =)
@Carson-Haskell
Posted
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)
- In the article below, the author makes the case for
nav
with nesteda
tags instead oful
nested withli
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
@Alex-Archer-I
Posted
@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 =)