Responsive social links profile using flexbox

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  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•440

  @edpauPosted 3 months ago

  @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-IPosted 3 months ago

  @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