[Support request] Accessibilty issues in Google

[Tim]

Performed an audit on the site with Google’s Lighthouse and need some help.
1) Lighthouse says the button “button.menu-toggle” needs a name for Accessibility.
— How can I name that?
2) Add a title to this iFrame <iframe onload=”Wpfcll.r(this,true);” data-wpfc-original-src=”https://frontofficecoach.com/wp-content/plugins/wp-fastest-cache-premium/pro/templates/youtube.html#2K3GvR1x5QA&#8221; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
— I named it name=”Coach” and it still is incorrect and not sure what I need to do.
3) [id] attributes on the page are not unique
The value of an id attribute must be unique to prevent other instances from being overlooked by assistive technologies.
— Where can I create a unique instance????

As always THANKS!

[Tom]

Hi there,

1. This is happening because you have no menu text in Customize > Layout > Primary Navigation. In GP 2.4, we’ve fixed this by adding screen reader text if no button text exists: https://github.com/tomusborne/generatepress/commit/a4afb830d67e510739a67822bc783b943af1a06f

You can make the above change to your installation now, as the next update will have it in there.

Alternatively, you can add some text to the mobile menu button in the Customizer for now.

2. I’m not sure about this one. Where’s the iframe coming from?

3. This is an issue with our sticky navigation at the moment. We’re working on a fix 🙂

[Tim]

I added Menu to the menu and increased the audits performance. More stuff below. 😉

Accessibility

1) iframe is on the main page. Did I name it properly? Names and labelsThese are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.

Add rel="noopener" or rel="noreferrer" to any external links to improve performance and prevent security vulnerabilities.
<iframe onload=”Wpfcll.r(this,true);” data-wpfc-original-src=”https://frontofficecoach.com/wp-content/plugins/wp-fastest-cache-premium/pro/templates/youtube.html#2K3GvR1x5QA&#8221; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen” name=”Coach”></iframe>

2) Form elements do not have associated labels —

Labels ensure that form controls are announced properly by assistive technologies, like screen readers.
Failing Elements
input#mce-EMAIL.email
input#mce-EMAIL.email

3) [id] attributes on the page are not unique
The value of an id attribute must be unique to prevent other instances from being overlooked by assistive technologies.

4) Best Practices
Links to cross-origin destinations are unsafe. Where can I change this?
Add rel="noopener" or rel="noreferrer" to any external links to improve performance and prevent security vulnerabilities. This is for social sites

URL Target Rel
/FrontOfficeCoach/(www.facebook.com) _blank nofollow
/FrontCoach(twitter.com) _blank nofollow
/frontofficecoach/(www.instagram.com) _blank nofollow
/company/27187415/(www.linkedin.com) _blank nofollow

[Tom]

1. I don’t have a lot of experience with iframes, so all I can do is Google this one. I found this: https://fae.disability.illinois.edu/rulesets/FRAME_2/

Not sure if it will help?

2. Those are from your MailChimp signup form. You need to edit the form in MailChimp so it has labels.

3. This is a bug with our Sticky Navigation – we’re working on a fix.

4. How are you adding your social media links? Do you have access to the HTML? If so, you can add those attributes manually.

[Author]

Posts