问题
I'm currently trying to make a DOM element with one to several child elements as accessible as possible. The element will contain illustrative content using background images in several layers. I'm currently using a child element for providing the image description as described in this informative blog post about how to label illustrative content inside of a content group. The container element may also contain other child elements containing text content.
An example element would currently look as follows:
<div tabindex="0" class="comic-panel">
<span role="img" aria-label="There is a cat sitting in the window."></span>
<div style="background-image: url(/assets/img/window.png);" class="comic-panel__layer"></div>
<div style="background-image: url(/assets/img/cat.png);" class="comic-panel__layer"></div>
<p class="speech-bubble">Meow!</p>
</div>
Testing with OSX VoiceOver, after tabbing into this element, the image description and the text is read fine, but subsequently, the following announcement is made as well:
Is it possible to update the markup of this element in a way, that this group announcement is not made by screenreaders? In almost all cases there will be nothing for the user to further explore or use inside of the element so this message would be redundant and I'd like VoiceOver to not recognise the element as a group that triggers this message.
回答1:
(Moving all my comments from the comment section to the answer section since the discussion in the comments resolved the issue.)
I think there might be some misunderstanding of how a screen reader (SR) works and how a SR user navigates a webpage.
You have tabindex="0" on your <div> but the <div> doesn't have a role and is not an interactive element. The tabindex spec has a warning that says:
"authors should only make elements focusable if they act as interactive controls".
So unless the user can actually interact with the <div>, it should not have tabindex="0".
If the user can interact with the <div>, then the <div> will also need a role (see previous URL to role) so that the SR will announce the element properly and the user will understand how to interact with that element.
For non-interactive elements, SR users have lots of ways to navigate around the page so that they can access other text on the page.
One of the more common ways to navigate is by using the up and down arrow keys to walk the DOM. (Actually, you're not walking the DOM, per se, but rather the Accessibility Tree, which is basically a subset of the DOM. For example, hidden elements (CSS display:none) are in the DOM but are not in the Accessibility Tree.)
Anyway, the up/down arrow keys let the SR user get to every piece of text on the display. All your headings, paragraphs, lists, etc.
There are also single letter shortcut keys that allows the SR user to navigate to specific types of elements. For example,
- H will take me to the next heading
- T will take me to the next table
- L will take me to the next list
- B will take me to the next button
But these keys will only work if you are using semantic html, such as an <h2>, <table>, <ul>, <button>, etc or if you are using the appropriate ARIA attributes. For example, if there's a reason you can't use <h2> to make a real heading, you can still tell the SR that you have a heading by using ARIA.
<span role="heading" aria-level="2">This is a custom h2 heading</span>
JAWS and NVDA are common SRs on the PC. They'll have similar single key shortcuts that can be seen here:
- JAWS shortcut keys
- NVDA shortcut keys
- VoiceOver shortcut keys (for the Mac, not iOS). Note that these are not single key shortcuts, like a simple H, but require the "VO" key (Ctrl+Option by default) in combination with Cmd and H.
Apple has a good tutorial on VoiceOver.
For the PC, Freedom Scientific (the maker of JAWS) has a good tutorial on JAWS.
If you have questions about accessibility, posting on stackoverflow is certainly one way to go, especially if you tag your question with accessibility and other accessibility related tags (such as wai-aria or screen-readers, as you did on this question).
Another resources is the WebAIM community. Anyone can join and you can "lurk" and just read the discussions as they come in, or fully participate.
来源：https://stackoverflow.com/questions/55197141/how-to-make-screenreader-not-recognise-an-element-as-an-element-group