@hrk-berserker27
Posted
Hi there, you did a great job in completing this challenge. Following are some suggestions that you can incorporate into your solution to improve its accessibility and sort out the HTML issues:
- Enclose the content inside the main tag because a web page should have at least one landmark.
- Add the alt attribute to your image tags so that it will remove the accessibility warnings you are getting in your report. For further read, check this article: "https://accessibility.psu.edu/images/imageshtml/";
- Don't use paragraph tag inside button or span tag as it has semantic value. Replace it with span elements or any inline elements such <em> or <i> tags and alter their display to block elements in CSS if needed. Styling tip:
- The box shadow on the card is not in sync with the background. Try changing it or removing it. (It will improve the look remarkably)
- Try using a lighter color for button text for better contrast from its background and adding a little more padding to the buttons.
- Try increasing the card's height or little padding to the bottom of the card (with the box-sizing property set to border-box) because the cancel button seems to be overflowing. *Don't forget to mark it as helpful if these suggestions helped to improve your work.
Marked as helpful