WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Embedding Social Media Best Practices


From: Kathryn.Frederick@ood.ohio.gov
Date: Feb 7, 2020 1:44PM


Thank you so much for your email. I appreciate the information and resources you offer, as well as your perspective on the social media implementation. I tested a page yesterday, and the developer has the social media feed (which is produced/managed by the organization, so we do have control over it), visually hidden for screen reader users. However, I argued having this content visually hidden isn't providing equal access to the entire contents of the page. Thank you for giving me the "skip link" suggestions, as well as the necessary consideration of being able to navigate away from/out of the content.

Katie Frederick

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Friday, February 7, 2020 1:06 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Embedding Social Media Best Practices

Gian Wild from AccessibilityOz has spoken several times about the accessibility of social media. There are two archived presentations from her on https://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.accessibilityassociation.org%2Farchivedwebinardirectory&amp;data=02%7C01%7Ckathryn.frederick%40ood.ohio.gov%7C96232167c4b845a8b04708d7abf86854%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C637166955702839332&amp;sdata=xhdOM4J2hc0NVr4UqesO6o%2FPv0oP90NwOE7gzwcXHic%3D&amp;reserved=0
(search for "social" on the page) but that requires IAAP membership to watch them and I think it's about the accessibility of the various social media platforms themselves rather than embedding them on your website.

She does have an article about embedding social media but it requires a fee to access but might be worth it ($39). (The fee gives you access to lots of articles, not just that one. Depending on your budget for the redesign, an extra $39 out of your budget might be a drop in the bucket.)


(I'm not affiliated with AccessibilityOz in any way. I just know Gian has spoken about this topic several times so just wanted to pass along the

From my perspective, having social media embedded can be good or bad. They often have infinite scrolling so you need a way to get out of the embedded content or skip over it completely. Having a visually hidden "skip over"
link before the embedded content that lets you jump over the content would be helpful. If you're feeling ambitious, a "skip over" link *after* the embedded content can be helpful too if you are tabbing backwards through the page.

You could also consider having a disclosure widget (
https://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fwai-aria-practices%2F%23disclosure&amp;data=02%7C01%7Ckathryn.frederick%40ood.ohio.gov%7C96232167c4b845a8b04708d7abf86854%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C637166955702844329&amp;sdata=BRJw%2BD0yQQZgi0h6E2NI6Loc7bLYYkLvF6DZKGFAZGw%3D&amp;reserved=0) for the social media content so the user has to expand the content to see it. That would make tabbing over the content pretty easy (when it's collapsed).

You'd still have to consider providing a way to get out of the embedded content if the user has tabbed significantly through the content. That is, if I'm tabbing through the page and get to the social media content, then start tabbing through the content, after I've gotten into it for a ways, I might decide I want to get out. If it has infinite scrolling, then I can't keep tabbing forward because I'll never reach the end. I could tab backwards to retrace my steps but if I'm way into the content, that might take a long time. At that point, having some kind of shortcut key to get out of the content is a possibility, but shortcut keys are often hard to discover. The user would have to be notified what the shortcut key is.
Maybe a note before the social media content. You can either implement your own shortcut key (ctrl+<somekey>) or use the accesskey attribute.

You also run the risk of the social media content itself not being accessible, but that's out of your control.

On Fri, Feb 7, 2020 at 7:15 AM <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:

> Good Morning,
> I am helping implement accessibility features on a website redesign
> for my organization. They're wanting to embed social media content on
> the website homepage. Can you please direct me to WCAG guidance and/or
> accessibility best practices in this regard?
> Thank you in advance for your assistance.
> Sincerely,
> Katie Frederick
> > > https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&amp;data=02%7C01%7Ckathryn.frederick%40ood.ohio.gov%7C96
> 232167c4b845a8b04708d7abf86854%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%
> 7C1%7C637166955702844329&amp;sdata=j6BTHgf%2B5kN1yhH4G1RAuojnXW0uLqnDd
> Dr8qIku1vc%3D&amp;reserved=0 List archives at
> https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&amp;data=02%7C01%7Ckathryn.frederick%40o
> od.ohio.gov%7C96232167c4b845a8b04708d7abf86854%7C50f8fcc494d84f0784eb3
> 6ed57c7c8a2%7C0%7C1%7C637166955702844329&amp;sdata=mt5%2FRSdcjRsfpFTNz
> 8aFUr2vsVEdVIi%2BTV19AYQ8lD0%3D&amp;reserved=0
> >
CAUTION: This is an external email. This message might not be safe. Do not click links or open attachments if the email looks suspicious. Forward to <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >.