It was noted by some members of Donor Services that we should put special attention to the banner accessibility and screen reader compatibility. These are my findings:
Screen reader used: VoiceOver (macOS native screen reader)
Browser: Chrome
- Grouping of amounts is off, making the screen reader detect it as an extra "3 of 3"
- Some elements can be skipped from the screen reader, like this paypal logo. https://phabricator.wikimedia.org/T274584
- The next element in the hierarchy after the main banner message is the footer text of the banner, not the form. https://phabricator.wikimedia.org/T274585
- For some reason the first sentence is being cut off from the rest of the paragraph.
- After clicking Continue in a previous step the focus won't move to the top element of the new step.
- When moving through the amounts and going through the Other field, the amount selected gets overridden by the Other field.
- The iframe in Payments wiki is not self explanatory.
