Mobile First Approach, CSS Flexbox, HTML5 , SASS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Saleh ,

  You are welcome.

  For your question:

  .sr-only means "this content is visible only to screen readers". If you are using the site with working eyes, you don't apply. Try using the site blindfolded which obviously requires using some kind of aids to make it possible; the .sr-only content is meant to aid users without vision. This is called accessibility and within EU it's no longer optional but required by a directive.

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

  the link that is wrapping the equilibrium image should tell the screen reader users where the link takes . There are different ways to do that:

  1 - The text alternative for the image should convey the purpose of the image, rather than a description of the image.

  2 - The alternative text would be empty with aria-hidden : true and and aria-label= "...." to the anchor <a> tells the user where the links takes or instead of aria-label use a text of class sr-only.

  Hopefully this makes it clear.

  Marked as helpful

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @PhoenixDev22 You mean the use of sr-only is like this:

  <div class="image">
    <a href="#">
        <img src="...." alt= " " />
        <span class="sr-only"></span>
    </a>
  </div>
  

  or did I get it wrong?

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Honko-o That’s right .

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Saleh ,

  Congratulation on completing this frontend mentor challenge.

  I have some suggestions regarding your solution:

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

  • <svg> 's do not add important information to a document should be considered decorative. You can use aria-hidden="true" to hide the SVG from screen readers. focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.in(icon-ethereum, icon-clock ).

  The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • The avatar's alt should not be author image, It's meaningless. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • To use more semantic tags , you can use <ul> to wrap class="nft-price-info"and in each <li> there would be<svg>and <p>. You can use <figure> and <figcaption > for the avatar's part.

  General points :

  • Changing base html size. This has huge accessibility implications for those of us with different font size or zoom requirements.

  • In line-height: 1rem;use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

  • Nesting css selectors is not really a good thing . Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @PhoenixDev22 Thank you Phoenix ❤😍🥰 this is the Second time you gave me such a helpful and beneficial Comment that has a lot of what I don't know.

  "(The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.)" I was wonder what is "sr-only" because I tried searching it but it's too vague to me. I did fix the line-height to pixels. I will fix the .nft-price-info structure later. and I would like you to review the code again if that doesn't bother I did some modifications with the things you said.

  0