JAWS | Java API for WordNet Searching

I think so, create a new file name xx_time each game

solution that seems to work:

This problem occurs no matter what screen reader you use, not just JAWS.

Angular Material is mis-using the aria-owns attribute. You can test this on their "Date Range Selection" example. Their code is basically like this:

In my case, List Item role at the card tag was causing the issue, if we remove the role from there this issue was resolved.

I cannot change the markup to use a table so this is why I am using role="grid".

If you can specify role="grid" in your code then it seems like you could specify role="table". Is there a reason that's not possible? The reason I ask is because grids should be reserved for when the actual cell contents can be edited, kind of like a spreadsheet. The fact that a cell has an interactive element in it does not mean it should be a grid. So my first recommendation is to use role="table".

However, grids are recommended when you have a group of things where you can navigate to each "thing" using the arrow keys.

I'm guessing you already read the spec for grids.

it is easier for me to add a visually hidden header to each grid cell rather than adding a separate row to the grid with column headers for each column. Is it ok to label each grid cell with a header rather than creating a row of column headers

While you could do that, you'll miss out on some of the benefits of real column and row headers. With a basic

Picture yourself in the middle of a big table. Lots of rows and columns. You know the current value of the cell in the table because the screen reader just announced it. Now you want to navigate down one cell. If you don't have a row header, then you will not hear any context for the next cell value. If you want to navigate left or right one cell, if you don't have a column header, then you will not hear any context for the next cell value.

If you hard code the column header as a visually hidden element, then you will always hear that column header announced for the cell even if you are navigating vertically down a column. That would be unexpected behavior for a screen reader user. The column header should only be announced if you navigate horizontally across a row, not vertically down a column. When you navigate vertically, the row headers should be announced.

I'm not trying to be harsh here but I think you need to go back to your statement:

it is easier for me

and decide if the ease of coding is more important than the end user experience.

If there's a technology reason you can't have column and row headers, because the library you're using doesn't allow it or some other reason, then as a last resort, you can try coding around it with visually hidden element but I would not recommend that as a first choice.

I want to include some content which is not located within the container I have marked with role="grid" as a grid row.

That's a little trickier. The aria-owns attribute is exactly what you need but it's typically used when a child element can't be owned by the parent via normal DOM nesting. In your case, it sounds like most of the elements are nested according to the DOM but you'll also have something outside the DOM.

The tricky part is when you mix the two. As documented in the spec:

If an element has both aria-owns and DOM children then the order of the child elements with respect to the parent/child relationship is the DOM children first, then the elements referenced in aria-owns.

So you might get some funky reading order if the literal DOM children are announced first and then the aria-owns children are announced second. Definitely worth a bit of testing. You might have to put an ID on every row, including the content outside the table, then use all of those IDs in aria-owns of the table even those most of the rows are "naturally" owned by the table because of the DOM.

I make some tests and find that Edge Read Aloud won't read aria-label. I think that's by design, and we can't change it by code. You can provide feedback about this issue to Edge team by pressing Alt+Shift+I in Edge.

As a workaround, you can use the free screenreader NVDA. I've tested and it can read the value in aria-label. Besides, if you want the aria-label to be read, you'll have to add the role attribute to the . You can also refer to this doc and this blog for detailed information about ARIA guidelines.

Here's what you can change, on line 198:

I understand the need to try various ARIA attributes and roles but sometimes that complicates things. When using ARIA, it's best to keep it minimal. For example, you have role="alert" and aria-live="assertive". The alert role gives you an implicit assertive live region.

Assertive regions might clear other screen reader announcements. From the spec:

User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.

So it could be possible that you posting a message every 3 seconds might clobber other announcements. Perhaps not likely but theoretically possible.

My general rule of thumb is to use aria-live="polite" unless your announcement is so important that the user needs to drop everything they're doing and listen to it.

Using pure html and not vue.js, the following will make an announcement every 3 seconds.

You have aria-hidden="true" on the parent container (

). That will hide all children from the screen reader and nothing will be announced. Try removing it.

.

aria-hidden="true">