Working on web-accessibility with VoiceOver. I have a table with tabindex=0 for each row. VoiceOver doesn't read the content of the rows with tabindex and it reads fine without it
I had to use tabindex because clicking on the row shows more information about the row and tabindex provides the ability to view more information for users with only keyboard
Related
Users can open a column menu with just the keyboard, using the CTRL and ENTER keys.
The issue I ran into is users are not notified how to open the column menu with just the keyboard. If the user uses an accessibility application such as NVDA, there is no aria-label or aria-description to notify the user how to open it with the keyboard. Is this an ADA defect?
Note that I added an aria-description myself and that resolved the issue for column headers that don't have the header checkbox. If the column header has a header checkbox, the aria-describedby prevents the aria-description and aria-label from being read.
The aria-describedby: ag-29-input on the columnheader div doesn't appear to do anything and is also on the input for the checkbox. Setting aria-describedby to an empty string on the column header fixes the issue where aria-describedby: ag-29-input prevents aria-description and aria-label from being read on NVDA.
How does a sighted user know to press Ctrl+Enter? Are there any instructions for them?
I looked up some ag-grid examples on https://codesandbox.io/examples/package/ag-grid-react (because I wasn't familiar with it) and I ran the "AG Grid React with Key-Value Data" demo. The columns in the table had an aria-description of "Press CTRL ENTER to open column menu."
<div class="ag-header-cell ag-focus-managed" role="columnheader" tabindex="-1" aria-colindex="3" col-id="mealTime" aria-description="Press CTRL ENTER to open column menu.">
So the screen reader user will actually have an advantage over the sighted user because they'll hear the keyboard shortcut instructions. The sighted user won't have any instructions regarding the keyboard shortcuts.
I'm not sure if the person that created that demo added aria-description or if it's built into the ag-grid.
Note that aria-description isn't official yet. It's still in the AIRA 1.3 "Editor's Draft" spec. ARIA 1.1 is the current official spec and ARIA 1.2 is in the "Candidate Recommendation" phase. So I was surprised that the aria-description example worked with NVDA.
In any event, both sighted keyboard users and low vision or blind screen reader users both should be notified about the keyboard shortcut. If the user cannot navigate to the column header and open the menu, whether via a shortcut key or some other keypress, then yes, it would be an ADA issue. It would fail WCAG 2.1.1 Keyboard.
I have a table with header and some data. The checkbox used for "SelectAll" purpose is inside which is not focused while using tab though whole th cell is focused. User is not able to select that checkbox using spacebar key due to this focus issue. While the check boxes for individual rows are working fine. Please suggest.
I use VS2010,C# to develop ASP.NET web app, I have some two text boxes, two buttons and a checkbox in one of my pages, but I want one of my text boxes to have initial focus when page loads, so that cursors blinks in this text box and when users presses keys, this text box receives keys, I've changed tab index of my controls so that the desired text box has tab index = 0, but still no luck, what should I do?
Ideally tabIndex property should work. If not then you can manually set the focus by writing a small piece of javascript/jQuery code. For more : How do you automatically set the focus to a textbox when a web page loads?
I am having some problems with tabbing within my asp.net pages. This project was developed with Visual Studio 2008.
Case 1
I have two html tables. The first table has two rows; the second table has four rows. Within the cells are of each table are asp.net fields, text boxes and radio button lists. I set focus to the first field of table one. I then press the tab key multiple times. The focus moves through the field of table one and then through the fields in the first row of the table two. Then instead of goes to the second row of the table two it return to the table one.
But if I set focus to the last cell on the first row of table two, it tabs through the remaining cells of table two properly. Can you tell me how to get the tabbing to behave properly and go to the cells in there natural order? Note that I am setting the tab index property in the order that I want.
Case 2
On another page I have an html table with a single row followed by a gridview control. The gridview control is writeable and has the following columns: Check Box, Radio Button List, Text Box, Text Box, Text Box and a Check Box List. If I click on one of Check Box, Radio Button List or Check Box List., then press tab, the cursor pops out of the grid and sets focus on the first field of the table outside the grid. But if I set focus on one of the text boxes and tab; then the tab goes through the fields of the grid left to right one row at a time. This later behavior is what I want in both cases. I don’t know why my cursor pops out of the grid when I start with a field other than a text box.
Please help if you can.
Bob
funny, you explain in details your case but you didn't explain what it needs to be explained in order to someone can understand you :)
first of all, is table1 located in the first tab and table2 in second tab?
what do you used for tabs: asp.net tab control, jquery ui tabs...?
what do you mean by 'press the tab key multiple times'? same tab? do you have postback on tab click? what is the focus in your case, and so on and on...
cheers
Have you checked the order of the input elements in your HTML? Generally the tab order follows the order of controls.
If that all looks right, then make sure nothing is setting the TabIndex property - as this will also mess up the tab order.
I pretty much resolve this and I wanted to add the answer for anyone who viewed this thread. The problem was the autpostback on certain fields. Once I disabled autopostback, the problems went away.
Bob
You need to use Javascript and I referred for your a very good example of navigating through Gridview rows with Up/Down keys.
http://www.codeproject.com/Articles/25675/GridView-Rows-Navigation-Using-Arrow-Up-Down-Keys
on any OOB sharepoint page, if you "tab" through the page, the first tab brings up a "turn on more accessible mode" menu item. that is, except for a page with a calendar web part. Once you tab off the browser menu, the first tab item becomes the calendar web part, skipping over the menu item and all other content.
I've tried setting tab index to -1, 0, 1 on the div with the menu that I want hit first, but the calendar web part still gets the first tab, forcing users who tab through pages to have to cycle through all controls to get to the "accessible mode" menu.
Any ideas what else I could do to make sure this loads as the first item tabbed to, no matter what?
Thanks in advance!
try using JQuery, to remove (or edit) the tabindex of the table holding the calendar webpart. It probably has a tabindex 0 , that occurs later in the code then the accessible mode div, and the browser will see 2 items with tabindex 0, the startindex (-1 doesn't work) for the tab button. Seeing 2 items, it will use the last item found in the html as the start for the tab button.