WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: IE 11 Bug? Work around?

for

From: Chaals McCathie Nevile
Date: Mar 15, 2016 12:13PM

On Tue, 15 Mar 2016 17:57:39 +0100, Moore,Michael (Accessibility) (HHSC)
< <EMAIL REMOVED> > wrote:

> I have the following demonstration code.
>
> <!doctype html>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Checkbox Status Reporting for Completed Form</title>
> </head>
>
> <body>
> <form>
> <p id="aboutSupportNeeds_label">Tell us about Fred (check all that
> apply)</p>
> <input name="aboutSupportNeeds" checked disabled
> class="ng-pristine ng-untouched ng-valid ng-valid-required"
> id="intlectDisableSwElem" aria-labelledby="aboutSupportNeeds_label
> intlectDisableSwElem_label" type="checkbox" value="Y" >
> <label class="span8 checkboxGroupLabel"
> id="intlectDisableSwElem_label">
> a. Has an intellectual disability (IQ is less than 70).&nbsp;
> </label>
>
> </form>
> </body>
> </html>
>
> This is a subset of code used in an application to present the completed
> form to the user for review. They cannot make any changes to the form
> from the page in this state. Thus the reason for the checkbox to be
> disabled.
>
> In FireFox and Chrome JAWS and NVDA report the correct status of the
> checkbox but in IE11 the status of disabled checkboxes is always
> reported as not checked by the screen readers.
>
> I have tried adding aria-checked and even role=checkbox but still can't
> get the desired behavior out of IE.
>
> Does anyone know of a work-around for this situation?

thinking out loud, browser-sniff IE11 (careful! browser-sniffing is
generally bad…), and present a span that *looks* like a disabled checked
checkbox with role="checkbox" and "checked", but without any behaviour
attached that allows changing it. ?

Or don't disable the form, register changes, and check that the user
really wants to *change* what they propose to submit, which is a slightly
different flow for confirmation but has the same overall impact.

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com