Disabled users who cannot control a mouse use the keyboard to navigate the page. How do you allow them to select the various styles (like bold etc) in ckeditor5? These elements are NOT in the tabindex of the page by default.
Tabbing through a form, I expect to be able to interact with every interactable element on a page
I see that CKEditor 5 has a list of keyboard shortcuts in their documentation. Pressing Alt + F10 (may require Fn) when the editor input area has focus moves keyboard focus to the editor toolbar. Then, keyboard arrow keys can be used to navigate the toolbar.
I am not saying that CKEditor is accessible, but it is information you may consider.
WCAG 2.1.1 says that all functionality must be available from the keyboard. Sometimes people mistakenly interpret that to mean that all interactive elements on the page must be keybaord accessible.
Here's a screenshot of ckeditor5 from their website. I'm not a ckeditor5 user but I'm assuming you're talking about the editing bar at the top.
While it's strongly encouraged to allow a keyboard user to navigate to the editing bar of ckeditor5, it's not strictly required if all the functionality of the editing bar is available via the keyboard.
For example, if I can select text then press Ctrl+B to make it bold, then the functionality of bold is available even if I can't tab to the 'B' on the editor bar.
The editing bar has a lot of stuff on it so everything would need a keyboard shortcut in order to pass WCAG 2.1.1. It looks like you can configure ckedit5 pretty extensively, https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html
The docs on CKEditor keyboard support will list the possible keyboard controls to format text.
Text can be selected with Shift + the arrow keys
and formatted bold with Ctrl + b
for more options the menubar can be focused with Shift + F10
For web applications, the idea is to follow the desktop application’s keyboard conventions, so that users of assistive technology don’t need to learn yet another interaction paradigm.
The example to look at for rich text editors on Windows would probably be Word or Wordpad. There are two ways to format text.
Shortcut to open the menubar
The Menu bar pattern on the ARIA Authoring Practices Guide (APG) specifically mentions rich text editors in a note:
For example, a rich text editor may have a menubar that receives focus when a shortcut key, e.g., alt + F10, is pressed while editing. In this case, pressing Escape or activating a command from the menu may return focus to the editor.
For any common pattern you should find recommendations for the keyboard interface on the APG. Since it’s platform-independent (not only for Windows), such shortcuts will only be found in notes.
Shortcuts for formatting directly
Selected text can often be formatted directly by pressing + a letter for the English abbreviation of the format, like i for Italic or b for Bold.
CKEditor supports these.
Related
I'm writing a Firefox (web)extension. I have a browser_action in my manifest.json, with a default_popup. I want my extension to be accessible by all users, including those with vision impairment.
So I'd like to, as I change and develop things, test what it's like to (for example) interact with this feature, using only the keyboard. How do I do this? How do I focus and thus "click" the toolbar button, without a mouse?
Ideally, without actually running special screen reader software every time.
So I'd like to, as I change and develop things, test what it's like to
(for example) interact with this feature, using only the keyboard. How
do I do this? How do I focus and thus "click" the toolbar button,
without a mouse?
You can use commands to set a keyboard shortcut.
_execute_browser_action: works like a click on the extension's browser action
You may also add commands.update() (Firefox 60+) API to let users change that keyboard shortcut.
Thanks for considering accessibility. Just to clarify, because I don't think you meant this, but you can do keyboard testing without a screen reader. Just don't use your mouse :-) Seriously.
In my current firefox, I have an address bar, the search field, then a bunch of plugins on a toolbar.
On a PC (should be similar for a Mac, but Cmd instead of Ctrl):
I can move my keyboard focus to the address bar with alt+d or ctrl+L (cmd+L)
I can move my keyboard focus to the search field with ctrl+k (cmd+k)
Interestingly enough, I could not get my focus on the toolbar. I could have sworn I could tab from the address field, to the search field, to the toolbar, but it's not working now.
If you can get your focus there, then you should be able to use the left/right arrows to move between tools and then space/enter to select the tool.
If you want to play with a screen reader, NVDA is free.
Using the NVDA screenreader to read a webpage in Firefox under Windows 10, NVDA is announcing "link" whenever it comes across a linked word or phrase. I can't find a way to turn that feature off. I've turned the "Punctuation/Symbol Level" preference to "none", but it still announces links. Is there a way to stop announcing links?
I am unable to get this work, even after closing and re-opening NVDA, so perhaps I am misunderstanding this feature. Maybe you will have better luck:
https://www.nvaccess.org/files/nvda/documentation/userGuide.html?#DocumentFormattingSettings
9.1.12. Document Formatting Settings (NVDA+control+d)
This dialog box is found in the Preferences menu, under "Document Formatting...".
Most of the checkboxes in this dialog are for configuring what type of formatting you wish to have reported as you move the cursor around documents. For example, if you check the report font name checkbox, each time you arrow onto text with a different font, the name of the font will be announced.
[…]
Elements
Headings
Links
Lists
Block quotes
Landmarks
Frames
Clickable
I'm trying to test the screenreader dialogue on my application for 508 compliance. It works mostly how it should except a problem I'm running into is when I navigate element to element the screenreader reads each keystroke like so "TAB" when I want to traverse through my application. How can I turn this off while testing? I'm running JAWS 17.
You can't and you shouldn't. Different verbosity settings like functional keys announcement, punctuation reading, repeated characters announcement, treatment of dialog controls and so on, and so forth, — all of these are entirely up to the screen reader and the user who adjusts these settings. Just like, for example, speech rate or pitch. As a JAWS user, I wouldn't be happy, and more than that, I would be angry if some app developer forced me to turn off my Tab announcement or changed my punctuation level.
Update: If you just want to turn off keystrokes announcement for yourself, do the following:
Press Insert+6 on the number row to go to JAWS Settings Center. You can do this from the JAWS main menu, but the single keystroke is much faster.
If you want to make your change by default for all apps, press Ctrl+Shift+D to open the default file.
In the search box type labels and search for Key Labels.
In the dialog that appears turn off the announcement for all of the keystrokes you don't want to hear. Note that if you mute Tab, all of the keystrokes like Shift+Tab and Ctrl+Tab will be muted automagically.
click OK several times to leave Settings Center and save your settings.
It's just a user setting options.
If you do that in your jaws, it's coild bé different for an other person !
I am using Qt (Embedded Linux) and I want to hide the shortcuts displayed right next to the menu items. I still want to use the shortcuts though.
ie;
Quit Ctrl+Q
I want to get rid of the "Ctrl+Q" part of it.
Quit
As far as I know that is not directly possible.
What you could do, though, is to not set any shortcuts for your menu items, and instead create the shortcuts separately using QShortcut. Then they won't appear next to any menu items, since they won't be associated with any.
If I deployed a Community plugin and set up a key-binding in CodeRush, how do I now find where I filed it in the options dialog / tree hierarchy ?
Open the CodeRush options screen (Either choose DevExpress \ Options from the menu or hit Ctrl+Shift+Alt+O)
Then locate IDE \ Shortcuts folder in the page hierarchy on the left.
Above the shortcut tree, there is a toolbar containing several buttons which are useful in different circumstances.
In this case the following 2 options may be of some use.
Option 1 - Search
The 2nd last icon on the toolbar (a magnifying glass) is a search facility which can be used to search for shortcuts.
You can search by folder, key binding, mouse binding or by command name.
Option 2 - Flatten hierarchy and sort.
Click third last icon in the toolbar (a folder) to collapse the hierarchy.
You'll now be viewing the same set of shortcuts in a flat grid rather than in a tree.
You should now be able to sort by either Shortcut or Command and easily locate the binding you're after.
We recommend placing user created bindings in a custom root folder within the hierarchy so as to easily distinguish between your own shortcuts and those shipped with CodeRush.
This can also ease transferal of these shortcuts to other machines since this will cause said shortcuts to be placed in a file of their own.
In the CodeRush Options Dialog
IDE \ Shortcuts.
Click the 'find' magnifying glass.
on the 'Key Shortcut' tab type the keybinding of the command you bound.
Or, on the 'command' tab, type part of the plugin name.
Job Done.
Thanks.