NFT preview card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello ADCByDefault,

  Congratulation on completing another challenge.

  Excellent work!I have some suggestions regarding your solution if you don't mind:

  • The link wrapping the equilibrium image(image-equilibrium ) should either have Sr-only text, an aria-label or alt text on the image that indicates where the link navigate the user.

  • The avatar's alt should not be profile picture . You can use the creator's name Jules Wyvern. Read more how to write an alt text

  Never use <div>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. You can use <p>

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. Remove the <hr>, you can use border-top: to the avatar's part.

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • You may add rel="noopener" orrel="noreferrer"to target="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  CSS

  • width:300px;an explicit width is not a good way. consider using max-width to the card instead.

  • line-height: 1.3rem Use a unitless line-height value to Avoid unexpected results due to inheritance behavior. You can read more in mdn

  • Nesting selectors can lead to specificity problems if you nest too deeply. One problem with overly specific selectors is you have to write even more specific selectors to override them You can read more here

  • Really important to keep css specificity as low/flat as possible. Consider using classes as Classes can be reused

  Aside these, well done . Hopefully this feedback helps

  Marked as helpful

  1

  ---

  

  ADCByDefault•190

  @ADCByDefaultPosted over 2 years ago

  @PhoenixDev22 Very helpful, but i didn't understand the first point. What do you mean by adding "Sr-only" or "aria-label"?? Other than that, everything is clear. Next time I'll keep those thing in mind. ;) Thanks a lot.

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @ADCByDefault You're welcome. At this stage this link contains no accessible name, which is a big problem. Let’s add some descriptive text, that we make visually hidden yet accessible.

  1: sr-only class like this

  <a href="#" class="">  
       <span class="sr-only">....</span>
       <img src="" class="" alt="" aria-hidden="true">
  </a>
  

  OR

  /*In aria-label, you can tell where the link navigates the user  */
  <a href="#" class=" " aria-label=".......">  
       <img src="ima..." class=" " alt="" aria-hidden="true">
  </a>
  

  OR

  /*In alt, you can tell where the link navigates the user */
  <a href="#" class=" ">  
       <img src="ima..." class=" " alt="........" >
  </a>
  

  Happy coding!Hopefully this make it clear

  Marked as helpful

  0

  ---

  

  ADCByDefault•190

  @ADCByDefaultPosted over 2 years ago

  @PhoenixDev22 is "aria-hidden=true" necessary when I use "aria-label=link to .... site"?? By te way sorry for asking so much, I'm new to making things accessible.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @ADCByDefault No problem at all. 1: If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. The alt text should not describe the image. Treat image links as links, not as images.

  2:As there is aria-label, The image does not represent different functionality or convey other information than that already provided in the link text, so a null (empty) value is applied, (alt=""), to avoid redundancy and repetition. To be ignored by assistive technology uses , you add aria-hidden set to true. You can read more here .

  Hopefully this makes it clear. Happy coding!

  Marked as helpful

  1