iOS safari reader view looks weird. It shows headline and underline of a video and a lot of white space. Also the title is double. It also shows the word advertisement when there is an ad in the original page.
Does anybody now wich keywords triggers the reader view in iOS and how to customize it?
I found absolutely nothing to this topic at all...
tanks :)
It seems that there's no official way to customize the viewer. It's technically implemented as Safari Extension and simply injects JavaScript in your page to do its magic. For more information, see the extracted source at https://github.com/amumu/safari-reader-js
Official Apple documentation does mention class SafariReader but as far as I know, there's no way to access that from the content (server emitted HTML or JavaScript). If you could access SafariReader it would provide required methods to better control it. Another interesting class would be SafariContentViewer. If you could somehow access SafariReader, you could then follow the documentation: Working with Safari Reader.
Related
I have some information in HTML run in a WebView on an iPhone which should not be visible to regular Users, but should be read out by accesibility features such as IOs's VoiceOver.
just putting all the information inside an aria-label="lorem ipsum dolor" attribute did not work. Voice Over stil reads out the plain content of the tag. So i tried adding an "invisible" Element holding this information. However it seem to me that VoiceOver magically ignores elements which are not visibleto the user. I tried the varios techniques described by the Yahoo Accesibility Lab: http://www.cssmojo.com/hide-content-from-sighted-users/ but none of them are working for me.
Here is the Code:
<div tabindex="2">
<h2 class="visually-hidden">Ausgewählter Ton:</h2>
<div class="jingle" ng-if="ctrl.getAlarmJingle()">{{ctrl.getAlarmJingle()}}</div>
</div>
I want VoiceOver to read out "Ausgewählter Ton:" plus the value of `{{ctrl.getAlarmJingle()}}. best case would be that all of this appears to be one element in VoiceOver the Accessibility-Tree. What is the best practice of doing this? Has anybody good resources on how VoiceOver really works?
The Project is a hybrid app using angular 1 and Ionic. We are using wkwebview as WebView, but i don't think thats relevant for VoiceOver problems.
Sorry the problem was, that my scss wasn't compiled hance the css never updated. Now that it does everythings works as expected.
I am working on developing/testing accessibility of a web page using VoiceOver [Mac Tool].
Typical workflow I am using is trial and error,
Do changes to HTML
Open page in browser
Turn on VoiceOver and test and again #1
What I understand is VoiceOver convert/see HTML/Webpage in text form and starts reading it. I hope how it does it would make it easy for me to understand how to make process easy.
So I want to know if there is any tool or utility or guidelines which could assist me to see HTML/Webpage the way VoiceOver does. I mean tool which take html as input and then output text file like VoiceOver (JUST to understand what changes affects VoiceOver in what way quickly).
Any inputs will be really helpful.
WebAIM has a great article titled Using VoiceOver to Evaluate Web Accessibility
It helps by telling you how to get set up, what keys are used, how users navigate, how to test images, tables, and other elements.
Testing with any screen reader is about more than tabbing through the page as you watch. Ideally you want to get to the point where you can turn off your screen and test. You must also recognize that most VO users do not tab through a page, but instead tend to jump around by landmarks, headings, links, lists, and so on.
I am not pasting the entire article, but here is the outline:
Introduction
Getting Started
Reading
Navigation
Other useful shortcut keys
Images
Data Tables
Forms
Practice
VoiceOver on the iPhone, iPod Touch, and iPad
Chrome Dev tools has an Accessibility Properties panel, which will show you the accessible name of an item the way it is exposed to the VoiceOver API. It would be quicker to keep that panel open and only test in VoiceOver when you are happy with what you're seeing in the panel.
To answer your question, it sounds like you're looking for the Accessibility inspector tool, which exposes the accessibility API (OSX Safari uses NSAccessibility and iOS Safari uses UIAccessibility for iOS) bits (which VoiceOver consumes). This is part of Xcode, so you'll need Xcode on your Mac to get to it
In my iPhone app, I have a "Help" screen. Currently, I use an almost fullscreen UIWebView and display an RTF with the help text inside. But as the app is growing in terms of functionality, so is the online manual. I just have to split it up and subdivide it into several "pages".
Now I wonder whether it is possible to do so without any (or only little) change to the application code, i.e. whether it is possible to mimick the behavior of a UINavigationController with HTML inside the existing UIWebView. The result should look roughly like the iPhone user manual (switch the UserAgent to "Safari iOS 4.3.3" to see it). The HTML source however should be stored in local files on the device.
Is this possible? If so, does it require more or less effort than programming the same thing directly in Objective-C?
Ideally, I would like to have kind of a skeleton, where I only have to fill in my help text.
Have you looked into jQuery Mobile? It can give you a navigation controller kind of look with HTML 5. It meant for safari applications, but I think that it should also work within a UIWebView also.
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)
In IE, with Flex application embedded, changing page location with JS like that:
document.location.href = "#someFragmentIdentifier";
causes change of page title to "#someFragmentIdentifier". I've read that the cause of that was supposed to be integration of Flex application with browser navigation, so I disabled it at the Flex compiler properties screen, however it didn't fix anything. Could anybody help me by pointing some working solution to this unwanted behavior.
Thanks.
PS: You can easily reproduce that by starting your Flex application and changing current URL by hand so it contains fragment identifier and then refreshing the page.
We've run into this using various ajax toolkits, including MS's.
It is not limited to Flex, flash, or any Adobe tech. It is purely a browser issue.
Unfortunately, the ONLY workaround we've found that was worthwhile involved "changing the title with javascript".
There's a bug in Adobe's bug tracker with various workarounds. I guess one of them should work...
http://bugs.adobe.com/jira/browse/FP-240