I have a popup modal and I use nvda but it starts read from the interaction element and doesnt read the title, and I want it to start from the title that above also. Btw I don't have x button.
How can I solve it? Is it setting?
Check out the dialog design pattern and the associated example. The example sounds like exactly what you want. There's a title on the dialog and it's announced but the focus moves to the first input field.
You didn't post any code so perhaps you're missing the aria-labelledby on your dialog that should point to the dialog heading.
Related
Any idea why NVDA reads clickable word when tabbing through text in html example:
<h1 tabindex="1"> testing </h1>
NVDA will read clickable testing
In first place remember that tabindex are not a good practice in a11y, and also headers don't need a tabindex NVDA provides a header navigation with the H key. About the clickable I can say from my experience is a known issue for NVDA, if you check that in other SR (Voice over or Chromebox) should be read properly
Short answer:
the tabindex attribute implies functionality to some screenreaders.
Long answer:
Two primary ways that a screen reader user will navigate your webpage are by skipping through interactive elements or by headings. Interactive elements are things like links, buttons, form fields and any other piece of functionality that the user will initiate on your page. These are navigated by using the 'tab' key.
The other primary way they will navigate your page is by headings. In fact, a survey from webaim lists headings overwhelmingly as the primary method of navigating a page to find information (source). In your example, you have given the heading a tabindex which will give the impression that it has some functionality or interactivity to it. To my understanding, both JAWS and NVDA will read out 'clickable' on elements that have a tabindex, as they could easily (and typically would) have some javascript click handlers that are not evident from the screenreader.
Answer:
It's because of attribute tabindex which makes this element keyboard focusable. One can focus it by pressing TAB key on a keyboard.
Hint #1: Attribute tabindex with value above 0 should be generally avoided!
Don't use tabindex="1", tabindex="2" and so on. Only tabindex="0" or tabindex="-1" can be useful in some cases. Otherwise you can create a complete mess for a user experience.
Read more:
Google: Using a tabindex greater than 0 is considered an anti-pattern.
WebAIM (accessibility): This is almost always a bad idea.
MDN: Avoid using tabindex values greater than 0.
Hint #2: Generally no need to make focusable elements that a user cannot interact with.
As in specific case no sense to make a heading element keyboard focusable if a user cannot interact with it.
If you are concerned about screen reader users have no worries as they read non focusable content just fine. A quote from Accessibility Developer Guide: As opposed to keyboard only users, screen reader users usually do not use the Tab key to read a page! Read the "Screen readers browse and focus modes" to know the difference between navigation using Arrow keys and Tab key.
But... Exception to the rule exists
Exception to the rule exists and it's probably a good idea in cases where developers set tabindex="-1" to headings which they want the focus to be moved programmatically for the purpose of accessibility. Such cases are for example fresh content update with AJAX in single page applications. The focus would be moved to a heading for a user to get aware of the content update and to be able to start from there. Also it can be useful when currently focused content is about to get removed from the DOM (a.g. deleting currently focused table entry) or moving a focus to an error summary heading after a form submit trial etc.
In my case (VoiceOver on MacOS), it seems that H1 is announced as clickable only on Firefox. On Chrome, it's announced correctly.
This leads me to believe it's a Firefox bug.
I need a search field component but i don't find such a component or a imeoption for text field to make it as search field. i search a lot but still nothing founded.
is there any way to do that?
Thanks in advance.
What do you mean by "search field"?
There is a DataChangeListener that allows you to track fine grained changes to the TextField. You can set a hint & hint icon to show that this is a search field. Its unclear what you are missing.
Edit based on comments:
To get the magnifying glass icon instead of Done button on Android you can use the somewhat undocumented flag:
textCmp.putClientProperty("searchField", Boolean.TRUE);
This is a done event, so you can distinguish pressing this from pressing outside of the field by using the done listener callback on the text component.
I have a WPF DatePicker, and like any datepicker, it has a built-in calendar that you can open by clicking on the small calendar icon.
this calendar is put in a popup menu, so that it behaves like one, i.e.: once it is opened, there are 2 ways to close it:
Validate you choice (click on a date with the mouse, hit "Enter" with a date highlighted, etc...)
cancel (hit "Echap", click outside the popup, etc...)
My problem is, I need to know which one was used, and I can't seem to find a way to do this.
Right now I listen to the "CalendarClosedEvent" but it doesn't tell me How the calendar was closed.
I also used the "PreviewKeyDownEvent" to trap the "Echap" key, which works well, except it does not cover the case when the user clicks outside the calendar to close it.
Is there a way to do this? if so, what is it?
(NB: I'd be happy with a generic answer about the popup menu object and not the calendar object in the datePicker)
For the DatePicker at least, you can set the SelectedDate to null (which is actually the default so, just leave it). Then the SelectedDateChanged fires any time the user clicks inside the control.
This is the only thing I could find to mark a difference. Hope it helps.
I am following the 'Stock Trader RI' example by the Prism team,
but it does not address this exactly :
I have a Shell with a Main Region in it.
In this shell I have some filter fields and a grid.
When I press on a button - I would like to load a screen that allows me to change the filters,
and then press 'Save'. This would then call a service to update the fields, and close the pop-up.
Here is an illustration of the 'Shell' before pressing the button (left) and after (right) :
Problems are :
The 'Stock Trader RI' sample app only uses a modaless dialog popup. I need a MODAL pop-up (background will continue to refresh, but user will not have access to it as long as pop-up is active).
Need to have Silverlight-like effect when pop-up shows, meaning - 'Shell' needs to appear 'disabled' (like a gray mask over it).
Pop-up window should have no 'X' button and no 'minimize' or 'maximize' buttons. The pop-up window should be simply a rectangle with curved-corners.
I don't think I can use a 'Notification Window' or a 'Confirmation Window' because I cannot put inside them whatever I want. This is an example with 2 fields, but the pop-up might be much more complex with tabs, and a lot of information shown to the user.
So how do I show a modal pop-up from my "WPF+PRISM" Shell-View-Model once the 'Edit' button is pressed ? (Meaning, once the 'EditCommand' is executed...)
I have found a solution here.
Basically it uses InteractionRequest and it allows me to open a window (that I can style however I want, without the 'Maximize' 'Minimize buttons), and also - I can choose for it to be Modal.
Great thing about this solution is - that I can use custom pop-ups and not only Notification or Confirmation pop-ups.
Also - I can pass information back to the class the invoked the 'InteractionRequest'.
Only thing that it doesn't solve - is that I cannot make the calling view look disabled by adding a gray semi-transparent over it ... haven't figured out yet how to do that...
I've created a Google like SearchBox control in Silverlight. That means, as I type in the box, a DropDownListBox appears just below the SearchBox, showing all the items that match with the text I've typed in searchbox so far (i.e AutoComplete feature), exactly like this:
Now, I want to add a functionality to it : I want to make the DropDownListBox to disappear, as soon as user clicks outside it, or anywhere on the screen. I cannot handle MouseLeftButtonDown (or any such event) in other controls, to accomplish this, because users can click anywhere, including non-silverlight region. Can anybody suggest me what should I do to achieve this?
So my question basically is:
How to know if user has just clicked and the click event occurred outside a particular control?
Please note that AutoCompleteBox doesn't serve my purpose. So I cannot use it.
I have a feeling that working with LostFocus event can solve your problem.
I guess this question is a bit old, but i just stumble upon trying to do the same and finding a solution. This is what i did
Created a Border with All Margins -500, this will cover the full screen essentially.
On Click Behaviour of this Border, the dropdown section of SearchBox
is collapsed.
Adjust z-Index of Border just below the SearchBox and DropDown
section, so clicking on SearchBox or DropDown wouldn't close it.
Set Border Visibility Collapsed, and make it visible when DropDown is Visible.
I hope it helps someone who is looking for the similar problem.