Latest solutions
Crowdfundig product page with react, tailwindcss and shadcn
#react#shadcn#tailwind-css#zod#react-hook-formSubmitted 3 months ago
Latest comments
- @wait4ndbleed@abizmo
Overall, the structure is solid, and the code is clean and readable. Main areas to improve:
- Enhance accessibility (better alt texts, focus states, and ARIA attributes).
- Improve image responsiveness for larger screens.
- Refine mobile menu behavior to ensure it works seamlessly.
- @samsimsanWhat are you most proud of, and what would you do differently next time?
I wasn't really happy with the default UI in the challenge, So searched through pinterest for ideas and completed this challenge.
Main thing I wanted to showcase here was the ability to use Zod for form validation.
@abizmo- Check responsiveness on smaller screens—ensure margins and padding adjust well for readability.
- Consider adding client-side validation and error messages for better user experience and accessibility.
- Consider adding 'aria-label' or 'title' attributes to buttons for screen reader users who may need additional context.
- @KaueACLima@abizmo
Great use of HTML structure, responsive design, and semantic elements! Improvements to make it even better:
- Enhance accessibility with aria-expanded, aria-hidden, and keyboard navigation.
- Use <h2> instead of <button> for the question titles:
<h2> <button class="accordion-btn" aria-expanded="false" aria-controls="answer-1"> O que é Frontend Mentor e como ele me ajudará? </button> </h2>
- The answer <div> should have aria-hidden="true" by default and be toggled when expanded.
- Fix duplicate id (accordion-btn) attributes for the accordion buttons.
- @rtambuntWhat are you most proud of, and what would you do differently next time?
I tried to focus on small accessibility improvements in this project:
- Writing descriptive, concise alt tags
- Semantic HTML
There weren't many optimizations for a small project like this, but it was a good first exposure to accessibility
What specific areas of your project would you like help with?I'm vaguely familiar with aria-labels. When exactly should I use them and how?
@abizmoYou're very close to a polished, high-quality solution! The main areas for improvement are:
- Semantic improvements: Replace <div> rating buttons with <button>.
- Accessibility: Add aria-labels and improve focus styles.
You should use aria-label when an element's purpose or function isn't clear to screen readers based on its text content or structure. Examples:
- When an Icon Represents an Action
- When the Visible Text is Not Descriptive
- When There’s No Visible Text