Make all your widgets Ada compliant

Please consider a way to for screen readers such as NVDA, Jaws, or Vox Chrome plugin to read the content for the Instagram Feed with alt text for each image, and have the widget be better accessible with keyboard tabbing. The idea with keyboard tabbing is that it is easy to tab through all the content inside the widget with a keyboard. Currently it skips the hidden content that users with seeing abilities can click through to with the carousel arrows.

1 Like

Original comment from Janice Stanford transferred from the previous Wishlist portal:

1 Like

Blind users with screen readers and other keyboard users are not able to access the social share buttons. A very simple change would be required to make the buttons keyboard accessible. It is required to meet WCAG guidelines and you’re risking legal action if you don’t fix this. tags must have an href value or a tabindex=-1 to be keyboard accessible. It’s so easy.

1 Like

Hi,

Can you please make Form Builder (or any other widgets) compliant to the WCAG requirements? More and more countries and governments are requiring it and it is impossible for us to use Elfsight on websites under those jurisdictions.

Thanks.

2 Likes

Original comment from Matthew Gonzalez transferred from the previous Wishlist portal:

1 Like

For greater accessibility please make sure all popup buttons and elements have sufficient color contrast by default, WebAIM: Contrast Checker. There’s a hidden ā€˜share’ button that doesn’t meet WCAG AA contrast criteria and I was getting an error in my site until I correct it via styles (see below).

.eapps-widget-toolbar-panel-share-button {background-color: #0c7bc0 !important;}

Thank you for your assistance!

2 Likes

Please make your widgets Ada compliant

1 Like

Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all! :star_struck:

Original Votes: 5

1 Like

Royal National Institute of Blind People (RNIB) accessibility text to speech and size of font personalization for accessibility for people with hearing difficulties

2 Likes

@Adam9 thanks a lot for your suggestion!

Yes, this is surely important to make your website accessible for any user, and we’ll try to speed up the process of making it possible.

Thank you very much for your help!

1 Like

I don’t care much about the ADA compliancy as an EU citizen but I recently tried to make the Instagram widget more accessible. With a lot of !important overrides and simply hiding some elements I could improve it, but it’s still not great.

The focus outlines are hidden by overflow: hidden on .eapps-instagram-feed-posts-item. Removing this seems like an easy fix that would benefit everyone, not just blind people or users who have to navigate websites with the keyboard.

Looking at the ā€œLoad moreā€ button: using <div> elements as fake buttons is a practice to be avoided due to various accessibility concerns.

If you want to go the extra mile, aria attributes for certain elements would be great. But getting the basics sorted out is obviously more important.

3 Likes

Hi there and welcome to the Community @thomasguenther :wave:

I see that my colleague Natalia has already responded to your request in a support ticket.

As she mentioned, our developers are constantly working on new feature requests. However, due to the heavy workload, this one is not the top priority at the moment. We closely monitor user votes, and the most wanted features are usually considered first.

However, we’ve forwarded your request regarding the ā€œLoad moreā€ button syntax to our devs. Natalia will keep you updated :slightly_smiling_face:

1 Like

We have to comply to WCAG 2.0 AA Standards.

Which widget is and which isn’t?

Would it be possible to have VPAT or other reports on them?

Thanks

2 Likes

Hi @Andre_clc :wave:

I have to say that our apps don’t fully meet WCAG requirements. I am really sorry!

We do realize that it’s crucial to make the widgets accessible for all users and we’ll try our best to consider this opportunity in our future updates.

As for now, would it be an option for you to contact our Support Team and specify what widgets you need to be WCAG accessible most? They’ll be happy to check things and see what can be done with the compliance situation :slightly_smiling_face:

Thanks a lot for sharing your feedback and pointing us in this direction!

1 Like

Did you ever sort this? Driving me insane.

2 Likes

Hi there @Jord :wave:

I completely understand your concerns and really sorry that our apps aren’t fully accessible yet!

I’d like to assure you that we are working on improving accessibility, and here are the examples of the progress we’ve made:

However, a huge number of requests we receive makes it challenging to ensure full accessibility for all apps at the moment.

In the meantime, could you please share which widgets you feel need this feature the most? Your feedback would help us set the priorities and move in the right direction :slightly_smiling_face:

1 Like

Hi Max,

It’s for the Pop-up widget. There is some hidden text ā€˜Share’. It’s colour is not compatible with WCAG. I just need some CSS line to change it and where to put that line?

2 Likes

If I got you right, you mean the Share button on the information panel. It’s displayed for you as the account owner, and only you can see it when you’re logged into Elfsight.

Your website visitors never ever see it at all, and it won’t be accessible for the screen readers.

You can check the widget on your website in incognito mode to make sure that no one else can see it. And here is a special article about it - Why I see a panel above my widget.

However, if you still want to hide it, you can add this CSS code to the Custom CSS section on the Settings tab of your widget settings:

.global-styles, .eapps-widget-toolbar {
display: none !important;
}

If you prefer to keep the panel and change the color of the button, this code should work for you:

.eapps-widget-toolbar-panel-share-button {
background-color: #0c7bc0 !important;
}
3 Likes

Amazing Max. Thank you!

3 Likes

No sweat :wink:

1 Like