html

This question at face value is a duplicate of: Divs vs tables for tabular data(link is external)

When using NVDA on Firefox it fails to read the first child when focusing from a container, but it is able to read the second child.

Generic Example:

Say I have a div with some p tags below some text elements, how do I aria tag these so the screen reader picks these up?

I could give the div tagindex="0" but my linter complains:

I am now making my website readable by screen readers.

If I have a standard select element with a label, like this:

I had some strange behaviour where the chrome screen reader was reading labels twice, I inadvertently "fixed" it and I'm not sure the fix was correct.

This question already has an answer here:

I have a time picker component, composed by two separate input fields that work together to create the illusion of being one.

This is how the skeleton looks like

I have JS that will be handling videos and there are anchor tags with an icon in them on the page which, when clicked, will open a video.

I have the following code for a select: