Screen readers and JavaScript print feature - javascript

I have written a JavaScript-based print feature for a web page. It extracts HTML from a hidden div on the page, renders it into a new window and triggers the print dialog.
The option is made available over a button with an onclick="printTheThing()" event. I know that for example screen readers have some caveats with JavaScript. I am wondering whether/how many people such as blind or vision-impaired I block from using this feature.
The implementation opens a new browser window and appends to its document:
function printTheThing() {
var dispSettings = "toolbar=yes,location=no,directories=yes,menubar=yes,"
+ "scrollbars=yes,width=550,height=400",
html = $('#theDivToPrint').html(),
printWindow = window.open("", "", dispSettings),
doc = printWindow.document;
doc.open();
try {
doc.write('<html><head>');
doc.write('<title>' + title + '</title>');
doc.write('</head><body>');
doc.write(html);
doc.write('</body></html>');
} finally {
doc.close();
}
printWindow.focus();
printWindow.print();
}
Update: This is what the button looks like:
<button type="button" onclick="printTheThing()">Print the thing!</button>
In addition, I am using CSS to replace the button by an image. I have tested the button with the Firefox plug-in "Fangs". It suggests that screen-readers will perfectly read out the original button text. But Fangs does not provide any interactivity so I cannot test the printing with it.

The Chrome extension shouldn't be relied on at all. You should test stuff with NVDA, which is free. I will guess that Google fanboys will say Chrome Vox is fine. Trust me, I have been working with AT for nearly 15 years.
Anyway, I would need to see the code for the button, not the JS... The JS looks fine. Some people have trouble with knowing there is a new window, however the print dialog should grab focus versus the window

to improve accessibility by using screen readers use W3C WAI-ARIA live regions, for more info see their recommendations and FAQ.
to test you can use the following screen readers:
on Windows - JAWS, NVDA
on Linux - orca (is not working with Chromium) + advice of Florian Margaine
you can also use AChecker to test on compliance of WCAG 2.0, Section 508, Stanca Act accessibility standards.

The best way is surely to try it out yourself.
There is a Google Chrome extension allowing you this: https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn

The way to render a printable page is to use #media CSS directives. That way you don't need to do anything special like pop-up another window or worry about accessibility: the content is simply printed correctly (and possibly very differently from the on-screen layout, if that's what you want).

Related

javascript (window.open) opens maximized in all browsers but not in chrome

I am using the following code to open a maximized pop up window, i don't want to open it full screen (F11), I need it just maximized, exactly like pressing the button between minimize and close.
<a onclick="javascript:w= window.open('https://www.facebook.com/mywifemylove','_blank','channelmode =1,scrollbars=1,status=0,titlebar=0,toolbar=0,resizable=1');" href="javascript:void(0);" target="_blank">Maximized on Chrome</a>
It's working fine for all browsers but not Chrome, Here is a jsfiddle for testing
With the exception of IE, browsers do not support going fullscreen with JS. This is intentional:
https://developer.mozilla.org/en-US/docs/Web/API/window.open#FAQ
"All browser manufacturers try to make the opening of new secondary
windows noticed by users and noticeable by users to avoid confusion,
to avoid disorienting users."
You can manually set the size of the window to the screen size but you may have to deal with things like frame border thickness.
Relevant SO question:
How to open maximized window with Javascript?
Working code for max size window on latest versions of IE, FF or Chrome:
window.open('http://www.stackoverflow.com','_blank','height='+screen.height+', width='+screen.width);
You can open window tab with below code:-
window.open(src, "newWin", "width="+screen.availWidth+",height="+screen.availHeight)
function openMax() {
var wihe = 'width='+screen.availWidth+',height='+screen.availHeight;
window.open("ht*p://www.example.com/",
"foo",
"screenX=1,screenY=1,left=1,top=1," + wihe);
}
I think following code is helpful to you.
<a id="popupLink" href="#"> link name</a>
jquery.click(function(e){
e.preventDefault();
var newTab =window.open('','_blank','channelmode=1,scrollbars=1,status=0,titlebar=0,toolbar=0,resizable=1');
newTab.location = "https://www.facebook.com/mywifemylove";
newTab.focus();
});
Unfortunately, I don't think you can actually use it in chrome. I've also tried it but couldn't get it to work in chrome.
I know it is really helpful to actually make it maximize more quickly that makes it so the user don't have to click the button but that is how chrome works.
Here is a jsfiddle example that will be as close as possible to maximization. It is always good to try to make alternative options. Here is the code from the onclick attribute. You can insert all your previous code to that argument as well, just removed that to show what I changed to it.
javascript:w= window.open('https://www.facebook.com/mywifemylove','_blank',`height=${screen.height},width=${screen.width}`);
Here is also a w3School documentation of the arguments as well, just in case you wanna look through it and see what's supported and what is not.

Open Window with Pre-Filled HTML

