Product preview Chanel

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted almost 2 years ago

  Hello Martin,

  to improve the accessibility of your web page, I would consider some changes.

  Alternative text for images

  You should avoid using words like "image", "photography", "graphic" etc. for alternative text, because screen readers already do the job announcing images as images. In your case the image would read out as "Product image of Chanel perfume Gabrielle image". Something like "Chanel perfume Gabrielle" would be more appropriate.

  Semantic HTML5

  Generally, it's not recommended to use the "role" attribute. Especially when you can use the respective semantic elements instead. So, instead of <div role="main"> you should use "<main>". Also, specifying a role for a button is equally unnecessary, as a button element is already exposed with an implicit button role.

  ARIA attributes

  The add-to-cart icon should be hidden for screen readers, because it has no additional meaning. You can do that by simply adding aria-hidden="true" to the SVG. Just keep in mind to use ARIA attributes with caution, because the support for it varies among browsers and screen readers and is not as reliable as plain HTML solutions.

  Furthermore, I see that you have hidden the div with the class advert-text by setting display: none !important. Does this have a particular reason? By all means, using !important is widely considered as a bad practice and will most likely cause specificity issues. Try to avoid that whenever possible.

  I hope this will help you to apply accessibility techniques with more confidence.

  Keep up the good work!

  Marked as helpful

  0

  ---

  

  Martin•40

  @MCotonPosted almost 2 years ago

  @dusan-b Hi, that's very complete and considered answer, thank you for taking the time to respond. I will be applying your advice from now on!

  Can I ask though, where did you see the markup display: none !important ? It isn't in my stylesheet.

  0

  

  Dusan Brankov•860

  @dusan-bPosted almost 2 years ago

  @MCoton Hi, I'm glad I could help. I have just noticed that my browser extension uBlock Origin is causing the container to be hidden. This is only because the class name contains the word "advert", wow. When I change the class name in dev tools, the content is displayed normally again. Interesting... I would maybe consider changing the class name to avoid excluding users like me from accessing the page content. :)

  Marked as helpful

  0
• 

  lissajous-laser•320

  @lissajous-laserPosted almost 2 years ago

  Also, could I have solved the alignment of the prices without resorting to "flex"?

  I don't think there is anything wrong with using flex. For instance, flex is great for centering even with only a single child element. But other ways to get the spacing are:

  • Using margin-right on the left price (conversely, margin-left on the right price).
  • Setting the left price to display: inline-block and set width to be wide enough to cover the content and the spacing.
  • Setting the parent element of the prices to display: grid and setting a column-gap.

  0

  ---

  

  Martin•40

  @MCotonPosted almost 2 years ago

  @lissajous-laser Hey, thanks for your feedback. I'll look at implementing your suggestions in my next challenge.

  1