WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: IE 11 Bug? Work around?

for

From: Megginson, Jason
Date: Mar 15, 2016 12:41PM

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 REMOVED>

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL 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 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?
>
> 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.