Skip to content
OverviewSolutions
50
Comments
4

abizmo

@abizmo910 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • abizmo•910
    @abizmoPosted about 2 months ago

    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.
    0
  • samsimsan•50
    @samsimsanSubmitted about 2 months ago
    What 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.

    Contact form with a new ui!

    #react#typescript#zod#tailwind-css
    1
    abizmo•910
    @abizmoPosted about 2 months ago
    • 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.
    0
  • Kauê Lima•290
    @KaueACLimaSubmitted 12 months ago

    FAQ Accordion

    #accessibility#angular-material#astro#bootstrap#chart-js
    1
    abizmo•910
    @abizmoPosted about 2 months ago

    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.
    0
  • Robbie Tambunting•150
    @rtambuntSubmitted 3 months ago
    What 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?

    Interactive Rating Component | React ⚛️ + Tailwind

    #react#tailwind-css
    1
    abizmo•910
    @abizmoPosted about 2 months ago

    You'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
    1