Send Message A11Y Audit - Small changes

[jonathanbobel]

Issue: Small Accessibility Improvements

Problem:
There are several small accessibility issues in the Send Message flow that need attention to improve usability and alignment with WCAG standards. These changes will ensure a more inclusive experience for all users, particularly those relying on assistive technologies.

---

List of Changes:

1. Replace Acronym Tags (e.g., <acronym>)

   • Problem: Screen readers pronounce acronyms like "CSV" or "TSV" in a halting manner, making it difficult for users to understand.
   • Solution: Replace acronyms with fuller descriptions or provide context with visually hidden text.
     Example:

     <!-- Before -->
     <acronym title="Comma Separated Values">CSV</acronym>
     
     <!-- After -->
     <span aria-label="Comma Separated Values">CSV</span>

2. Change the breadcrumb to go back to Templates on the Review your Message page

   • Problem: Just having a link that says Templates could be confusing to any user but especially those who use AT
   • Solution: Add a Back to All Templates link to the top of the page

3. The Templates > Breadcrumb is an H1 and shouldn't be

   • Solution: Make this a and style accordingly with utility classes if needed. Additionally, remove id=page-header (make sure to address this issue and rename if it's tied into tests or any additional code)

4. Edit button on Review your message

   • Solution: Change the text of the button to Edit this template to provide more context

5. Screen reader not picking up Last edited (X) months ago message

   • Problem: VoiceOver just says "Last edited..."
   • Solution: Change the code to make sure the full text is read. It's inside a element, so that is probably the issue.

6. Time zone has an underscore

   • Problem: Default selection is America/New_York as the Time Zone - screen readers read the underscore
   • Solution: Make all time zones screen-readable (no underscores).

7. Image alt for recipient list icon

   • Problem: alt is just "Description Icon"
   • Solution: Just have an empty alt here (alt=""), as it's decorative

---

Acceptance Criteria:

• Acronyms like "CSV" and "TSV" are updated to use accessible alternatives, ensuring screen readers pronounce them clearly
• Add "Back to all templates" link at the top of Review your message page
• Change the Templates breadcrumb into a nav area with an aria-label of an H1 and remove the id
• Change edit button text to Edit this template
• Adjust full "Last edited..." text to be read by a screen reader like VoiceOver
• Remove underscores from Time Zone list in the DOM so screen readers and visual users don't hear/see them
• Remove "Description Icon" alt text and just have it an empty alt text

---

This issue serves as a general task list for minor accessibility improvements. More items can be added as needed.