We are using NVDA for accessibility testing of our Single Page Application. We have classified the various sections on the page with the appropriate roles and aria-label. Using NVDAKey + F7, we are able to bring u the Elements List and in Landmarks we can see the various sections of the page.
However, when we navigate to a new page within the application, the NVDA Elements List does not get updated.
Is there something which we need to do to refresh the NVDA elements List after screen navigation is done? Closing and opening it again is helping, but that may not be the convenient way for most users right?
I couldn't find a definite answer in the NVDA documentation, but from my own testing it doesn't appear that the Elements List updates when the DOM is updated.
I attempted to test using a few different JavaScript methods (document.write, object.innerHTML, document.createElement, document.createTextNode) and in each case, the NVDA Elements List would not update automatically after the page content had changed.
Changing the radio button at the top (i.e. from "Landmarks" to something else and back again, does seem to refresh the Elements List. The result is the same if you manually close it (ESC key) and re-open it (NVDA+F7).
I'm not aware of anything that developers can do to change this behavior. It appears to be by design.
Related
I have a design that displays a list of content that you can filter by different categories. Each filter is displayed in a dropdown menu that lets you choose one or more options, which when activated (either through click or keyboard), will update the results on the page. The page url does not change in response to the filter and there is no "submit" button to apply the filter.
I'm confused which ARIA pattern to use: Menu (with menu/menuitem roles) or Combobox (with listbox/option roles).
In my opinion you should go with a combobox.
Otherwise, it should be a menubar rather than menu:
A menu that is visually persistent is a menubar.
Managing focus
Aside from the question which role to use, you need to decide whether to manage focus or not. It is recommended (should) for menu and menubar, which would mean that the whole bar only has one tab stop, and navigation between the single dropdowns is done via arrow keys.
Website or application?
This depends on how much your site feels like an application overall. If it’s more of a website, keyboard users in general are more accustomed to tabbing than to managed focus. For users it is sometimes a surprise that you need to navigate within components by means of arrow keys.
If there are other composite widgets as well that manage focus, you absolutely could do so for this part as well.
Responsive Design
A menubar should allow left and right arrow keys to navigate the filters, and up and down to focus the options. Managing focus would get complicated with Responsive Design: Once items wrap, it becomes less obvious how to navigate to them.
Actions vs Selections
A menu is usually used for actions. To quote some references (emphasis mine):
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
– Menu or Menu bar pattern
The WAI ARIA standard defines an actual `nole="menu"' widget, but this is specific to application-like menus which trigger actions or functions.
– Bootstrap
Since the filters only allow choosing options, and not executing commands or functions, I would rather go with combobox.
Searchability
Combobox also implies that it’s a flat list of options, maybe grouped. This is immediately known. A menu can potentially have sub menus, so it’s less clear what to expect when opening a filter list.
Since combobox is a flat list, users can type Printable characters to directly jump to a list item. This is not the expectation for menus.
Show the user’s selection
Since the filters close once a selection is made, it is best practice to display the chosen value or values in the closed item. Also known as the Visibility of System Status.
A combobox will do so, and screen readers would even announce the current choice without opening the list. A menu does not have that behaviour.
I just started developing a test automation for an iOS app using Appium. I have to click several buttons in the app one after another with different XPath/Accessability ids.
I wondered, when to use the wait.until(ExpectedConditions.visibilityOf Element) expression.
Example:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//XCUIElementTypeApplication[#name=\"app\"]/XCUIElementTypeWindow[1]/XCUIElementTypeOther/XCUIElementTypeTabBar/XCUIElementTypeButton[3]")));
Should I check every time before I click a button if this button is actually visible or existing on the current state of the app or is this just unnecessary and time-wasting?
In my opinion, you should use ExpectedConditions in two case:
Screen load takes long, so you not ending up trying to click something that has not loaded yet. If you find your tests flaky (sometimes pass some times fails) then this probably the main reason why it happens
If you have something like ajax on your screen you want to make sure the data is changed on the page. (Example is you created a post on Facebook, and want to make sure content displayed)
Background: for Windows users on Chrome and IE, dropdowns that reload or change the page are no good for accessibility. As soon as a user presses the down arrow button, the page reloads. This means that the user can only access the very first menu option. Here is an example: http://html.cita.illinois.edu/script/onchange/onchange-example.php
This is covered in the WCAG rule:
“Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)”
EXCEPT the user can very easily open up the dropdown and explore all the options without triggering an onchange event. The user does this with a space bar press. This is a very commonly known keyboard trick that I've seen all tested users to already be aware of or be able to figure out quickly.
In my system, we are using a dropdown for pagination in long directories.
EG: "you are on page [1^] of 16" (with the [1^] being a browser default dropdown menu). The designers will not allow any kind of visual [go] button. This happens across thousands of pages, javascript fixes I've seen need to account for every dropdown, and this is impossible on our case.
Using space bar, the user can see all the options and make a selection from anywhere on the list using only the keyboard. So why are dropdown page menus that automatically reload onchange still considered inaccessible? And would they be considered accessible if we included screen-reader only text which said "press space bar to open this menu, making a selection will load your next page"
Well except that in Firefox, the keyboard command is actually F4, you are correct - this is not a WCAG 2 violation but rather a best practice
Here is a page where you can test this: http://dylanb.github.io/onchange_select.html
I have a single web page with master detail form/input layout. Currently the form works in a way like
User opens the page containing both master/detail data entry controls and enters the master information (The details save button is disabled)
When he saves the master information, the save master button gets disabled and save details is enabled
User continues to enter multiple details which get populated in a gridview at the bottom of page
All works well
Problem is that, the master part contains a lot of data entry controls (drop down lists gridviews etc)
How do I facilitate the user much more then the current layout? Should he be redirected to a new page after he enters the master record ? How can I improve on this?
If the user doesn’t need to refer to the entire master to complete the detail, and isn’t navigating among multiple masters to view/edit their details, then you don’t need a master-detail, and you can divide the input into two or more windows. A window for the details can repeat a few fields from the master that users need to complete the details.
Assuming it is desirable to keep everything on the same page, I think I see few things you can do:
Use edit-in-place for both the master and detail, so you don’t need space for both editing/creating a record and space to display it. Every field should only appear once.
Pack your controls more tightly together. You can do this without appearing too cluttered if you adopt a quieter visual style (e.g., lose the reverse-video and the rules). Allocate about 20 vertical pixels per single-row control
Adopt an object-selection-action syntax so you don’t need to take space repeating the same command buttons/links for every record. That leaves mores space for fields.
Put your tables in their own panes with vertical scrolling. The tables you have now are already pretty short (5 or fewer rows), but limiting them to 5 or fewer visible rows will keep the window from being too long for cases when there are a lot of rows.
Assuming you have edit-in-place, use wider tables, each set in their own pane with horizontal scrolling in order to reduce the height by moving fields out of the “overflow” spaces and into the tables. Be sure you have row headers that do not scroll away.
Divide fields up into tabs, especially on the master. That reduces the space the master needs to a fraction. You can have tabs within a portion of the master if your users need to keep key fields constantly visible.
Put some fields within the master or detail in expanders or secondary windows, especially for fields the user doesn’t necessary need to interact with (e.g., where usually the default values are correct). Show an aggregate, abbreviation, or summary of what the users don’t see to cue them on when they do need to interact with the fields.
Consider using a “paging” interface for your stack of multi-row text boxes at the bottom of the master so they’re “stacked” in the z-dimension rather than the y-dimension and thus take up the space of a single text box.
Consider using more compact drop-down lists rather than radio buttons, especially for fields the user is less likely to change (e.g., the default is very often correct). A dropdown list is more work to set a value (takes two clicks) but no more to see the value, and you can weigh the editing effort against navigation effort (scrolling, tab-clicking, etc.)
Consider putting the entire master in its own scrolling pane so the detail is always in view at normal window size and the user can scroll the master to whatever portion is relevant for entering details.
If users are telling you that everything in the window must be constantly in view, then you’re going to have to dig deeper, prioritize fields, and make trade-offs because that’s not going to happen unless your client buys everyone a suite of big-ass monitors. Some fields will be out of view, even it that just means scrolled out of view.
There can be various options:
Page may show master and summary (gridview) of details. Save button will only work for master data. Add/Edit details will happening in a modal pop-up.
Have a tabbed view - one tab will show master while other tab will show details. There will be one save button per tab. Tab switching will happen on client side.
Have both master and details always open for editing. Any changes in details will be temporarily held in view-state/session-state. The save button for master will save changes for both master and details. No need to disable any UI.
We typically prefer #1 - IMO, its simple UI from user's perspective.
I want to create a combobox in flex which will take three values, Available, Unavailable, and Busy. The constraint is, I should not allow user to go directly from Unavailable to Busy. So when a User is selected Unavailable, I should keep the Busy item disabled (unselectable), but a user will be able to go directly from Available to Busy. I chouldn't find a straight forward way to disable an item in combobox in Flex. How can I do that?
Have you considered using radio buttons rather than a combo box? It's clear how to do this for radio buttons, for one thing. Also, it can often be friendlier to present the available options without requiring a click to reveal them. (Especially if, as in this case, you are adding the possibility that an option is "available, but not possible for you right now for some reason not shown in this combo-box item").
If you really want a combo-box, you can use the click event to display it in a non-standard fashion by probably changing its style; and then, if clicked anyway, Then, in the selected event, reject the choice (hopefully with an indication of why),
Or, if you want to simply remove it from the list, you can have the click listener event repopulate the source list each time, based on conditions. But that might be confusing to the user, too.
You can also have a look at
www.stoimen.com/blog/2009/03/05/flex-3-combobox-disabled-options/
which references
wmcai.blog.163.com/blog/static/4802420088945053961/
(note for NoScript users you must have 163.com and 126.com at least temporarily allowed to be
able to properly see this page)
it works very well even though I added the code for being able to properly handle keyboard
events in the dropdown list
Full self working example available at
http://olivierbourdon.homedns.org/OpenSource/combos.zip
Thanks again for the good work