GUI checkboxes and radio buttons not displayed when images are turned off

[domkipps]

Radio buttons and checkboxes disappear when images are disabled in browser. Raised by Roger Hudson in testing BBO. The customer who turns off images may have issues with internet connection speed (e.g. in remote areas), when they disable image this then renders these UI elements unable to be used.

Roger referenced Level A compliance...

1.1.1 Non-text content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (except for a few specified situations). (Level A)

STG technology have attempted to work around this issue by attempting two things:

1./ Placing the html input element (that gets hidden) directly under the SVG which covers it, then when images are turned off the original HTML element appears. But this causes issues on Android whereby the UI element is above the SVG in the stacking order no matter the z-index applied.

2./ They have also used an icon font underneath the SVG which shows when the images are turned off. Its a bit hacky, but works across all browsers/devices.

[dominikwilkowski]

Thanks @domkipps

We won't go back to icon-fonts as that would completely kill accessibility :) But this is a very interesting one. Can you send me the version of Android where the z-index didn't work? We will fix this and let you know what we did.

Cheers

[oksushi]

Disabling images using this technique still shows the SVG checkbox.

Tested with http://tympanus.net/Development/AnimatedCheckboxes/

[domkipps]

IT tested on Android 4.0, 4.1 (4.1.1 or 4.1.2). The issue was not recreated on all devices. Definitely on a Samsung Galaxy device on those versions, however not Google Nexus.

[dominikwilkowski]

Thanks @domkipps

We only support 4.4 and up and sometimes also test 4.2 never lower though. This will help create a fix. Cheers

Thanks @oksushi Unfortunately we have to support IE8 and up and inlining SVG would break there. Very good article though.

[dominikwilkowski]

Alright I tested the new implementation with the following devices and they are all fine:

• [x] IE8
• [x] IE9
• [x] IE10
• [x] IE11
• [x] IE Edge
• [x] Chrome
• [x] Firefox
• [x] Firefox 12
• [x] Safari
• [x] Samsung TAB 4.4.2 Stock/Chrome
• [x] Surface Windows 8.1
• [x] Medion 4.1.1 Stock/Chrome
• [x] Samsung 4.1.1 Stock/Chrome
• [x] HTC 4.4.2 Stock/Chrome
• [x] Nokia 635 Windows 8.1
• [x] Nokia Windows 8
• [x] iPhone iOS 8
• [x] iPhone 6+ iOS 8
• [x] iPhone 6 iOS 9

Looking good and no image fallback is now working great too. Let me know if you have any issues @domkipps

[domkipps]

Thanks @dominikwilkowski... love your work!