Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive social links profile using flexbox

P
edpau 240

@edpau

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am proud of my efforts to improve accessibility. I used aria-label attributes to enhance the experience for visually impaired users. I ensured that screen readers would inform users when a link opens in a new browser tab, without adding redundant visible text that could clutter the interface for sighted users.

If I were to approach this project again, I would explore additional accessibility features.

What specific areas of your project would you like help with?

  • Please comment on the semantic html structure I used.
  • Please suggest accessibility features I should explore.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hey!

You did quite good work with semantic and accessibility!

The only things that could be improved in semantic - is a list of the links. I mean you can put links inside ul and li elements. Also the aria-label attributes aren't necessary here - the screen reader can read the text inside the link.

I wonder, what the purpose of the rel attribute in the links? Never have seen them before =)

Marked as helpful

0

P
edpau 240

@edpau

Posted

@Alex-Archer-I Thx for the comment, I will make the links into a list.

I am using aria-label to notify screen reader user a new page will be opened, while not affecting sighted user, as reading the text inside the link will not warn screen reader, they will not know a new page will be opened. Please advise how it should be handled.

rel attribute, is for older version of browser, prevent "reverse tabnabbing" attack when using target=“_blank”. I guess it is not used in modern code?

1
Alex 3,130

@Alex-Archer-I

Posted

@edpau

You know, I've never thought about how opening the new tab could affect accessibility. So, I read a few articles about it and you're right - there should be warning about it. Thank you =)

Also I read that it is generally considered a best practice to almost never open links in new tabs or windows and to allow users the choice to open links in new tabs or not (which they can do by right-clicking the link and choosing to open a new tab or via a keyboard shortcut), so maybe target="_blank" isn't really necessary there?

But it is still good to learn how to handle the cases when you can't avoid it.

As for rel - yeah, I guess that the percentage of browsers it supports is insignificantly small. I can't say that I have a lot of experience, but as I said I've never seen it in the wild =)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord