Responsive 3 Column Preview Card

Community feedback

• 

  Liam Tanfield•260

  @TanDevv

  Posted over 2 years ago

  Hi, Gerald. Really good work on this one! I only see a few things I could suggest :)

  Try to only have just one <h1> per page. You could also replace all h1 with <h2> instead and make a h1 titled "3 Column Preview Card" visually hidden so it does not appear on your page but will still be called out by screen readers.

  • (For more information on how to set visually hidden elements, you can read this article by Webaim)

  With your <img> elements, I would suggest leaving the alt blank as they do not have any meaningful content due to being decorative, so screen-readers will avoid calling them out. Also because you have put them in a img tag, screen-readers will already specify that it is an image, so no need to put "icon" or "icon of" etc..

  Because the buttons are labeled as "Learn More", these are better fitted into an <a> tag as they will lead the user to somewhere else. Normally <button> tags are for actions, for example on the current page : validating/resetting a form, showing a modal... While <a> tags are for links and navigation between pages or views.

  Lastly, I would suggest you try to avoid using px units for everything, especially font sizes. They are not accessible when it comes to users who may increase the font size via their browser. Try using em or rem instead as they adapt to browser zooming and are more friendly towards accessibility. Px units are usually best suited for when you want something very specific, decorative elements like borders, border radius or box shadows for example.

  • (For more information on using units and which are best for what, Kevin Powell does a great video explaining a few of them)

  Other than those suggestions, you did a great job on this project, well done!

  11

  Marked as helpful