On the children review table and the review/edit screen, multiple edit and delete buttons share identical labels. Screen reader users cannot distinguish which row or section each button corresponds to. During user testing, tester A (JAWS, Firefox, Desktop) encountered a table of children with multiple identical edit and delete buttons and recommended unique labels: "Those edit buttons should probably say Edit AA… Edit A, Edit B. Because you have multiple buttons with the same label on the same page". In session 2, he encountered the same issue on the review screen with section edit buttons: "Edit button, edit button, edit button, edit button". He recommended each say the name of the section, e.g., "edit e-signature": "I definitely would make sure those buttons all say edit in the name of… you know, edit e-signature". He noted this is a known WCAG concern: "Whichever the criterion, it's like, when you have a whole bunch of the same label".
Append the name of the associated item or section to each button's label so screen reader users can distinguish between them. For example, on the children review table, "Edit" should become "Edit [child name]" and "Delete" should become "Delete [child name]". On the review/edit screen, each section's edit button should include the section name, such as "Edit e-signature" or "Edit case information". This can be done with "aria-label" or by adding visually hidden text inside the button element. The visible button text can remain "Edit" for sighted users while the accessible name provides the additional context.
See A11Y-26.
See A11Y-26.