Responsive Order Summary Card using Tailwind CSS and Flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  This comment was deleted over 1 year ago

  0

  ---

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @0xAbdulKhalid

  I needed to use a landmark instead of a <section> tag. The accessibility issue was fixed when I used the <header> tag. It was not a background image issue. Still, thank you for your feedback.

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @ecemgo

  • Actually the <header> element represents introductory content, typically a group of introductory or navigational aids.

  ---

  • It may contain some heading elements but also a logo, a search form, an author name.

  ---

  • But here, You used it for just an image with absolute positioning, it's a bad practice. It will cause severe accessibility issues.

  ---

  • Applying the image as background for body is enough to make our code accessible for screen reader.

  ---

  • In the end choice is yours, if you will to lack accessibility then go ahead use sementic element for non-semantic purposes.

  ---

  Hope am helpful !

  0

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @0xAbdulKhalid

  Thank you for your suggestion on how to implement the design feature but I would like to clarify that I am currently using Tailwind CSS for this project. Thus, I'm sure that the method you suggested works well with Pure CSS, but I am unable to modify the CSS file in the way you proposed with the Tailwind CSS framework.

  0