focus-action | 解决移动端输入框获取焦点时偶发的问题

When navigating a table the screen reader will automatically read the column and (if applicable) row header.

As you have put the two buttons spanning across those rows they will get read out each time. This is also due to the fact you have them all set as elements.

You could move these buttons outside of the table and move the checkbox to select columns down one row (to the same row as CSLO, start date etc.).

This will fix the issue.

You may also want to look into defining your columns using the and elements. This helps screen readers correctly associate multi-row headers.

There is a great article on how to use these from W3C with plenty of examples and here is a great article on MDN about and .

You may still get the buttons announced though (your could put them in a instead, although technically not a good practice it should stop the announcement issue and not affect usability....you would have to test in a screen reader though to be sure as I have never tried this!)

There is no need for role="row" and role="columnheader" in your current table, and already have those roles by default, assuming your are supporting IE8+.

You can remove rowspan="1" and colspan="1" - cells are by default 1 row by 1 column in size so this is unneeded information (nothing to do with accessibility it will just make your markup easier to read). You only need to add rowspan and colspan when you are overriding the span.