@VCarames
Posted
Hey there! 👋 Here is some feedback to further improve your code:
- The
sectionelement is being used incorrectly ⚠️ and not needed for this challenge.
- The “icons/illustrations” in this component are purely decorative. ⚠️ Their
alt tagshould be left blank to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:
To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.
- Everything will be wrapped inside a
fieldsetwhich will have alegendthat is visually hidden using CSS. - Inside, there should be five
input radiosand eachinputshould have alabelattached to it to make the “ratings” accessible. - The last thing you will want to include will be a
buttonso users can submit their choice.
More Info: 📚
If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.
Happy Coding! 🤖
Marked as helpful
@Mirjax2000
Posted
@vcarames your solutions is breath taking.
where can i evaluate HTML rating?
@VCarames
Posted
@Mirjax2000
Do you mean how to get the rating value?
@Mirjax2000
Posted
@vcarames yes
@VCarames
Posted
@Mirjax2000
Give each input the name="rating" and for your JS use const rating = form.rating.value;
Marked as helpful
@Mirjax2000
Posted
@vcarames idont understand this css code for .visually-hidden { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; margin: -1px !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } why not use display: none or opacity:0, or visibility:none
and this code is briliant and i will steal it from you. body { display: grid; place-content: center; background: var(--Main-Background); background: linear-gradient( -45deg, hsl(0, 50%, 1%, 1) 0%, hsl(336, 58%, 14%, 1) 100% ); background-size: 300% 300%; animation: gradient 15s ease infinite; padding: 10px; }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@VCarames
Posted
@Mirjax2000
- The code is for content that is meant to visually hidden but still accessible to screen readers and currently all those properties are currently the standard. Using
display: noneremoves the content entirely. Whileopacity: 0will hide it visually but you will have to take into consideration the space it takes up and position every single item that is hidden. - Thank you 😄
Marked as helpful
@Mirjax2000
Posted
@vcarames i call it "black hole" technique. you took it sqeeze it to 1px send it out of universe and acces it in different reality.
I rework my first attempt into new version over here, now its much more cleaner and js is simple.
https://www.frontendmentor.io/solutions/interactive-rating-kuZsHOxqjo
@VCarames
Posted
@Mirjax2000
😂
