E-mail List Archives
Thread: IE 11 Bug? Work around?
Number of posts in this thread: 10 (In chronological order)
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Mar 15 2016 10:57AM
Subject: IE 11 Bug? Work around?
No previous message | Next message →
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).
</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?
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Birkir R. Gunnarsson
Date: Tue, Mar 15 2016 12:05PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
Jaws reports it correctly if you swap the disabled attribute out for
aria-disabled="true".
But if you do that, then you must include JavaScript that prevents the
user from being able to activate the checkbox and you also have to add
CSS styling to indicate the disabled state.
A lot of workarounds for a Jaws/IE bug, but it would work.
On 3/15/16, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS 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).
> </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?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> > > > >
--
Work hard. Have fun. Make history.
From: Chaals McCathie Nevile
Date: Tue, Mar 15 2016 12:13PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
On Tue, 15 Mar 2016 17:57:39 +0100, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS 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).
> </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 ADDRESS REMOVED = - - - Find more at http://yandex.com
From: Megginson, Jason
Date: Tue, Mar 15 2016 12:41PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
You can consider a band-aid approach with JavaScript on page load. The following works for me. Only with IE11 detection and a disabled checkbox will a <span> be instantiated to envelop the checkbox object:
This is crude, but it could work without having to put other keyboard implementations in place if time is of the essence.
//start JS example
function someFunction(){
if (getInternetExplorerVersion()=){
var myCheckBox = document.getElementsByTagName("input");
for (var i = 0; i < myCheckBox.length; i++){
if (myCheckBox[i].type=="checkbox" && myCheckBox[i].checked){
var myNode=document.createElement("span");
var myParent=myCheckBox[i].parentNode;
myNode.setAttribute("role", "checkbox");
myNode.setAttribute("aria-checked", myCheckBox[i].checked);
myNode.setAttribute("aria-disabled", myCheckBox[i].disabled);
myNode.setAttribute("aria-labelledby", myCheckBox[i].getAttribute("aria-labelledby"))
myParent.insertBefore(myNode, myCheckBox[i]);
myNode.appendChild(myCheckBox[i]);
}
}
}
}
function getInternetExplorerVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
//end JS example
Jason Megginson Director, Accessibility Compliance Office (ACO)
The College Board
T 571.392.2195 | M 703.244.7755
= EMAIL ADDRESS REMOVED =
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, March 15, 2016 2:05 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] IE 11 Bug? Work around?
Jaws reports it correctly if you swap the disabled attribute out for aria-disabled="true".
But if you do that, then you must include JavaScript that prevents the user from being able to activate the checkbox and you also have to add CSS styling to indicate the disabled state.
A lot of workarounds for a Jaws/IE bug, but it would work.
On 3/15/16, Moore,Michael (Accessibility) (HHSC) < = EMAIL ADDRESS 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).
> </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?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission Civil Rights Office
> (512) 438-3431 (Office)
>
> > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: Dominic Capuano (gmail)
Date: Tue, Mar 15 2016 12:42PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
Mike;
"but still can't get the desired behavior out of IE"
What exactly are you expecting JAWS/NVDA to say?
Dominic Capuano
= EMAIL ADDRESS REMOVED =
(h)(401) 726-2551
-----Original Message-----
From: Moore,Michael (Accessibility) (HHSC)
[mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 15, 2016 12:58 PM
To: WebAIM Discussion List
Subject: [WebAIM] IE 11 Bug? Work around?
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).
</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?
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission Civil Rights Office
(512) 438-3431 (Office)
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Mar 15 2016 12:46PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
Thanks Birkir,
That works just fine. Now for the tough job. Convincing the development team to implement the solution.
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, March 15, 2016 1:05 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] IE 11 Bug? Work around?
Jaws reports it correctly if you swap the disabled attribute out for aria-disabled="true".
But if you do that, then you must include JavaScript that prevents the user from being able to activate the checkbox and you also have to add CSS styling to indicate the disabled state.
A lot of workarounds for a Jaws/IE bug, but it would work.
On 3/15/16, Moore,Michael (Accessibility) (HHSC) < = EMAIL ADDRESS 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).
> </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?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission Civil Rights Office
> (512) 438-3431 (Office)
>
> > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: Sean Curtis
Date: Tue, Mar 15 2016 2:05PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
Why not leave the disabled attribute as is, but simply add the aria-disabled="true" attribute to help IE11 out? No JS required.
Cheers,
Sean
> On 16 Mar 2016, at 3:57 AM, Moore,Michael (Accessibility) (HHSC) < = EMAIL ADDRESS 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).
> </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?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> > > >
From: Birkir R. Gunnarsson
Date: Tue, Mar 15 2016 2:27PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
Because it is the presence of the disabled attribute that is causing
Jaws to report the checkbox as unchecked.
On 3/15/16, Sean Curtis < = EMAIL ADDRESS REMOVED = > wrote:
> Why not leave the disabled attribute as is, but simply add the
> aria-disabled="true" attribute to help IE11 out? No JS required.
>
> Cheers,
>
> Sean
>
>> On 16 Mar 2016, at 3:57 AM, Moore,Michael (Accessibility) (HHSC)
>> < = EMAIL ADDRESS 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).
>> </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?
>>
>> Mike Moore
>> Accessibility Coordinator
>> Texas Health and Human Services Commission
>> Civil Rights Office
>> (512) 438-3431 (Office)
>>
>> >> >> >> > > > > >
--
Work hard. Have fun. Make history.
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Mar 15 2016 2:27PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | Next message →
That would be nice except that when the disabled attribute is present IE does not report that the checkbox is checked through the screen reader. I definitely see this as an IE bug since it continues to represent the checkbox as checked visually.
Looking at MSAA through A-Viewer in IE the value of the accState for the checkbox is just unavailable while in FireFox it is checked, marqueed, unavailable.
When you remove the disabled attribute from the input IE changes the accState in MSAA to checked, focusable, marqueed and unavailable.
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sean Curtis
Sent: Tuesday, March 15, 2016 3:05 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] IE 11 Bug? Work around?
Why not leave the disabled attribute as is, but simply add the aria-disabled="true" attribute to help IE11 out? No JS required.
Cheers,
Sean
> On 16 Mar 2016, at 3:57 AM, Moore,Michael (Accessibility) (HHSC) < = EMAIL ADDRESS 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).
> </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?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission Civil Rights Office
> (512) 438-3431 (Office)
>
> > > archives at http://webaim.org/discussion/archives
>
From: Léonie Watson
Date: Tue, Mar 15 2016 3:29PM
Subject: Re: IE 11 Bug? Work around?
← Previous message | No next message
> From: WebAIM-Forum On Behalf Of Moore,Michael (Accessibility) (HHSC)
> Sent: 15 March 2016 16:58
> 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.
>
When the disabled attribute is applied, MSAA in IE no longer communicates the checked state of the <input>. The checkbox is shown as "unavailable" in the accessibility tree. The checked state of the <input> is communicated in Firefox however, and presumably Chrome (although I haven't checked).
The curious thing is that if you remove the aria-labelledby attribute from the <input>, it solves the problem for Jaws, although not for NVDA. My best guess is that the ARIA triggers some workaround in Jaws, wheras NVDA tends not to work around the accessibility APIs.
Replacing aria-labelledby with aria-label, or by associating the <label> and <input> in the HTML itself will also solve the problem for Jaws (although it's more difficult to associate both pieces of content with the checkbox). Nothing I've been able to come up with solves the problem for NVDA unfortunately, so Birkir's workaround might be the thing.
Léonie.
--
@LeonieWatson tink.uk Carpe diem.