Responsive Social Profile Links Page

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  This looks good but I'd like to clear up some possible misunderstandings in html:

  • using a header element in this is exactly the same as using a div. Headers are meaningless inside other landmarks unless labelled. This doesn't need labelling or need to be a header as the heading element already provides all that's required for understanding the page content. Its not a problem using it, but it adds no benefit so I'd remove it.
  • this should only have one heading (the person's name). The location doesn't make sense as a heading for all content under it, so should be a paragraph.
  • height and width attributes in html must not include the unit in their value. E.g. It must be height="100" not height="100px".
  • the reason to use height and width attributes on images sometimes is only to let the browser know what aspect ratio of space they should save for the image while it's loading in. So include both height and width, or just use aspect-ratio: 1 in the css to get the same small performance boost.
  • personally I'd consider the image in this as decorative and give it empty alt. If you think it's important/meaningful content then the image needs to be descriptive, not just repeat the person's name which is repeated in the heading straight after it.
  • try to keep html as simple as possible. This is only one card. You shouldn't need a separate wrapper around the text content and another around the list of links. See what you can remove.
  • when links open in a new tab, this non-standard behaviour causes a "change of context" which needs to be communicated in the code so screen reader users are aware they've left the site "(Opens in a new tab)". Usually this is done with some sr-only text in a span in the link, in sr-only pseudo element content or via the title attribute.
  • note the attribution links currently cause 2 WCAG accessibility failures. First they fail minimum contrast requirements (4.5:1 for normal text). Second they are onky distinguishable as links by colour alone. Because you've removed link underlines on an element selector in css instead of only removing it on a class to target the social links, that could make this failure site-wide on a larger website. Links need to look clickable / be clearly distinguishable from surrounding text.

  Marked as helpful

  0
• 

  AlexisParder•70

  @AlexisParderPosted about 1 month ago

  good job

  0