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:
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>
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
The Templates > Breadcrumb is an H1 and shouldn't be
Solution: Make this a
Edit button on Review your message
Solution: Change the text of the button to Edit this template to provide more context
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
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).
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.
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:
Replace Acronym Tags (e.g.,
<acronym>)Solution: Replace acronyms with fuller descriptions or provide context with visually hidden text.
Example:
Change the breadcrumb to go back to Templates on the Review your Message page
The Templates > Breadcrumb is an H1 and shouldn't be
Edit button on Review your message
Screen reader not picking up Last edited (X) months ago message
Time zone has an underscore
Image alt for recipient list icon
Acceptance Criteria:
This issue serves as a general task list for minor accessibility improvements. More items can be added as needed.