accessibility

问题 We need to layout a large amount of data. A simple table would work well, but we're making this entirely responsive so for simple field/value pairs, we're trying to avoid going too crazy with table markup to make things reflow a bit easier. In the past, I would have first gone with a definition list: <dl> <dt>Label</dt> <dd>Value</dd> </dl> but...they also had drawbacks...namely that the semantic value of this markup wasn't always recognized by screen readers and the like, so was often

问题 I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox. This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does not: <div aria-live="assertive" id="moo"> </div> <script> let i = 0; setInterval(() => { document.getElementById('moo').innerText = 'moo' + i++ }, 2000) </script> Am I doing something wrong? Is there another way to announce changes when they come in

问题 I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox. This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does not: <div aria-live="assertive" id="moo"> </div> <script> let i = 0; setInterval(() => { document.getElementById('moo').innerText = 'moo' + i++ }, 2000) </script> Am I doing something wrong? Is there another way to announce changes when they come in

问题 I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox. This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does not: <div aria-live="assertive" id="moo"> </div> <script> let i = 0; setInterval(() => { document.getElementById('moo').innerText = 'moo' + i++ }, 2000) </script> Am I doing something wrong? Is there another way to announce changes when they come in

问题 In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4"). What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader. Below is example code of my current code (first) and the second is just to

问题 In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4"). What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader. Below is example code of my current code (first) and the second is just to

问题 In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4"). What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader. Below is example code of my current code (first) and the second is just to

问题 I am not able to use any media query for high contrast mode in the Mozilla (Firefox) browser. The media queries given are working fine on IE and edge, but not working on Mozilla. The images are not coming on Mozilla in high contrast mode. Can someone suggest any media query which will target Mozilla in high contrast mode? I have used following media queries: @media screen and (-ms-high-contrast: active) { } @media screen and (-ms-high-contrast: black-on-white) { } @media screen and (-ms-high

来源： https://stackoverflow.com/questions/63730392/properly-hiding-content-from-both-keyboard-and-screen-reader

来源： https://stackoverflow.com/questions/63730392/properly-hiding-content-from-both-keyboard-and-screen-reader