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?
Related
I am trying to select a dynamic calendar on a website. My goal is to open the calendar and input dates as I need to. I am not able to open the calendar by "Press button on web page" or "Click link on web page" with my selected UI Element. There are no ID's available to select. I have tried using the div class names with no luck. I have tried altering the selector to make a custom selector that looks for div names containing part of the class name. The 'Name' attribute in Power Automate is unavailable for the UI Element.
After trying all this, I noticed an Icon that is part of a div for the calendar, has
aria-hidden="true"'. When I checked the MDN here it has a warning statement: "Warning: Do not use aria-hidden="true" on focusable elements."
With being unable to select the calendar with standard and custom selectors, am I being blocked by the accessibility setting? Is Power Automate unable to focus on the calendar opener from aria-hidden="true"?
I don't know power automate, but what you observe makes sense. The attribute aria-hidden=true tells assistive tools such as screen readers and voice control software to ignore the element, as if it wasn't present at all.
A focusable element must never be aria-hidden=true. A screen reader won't know what to say when landing on it, and, as observed, it won't be reachable using voice control.
That's simply a pure accessibility fail (I would even call it stupidity, but well).
Technically, the solution is very simple: remove that stupid offending aria-hidden=true. Those who made that calendar probably put it there because:
they thought that screen reader and voice control users will always enter a date by hand and won't ever use the date picker
the date picker hasn't been made accessible, and so it's better to ignore it completely rather to present something only partially accessible
They copy/paste the code from elsewhere and didn't pay attention
They have no excuse for the third one, and for the two first, both reasoning are just wrong. Even if it isn't perfect, it's better to have a little something rather than nothing.
Keyboard-only user or screen reader user don't necessarily mean eased to enter a date manually. ON a mobile, the virtual keyboard is often painful to use, and people with limited movement sometimes use a device with only a few available keys (such as enter, tab, escape, and arrow keys only). Additionally, both might be combined if you think about someone who has a strong dyslexia and an inability to use his hands (the device would be actioned with feet, blinking eyes, etc.).
In theory, you shouldn't ever use custom widgets if you can avoid it. For entering dates, the standard exists: input type=date and friends.
Using standard widgets is the best guaranty to have something accessible at long term. Even if it might not be 100% accessible right now, it's getting better as the time passes.
Sadly, UX designers often don't like standard widgets much because it doesn't look like what they want, and there are still a few older browsers which don't support them all very well.
This might be too simple to find an easy solution for.
We are moving to a system where our staff clock on and clock off using a QR or Bar code.
We can provide each staff member with their own QR code on a sticker and they clock on/off by passing it under the scanner as they arrive/depart. (Typically this is stuck on the back of their phone.)
A better option would be to display the code on the screen of the phone itself. This can be done by saving the code in the photo gallery and displaying it for scanning but this is quite fiddly and the whole point is to streamline the process.
Any suggestions?
I thought there might be a way to create a home screen icon that links to an image and displays it but if so it alludes me.
Failing this I thought there might be an app to achieve the same result but I have not been able to find one.
First, have a imgur or any other photo sharing accounts. Then, put all the staff's qrcodes in there and assign each their own qrcode link which they can add to home screen
The link will look something like this
https://i.imgur.com/9EQgzFm.png
How can you generate the codes like shown below:
I will assume you want to use an existing standard instead of attempting to invent your own encoder\decoder.
Any 2D barcode can be intentionally damaged for esthetics if you crank up the redundancy used for error correction. 2D barcodes are designed to survive a certain amount of damage. Placing an image in the center and rounding the corners are both considered damage from the perspective of the reader. For round corners you can't use a barcode with orientation dots in the corners, like QR. You must choose a format that is oriented with a marker in the middle like:
MaxiCode
https://en.wikipedia.org/wiki/MaxiCode
ShotCode
https://en.wikipedia.org/wiki/ShotCode
Aztec Code
https://en.wikipedia.org/wiki/Aztec_Code
Similarly, if you wanted to place an image in the center then you wouldn't want to use one that requires a bullseye for orientation, unless you can retain the bullseye somehow in your central image. To place an image in the center and also round the corners you need to get creative. In your first image there are four tracking dots around the image. In the second and third examples the company uses it's own logo as the orientation point.
The first code you show is a proprietary code made by Facebook. It is now no longer used by their products, but some sites, e.g. respond.io may allow you to create them and some regular QR code scanners may be able to read them.
The second code is a Snapchat code and can be made on their site directly when you log into your account. You can also do it the the app on your device using their support instructions within limits for success.
The third code is a Kik code and there is a blog post of how to make that possible by generating a key and then downloading the code image in the color of your choice. They have more posts about how to work with them.
With all that said and done, you could try a site (not affiliated) like QR Code Go to make regular QR codes that are a little fancy. Thank you. Good day.
I'm enhancing the UI for an application to be more compatible with screen readers. The problem is I keep running into issues and I'm beginning to suspect that it' due to the screen reader itself.
Right now I'm mostly testing JAWS 15 with IE 8 (due to corporate limitations it's basically all I can test with at the moment) and getting some weird behavior, but as near as I can tell the aria markup and html all look correct.
For instance:
In some hidden divs (role="alert") the JAWS does not speak "button" after reading a button's name after the DIV is show. (It does speak "button" once you tab to the button though.)
JAWS is speaking elements with aria-hidden="true," which was fixed according to this thread.
Again with hidden alert divs, in some cases JAWS will repeatedly speak elements. In at least one case it will repeat the header and the first line of text infinitely (or at least until my patience ran out.)
The altText for images in table is not read when the entire page is first read. It does get read when the user navigates through the table with the table commands though. I don't even know what corret behavior is on this one...
I'm basically looking for something where I can find out if these are known issues with JAWS/IE8. And if there's a list of compatibility out there (similar to the HTML5 compatibility list) I'll be able to refer to it whenever people bring these issues up.
http://html5accessibility.com/ is a starting point to discover whether a browser has accessibility support for native elements and attributes.
If you're looking for documentation of screen reader support for ARIA attributes, check out The Paciello Group. For example, Steve Faulkner published a post on role=alert that may be helpful.
How to Disable print, print screen, right click using asp.net
You cant. You cannot avoid content being copied from your pages.
Disabling Right Click is possible, but it doesnt solve your 'problem'. The user could still copy your image, by disabling javascript or just inspecting the source.
And even if you could disable those keys, the user could still just make a photo of his monitor. Good luck disabling that!
Short answer: You don't. You are writing a web application; features of the underlying platform are outside your scope, and you have no business trying to fiddle with them.
Long answer: You can try to capture those keys using javascript, and override the default behaviour, which will somewhat stop very naïve users, but all it takes to disable this "security" is to turn off javascript. Even if you come up with more sophisticated "protection", the essence remains: You are sending content to the client, and once it gets there, it is out of your hands. Given suitable tools (wget is enough for most things), anyone can copy and modify your content in any way they like. Similarly, whatever can be shown on the screen inside a browser can be captured and saved. There is no way around it. If you don't want your content copied, don't send it.
Forget about it. You will irritate your end users who will find a way to con you and do what you didn't want them to do. Forbidden fruit is always the sweetest. By telling them explicitly "you cannot do this", they will wonder why do you want to guard your content and they might try even harder to do stuff you otherwise wouldn't want them to do.
Psychology and technology are against you in this case.
Printing
You could disable printing (well sort of - it's not 100% effective) using a "print" style sheet.
I have not tried it myself, but here is a link that could get you started: http://webdesign.about.com/od/advancedcss/qt/block_print.htm
Print screen
Print screen is something that is typically controlled by the operating system not the browser nor webpage. So you are unlikely to be able to stop this. However, casting my mind back I remember a time (perhaps a long long time ago), where you couldn't take screen shots in Windows (maybe Windows 98) of videos... so if your really in need of disabling print screen - perhaps you could perhaps encode your content in a video... but this will have many many downfalls - namely accessibility, search engine optimisation and it being a royal pain to do... so I wouldn't recommend it under any circumstance.
Right screen
Right click you can disable, but not using a server-side technology (such as ASP.net) instead in a client-side technology such as javascript. A quick search in your favourite search engine will find some help. But disabling right click is rudimentary to get around, so it is not full proof.
An alternative to protect your content is to possibly investigate "rights" in PDFs. I believe you can disable the "right" to print.
However none of these solutions are going to be full-proof. As long as you are making your content available to an end-user on their own computer, there is always going to be a way around your restrictions.
I have implemented for disabling printing using window.onbeforeprint()
Refer this Answer