Info:
Screen Readers: Jaws 14, Apple Voiceover
Browsers: IE, Chrome, Firefox
So I have a web flow that I'm trying to make accessible via screen reader. Now it is composed of multiple vms. In the header there is a skip to main content so user can skip the redundant header that shows up on each page of the flow. My issue is the main body of the page gets ignored by the screen reader. I was able to use the following code to bring attention to the content and the screen reader will read from there.
<script language="javascript">
function reload() {
window.location.href = "#page1";
}
</script>
then a tag to use as a anchor as follows:
<a name="page1" id ="page1></a>
This works great and all BUT now it skips over the header of the page.
So my question would be, is there a way to make focus to go back to the top of the page or a better way to force that content to be loaded to the screen reader will read it in a linear fashion?
I only have this problem in IE (yep who would of expected that). Voiceover and Jaws 14 has no problems in any other browsers.
Hopefully this description is clear, if not I can try to elaborate more if needed.
Thanks for your time, its greatly appreciated!
It sounds like you are updating content, inferred by the main body being ignored, in which case you might want to check out live regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to communicate the update.
If main text is failing to voice when following the skip link without a dynamic update please post the HTML.
Related
I have a page that has multiple iframes in it:
parent
|___iframe1
|___iframe2
|___iframe3
iframe1 has a form with some hidden values. I need ( at least ) one of those values on iframe2
Here's my code
<script type="text/javascript">
alert(parent.frames[0].document.getElementById("UserID").value);
</script>
The first time the site loads, this page works fine. I get my testing popup. iframe1 is a bunch of tabs that reload iframe2. When the user ends up navigating back to the tab that includes my script I get a null reference for parent.frames[0].
I'm pulling my hair out trying to fix this and would appreciate any assistance.
I can get this to replicate 100% of the time in Firefox & IE. With Chrome & Safari it's less so. Not in that the value is null less often, but MORE often than not the information is not accessible and I'm just not sure what I'm doing wrong.
Edit for ease of visibility: These frames are ALL on the same domain, same protocol & port.
While I AM implementing the use of easyXDM so that I can pass some data to another site, I have this issue if I include easyXDM or not.
Thanks!
It looks like it's due to the onLoad as suggested by ddr2. If you post this as an answer I'll be happy to flag it as the proper one.
I'm kinda bummed I didn't think of that :(
I created a mobile site in html and jquery, but it is not loading properly in Chrome (or on an iphone). There is no backend to the site - all changes to content would happen right through editing the html. Inside of my html, I made no specific reference to ajax. And, each page links through "#pageid. The problem is that as I navigate the site, various pages do not display correctly unless I hit "refresh." URL is mobile.shorelinelake.com. I am VERY new to this, so please be patient with a newbie :) Thanks for any help!
http://mobile.shorelinelake.com (if you click through to "Lake" and then "Sailing," or "Cafe" to "Menu," you can see the problem - the page jumps after loading, cuts off the header, places content below the footer, or will entirely hide jquery elements...)
One thing I noticed right away is that your using an old version of Jquery and Jquery Mobile. There have been alot of improvements since the alpha that you are using. Also you are linking to a few files that aren't there. Phonegap.js and ajax-loader.gif for some reason are not found. In my console I see 196 warnings that I believe are all related to you using old versions.
Also you have 31 html errors. One example is here
line 88:
<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">
You have alot of stranded </p> tags. Most of them are in the menu page. Fixing these errors is necessary to troubleshoot your problem. Try running your document through an html5 validator to find these mistakes.
I also recommend breaking this into smaller pieces. Here is my reasoning:
Easier to maintain and edit.
Keep the dom size reasonable. Jquery will remove the old pages from the dom keeping it very manageable.
Faster page loading resulting in a better user experience. Your user will probably not be going to each page. Only load what they need to see.
Bandwidth could be costing your user extra money on a mobile device.
I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.
Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();
I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});
As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.
My layout breaks if I change the window size in IE7/AOL, so I added a simple javascript function that fires on window.onresize, but no matter how I change the location I get problems.
It was suggested I post a link and here it is: http://sinaesthesia.co.uk/
I already use PHP to detect browser and include an IE7-only inline stylesheet (and for mobile browsers), and my page looks nearly identical to the way it does in FF, Opera, Chrome, Safari and IE8, but when I change the window size, some things go wonky, and come back into line if you refresh. Any advice is welcome :)
I advise you to fix the real problem: your layout breaking when the browser is resized. Reloading the page onresize is definitely not a best-practice.
If you post a link to your page, you might get some good insight into the sources of your problems.
I think that fixing layout issues like yours with javascript is not a good idea.
A better approach would be to detect what is broken. and add a conditional comment to include an IE only stylesheet.
You should fix the layout problems instead.
There is no way to refresh a page in the way you want to do it. On reload, everything will be redrawn, and the blinking/not blinking is dependent on the exact state of the users' browser.
I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.
Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.
If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.
Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)