Picture of Henrik Aabom
Move the Accessibility instruction text?
by Henrik Aabom - Wednesday, 12 October 2016, 9:05 AM
 

Hi fellow Adapteers

We had Adapt tested for accessibility according to the WCAG-standard by a professional accessibility company.

They had some issues, where some of them was fixable by ourselves.

However, som of them are a bit harder to fix. For instance this one:

 

Components that needs the user's interaction has an instruction text about how the components should be used, which will be read out loud by a screen reader. This is really good!

However, this text is inserted before the header of the component. Which resulted in some confusion on which component the instruction text is really for. 

The company argued that if the instruction was read out loud AFTER the header, it would be harder to mistakenly get the idea that the text is intended for the above component.

This is because users who are dependend on a screen reader, heavily relies on headers to seperate content from each other. Thus, when the instruction text is read outloud BEFORE the header, it seems as if the text is meant to belong to the content BEFORE the header (which in usually is another component).

 

Can anyone point me in the right direction here? I've been trying to find out, how Adapt insert these instruction texts. They are <spans> with the classes: "aria-label" and "prevent-default" and a role of "region" and a tabindex of 0.

 

Any help will be much appreciated :)

Thanks. Henrik

Picture of Oliver Foster
Re: Move the Accessibility instruction text?
by Oliver Foster - Wednesday, 12 October 2016, 7:33 PM
 

Hi Henrik,

You have to move all of the "aria-label" attributes from the component container in each of the main template files for each component.

It's reasonably time consuming to do. But a good idea.

 

I'll bring it up in our accessibility room in gitter, see if we can work it out.

 

Ollie.