To-Do List for Accessibility Improvements

General Website Improvements

[ ] Review and address the 58 identified accessibility issues on cstlouidupuis.com.

[ ] Ensure elements behave as buttons using appropriate tags and include a "role" attribute with value "button".
- [ ] Update <div> elements used as buttons with proper button tags or role attributes.
[ ] Include text or "aria-label" attributes for buttons, especially for icon buttons.
- [ ] Verify all button elements have descriptive text or "aria-label".
[ ] Ensure all links have text explaining their destination or an "aria-label" for screen readers.
- [ ] Check and update all links lacking descriptive text.
[ ] Add explanations for links opening in new tabs/windows using "aria-label" or screen-reader elements.
[ ] Confirm each page has exactly one H1 title for screen-readers.
- [ ] Identify and resolve missing H1 titles.
[ ] Review and update HTML titles (H1-6) to include text descriptions.
- [ ] Add alt text or "aria-label" for non-text elements used as titles.
[ ] Ensure titles follow a consistent hierarchy and do not skip levels (e.g., avoid h4 before h3).
- [ ] Review and correct title level usage across the site.

[ ] Verify all interactive elements like links, buttons, and form fields are navigable with the keyboard.
- [ ] Add "tabindex" attributes where needed.
[ ] Ensure interactive elements are surrounded by a visible outline when focused.

[ ] Implement "aria-modal" attributes for active popups to help screen-reader users.
[ ] Add hidden links for keyboard navigation to main landmarks (content, menu, footer).

[ ] Update all images with descriptive alt text, especially for images not just used for decoration.
- [ ] Add missing alt text for elements like <img src="/assets/homePagePhoto-a146e741.png">.

[ ] Ensure the main language of the webpage is defined in the <html lang="en"> attribute.
[ ] Include "role" attributes for elements like <figure> and ensure they provide appropriate descriptions.
[ ] Review and correct use of "aria-hidden" and "aria-expanded" attributes for dynamic elements.

[ ] Verify all form fields have descriptive labels and "aria-label" attributes where necessary.
[ ] Ensure each form has a unique ID and associated LABEL elements for accessibility.
[ ] Implement "aria-required" attributes for required fields to indicate validation needs to screen-readers.
[ ] Update form validation status dynamically using "aria-invalid" attributes.
[ ] Check and connect "aria-describedby" and "aria-labelledby" attributes to valid IDs with text descriptions.

[ ] Confirm all pages have descriptive and unique <title> tags.
[ ] Set the viewport meta tag to allow pinch-zoom for vision-impaired users (user-scalable="yes", maximum-scale={2 or higher}).

[ ] Wrap main navigation in a "nav" HTML5 element or add a "role" attribute with value "navigation".
[ ] Add "aria-haspopup" and "aria-expanded" attributes for dropdown menu items to indicate their state.