Responsive Design & Accessibility Enhancements for Application Form

[stmcpeters]

Description

This task focuses on making the Techtonica application form fully responsive and accessible across different devices and screen sizes. This includes implementing CSS media queries to ensure proper layout adjustments, improving focus states for keyboard navigation, and adding necessary ARIA attributes to enhance screen reader compatibility.

Why This Is Important

• A responsive form prevents layout issues on smaller screens, ensuring all users can interact with it easily.
• Adding ARIA attributes and focus states makes the form usable for screen readers and keyboard users.
• Ensures that applicants with disabilities or those on mobile devices have equal access to the application process.
• Maintaining a polished and accessible design reflects Techtonica’s commitment to inclusivity and best practices.

Acceptance Criteria

• Implement media queries to ensure the form displays well on all screen sizes.
• Improve accessibility with ARIA attributes, proper focus states, and keyboard navigation.
• Form is responsive and displays correctly on various screen sizes
• Submit a PR that merges into the mvp branch, not develop

Related Tickets

Main Issue: Techtonica Application Form Implementation #389

[stmcpeters]

Update: I have picked up this issue for this sprint!

[stmcpeters]

Update: Waiting for the implementation and styling of the multi-page application form to be completed (#556). I'm planning to add responsiveness and ARIA labels for accessibility, but I want to avoid working over the same code to prevent conflicts.

[stmcpeters]

Update: PR #556 has been completed and merged into mvp. I will start on this ticket ASAP

[stmcpeters]

Update: I have drafted a PR for this issue