We are trying to improve handicapped accessibility of one of our pages and allow a user to perform all the actions without a mouse. The page contains some buttons and an iframe with a pdf document. In IE11 I can tab through the buttons but when the control goes to the pdf viewer iframe, nothing is highlighted and pressing tab doesn't do anything.
In chrome pressing tab will cycle in through the buttons, than the handful of controls on the pdf and than step out of the viewer and start to cycle again. How do I get IE to do the same thing.
As a side note if I use shift+tab to cycle backwards, IE will ignore the iframe and cycle through the elements correctly. In fact after tabbing into the iframe, I can use shift+tab to get back to the button controls.
Any help would be greatly appreciated.
It sounds like you're trying to test PDF accessibility in the browser, which isn't really how things are done. The PDF viewers in web browsers are inferior to Acrobat, and people who need assistive technology likely won't be using the PDF readers built into IE or Chrome anyway.
As a starting point, I'd recommend opening up the document in Acrobat and making sure that it has tags. If it doesn't, you can try to have Acrobat generate them for you. If you're using any kind of a complex layout (other than simple text, images, and maybe lists), then the tagging will probably require you to manually review and correct them. PDF tags are structured very similar to HTML (but not entirely identical). If you already know HTML, then you'll probably be able to tag PDFs well enough. Otherwise, there's going to be a learning curve.
PDF remediation is an art unto itself that takes some time to master.
Here are some resources that will hopefully point you in the right direction:
https://webaim.org/techniques/acrobat/
https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html
https://www.washington.edu/accessibility/documents/pdf-acrobat/
Related
Not a good way to start, but pardon me if this if off-topic, it seems like a programming question though...
From an ASP.NET website I want to open a page in a new browser that has a toolbar at top and an iframe-like window at the bottom. The frame-like window will support tabbed browsing and load a third party website. The toolbar will have buttons that allow the user to manipulate the HTML (form-fill and web-scrape). For example, toolbar buttons may be "Extract Webpage Data" or "Fill Form".
Ideally it would work with IE, Edge, Chrome and Safari, but an absolute minimum requirement is IE, a more preferable minimum requirement is Chrome and Edge.
I have seen this done, well, by other proprietary software. I do not know if they require a specific browser (like IE where they can install a plugin) or how they do it, that is my question.
So I have narrowed this problem down to three possibilities:
Use pure HTML, Javascript, et al. - Using an iFrame almost works perfectly but the content will not be in the same domain so I cannot access the iFrame's HTML.
Use (or write) a proprietary browser - I do not think you can (or want) to launch an EXE from a web page, plus this seems rather complex in itself.
Use (or write) a plug-in - Probably limits use to IE. I think an IE plugin could do what I want based on other plugins I've seen.
I have past desktop programming experience with a web automation and scripting product, while promising, I don't think they offer what I need:
They have an ASP.NET COM component that runs server side so it does not display an interface to the user but can be used to silently fill and scrape a website based on scripts.
They also have a proprietary browser that shows a user interface and runs scripts to fill and scrape. But this is an EXE, so cannot be launched from a web site.
They have an IE Plugin, that adds a companion popup window that attaches itself to IE. Similar to their browser and runs scripts.
Question - This can be done, I've seen it, but what is the mechanism? I'm leaning to an IE plugin.
If plugins are the answer, chrome has extensions, is that a possibility?
Does anyone know if the aria authoring web page is keyboard accessible(https://www.w3.org/TR/wai-aria-practices-1.1/) ? Looking for keyboard interaction assistance to move focus between the left and right pane.
It'd be nice if browsers took advantage of landmarks so that keyboard users would benefit. Currently, only screen reader users benefit from them. Most applications on a PC allow the F6 key to navigate to different areas. Try it in Word, Excel, browsers, whatever desktop apps. It even sort of works on the authoring practice page, but not completely (at least not in firefox).
We had to implement our own landmarks dialog that we invoked with Ctrl+F6 (so it'd be similar to F6) and we'd query the page for landmark roles and display them in a dialog to allow you to quickly jump to a section of the page.
Skip links are about as close as you can get now, but even that wouldn't help on a page like the authoring practice. If I had tabbed through half the links in the left nav panel and then decided I wanted to move the main contents in the right panel, a skip link wouldn't help. I'd have to navigate back to the skip link in order to jump to the main section. It'd be nice to hit a key while I was in the middle of the left nav to jump me to the right side.
You could use the accesskey attribute to allow a shortkey to move between the two, but those are hard to discover. JAWS will tell you about the accesskey but NVDA and VoiceOver will not. If you don't have any indication on the screen that there's a shortcut/accesskey, then how will people know it's there. Once they know about it, it's great. For example, wikipedia has an accesskey='f' on the search field, but you might not know that. Once you do know it, it's great to be in the middle of a wiki article and hit alt+shift+f (on firefox and chrome) or alt+f (internet explorer) to quickly jump to the search field.
You could do the same with a left panel / right panel configuration if you had an accesskey on an object in the left panel and a different accesskey on an object in the right panel. Just make sure users know about it.
Short Version:
I am using Chrome 27.0.1453.94 on Windows 7 Pro
I go to http://www.try-phpbb.com/30x/ using Chrome
I select Print... | Save as PDF
The print preview looks nothing like the web page - layout, links, fonts all wrong.
Why?
How can I fix this to make the PDF styled the same way as the web site?
Long Version:
I am a member of a secure forum (ie have to log in for access), which is base on the phpBB forum template (https://www.phpbb.com/). Our forum will be cleared of all threads and posts soon to make room for the next round of subscribers.
We have been given permission (even encouraged) by the moderators to download the contents of each topic/thread/post and write them into PDF files so we can keep referencing them in the future. We have to do this ourselves, and I volunteered to do the work as I have an IT background. But its proving harder than I thought.
I was hoping to do the following this process...
Download and add "Stylish" Chrome Extension
(https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)
Add CSS code to Stylish to modify the appearance of the forum pages ready for PDF migration
In Chrome use Print | Save as PDF option to save styled page as a PDF doc
For multi-page forums, repeat this process for each page and then use PDFMate (or similar) to concatenate the PDF docs together into a single long PDF.
Steps 1, 2 and 4 are working perfectly, but step 3 is not.
The print preview in Chrome screws up the appearance of the forum pages. Layout styling is lost, fonts are completely different, links are missing or look terrible. For example, try printing this page (http://www.try-phpbb.com/30x/) - it looks completely different in print preview to how it looks in the browser.
Is there something I can do to fix this? Can I somehow give the print preview version some CSS code to restyle it? Anyone know why this would be happening?
Or alternatively, can you suggest another solution to convert HTML to PDF? I have tried Chrome extensions "iWeb2x" and "Send to Google Drive", but with no success - because the forum is secured, the PDF file they create is the forum's Login page, not the forum thread page I'm currently looking at.
Any help greatly appreciated - thanks.
Have a look here, maybe it's helpful
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
You can set your own css style for the printed page.
Hope it helps, regards
I had a case, where if the iframe is display:none, the css is not loaded, thus not printing the correct CSS style. You can fix it with visibility:hidden; And size zero
This may sound like a SuperUser issue, but I wrote the page in question and I'm wondering if there is something I can do to fix the problem....
I have a page in production that simlply displays data in a bunch of tables. Our employees basically go to this page to print a form with our clients information filled in for them. Today for a specific client the page is not printing. I've tried printing using IE 7 and 8 as well as Chrome on Windows XP and Windows 7. This client's data is by no means make the page longer or contain more data that others clients.
Symptoms:
Does NOT print using IE8 or IE7 on WinXP and Windows 7.
DOES print with Chrome.
The page to print is displayed fine as a far as the actual web page goes... it scrolls, there are no errors and and nothing seems to be wrong with the page.
When using IE to print, the document just spools with out actually printing out...I end up canceling the document from the printers window.
When viewing print preview the first page is displayed, but when we try to go to the second page in the print preview IE locks up.
This does not happen for every client, but when it does happen it can be reproduced.
The page is pretty long and has client info that is keeping me from just copy and pasting the markup for you guys. I am hopeing that some one else has experienced a similiar issue in IE and has some advice.
NOTE: The users are not allowed to use other browsers, so save the IE flamming please.
Hmmm, very hard to tell without markup.
Just to throw some ideas:
Are you using anything difficult on the pages, like Flash or Java?
Custom fonts / cufon?
Huge downscaled images?
opacity or IE specific crazy filter CSS rules?
A huge structure that IE doesn't manage to break up into pages, e.g. a giant table with position: absolute ?
If you use images, try turning off the images. Try turning off CSS.
A few things to try when debugging:
Switch everything over to a standard font and font size (e.g. Arial 12px).
Eliminate all CSS and JavaScript, and if that fixes it then you can narrow down from there by taking out chunk by chunk until it starts working.
If that doesn't work, try cutting down the content significantly to see if it will show up.
I'm working on an app that's sort of a bastardization of old and new tech (ASP/ASP.NET). It's all running in IE7. I'd like to be able to right click, View Source and actually see all the html that I'm seeing with my eyes. For example, I have a bit of text in the middle of the page that's in a table. I right click directly on that bit of text and "View Source" and the text isn't in the HTML that I'm looking at. There's no line break or special characters. It's a single piece of text like ABC123. Yet ABC123 isn't in the HTML that I see when I view source.
Is this just something that I'm stuck with? If not, how can I get to the HTML that I want? The app won't run in FF so Firebug is out of the question. I've tried a few developer toolbars for IE but have found them to be flawed at best, not working at worst. It's just very frustrating; I want to make a little change to a style of a TD and I have to go through way too much work just to see if I like it (because of the complex way that the HTML is generated).
When developing in IE I use the IE developers toolbar:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
It will allow you to see rendered HTML on the page, and allow you to drill down and select specific elements that you want to see. There are various highlighting functions, and you can trace styles back to their source.
It's not the be-all and end-all of developer toolbars, but for those times I can't use Firefox / Firebug it does the job over other solutions I have tried
IE7 Pro gives a right click and "View Generated Source" option.
Some ideas:
Firebug Lite
Use IE8 (with its developer tools) in compatibility mode.
MS created a developer toolbar for IE7 (sort of like Web Developer FF extension): http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Temporarily add a link with an onclick handler to dump document.outerHtml into a <pre>