It seems there is not much documents out there explaining my question or even mention about.
Hoping anyone can helps me with this.
Having an simple image on the website, let's say
<img src="..." alt="some meaningful text">
Screen reader in Google extension works well as expected when reading the image that it says "some meaningful text".
However, the VoiceOver reads it as "some meaningful text, image", "You are currently on a image... To begin interacting with the contents of this image, press Control-Option-Shift-Down Arrow. To exist...".
And that is incorrect.
I don't want the VoiceOver to let users interacts with the image which is not able to, but don't know how to achieve.
Related
I want to create a page where the user is prompted to click on a button. When they click on the button I want a text displayed below it, displaying whatever I choose the text to include. Everywhere I've looked has just told me how to make an input user text button which is not what I'm looking for. I would like the solution using CSS only please.
I haven't tried anything so far. I built the original page to display the text on hover, but it wasn't intuitive when using a touch screen device and I want to avoid text overlays telling the user things like "touch here" when I could just do a better job making the site feel more intuitive to touch device users. Like I mentioned previously I haven't found useful information for what I'm trying to create. Thanks in advance.
I am developing a telegram bot that involves the process of adding a text that the user input to an existing image.
It goes like that:
The user inputs a text like his name, time, etc.
The bot adds a text layer on top of the image. (the image is constant and doesn't change).
The user gets in return from the bot the picture with the added text, in a typical image format like JPG or PNG (doesn't matter).
However I actually have no idea what kind of method or API I should use, I was thinking of something like photoshop API but it seems way too complicated and overkill. I am looking for a simple solution that is easy to learn and apply, as it is just adding a text layer on top of a picture and saving it.
I would be interested to hear how would you apply such a thing, to get ideas on how it could be done.
Thank you very much,
Shay
How can blind people use QR codes on websites more easily?
describe what would happen when scanning the qr code
https://www.w3.org/TR/wai-aria-1.1/#aria-describedby
provide a shortcut to activate the action that would normally happen when scanning the qr code
https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts
The use case of QR codes is to continue the interaction on another device, typically a smartphone.
A QR codes' inaccessibility is due to no installed QR code reader, or the lack of the user's knowledge about it's working. It's not limited to screen reader users.
I would consider it best practice to always provide a simple, readable short URL along with a QR code.
Providing a link or shortcut on the site with the code is counter productive, as users would not switch to another device. Instructions might be to scan the code on your smartphone or visit example.com/qr, which should be readable to everybody.
Once you provide these instructions, no alternative text for the code itself is necessary.
If the target URL should be opened on the device where the QR code is visible, it simply shouldn't be there, and instead a link should be used.
QR Codes themselves cannot really be made more accessible.
What you should do is also have a link located directly above or below the QR code that links to the same page (or if it is a QR code for a vCard, download the vCard etc.)
You should then add an alt="" tag to the QR code or a aria-hidden="true" to make the screen reader ignore the item. (or potentially add an `alt="QR code to do....x,y,z")
Finally you just need to make sure you change any associated wording to make sense to both scenarios.
For example if it says 'scan the QR code below to enter the competition' - change it to 'Scan the QR code below or visit the competition signup page to enter the competition' (the or visit the competition signup page part making sense as a hyperlink and in context.)
One final option is that you could make the QR code itself a hyperlink and use visually hidden text to expose that link.
It all depends on the context.
Rough Example
<a href="your URL">
<img class="yourQRcode" alt=""/>
<span class="visually-hidden">Link Text that makes sense</span>
</a>
visually hidden class
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
Update
To answer OPs statement that he disagrees QR codes are not accessible and to answer the 2 points he has made in the question edit.
1. Describe what happens scanning the QR code.
This doesn't provide any benefit different to adding visually hidden text within a link.
If you want to describe an image (which a QR code is) the the alt attribute is the most appropriate as previously mentioned.
2. provide a shortcut to activate the action that would normally happen when scanning the qr code
This is not a good idea, because at this point you then need to tell them what the shortcut is and allow them the option to change the shortcut (as they may have changed the bindings on their screen reader).
A link or button below the QR code is the ideal option, wrapping the QR code as a link and using visually hidden text is the best alternative while still maintaining your current design.
Final thought
The way I have shown you is the best way I can think of to make a QR code more usable, with a preference (as stated) to having a separate link below the QR code (in case the QR code image doesn't load at all).
More importantly though... why are you attempting to make a QR code accessible to a screen reader at all? The whole point of a QR code is to scan it with another device, at which point the accessibility of a QR code becomes relevant only that they need to know where to point the camera on their device, you will struggle to explain where to point a phone on the screen to scan a QR code using a screen reader.
As I stated they are NOT accessible as you need a steady hand, to understand what they are and how they work (as many people still do not), they are very difficult to use if you have a vision impairment etc. The list goes on....
Perhaps detail WHY you want to use a QR code as I can't see the purpose of making it accessible to a screen reader at all and it may be better to just remove it.
If you are looking for a way to share information between devices maybe just have a shortened URL for people who can't use a QR code?
I'm not sure if this is the correct part of SE to ask this question but here it goes.
If I would encounter a picture file with unknown text, I could take another picture of it and get it translated with my phone by using Google Goggles, but how would I be able to translate it on my computer? I tried entering the picture link to Google translate, but it said it wasn't able to open the file.
This isn't about a programming problem, so your question is probably in the wrong section.
However, what you're looking for is an OCR service. Use it to extract the text from the image first, then translate it.
The problem to extract the text from a picture is referred as "Scene Text Recognition" in computer vision. If the image is a picture of a pdf/document, the text can be extracted using OCR with quite good accuracy.
But if the text is present in a picture (like picture of a traffic board), the OCR may not always work. In this case you can use some computer vision APIs provided online, for eg:
You can use the Google Vision API and paste the image link in the "Try It" section to extract out the text.
I am trying to develop an accessible website with JAWS and FF but I couldn't find a way to make the screen reader not to read the codes.
I have tried using <span></span> but still it reads the codes.
For example I did this:
<header><span role="heading">Hi</span></header> and JAWS instead of reading "Hi" it says "page has one heading and no links. JAWS heading level 2 Hi."
and then when I move between browser tabs and return to the tab which I'm working on it says "Frame. Hi heading level 2"
So I'm wondering, is there a way to make JAWS reads what's on the screen only? Do I have to use AJAX or something?
NOTE: This is my first time to deal with accessibility, so I don't know where I went wrong and what should I do.