FAQ using ReactJS and also Mobile-First approach fordesign

Community feedback

• 

  KamRan•370

  @comendrunPosted over 2 years ago

  dear Vanza (@vanzasetia) can you please help me with this? I get a lot of accessibility problems in ReactJS apps and I don't why is it. I tried to read the suggested document about it but I couldn't understand, unfortunately. they're about landmarks on the page

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @comendrun You need to wrap all the elements with main element except for the attribution.

  So, since you are using React (which I don't know anything about it 😆) I suggest swapping the div with the container class to a main element.

  After you fixed that and generate a new report all the issues should be gone.

  Let me explain why it fixes the issue.

  • Document should have one main landmark - it means that any website should have one main element. So, it's a necessary thing to wrap the main content with the main element which in this case, all the content of the card element.
  • All page content should be contained by landmarks - it means that all HTML elements (e.g. p, headings, img, ect) should be wrapped by either header, main, or footer. header for internal navigation, main for the main content of the page, and footer for the attribution, secondary navigation, copyright, etc.

  Hope this helps you solve the issue.

  Marked as helpful

  0

  

  KamRan•370

  @comendrunPosted over 2 years ago

  @vanzasetia thank you very much for this dear Vanza. I kind of knew it's about having a main tag on the page but my main problem was that usually, we don't use this tag in the React app. maybe I'm wrong I will try that and hope it helps thank you again for the time and comment dear Vanza

  0