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.

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

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.

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.

1 Like

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

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!

1 Like

Please make your widgets Ada compliant

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

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

1 Like

@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!

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.

2 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:

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

1 Like

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!

Did you ever sort this? Driving me insane.

1 Like

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:

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?

1 Like

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;
}
2 Likes

Amazing Max. Thank you!

2 Likes

No sweat :wink: