Single-page design portfolio

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  I'm afraid the carousel is inaccessible in this. It's essential to test any solution you do with keyboard. Here, all accessibility issues appear to stem from HTML:

  • The logo would not be called "logo image". It already has an image role. The logo should say the name of the site. It's also a common convention for the logo to be wrapped in a link that has an accessible name including the link destination. E.g. aria-label="[Site name] - Home page". In this case as it's a portfolio site the site name is likely to be the person's name.
  • There is no nav needed inside the header. It only contains one link, which does not constitute a site navigation.
  • The hero section belongs in main not header. The header is a banner landmark. That means it must contain content that repeats across all pages in a site or journey. There shouldn't be any page-specific content inside it.
  • I would consider all of the images inside the hero grid to be decorative (i.e. have empty alt) to give an equal experience to screen reader users. By adding long descriptions like this, you're adding a huge amount of unnecessary information those people will have to listen to and process. Also remember that image alt descriptions must not include words like "image" because they already have an image role which is announced.
  • Note if you want links to respect things like margin properly they need to be made inline-block (not a problem, just a reminder).
  • I'd expect the quote from Amy to be in a blockquote. Again, this doesn't really make much difference as it's ignored in accessibility terms, but may make the code a little clearer that the element is intended for that content. Only a small suggestion.
  • Thew "my work" images are really important content so must have proper alt descriptions! Otherwise the whole section becomes meaningless.
  • I recommend you look up how to build an accessible carousel and make sure you understand all of the requirements.
  • I think My Work and Book headings are not at the right heading level. I would expect them both to be h2s, although "my work" could be considered a h3.

  0