We recently had a user write in who wanted to share a tip about how to handle a common accessibility problem when embedding Twitter: Minimum Color Contrast.
I have been working to increase our accessibility scores and was able to improve the Twitter color contrast on our other sites by visiting the “set customization options” at https://publish.twitter.com/# where you can choose a higher contrast color for links.
I also shared instructions with all the Twitter content creators on how-to make images accessible,
https://help.twitter.com/en/using-twitter/picture-descriptions
–Sarah Snow, COLA
The good news is that you can do this on UBS using WordPress oEmbeds!
oEmbeds are a set of powerful features that allow you to integrates 3rd party sources into your site without the need for a plugin. One such oEmbed for Twitter which allows you to embed Tweets, profiles, lists, collections, likes, or Moments. In this post, we’ll look on how to embed Twitter into your pages, posts, and widgets. Then we’ll look into different approaches to how to check for color contrast.
Step one: Which Twitter Account do you want to use?
For this demonstration, we are using the UT Austin Twitter feed: https://twitter.com/UTAustin
Step two: Where do you want to embed it?
Create or edit a post or page and ensure that the editor is in the “Visual” mode. Then paste the Twitter URL onto a line all by itself.
You’ll know it’s working because the Twitter feed will “pop” in automatically.
Step three: Publish!
Done!
Now, how do you address color contrast issues that come up?
Step one: Grab your embed code from Twitter
- Visit the Twitter Publishing page
- Enter your Twitter feed URL into the field titled “What would you like to embed?”. In our example, we are using – https://twitter.com/UTAustin
- Click the right-pointing “Next” arrow
- Select the display option that you want
Step two: Addressing the Color Contrast Issue
This is the tricky part as you’ll need to know what color scheme you’re using, and trying a few things to determine what works with your design AND is color accessible. Twitter gives you the option of light and dark backgrounds, in addition to the option to to enter your own color codes for links. There are a number of tools out there to help with this decision. One tool that I like is contrast ratio.
Step three: Embedding
This will be a little different from the steps that we outlined previously as we won’t rely on the Twitter oEmbed.
- Once you have selected your color codes on the Twitter Publishing page, click on “Update”.
- You’ll be prompted with an embed code. Copy this embed code and go back to the page or post where you are posting your Twitter feed.
- Be sure you’re in “Visual” mode in the editor and paste that code.
- Click Publish
- Once you publish you’ll be able to view your embed just like when using oEmbeds!
Accessibility is a large and encompassing topic that covers a large range of issues but taking it one step at a time can take you a long way in ensuring your website is accessible!
Here are some additional resources to help you as you learn more:
Color Contrast, Beyond the Basics
Twitter Accessibility
https://twitter.com/twittera11y
