Product Preview Card Component

Hello Angel Lam. Great Job completing this challenge 🎉🎉🎉.

I will try to answer your questions to the best of my abilities.

• A section wraps a bunch of closely related content. For example on a landing page you could have a hero section , then a features section, etc... In this project using an article is a good choice in my opinion because this is self-contained content but you should replace the sections with some divs. As you know a section should always have a title. Depending on the structure of your page it could be h1 (if you have only one section), h2, h3 etc. If the design does not show a title because the content is self-explanatory for sighted users you should add one anyway for screen-readers and give it a visually-hidden or sr-only class.

Here is an example:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

• aria-label is used on an element that as a meaning that is obvious for sighted users but contains no descriptive text. For exemple an hamburger button to toggle a mobile menu. You know that it is the menu because you can see the icon but imagine that you can't see. Then this is just a button with nothing inside. You could add an aria-label saying "toggle mobile menu" and now it makes more sense. You could also use a span with the sr-only class I showed you which gives the same result.

• aria-labelledby is used when the descriptive text for an element is placed somewhere else in the code. It is a reference to the id of the element containing the description. For example you could have input and link it to its label.

• The div element is a tag that you use only to style something. You could use it to apply flex or grid, etc... Anything that is only related to layout and styles. It has no semantic meaning and is useful when nothing else makes sense.

Hope it helps. Again, good job and happy coding 😊