Section 508 (ADA) issues with the Subscribe To Updates widget

[Jeremy Cron]

I have two issues:

1.) When the Subscribe to updates button is expanded the tabs across the top are not accessible via the keyboard ie tabbing. See this link for an explanation: https://www.ssa.gov/accessibility/andi/help/alerts.html?link_click_no_keyboard_access

2.) There is some content not available to screen readers because of a ::before or ::after. See: https://www.ssa.gov/accessibility/andi/help/alerts.html?pseudo_before_after

I'm using the ANDI accessibility tool to test from here: https://www.ssa.gov/accessibility/andi/help/install.html

Any thoughts on how to approach this?

[Matthew Brennan · Accepted solution]

Hi @Jeremy Cron I'm a program manager on the Accessibility team.

Thanks for raising these concerns. In the future, feel free to raise these issues directly with the team via our Accessibility Support Service Desk

For the issues in question. The tabs are accessible but there is a known issue with keyboard focus not shifting after you activate the control.

Currently, after you activate the 'Subscribe to Updates' button, keyboard focus does not automatically shift to the tab list (We have raised this internally as an issue so we can get it resolved). Pressing TAB a second time will move focus to the tab list and you are then able to navigate the tabs with the left and right arrow keys.

For the second issue, that is definitely something we need to address. We recently performed a deep audit of our Statuspage product and the team is currently working on addressing the issues found in that audit. I'll have our QA team follow up to make sure this issue is captured as a known issue, otherwise create a new ticket so it is added to the backlog.

As Tyler pointed out, although ANDI throws a violation here - and rightly so - the button is still accessible to screen reader users via the aria-label accessible name. 

As for the second pseudo class content on the scheduled maintenance time strap, that also needs to be resolved and we will follow the same QA process as above.

I hope this helps, if you have further questions, feel free to add them here or open up a ticket with the team directly via the Accessibility Support Service Desk

Thanks

[Jeremy Cron]

I see, this is working for me although I'm not sure how I missed this before.

Thanks

[Tyler T · Accepted solution]

Hi @Jeremy Cron , welcome the the Atlassian Community.

Can you share a link to the statuspage you are referring to?

1. The tabs can be accessed using the arrow keys. Tab is used to access content within each tab. This follows the ARIA spec outlined here: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
2. Which content is inaccessible because of pseudo elements? We can investigate if you provide more information.

Thanks for contributing to the Community! Accessibility is a top priority for Atlassian, you can read more here: https://www.atlassian.com/accessibility

[Jeremy Cron]

Thanks for the reply. The statuspage is: https://gov-status.getmindful.com/

1) Arrow keys would be fine, but I'm not able to use the arrow keys either. I would expect to be able to switch between the email, slack, support, and close 'tabs'.  I'm using the latest Chrome on a Mac.

2) see the two screenshots for what the ANDI tool is complaining about.

[Jeremy Cron]

I have also tried with Safari and have the same issue. Should I be contacting the ally team instead of posting here?

[Tyler T]

Hi @Jeremy Cron , you are welcome to contact the A11y team.

Regarding the pseudo element, that should not be an issue since the link/button has an accessible aria-label.

Additionally, the tabs pattern using arrow keys is based on the W3C WAI-ARIA spec and is industry standard for this type of component.

I think using any website, including typing on a comment form like this would be very difficult without arrow keys. I'll try to find out more information to help you.

[Jeremy Cron]

I'm 100% okay with arrow keys, but the arrow keys do not work for me in that area.

[Jeremy Cron]

It is working for me