Staff replied SP Page Builder

Accordion - is this barrier-free?

Asked by ME 3 years ago Last activity 3 years ago

Hi there

If I integrate an accordion icon, I get 4 Aria messages per tab. (with Website WAVE web accessibility evaluation tool controlled) (1 tab = 4 aria-messages; 2 tab = 8 aria-messages; 3 tab = 12 aria-messages...) this ist not good, i think so.

Now my question: Aria-components are not barrier-free! Is this right? Not accessible for people with a handicape! Do you agree with me? If so, how can I get this to work without errors?

I would like to create a website that is as accessible as possible. Should I ignore Aria messages? Is it still barrier-free? If not, how do I get an accordion without an aria?

Joomla 4.4.0 Sp-page-builder 5.1.6 helix ultimate

Thanks for your answer

5 replies

Toufiq Senior Staff

3 years ago

Hi there,

I appreciate you reaching out. I sincerely apologize for this oversight. I have added icon & checked text area. There is no problem found. Can you share a screencast video about the full scenario?

https://prnt.sc/TPofhfntlhss

-Thanks

Paul Frankowski Senior Staff

3 years ago · edited

If I may....

the best way would be to contact with Accessibility Expert from your country, and ask him about details, and suggested changes in code. Online Validators, like WAVE, are only software, not human. And website is for humans mostly.

Accessibility is important topic in particular for government sites, and with detailed suggestions we can make changes in upcoming versions as we did many times before, but not ad hoc on the forum.

You can also play with Accordion from Bootstrap 5 website with WAVE tool, and compare results: https://getbootstrap.com/docs/5.0/components/accordion/

ME Asked this

3 years ago

Hi Paul, Hi Toufiq,

thank you so much for your answers.

Yes that is a good idea. I will speak to an accessibility expert in Austria. After this conversation I will contact you again if necessary. Maybe you can then take one or two things into sp pae builder for future versions with precise information from me. Would be fantastic.
Yes, Wavetool is not a human, just a software! And so I need to educate myself about how people really look at this.

In the meantime I have programmed an easy accordion tab myself (only html + css) and installed it in sp page builder with your "html-element-icon". That's fun.

Thank you - see you soon.

Paul Frankowski Senior Staff

3 years ago

Thanks, any clue would be useful for us. Sometimes, small change make a big difference.

The programs that visually impaired people use are also being improved, so they work better than they did a few years back. So the question is who is your target audience and what kind of disability they have (eyes and/or hands). And what you can do to help them read the entire content of the subpage.

ME Asked this

3 years ago

Hello Paul,
thanks for your answer.

First a compliment: Your product is simply great, really. I like the possibility that i can create and integrate html codes, css files, js scripts yourself.

I develop websites e.g. for doctors and physiotherapists. Well, of course doctors and physiotherapists have patients who have a physical disability (eyes).
As a web designer, I strive to create a website in such a way that I also give these people access to the homepage.

Sorry Paul, my englisch is not very good
Greetings

Paul Frankowski Senior Staff

3 years ago · edited

In general it's easier to design site for eyes disability than mobility (hands) disability. Because the use of certain elements is not recommended, or they require changes in colors / size of action icons etc..

In addition to the expert, it is worth reading about using Accordions in Accessibity Guides. I suppose they are in German as well.

EN: https://www.aditus.io/patterns/accordion/