Mobile-first responsive design using Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Ruben!

  I have some feedback on this solution:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • Alternative text on images should be human-readable (not hyphenated). You can read this Ultimate Guide about alt-text by Axess Lab.
    • 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. In this case, all images are decorative only.
    • Always wrap text content with meaningful tag (p). Use span and div for styling purposes only.
  • Visual
    • The box-shadow on the Proceed Payment button and the card are too dark.
  • Best Practice
    • Put all your styling on a separate CSS file. This is important to not mix the markup and styling (and the functionality (JavaScript) ). External CSS will allow you to maintain your styling more easily especially when doing bigger projects like landing pages or multi-page websites.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  RubenRibeiro13•140

  @RubenRibeiro13Posted almost 3 years ago

  Hello Vanza!

  Yes, your comment was very helpful and I appreciate the amount of detail you put into it! Also, I apologize for taking so long to answer 😖.

  As for the accessibility points, is adding aria-hidden="true" not enough to make screen reader ignore the images?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @RubenRibeiro13 Yes, it is enough. The normal way is to just have an empty alt="" is already enough. But unfortunately, the Apple screen reader (VoiceOver) still pronounces the images with empty alt. So, to make sure that doesn't happen, I recommended you also add aria-hidden.

  Hopefully, this answers your question! Also, I’m sorry it’s taken me so long to answer. I was having a vacation with my family.

  Marked as helpful

  1
• 

  Ediongsenyene Joseph I.•1,675

  @IEdiongPosted almost 3 years ago

  Hi @RubenRibeiro13, this is almost pixel perfect. Great job.👍️

  0

  ---

  

  RubenRibeiro13•140

  @RubenRibeiro13Posted almost 3 years ago

  Hello @IEdiong. This challenge took me a lot of work since it was my first one, so I appreciate your kind words. 😁

  1