Would Like feedback please :) !!

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi @Aleroms.

  Glad to help.

  For your question about screen readonly class .sr-only , you can find more here.

  Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.

  Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.

  Hopefully this feedback helps

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Santiago Morales,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • About <h1>it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge, as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then you can swap those <h1> with <h2>

  • In my opinion, the images are much likely to be decorative. 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.

  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

  • There are some unnecessary div’s need to be HTML.

  • On your buttons, add border: 2px solid transparent; to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.

  hopefully this feedback helps.

  1

  ---

  

  Santiago Morales•370

  @AleromsPosted about 2 years ago

  @PhoenixDev22 thank you for your feedback. Nice catch on the <h1> tag, I usually do that but I started on one card and copied the rest. I was wondering, what do you mean by sr-only? I've been looking on google for what that is.

  Also, when do we use buttons vs <a> ?

  1