NFT Preview Card

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  Marked as helpful

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in completing this project. Viewing at your solution, I would recommend the following for you...

  • Add cursor: pointer for the hover state of the design. For the hero image, you can refer to this example Overlay in image
  • Remove style tag in the head
  • Clean the whitespaces in the code
  • Include alt with description to img tag
  • Wrap the container with specific tag like main and attribution with footer tag for readability

  Overall, you did good. Hope this helps and Keep it going!

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @newbloom,

  I have some suggestions regarding your solution:

  • Using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So you can use<main> to wrap the body content a <footer >(for the attribution).

  • Anything with a hover style in a design means it's interactive, you need to add an interactive element <a> around the image and Equilibrium #3429 and Jules Wyvern

  • For any decorative images, each img tag should have empty alt="" andaria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images as in alt="view icon" `` Read about how and when to write image alt text and what it's for. .

  • Images must a have an alt text.

  • The link wrapping the original image and either should haveSr-onlytext, an aria-label or alt text that says where that link takes you.

  • The eye image doesn't really need to be in the html, you could do it with css.

  • You can use an unordered list <ul> to wrap class="flex", and in each list item would be <img> and <p>

  • No need for the <hr> , you can use border-top: ; to the class="credit " , Also you can use <figure > and <figcaption> .

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • Never have font size in px. Using px won't allow the user to control the font size based on their needs.

  Hopefully this feedback helps.

  Marked as helpful

  0