I need to take screenshots of a web page. I want to highlight certain areas of the page before taking the screenshot. I am visually impaired, so using the mouse is out of the question.
I generally use shift and the arrow keys to select text. While this works on web pages, the text is selected, but not highlighted. IE I know it is selected, but someone who will look at the screenshot won't be able to see it.
Q: is there a way of highlighting text on a web page using the keyboard?
I am using Windows 11 with NVDA as my screen reader.
This appears to be possible with Google Chrome if the accessibility option "Navigate pages with a text cursor" is enabled—also known as "caret browsing". Here is a Google Chrome help article about it: "Use a text cursor to navigate & select text".
The article states that this setting can be toggled by pressing F7, or by opening the "Customize and control Google Chrome" menu, opening "Settings", navigating to the "Advanced" tab, then selecting "Accessibility".
This mode allows you to use the arrow keys to move the text cursor around the page, similar to if you were editing a block of text. Text can be visually highlighted by navigating to the start of the text you want to highlight, holding the Shift key, and then arrowing to the end of the text.
I'm not sure how well this will work in conjunction with NVDA though.
Related
The arrow keys navigation works fine when NVDA is off, but as soon as I open NVDA in the background I can't use it to navigate in tab groups.
Did you ever experience this and do you have any suggestions on how to resolve it? Thank you.
The role is set to 'presentation', I tried changing it to tablist and it does not work. Role 'tab' alters the entire navigation behavior of the tab group so I want to avoid that as the expected behavior is to navigate with left/right arrow keys.
It would be helpful to have some code posted, otherwise we're just guessing.
When you tab to the tab navigator does the focus move to the tab that is selected within the group? (When tabbing to it the first time, I presume the first tab is selected.) Once the tab navigator has focus, then you can use the left/right arrow keys to navigate to the other tabs (when NVDA is not running)?
(It's unfortunate that pattern is called a "tab" which is confusing when also talking about the tab key)
I would first start with making sure you're following the "tab navigator" design pattern. If everything works as explained in that design pattern, in particular, the "Keyboard Interaction" section, then it sounds like you don't have the roles set on the right elements.
The behavior you're describing sounds like the left/right arrow keys are going to NVDA instead of to the tab navigator. You didn't say what happens when you press left/right when NVDA is running. Are characters read one by one? That would definitely mean the left/right arrow keyboard events are going to NVDA.
If that's true, then you don't have the role="tablist" set on the right element (and possibly role="tab" is not set on the right elements.) Confirm again you're following the design pattern.
When you have role="tablist", that will automatically switch NVDA from "browse mode" (where keyboard events are sent to NVDA) to "forms mode" (where keyboard events are sent to your application). When keyboard events are sent to your application, the left/right arrow keys should work just like when NVDA is not running.
You can see a list of roles that cause NVDA to switch modes automatically for you at "Fundamental Keyboard Navigation Conventions". The tab pattern is one of those roles.
You should be able to confirm your left/right arrow keys work by tabbing to your tab navigator with NVDA running then pressing INS+space. That will toggle the "browse mode" to "forms mode" and then your arrow keys should work.
I'm using an inline CKEditor 5 in a form that needs to be accessible for the visually impaired. Is there a way to focus buttons of the editor without using a mouse?
Most of the buttons that I've selected for the editor don't have a shortcut associated with them, so tabbing to the button seems to be the only way to press it, but tabbing only focuses the text field, not the buttons:
Found an answer: Left Alt + F10 is widely used by visually impaired and can be used to focus the toolbar.
I'm having an issue with Windows Narrator on Edge where if I have a combo box (dropdown) inside a panel (modal), opening combo box starts announcing title of the tab. This issue is specific to Edge and Narrator. NVDA on Edge or Narrator on Chrome doesn't seem to recreate the issue.
My guess was to check if role attribute is causing the issue, and I'm assuming here that it does. When I set panel's role attribute to anything other than dialog or alertdialog, the issue seems to be fixed, although other browsers break where they do not start reading panel after opening it.
I'm sure this is not the solution.
Codepen link: https://codepen.io/lalit-umbarkar-msft/pen/rNWoYze
Just as the title says.
I cant find ANYTHING for this particular usecase Online.
This is in context of a website aiming to be AA WCAG 2.0 conform.
I have non-focussable text alongside focussable textinputs inside of a single view.
I can TAB through the focussable textinputs, but I cant read out the textfields inbetween. When I press "arrow down" while having the focus on the textinput I get "empty field" from NVDA. Most shortcuts also unfortunately produce text in the textinputfield instead of executing the associated behavior in NVDA.
Is there any way have the keystrokes being recognized as commands instead of input for the textfield? Is there any keyboard shortcut telling NVDA to behave like this?
Under the hood, NVDA auto switches to Forms mode, so what you're getting is the correct behaviour. if that text is related to the field, then you should use aria-describedby="[id of text]", on the form element.
I wouldn't be looking at anything that changes the default behaviour of how it works, as this will undoubtedly cause issues, for end users.
Could you not put that text in a tooltip, that is only shown when a user tabs to an interactive icon, next to the input (using the aria-describedby attribute too)?
Sorry to bother you, but I was hoping you could help me. We are currently building a new web site and have run into some issues with our programmer. I am trying to do some research to see if we can find a way for my issue to be solved so that I can let my programmer know.
First issue:
Go here: http://tinyurl.com/276we3f
At the pop-up just enter some example text.
Now, when you hover over any text boxes on the left of the card, you will see that the text boxes become highlighted with a border. If you click in a text box, a properties pop-up appears that allows you to change the font, color, alignment, etc. When you click close, it will take you back to the product and will highlight the text. I want the user to be able to click anywhere within a text box to type new text. For example, in the bottom text box, where it says "join us to celebrate", the user should be able to click anywhere in that text to change the wording. They might want it to say "join me to celebrate" instead of "join us to celebrate". However, if they click next to the word "us" so that they can change it....the pop-up appears.
Is there a way to just have a pop-up appear to the side and not have the background grayed out and disabled?
Also, is there a way to be able to click anywhere in the text box to edit just certain words or letters?
Second and final question:
If you click on "Click to add photo", you will see a pop-up appear that allows you to upload an image, edit it, etc. After uploading the image, I want the user to be able to move the image around with their mouse by dragging it and positioning it in the exact spot that they want it in. We also have the arrows where they can click the up, down, left or right arrow in the image editor pop-up....but I would like for them to be able to drag the image with their mouse as well. We know how to enable dragging of the image. However, the problem occurs when the user releases the mouse button. On the mouseup when the user is done dragging....the pop-up will appear since the pop-up is triggered by the release of the mouse button.
Does that make sense?
Sorry for the long message and THANKS SO MUCH for your help!
For the first part of your question, when showing the dialog box for the properties of the text area, you can pop it up as a non-modal window. This means the properties dialog will show but will not lock out the rest of the UI, enabling the user to change the text however they like. It also means the background does not blur/grey out. To pop up a window in a non-modal state, call PopUpManager.createPopUp (or PopUpManager.addPopUp) with the third parameter (modal) set to false.
For the second issue, set a member variable such as "isDragging" to true when you detect that the user is dragging the image around. Then on mouse up, only display the pop up if isDragging is false.
Hope that helps.