Accessibility issues introduced by plugins

[ndarilek]

I'm running Chrome's Axe Accessibility Checker extension on this site. It's flagging a few accessibility issues that I can't find in our own source, so I'm assuming they're in plugins. Specifically:

Issue description
Ensures <meta name="viewport"> does not disable text scaling and zooming

Impact: critical
Element location
li[aria-current="true"] > iframe meta[name="viewport"]
Element source
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
To solve this violation, you need to:
Fix the following:
user-scalable=no on <meta> tag disables zooming on mobile devices

I don't see the phrase "user-scalable" anywhere in our code. Not sure if this is being added by a separate plugin or third-party embed. Likewise:

Issue description
Ensures role attribute has an appropriate value for the element

Impact: minor
Element location
li[aria-current="true"] > iframe .like-label
Element source
<label class="rounded-box hidden like-label" role="presentation"><span>Like</span></label>
To solve this violation, you need to:
Fix the following:
role presentation is not allowed for given element

This makes sense--role="presentation" behaves a bit inconsistently across elements, but in general it reduces or eliminates an element's visibility to screen readers, and the very definition of <label/> is "Present this element as text associated with a given control." But I can't seem to find this explicitly in our code, so I'm wondering if it is an embed or plugin we don't control.

Maybe these should both be separate issues, but if they're in code we don't own, then maybe they're outside our control and should be ignored in test results. I wanted to check that posibility before filing two issues.

Thanks.

[IagoSRL]

Hi @ndarilek I wasn't getting notifications fo this issues for some reason. I found your accessibility branch, reviewed and merged into master. I updated the branch with changes from master too, in case you keep working on it.

I removed the presentational role on the badge image at the footer (under Footer-eoBadge class) and added an alt label with the textual content found in the image (that is "Employee-owned 100 percent").

There is a new iframe for embedded video at the top of the home page, and I added the title "Video presentation of Loconomics Cooperative". Let me know if something else sounds better.

I fixed another detail at the home found too by the AXE add-on for Firefox (the slideshow index links).

I have verified that both the meta-viewport and role problems you mentioned comes from the embedded video (Vimeo), so it's out of our control.

[IagoSRL]

Another think highlighted by AXE and we may fix, is about lack of audio description tracks on the videos. Can you @joshdanielson review that?

There is too an issue with 'video without caption' but the iframes has labels now, so not sure how much of an issue (the video tag is on the Vimeo code).

[joshdanielson]

@IagoSRL I added tags to the videos in Vimeo for descriptions and titles...is there a way to pull those in?

[IagoSRL]

Where the titles goes? If is part of the code snippet they generate to be included, send me that. I just tried the accessibility check again just to see that title appears already on their code when loading but it keeps failing like before :-/

[joshdanielson]

@IagoSRL I think it's just easier to use static titles how deque suggests. Here are the titles:
hero:
title="Loconomics Cooperate - Become a Founding Member"
Testimonials:
title="YaVette - founding member"
title="Christopher - founding member"
title="Anahi - founding member"

If I'm misunderstanding, there is a link to how to use their API and access the metadata (title, description). If it's more than an hour's work, let me know.