3-Column Preview Card Component using Grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting Jelena, Your solution looks very nice . I have few suggestions:

  • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right.(buttons are for actions like opening a modal, submitting a form, toggling an element,)
  • whenever you include interactive elements (buttons, links, inputs, textarea ), make sure you include clearly visible focus-visible styles as well as hover ones .This will make the users can navigate this website using keyboard (by using Tab key) easily. For future use , you should specify the type of button .
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. Ireally hope this feedback helps.

  Marked as helpful

  2

  ---

  

  Jelena Jovičić•180

  @je-joPosted almost 3 years ago

  @PhoenixDev22

  Thank you very much for your feedback!

  I've made all the changes you suggested. I have yet to learn more about the focus-visible styles.

  Thanks again for taking the time to review and provide very informative feedback <3

  1
• 

  darryncodes•6,390

  @darryncodesPosted almost 3 years ago

  Hi Jelena,

  Awesome solution, very responsive - well done!

  You could add cursor: pointer; transition: ease .3s; to your buttons.

  It's worth considering including a screen reader only <h1>, this snippet will help you do it:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  

  Marked as helpful

  0

  ---

  

  Jelena Jovičić•180

  @je-joPosted almost 3 years ago

  @darryncodes

  Thank you very much for your feedback! I've made changes as per your suggestions. I thought about the missing h1 tag, but didn't know I could hide it like this. And the transition looks so much better now, thank you!

  0