Design comparison
Solution retrospective
All feedbacks are welcome :)
Community feedback
- @Finney06Posted over 1 year ago
Hello there 👋. Good job on completing the challenge !
Here are some suggestions regarding your code that may be of interest to you.
HTML 🏷️:
To clear the Accessibility report:
-
Wrap the page's whole main content in the
<main>tag. -
Always avoid skipping heading levels; Starting with
<h1>and working your way down the heading levels (<h2>,<h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. -
Use HTML5 semantic elements such as
<header>,<nav>,<main>,<aside>, and<footer>to define these sections. -
Use ARIA landmarks such as
<header role="banner">and<footer role="contentinfo">to provide additional information about the purpose of each section to assistive technologies.
Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
Marked as helpful0 -
- @vanzasetiaPosted over 1 year ago
Hi, Abdullah! 👋
I recommend showing the background patterns with CSS
backgroundproperties. To be specific, I recommend making them as background images of the<body>element.I recommend creating the toggle button with two radio inputs. Also, make sure each radio input gets labeled. This way, the users can toggle the price by clicking the labels—annually and monthly.
For the line, I recommend using
borderproperties. This way, you can make the HTML simpler by removing all<hr>elements.I suggest making the type of the pricing heading elements, specifically
<h2>. As @Finney06 has mentioned, you should not skip heading levels.Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.
Dive deeper — How-to: Accessible heading structure - The A11Y Project
I hope this helps. Happy coding! 😄
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord