I have an issue with JAWS screen reader on IE browser. It reads the span tag with role="alert" twice.
This issue does not occur on Firefox and Chrome.
Also NVDA works fine with IE as well.
Only JAWS with IE is giving the issue.
After searching on internet I found the following from this site
role="alert"
This should be used for important messages that should be read by a screen reader as soon as they appear. ARIA alerts can be useful when implemented correctly, but there are so many ways an alert can go wrong. A few examples:
A hidden element has role="alert" applied when the page loads, so the screen reader reads the alert immediately (even if it is visually hidden) instead of reading it when it appears.
Focus is set to the alert when it appears, so it is read twice (once because it is an alert and again because it has focus).
ARIA alerts are triggered repeatedly, overwhelming a screen reader user.
I am guessing the above point is the reason for this.
Please help. I will add my Angular code sample if required.
You have several possible options but it is difficult to tell what is best without the code sample
Look at aria-hidden="isItIE" to get the screen reader to ignore the element if IE - isItIE would be true or false
or maybe don't make it a hidden element? Use an ngif and only show it conditionally after the page has loaded so it is not part of the dom at the start...again your condition can be based on whether the browser ie IE or not
Related
It seems as though this may be a bug with the Blink engine itself, but when using JS similar to this
window.open(Location, '_blank');
The new window always has a visibility state of hidden, and it's very consistent. Sadly JS fiddle doesn't seem to work with this (iFrames break the bug maybe?), but I have a super basic test case here.
You'll see if you open my test html file, and Ctrl+Click on the button, the new tab that opens up will always be stuck in a hidden state, which you can check in the console like
> document.visibilityState
"hidden"
> document.hidden
true
This causes weird issues with things that check the visibility state of the page, and no amount of refreshing seems to fix it either, essentially once the tab starts that way, it never comes back out of that, although closing the tab and reopening with Ctrl+Shift+T does seem to make it behave correctly.
I noticed the bug using the Dark Reader extension, some of my tabs would never fully style correctly, and I think this is the culprit. Is this a bug? Is there a workaround so my own applications can load correctly whilst making sure the tab is visible?
Chrome version: 84.0.4147.105, Edge version: 84.0.522.44
I have a realy confusing problem with IE 11.
I use AngularJS to fill an element and display the element afterwards.
It works perfectly in FireFox and Google Chrome. In IE11 it wouldn't show until I click somewhere. It doesn't matter where I click. It could be somewhere on the page itself or my windows taskbar or on my second monitor.
I don't get any javascript errors on the console. After the random click IE shows at first only blank HTML. The styling is applied a moment later.
EDIT:
My Porblem is super strange. I've never seen something like this bug. My Code is running perfectly. All elements are thier with right values at the right place. All CSS rules should be applied. The pagination shows only after a completly random click somewhere but this only happens in IE11. Every other browser works like a charm.
Have any body saw this before?
I've asked two ather web devellopers in my company and we did code reviews but can't find any bugs in the code.
We think it's an IE11 bug. But there seems to be no one that can confirm this.
Try using $scope.apply and surround your scope change statements with $scope.apply.
$scope.$on("showPaging", function(){
$scope.apply(function() {
$scope.showPaging = true;
}
});
The use of $scope.apply is not encouraged though.
I have a calendar which is currently displaying in an iframe of a form created in a third party software to select the date. In chrome, Firefox and edge the behaviour of clicking the link in the date auto-fills the input field for 'date selected' on the parent page.
However in IE11, this doesn't happen. There's also nothing appearing as an error in the console on IE11 when I check that. The code for the link is as follows;
<a name="01/08/2018" id="date" onclick="myFuncclick(this.name);" href="javascript:myFuncclick(this.name)" target="_self">1</a>
with the following code to catch it at the bottom of the calendar page;
function myFuncclick(name){
parent.myFuncread('#Field38',name);
}
and on the parent page the following script;
function myFuncread(field, value){
$(field).val(value).change();
}
Already I'd seen that there have been posts about JS onclick not playing nice with IE11, and had attemtped to remedy this by using the href="javascript:myFuncclick()" addition but IE11 still seems to be blissfully ignorant of the whole thing.
Has anyone had similar issues with IE11 & managed to work around it?
EDIT -
So in IE11 I can (by changing the function to have an alert line as well) get IE11 alerting the variable that Chrome and Edge are happy passing. For me this means that the parent window JavaScript might be where the error lies, maybe something in the way IE11 handles cross-window scripts.
I have this landing page, for some reason I can't see the check box, submit button and a div that are in the code. Everything works in chrome and Firefox. I understand that IE dosen't always get media queries so I made this landing page that calls a diferent css file when it detects IE, but it made no difference.
I have a few questions:
1. What is causing this?
2. How can I fix it? Is there a file, like modernizer, that I can load to modify code for IE.
3. I am also using this js addon on the second link with a separate css file, in order to see place holders in IE. This also doesn't work, if someone could tell me why, that would be great
I see the checkbox just fine in IE. why don't you show an image of what you are seeing. Also, clear your browser cache.
To help debug, you should press F12, then click on console. make sure there are no errors. Then click Network. Make sure all css/javascript is loaded with no errors. finally, in the dom explorer, click the arrow, and click on the page and see if the elements are there.
as i see it this is the solution to my question
at the top of the css file i had this row:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
once i removed it i got the mossing elemnts.
tnx for helping
Dav
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image