While there is a WebAIM guideline on keyboard accessibility, I was unable to find any guidelines - or even recommendations - about how to convey the existence of custom keyboard shortcuts to sighted people.
For screen reader users like myself it is simple enough:
<input type="submit" aria-keyshortcuts="Alt+S" value="Send" />
A screen reader would then announce "Send button Alt plus S" and the keyboard shortcut would also be apparent for braille display users.
Sighted users who cannot or do not want to use the mouse, however, need a simple indicator of which keyboard shortcuts are available on a given control so that they have a similar user experience and don't have to search for lists of keyboard shortcuts in separate documentation. (Such lists are, of course, important, but they shouldn't be the only way for sighted users to know which keyboard shortcuts they can use.)
Can you provide me with resources or suggestions how to visually indicate available keyboard shortcuts?
The guidance for aria-keyshortcuts says:
Authors SHOULD provide a way to expose keyboard shortcuts so that all users may discover them, such as through the use of a tooltip.
which is essentially what you're asking about. You know you should convey the information to all users but how should that info be conveyed? A tooltip, as suggested in the spec, is one possibility but only if that tooltip is exposed for keyboard users too. Currently, a tooltip (title attribute) is only displayed upon mouse hover with Firefox and Chrome (not sure about Safari). Say what you will about Internet Explorer but IE would display the tooltip upon keyboard focus so that's a great feature. That feature was carried forward into Edge as well.
So you can use a tooltip but would still need another way to convey that information for all users. If space allows, I often see the keyboard hint as text right on the page. Ideally, the hint is near the element it applies to but if there are several shortcut keys, then having a section with all the keys listed might be a better option. Have an appropriate <h#> element for that section to make it easier to find with a screen reader.
Note that using the accesskey attribute for the shortcut key will automatically be announced by screen readers so you wouldn't need aria-keyshortcuts. But that attribute only allows a simple letter and would still have the issue of it not being conveyed to sighted keyboard users. Browsers should automatically display a tooltip for an element with an accesskey but sadly they don't.
Another alternative is suggested in this answer, How to display a specific shortcut key in HTML?. Look at the CSS solution (link should go directly to that answer) but instead of referring to accesskey in the CSS, refer to aria-keyshortcuts. (Ignore the javascript part of that answer.)
Related
I wanted to make a software with Godot in GDScript that advice you when pressing the bloq mayus button changing the color of the taskbar icon. But, I couldn't find any special code or something that makes it.
I saw the video of Adderly Cespedes making the same software (but in gamemaker) and he said that he found a special extension for it but never said the name.
This isn't currently possible in Godot.
The engine doesn't allow you to map Caps Lock (bloq mayus) to an input.
Edit: From Calinou’s comment, OS.request_attention() can be used to flash the taskbar.
I can't understand the use of scroll lock.
I searched on Google, Wikipedia and used that particular technic but still I am confused.
Scroll lock is a remnant of the original IBM keyboard and its purpose was to alter the arrow key behavior when it was pressed.
Not many applications use scroll lock anymore, as we got the mouse for scrolling nowadays. Very few applications/pages/etc respect this old principle. Imagine it like num-lock key.
Here you can have all the details about it:
https://en.wikipedia.org/wiki/Scroll_lock
I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement
Is there any way to hide menu and search buttons from Kindle Fire? This (Kindle Fire Customize Soft Key menu) says there's no way to do that, but i hope something has changed since then.
Thanks!
The overflow menu is automatic and controlled by the OS (similar to the Action menu on devices based on the default Android experience). The search icon is fixed and will either take the user to the platform search or you can override it following the instructions here.
You may also be able to achieve the effect you are looking for with one of the Full Screen Modes available to Kindle developers.
Do you have a sample of the code that is failing to hide the overflow menu appropriately?
**Hello..
i am creating English To Gujarati Dictionary WinForm Application.
I need to set a system wide hook to the right click context menu on for text selection.
it means when this application is running,and if user selects word from any program and right click on it gujarati meaning of that word should be displayed as menu item.
How to do this?
or any other options like Registery Programming,shell extentions etc...?
i have to do this,even if you say its not possible.
so please help me.**
Hooking the mouse activity is the easy part. See SetWindowsHookEx, and lots of questions regarding hooking in SO. This way, you can tell when the mouse is right-clicked.
Getting the selected text is the harder part. See WindowFromPoint, for starters. You'd have to recognize the control, and if appropriate get the selected text from it. This will not always be possible using simple Win32 functions, if the control is complex.
Adding the translation to the right-click menu is probably the impossible part. Adding stuff to explorer context menu is not a problem, because explorer provides that possibility. But various applications will have various right-click menus, without a way to extend them. They might not even use Win32 for the menus, for whatever reason. A better option, IMO, would be one of the following:
Forget about changing the right-click menu. Open a window next to the point of selection with whatever content you want, and let the application show its own right-click menu.
If the user right-clicks while, say, pressing shift, show your own right-click menu, and don't pass the message to the application. So the user will see only one menu, which is yours. The user must of course be aware of this combination.