Sorry about the odd title, I'm not sure how to phrase the question. Basically, I was wondering if it is possible open a new window and fill it with HTML from the front-end rather than code an actual route, db calls, etc. (Yep ultra lazy.) Thinking along these lines...
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>'
window.open(html);
Am I just wishing upon a star here? Is this even possible?
The first thing you need to do is make the popup have a variable -
var popup = window.open('blankPage.html');
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>';
popup.document.write(html);
Edit this answer no longer works because of security features implemented that block certain data: URIs.
See Open a new tab/window and write something to it? for working answer
There is the option to use a dataurl...
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
Data URIs are currently supported by the following web browsers:
Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine
Safari, Chrome and other WebKit-based browsers
Opera
Konqueror
Internet Explorer 8+ (with certain limitations)
The suggestion to do the following
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
no longer works on Chrome due depreciation of the 'data:' allowance.
https://developers.google.com/web/updates/2017/03/chrome-58-deprecations#remove_content-initiated_top_frame_navigations_to_data_urls
If you used this previously, your code will now open a blank window instead.

Create a Bookmark link that works in Safari

I have tried using JavaScript "AddFavorite" function in my code, but it does not work in Safari. It works in IE, I think I remember Firefox, but nothing I have tried seems to work in Safari. All I want to do is have a link on my website that people can click on and it automatically creates a bookmark in their bookmarks folder/bookmark bar.
Does this entail Applescript or something like it? Or a deeper programming language I am unaware of?
<a href="javascript:bookmarksite('Name', 'website.com')">
From the apple forums: forum-link
On the Mac side at least, Safari does not allow a website to add a
bookmark. I'm pretty sure the same behaviour is in the Windows version
as well.
I've been down this road, and what I discovered was that Safari does NOT allow bookmarks to be made with JavaScript:
Apple Forum
bytes forum
They consider it unsafe. As frustrating as this is, I get their point.
Unfortunately, most things like this tend to be browser-specific, and picky.
my JS is about level 0, but i did find this on an old article here:
One specifically for Chrome:
Add to favourites link for Google Chrome
And another on a cross-browser bookmark link:
Cross-browser bookmark/add to favorites javascript
Hope between the previous comment and these links, you get what you needed.
Chrome and Safari does not allow it for clear security reason.
You could usee a script like this:
http://www.dynamicsitesolutions.com/javascript/add-bookmark-script/
which handles many browser and has a nice fallback: show a browser customized alert with instructuion message.
Es: in chrome it says: "Ctrl+D to add as bookmark"
In IE something similar to the following would work: (MSDN)
window.external.AddFavorite(location.href, document.title);
However, this won't work in other browsers. In Firefox, I believe you can use
window.sidebar.addPanel(document.title, location.href, '');
to create a sidebar panel (not a real bookmark) but as far as I know Chrome and Safari do not allow Javascript to automatically create bookmarks. For those, I recommend giving the user the instructions to do it manually:
drag a link to their bookmarks
pressing Ctrl + D to add a bookmark
Clicking + or star icon in the toolbar

JavaScript window.open function is displaying toolbar and menubar when instructed not to in IE7

I am currently trying to open another IE window using the code below, but the toolbar and menubar is still showing under IE7, it seems to work under IE8 though. Why is it doing this?
mywindow = window.open("dataviewer.aspx?id=" + id , "", "toolbar=no,location=no,directories=no,menubar=no");
I seem to recall having to add a website to my "trusted sites" list in IE7 to get the toolbars hidden. Of course that isn't going to help if you can't control that for your visitors, but I think it was something locked down as of IE7 -- even though MSDN doesn't state that. It might be an advanced setting, or maybe it was related to some 3rd party add-on or anti-virus I had. I just know I had a website that launched a small window that was meant to be a "floating toolbar" and it worked great in IE6, but once I upgraded to IE7 the width and height worked, but it had toolbars. I added that site to my trusted sites list, and it started working again.
If that is the case for you, I'd check the advanced security features and see what is different between normal and trusted sites, and maybe fine the one setting that controls this.
It works in IE7-mode in IE9. I don't have a machine with real IE7 installed.
The directories features is no longer supported. Just a guess, but that might be your problem.
One thing to try is to specify only "toolbar=no". Once you've specified to disable one of the features, the rest of them default to no. If you wanted no toolbars, but you did want an address bar, you'd have to explicitly say "location=yes" to get them back on. So, setting just one feature to no is good enough to turn the rest of them off as well.
Try this: http://jsfiddle.net/VD8sk/
mywindow = open("dataviewer.aspx?id=" + id , "", "toolbar=no");
Edit: Maybe also try "toolbar=no,menubar=no" without the other features specified.

Can I write HTML code to Window.showModalDialog()?

I use :
Window.showModalDialog(...)
to open a dialog window,
I want show some HTML code in this window, but I don't have a file. (Can't use URL to visit)
like show "hello world!" in this dialog window.
Can I do it?
Interesting question!
I'm not an expert in modal dialogs, but I don't think you can, because it's in the nature of a modal dialog to block any further code from being executed until the window is closed again.
I thought about using a data: URI that you could use as the first argument to showModalDialog instead of a normal URL:
window.showModalDialog("data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" ....);
but according to the MSDN page on data: URIs, that will not be supported in Internet Explorer. (see the "Remarks" section on the linked page)
It might work in Firefox, though: More on data URIs at Mozilla Developer Central
Update: It works in Firefox: JSFiddle but, as expected, not in IE. You only get a blank window there.
Good question and answer. (+1)
I just thought I'd add, that if you do need to enter HTML into a modal dialog, you may want to look into using a Javascript library to accomplish it. I've used Dojo's "dijit.Dialog" several times with HTML, including images, form controls etc... You can style it however you like, and it works well cross-browser.
You can check out a few example of dijit.Dialog's use over at DojoCampus.
Cheers.

Categories

Resources