WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Embedding Social Media Best Practices

for

From: Kathryn.Frederick@ood.ohio.gov
Date: Feb 7, 2020 2:24PM


John,

Thank you for the wealth of information in your email. The social media content would be internal content (embedding our Facebook and/or Twitter feeds on the site). I think your email gives me (and the organization) a lot to think about and consider in this process, however.

Again, thank you for your thoughts and knowledge sharing.

Katie Frederick

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

Hi Kathryn,

(No paywalls here... ;-) )

So, I think to better answer your question, we need to know what *type* of social media you are talking about: are you looking to embed a twitter feed (or similar: LinkedIn, Instagram, etc.), or are you looking to embed YouTube videos or similar multi-media content? Is it 3rd-party social media content, or is it user-contributed content on your site?

Effectively, per WCAG, *ALL* content on the page is required to be in conformance to make a (W3C - WCAG) claim of conformance [1], although if you are seeking to issue a VPAT, VPATs do have a "meets with exceptions"
classification that you could use (and then detail which WCAG SC are non-conformant), but that's kind of a lousy place to be in.

So, when evaluating Social Media content for inclusion on your page, all of the WCAG A & AA SC are applicable. Common issues are often related to keyboard navigation (including keyboard traps - infinite scrolling, visible tab focus, color contrast issues related to 3rd-party content, etc.). If the SM content has any of these issues, they become your problems when you embed the content (or, at least, that's what WCAG states today).

Q: is this Social media content you are generating for a SM channel, that you want to also re-post on your website?

The reality today is achieving full WCAG compliance while embedding SM content today is (last I checked) nearly impossible, because the embedded content often does not meet all of WCAG's requirements. This is not to say *DON'T*, but I'd suggest a multi-pronged approach: do everything you can at your end to support as much accessibility as possible (avoid really egregious content feeds), and have an internal policy that notes that your organization has done everything in its power to ensure accessibility, but that some 3rd party content may still not be fully accessible. (Put that in your publicly facing Accessibility Statement)

If it is content you are creating for, say, YouTube (or any other multi-media posting/hosting platform), then chances are those platforms do not support (for example) audio-description. None-the-less, as a content *producer*, you are still responsible for that audio-description to be created. Then, when you post your 'video' on YouTube or Facebook (for example), you can (SHOULD) also post a link to that accessible content, which you should host on *your* corporate site. It's not ideal, but at least you are making it available (and from a legal compliance perspective, you are demonstrating that you are trying as hard as you can to meet the spirit of WCAG, even if you occasionally cannot fully meet it).

HTH

JF


[1] https://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23conformance&amp;data%7C01%7Ckathryn.frederick%40ood.ohio.gov%7Cb58a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C637167027930454500&amp;sdata=%2FPXATfcakjeGc2WqbFuI6Ua0LbYt%2F%2BZ1AtBsTfJJx00%3D&amp;reserved=0

On Fri, Feb 7, 2020 at 12:06 PM glen walker < <EMAIL REMOVED> > wrote:

> 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%7C
> 01%7Ckathryn.frederick%40ood.ohio.gov%7Cb58a0c517eb9436fa02908d7ac0939
> 87%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C637167027930454500&amp
> ;sdata=yUGl4zv18QNY2ZOwPs8CFx64UWwaYKQfdnuNnIkMD0M%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.)
>
>
> https://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.
> accessibilityoz.com%2Fproducts%2Fozwiki%2Fsocial-media-embed-accessibi
> lity%2F&amp;data%7C01%7Ckathryn.frederick%40ood.ohio.gov%7Cb58a0c51
> 7eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C
> 637167027930454500&amp;sdata=uV7eendIXyXrXobwQZFruGDFzJMifpn9iCG%2FNZ0
> 6G5k%3D&amp;reserved=0
>
> (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
> info.)
>
> 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%7C01%7Cka
> thryn.frederick%40ood.ohio.gov%7Cb58a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%7C1%7C637167027930454500&amp;sdataO0ND%2FGZ%2FaGIKqMnlH3lAhHv24NguhsjTQSi%2BuDj0NA%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%2Flis
> > t.webaim.org%2F&amp;data%7C01%7Ckathryn.frederick%40ood.ohio.gov%
> > 7Cb58a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb36ed57c7c8a
> > 2%7C0%7C1%7C637167027930454500&amp;sdataÆ4ZhkbYsVCuWNe19DtL89W5DYV
> > UlzYFXANuEo6BECo%3D&amp;reserved=0
> > List archives at
> > https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fweb
> > aim.org%2Fdiscussion%2Farchives&amp;data%7C01%7Ckathryn.frederick
> > %40ood.ohio.gov%7Cb58a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0
> > 784eb36ed57c7c8a2%7C0%7C1%7C637167027930454500&amp;sdata=K%2F0xWyDno
> > mdO2F7AWf%2FQNLw1E2JZaOlnsoSa3vn8hlQ%3D&amp;reserved=0
> > > >
> > > https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&amp;data%7C01%7Ckathryn.frederick%40ood.ohio.gov%7Cb5
> 8a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb36ed57c7c8a2%7C0%
> 7C1%7C637167027930464461&amp;sdata=sHtx5CX5UWoOBO8veEDe9dmj6fZRxdPdNH5
> 06F%2Fbqhk%3D&amp;reserved=0 List archives at
> https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Ckathryn.frederick%40o
> od.ohio.gov%7Cb58a0c517eb9436fa02908d7ac093987%7C50f8fcc494d84f0784eb3
> 6ed57c7c8a2%7C0%7C1%7C637167027930464461&amp;sdata=cTGhWLDaHsLk6gWvekC
> oG466mFU5c78JhACu1mA9zp4%3D&amp;reserved=0
> >


--
*​John Foliot* | Principal Accessibility Strategist | W3C AC Representative Deque Systems - Accessibility for Good deque.com 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> >.