Space Tourism challenge using React

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted 6 months ago

  Salaam Alaikum 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution contains a minor semantic mistake which may cause accessibility issues in real world use cases.

  ---

  • The bellefair-subheading-2 entire content is written in caps,

  <p class="bellefair-subheading-1">
     <span class="bellefair-subheading-2">AVG. DISTANCE</span>
     225 mil. km
  </p>
  

  ---

  • It’s not great for screen readers, because uppercase text will be read out as individual letters (like abbreviations). For example: CSS can read as C.S.S. Just as AVG. DISTANCE would be read as A.V.G.D.I.S.T.A.N.C.E, not as the word AVG. DISTANCE

  ---

  • You can read more about that in this article on Medium

  ---

  • Instead we can use text-transform: uppercase to transform the word into all caps.

  ---

  • And another thing to note, you can't just add Avg in markup instead of adding that you can use abbr element with title attribute to assist accessibility devices.

  ---

  • The resulted markup would be like this,

  <p class="bellefair-subheading-1">
     <span class="bellefair-subheading-2">
        <abbr title="Average">Avg.</abbr> Distance
     </span>
     225 mil. km
  </p>
  

  • If you have any questions or need further clarification then feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Noha Waheed•230

  @nohawaheedPosted 6 months ago

  @0xabdulkhalid Walaikum assalam, thanks.

  0