Some modals open content in a new tab without warning the user, which is an accessibility issue for vison-impaired/screenreader users. In general, it is best practice to have links open in the same tab when possible to avoid disorienting the users.
For better accessibility compliance, we need to do one or more of the following:
Do not open links in a new tab.
Warn users using text associated with the link itself.
Include the warning in the modal text prior to the yellow "edit" button that appears on most modals.
Vessela would prefer to maintain links opening in new tabs and incorporate option 3. to this end, I recommend that we do a mix where possible.
Error modal:
For Error screens, which do not have dedicated yellow "edit" buttons, the warning should be in-line as part of the link text.
Screenshot from Figma:
Standard editing modal:
For standard editing modals, alter the text prior to the button to say You will be redirected to this system in a new tab.
In addition, we should also make sure to include screen-reader only aria labels that say edit [item] in a new tab for the the yellow "Edit" buttons for the standard modals. For the example below, the aria label would be edit introduction in a new tab (@UcDust I believe this to be the correct approach for this, please correct me if I am wrong).
Vensberg
commented
2 days ago
Some modals open content in a new tab without warning the user, which is an accessibility issue for vison-impaired/screenreader users. In general, it is best practice to have links open in the same tab when possible to avoid disorienting the users.
Accessibility Reference: https://www.w3.org/TR/WCAG20-TECHS/G200.html
For better accessibility compliance, we need to do one or more of the following:
Vessela would prefer to maintain links opening in new tabs and incorporate option 3. to this end, I recommend that we do a mix where possible.
Error modal:
For Error screens, which do not have dedicated yellow "edit" buttons, the warning should be in-line as part of the link text.
Screenshot from Figma:
Standard editing modal:
For standard editing modals, alter the text prior to the button to say
You will be redirected to this system in a new tab.In addition, we should also make sure to include screen-reader only aria labels that say
edit [item] in a new tabfor the the yellow "Edit" buttons for the standard modals. For the example below, the aria label would beedit introduction in a new tab(@UcDust I believe this to be the correct approach for this, please correct me if I am wrong).Screenshot from Figma: