I’ve already searched and the closest existing topic I can find for this issue is:
https://twittercommunity.com/t/accessibility-issue-tabbing-through-twitter-widget/96439
That one, however, refers to the difficulty of escaping an embedded twitter timeline using the keyboard-tabbing method. The issue we’ve discovered is lack of visible outlines (or other indicators) for link elements as you tab through.
Lack of visible keyboard focus is a WCAG 2.0 violation: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
These are the elements that do NOT receive any sort of focus indicator as you tab through an embedded timeline:
- The “Twitter Ads info and privacy” icon
- Avatar of the account whose timeline you’ve embedded
- Any photo or video included with a tweet
The CSS causing this problem appears to be:
a:active,a:hover {
outline:0
}
…from the file https://platform.twitter.com/css/timeline.2a370b305fba4454465a8c70868409af.light.ltr.css
Please remove this styling or provide a way for us to override it without having to resort to custom javascript (which might break the next time you make changes to embedded timeline code).
Our organization is legally obligated to follow WCAG 2.0 guidelines, and much as we want to give our internal stakeholders the ability to use Twitter’s embedded timeline code, we cannot do so at present because of this accessibility violation.
