Accessibility Enhancements for Application Form

[stmcpeters]

Description

This PR addresses #614 which aims to enhance the accessibility of the current Techtonica application form templates. This includes adding ARIA attributes and focus states to make the form usable for individuals using assistive technologies (e.g., screen readers, keyboard navigation, etc.)

Changes Made

• Improve focus states for keyboard navigation by refactoring form to use more semantic elements and tabindex when needed
• Add necessary ARIA attributes to enhance screen reader compatibility
• 6f41ed3 Ensures interactive elements show a pointer cursor on hover to follow best practice for visual cues
• 46be59e Adds "Skip to main content" link in the base.html to improve accessibility; styled to be initially hidden but visible on focus
• 8489c7d Refactors 'Learn More' accordion sections to buttons to improve accessibility (instead of the original div element)

Screen Recording of 'Skip to main content' Feature

Screen.Recording.2025-03-18.at.1.30.44.PM.mov

Next Steps

Reviewers: @jsnorek @derekhouck @daaimah123 @kaylahrose @monikkaelyse
Please review accessibility improvements (e.g., ARIA attributes, etc.) made to templates and navigate through application forms, starting with ./app-form-details.html. Please ensure that the form is fully navigable using screen readers and keyboard. Also, review the 'skip to main content' link added to base.html as this may be a sitewide change and provide feedback on the styling.

Acessibility/Screen Reader Testing Resources

• VoiceOver on Mac
• Silktide Chrome extension
• Axe Devtools Chrome extension

Related Tickets

• Parent Issue: Implement basic HTML/CSS layout for the application form #389

[daaimah123]

@stmcpeters what is the status of this PR?

[stmcpeters]

@stmcpeters what is the status of this PR?

still in progress, will be completed next week

[stmcpeters]

Update: I have rebased this branch to include newest application form changes in #595 and have started on this issue

[stmcpeters]

Updates:

• 1c477a8 adds padding to the 'Learn More' buttons when focused on.

Before:

After:

• I attempted to adjust the padding for radio buttons when focused, but I wasn't able to find a solution. The observed behavior—where the focus appears as a larger oval—is a Chrome default, while in Safari, only the radio button itself is highlighted without additional spacing:

Safari:

Chrome:

• I debugged the issue where radio buttons and checkboxes were not selectable or tabbable. I found this Stack Overflow comment explaining how to properly navigate through these elements. Using these commands, I was able to fully navigate and select form elements. Below is a screen recording demonstrating:

Untitled.mov

• I'd love feedback from the Techtonica team (cc: @daaimah123 @MichelleGlauser @kaylahrose @monikkaelyse) regarding the styling and placement of a site-wide "Skip to Main Content" button. I found an alternative approach that prevents the button from overlapping or hiding navigation menu items by pushing content down when the button is focused. Below are:

The current implementation:

Example similar to MDN 'Skip to Main Content'

Screen.Recording.2025-03-26.at.3.25.00.PM.mov

Next Steps:

Per @kaylahrose’s feedback, additional improvements may be needed for the form, such as:

• Ensuring form validation properly triggers error messages when required fields are missing upon continuing to the next page or submitting.
• (Optional for testing) Disabling the form save button when necessary.

I may create new issues to ensure these features work as expected.

[kaylahrose]

Couple of clean up requests, looking great! 🚀

[MichelleGlauser]

I like the solution you came up with for the "Skip to main content" bar. This looks good to me!

[monikkaelyse]

I like the solution you came up with for the "Skip to main content" bar. This looks good to me!

Same!

[monikkaelyse]

@stmcpeters I am unable to select these using arrow keys or enter - can you advise ?

Edit - I had tagged the wrong person!

[mai-repo]

@monikkaelyse Hi Monikka, I wasn't in charge of adding these buttons; this is @stmcpeters ticket. Perhaps they can offer more context to the issue! :)

[stmcpeters]

@stmcpeters I am unable to select these using arrow keys or enter - can you advise ?

Edit - I had tagged the wrong person!

@monikkaelyse can you try using space to select?

[stmcpeters]

Can you please change all color codes to their corresponding sass variables in _settings.scss?

good catch @kaylahrose! I think since the templates are currently using raw CSS, the SCSS variables (like $light-blue) won't be applied unless we compile the SCSS first. This change would be more in scope with moving styles out of templates and into SCSS is covered in the separate tickets (#681 - #689) you have created for that.

Updates:

• 568ec04 updates phone number placeholders to standard format in application forms
• 521c48b implements the newest implementation of the 'Skip to Main Content' button (approved by @MichelleGlauser since it's a site-wide change)
• created issues (Application Form /app-long-text.html Validation Errors Not Triggering Correctly #718 - Application Form /app-additional.html Validation Errors Not Triggering Correctly #722) to ensure each application templates form validation properly triggers error messages when required fields are missing upon continuing to the next page or submitting

Screen recording of new 'Skip to...' button and keyboard navigation demo

Screen.Recording.2025-03-28.at.8.22.51.AM.mov

• 568ec04 updates phone number placeholders to standard format in application forms
• color styles will be converted to SCSS variables (e.g., $light-blue) in tickets #681–#689. these will be compiled into the project’s CSS files using Sass, replacing styles previously defined in templates