Checkboxes Inaccessible and Unusable to Screen Readers

Topic: Checkboxes Inaccessible and Unusable to Screen Readers

dustin.schreiber pro asked 7 years ago

It seems there are several form elements that are not accessible to screen readers. Being a visual impaired developer, I try my best to ensure that all of my sites are accessible to everyone. I'm not entirely sure why the screen readers skip over it, so far this has been tested with the latest version of VoiceOver on macOS 10.11, but I think it has something to do with the way the box is styled. I believe MDB uses Javascript to manipulate the visuals but somehow ends up hiding the element from the reader. Is there anything that can be done to fix this? I really enjoy MDB, it seems to be the most complete material design theme I've found, but this might be a deal breaker for me from purchasing a multisite license or even continuing to use MDB.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi Dustin,
First of, you are right - the reason for VoiceOver to be skipping over checkboxes (and probably dropdowns) is the styling. To apply Google's material design paradigm, right before the default <code>html</code> elements get replaced by their interactive <code>JavaScript</code> counterparts, they get hidden away from the user (as in <code>visibility: hidden;</code> CSS property). This implies that few of our form elements in their current form remain inaccessible to screen readers.
Unfortunately, there has been no new development regarding enhancing readability of these in the last two months and I am in no position to make promises about the time by which we might offer a complementary solution to this issue. To keep the content available to everyone, for the time being it seems best to fall back onto bootstrap in these few instances where we failed to comply with accessibility standards.
I, personally, am very sorry.
With Best Regards, 
Kuba

Please insert min. 20 characters.

Hi Dustin,

First of, you are right - the reason for VoiceOver to be skipping over checkboxes (and probably dropdowns) is the styling. To apply Google's material design paradigm, right before the default html elements get replaced by their interactive JavaScript counterparts, they get hidden away from the user (as in visibility: hidden; CSS property). This implies that few of our form elements in their current form remain inaccessible to screen readers.

Unfortunately, there has been no new development regarding enhancing readability of these in the last two months and I am in no position to make promises about the time by which we might offer a complementary solution to this issue. To keep the content available to everyone, for the time being it seems best to fall back onto bootstrap in these few instances where we failed to comply with accessibility standards.

I, personally, am very sorry.

With Best Regards,
Kuba

dustin.schreiber pro commented 6 years ago

Hi Kuba, Sad to hear no time frame but I look forward to potentially one in the future. Thank you

Add comment

Marta Wierzbicka staff answered 7 years ago