Fully Accessible Contact Form

What are you most proud of, and what would you do differently next time?

I'm most proud of how closely I matched the original design — both in terms of layout and colors — and how I implemented full keyboard accessibility and screen reader support. The form not only looks great but is also usable by all users, including those with assistive technologies.

If I were to do this again, I would modularize the JavaScript better and consider using a more scalable structure like a component-based framework (e.g., React or Vue). I’d also explore writing automated accessibility tests using tools like Axe or Lighthouse.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was recreating the success “toast” animation exactly as shown in the design. I had to carefully adjust positioning, transitions, and timing to make it match visually. I used Toastify JS and customized the styles to closely replicate the design provided.

Another challenge was handling validation messages while ensuring accessibility. I used ARIA live regions and custom JavaScript to ensure screen readers can announce errors and success messages properly.

What specific areas of your project would you like help with?

I’d love feedback on:

Whether the toast notification is screen-reader-friendly enough

Suggestions for improving JavaScript structure and modularity

Any advanced ARIA practices that could further enhance accessibility

Optimization techniques for cleaner CSS or better responsive behavior