A Responsive 3-Column Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Viraj Chavan,

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

  • You can use the <main> landmark to wrap the body content (which is the three cards) as using landmarks is important to improve navigation experience on your site for users of assistive technology.

  • 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 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.

  • line-height: 1.5rem;Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Viraj Chavan•100

  @viraj308Posted about 2 years ago

  @PhoenixDev22 I read about aria-landmarks and semantic tags and it felt overwhelming . Just wrapping the whole container in the main tag doesn't seem to solve the issue. How do I approach HTML landmarks? Any tips? Thanks for the useful info.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @viraj308 Glad to help. I didn't get your question, Can you please explain more what mean it does mean to solve the issue When you wrap the whole container using landmark?

   <main>
        <div class="container">
          <div class="item item1">
                   ...
           </div>
               .....
  
    </main>
  

  Marked as helpful

  0

  

  Viraj Chavan•100

  @viraj308Posted about 2 years ago

  @PhoenixDev22 It solved the issue.. Thanks! Last time I forgot to generate a new report on the code and was stuck with the old accessibility issues.

  0

  

  Viraj Chavan•100

  @viraj308Posted about 2 years ago

  @PhoenixDev22 How do I hide h1? display: none?

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @viraj308 Using class="sr-only " , you can find it here

  Marked as helpful

  0