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.
Related
I'm working on a website that has to be accessible for almost anyone.
Currently, I'm trying to figure out a way to make checkboxes accessible by different types of screen readers, using the keyboard to navigate through the content. At the moment i'm using both the standard Windows Screenreader and NVDA (see https://www.nvaccess.org/). I've tried different solutions I found on the web, but i'm still stuck and I would love some tips and trix on how to implement these sorts of features. One thing to note is that it has to work for different types of browsers (ideal would be Microsoft Edge, Google Chrome and Internet Explorer).
The ideal scenario would be something like this:
1: Navigate to the checkbox (or list off checkboxes) using the tab key.
2: The screen reader informs me that it's a checkbox, it's current state (checked, not checked), and its label.
3: Space key will uncheck and check my checkbox, informing me of my actions.
Here's two different code snippets that I've tried, but they only work on Microsoft Edge and Internet Explorer:
<fieldset id="accept">
<legend> My legend </legend>
<input type ="checkbox" id ="chbox" name ="check_1">
<label for "chbox">This is my checkbox></label>
</fieldset>
And this is when i'm using the Struts checkbox tag.
<span class="">
<s:checkbox
label="someLabel"
name="someName" id="accept" />
</span>
These work as expected in Microsoft Edge and Internet Explorer, but whenever I'm using Google Chrome, the screen readers are having trouble figuring out my content. The scenario I'm having:
1: I'm tabbing to my Checkbox, the screen readers say "Tab".
2: I'm using the space key to uncheck my checkbox, the screen readers
say "Space". (It still unchecks my checkbox though)
Apart from this, I've tried to surround my code in different divs, assigning roles and web-aria, but nothing seems to work. As I'm totally new to this, I would love some 'best-practice' ideas and tips.
Any help is appreciated,
Thanks in advance.
First, I could suggest you not to use Struts checkbox as most of them are design for legacy browser. And it may not always best for modern screen reader.
Regarding the checkbox, the recent recommendations from ARIA reference is to use DOM structure <label><input>Text</label> over <label for>.
Or use aria-label on the checkbox. But the second way is less recommend due to different support from browser/screen reader. In some bad case, they could ignore or read duplicate by different way to read the line.
Well, it's kind of a Chrome Issue.
Check this as you're not the only one.
I don't know any solution for this, I've bumped into this a few years back, luckly I just had to make it at A/AA.
It's worth mentioning that Narrator does not support third party (non-Microsoft) browsers.
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.
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
a client of mine wanted a website translated in some languages. We decided to use the simple Google Translate funcion.
The issue is that everytime the website is translated the majority of the links aren't working anymore (you can't click on them).
Does anybody know how to solve this?
Many thanks
I got into the same trouble. The problem came from jQuery scripts conflicts in my case.
If you manage to deal with all script errors / conflicts on both the Google translated and the original pages of your website, you'll be fine - all the links should work.
Other situation that can occur is that you create an HTML structure with block elements inside a link (invalid for HTML4 and XHTML):
<a>
<div>
<p>...</p>
<img />
</div>
</a>
In this case, Google Translator will remove the link from the structure.
Note: I haven't tried it with HTML5 doctype. HTML5 allows wrapping pretty much anything inside a link, therefore, Google Translator might not remove the link with HTML5 doctype.
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. :)