Making an Embedded Twitter Feed More Accessible

Concerns

  • Contrast
  • Infinite Scroll
  • ARIA Notifications

Contrast

With Twitter feeds we have found there isn't much flexibility we have to help with contrast. The best option is to use the dark-theme attribute, shown below.

Example: 

<a class="twitter-timeline" data-theme="dark" 
  href="https://twitter.com/oaklandu">
Tweets
</a>

Infinite Scroll

Infinite Scolling, sometimes called Keyboard Traps are a problem with users that use their keyboard for navigation. The list of items they need to scroll through keep increasing once the user hits the end of the list, making another list of items to navigate, hence the term "trap." Here is how to avoid that issue.

Display a specific number of items between 1 and 20 by customizing your embed HTML.

Add a data-tweet-limit attribute to the embed code to specify a number of Tweets. The timeline will automatically adjust its height to display specified number of Tweets. The timeline is fixed after display; it will not poll for new Tweets.

Example: 

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-tweet-limit="3">
Tweets by @TwitterDev
</a>

ARIA Notifications

An embedded timeline describes its content for screen readers and other assistive technologies using additional markup defined in WAI-ARIA standards. A timeline widget is a live region of a page which will receive updates when new Tweets become available.

By default, a timeline has a politeness value of polite by default; set a data-aria-polite attribute value of assertive to set the embedded timeline live region politeness to assertive, for example if you’re using the embedded Timeline as a primary source of live content in your page.

Example: 

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-aria-polite="assertive">
Tweets
</a>

References