У меня есть некоторый код, который выглядит примерно так (например, сокращено):
html {
background: #eee;
}
section {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
margin: 1em;
padding: 1em;
}
[tabindex]:focus {
outline: 1px dashed blue;
}
<section tabindex="0">
<h1>
Section 1
</h1>
<p>
This section will be highlighted but it won't go inside as
nothing inside has tabindex. I don't want it to be read at all.
</p>
</section>
<section tabindex="0">
<h1>
Section 2
</h1>
<p>
This section will be highlighted and there is an element inside with
tabindex. I don't want the section to be read, but I want to read
the focusable elements when they are focused.
</p>
<p tabindex="0">
For example: this paragraph has tabindex. It should be read when focused.
</p>
</section>
Существуют различные участки, которые выделяются, когда они получают фокус, потому что они имеют tabindex.Это выделение позволяет легко идентифицировать раздел, которым является пользователь в любой данный момент.
Внутри каждого из этих разделов может быть что угодно: текст, HTML-код, фокусируемое содержимое (либо потому, что оно имеет tabindex, либопотому что он имеет интерактивные элементы).Это веб-компонент, и я не могу контролировать, что происходит внутри.
У нас есть пользователи программ чтения с экрана и пользователи с плохим зрением, они оба используют клавиатуру для навигации, а для последних мы хотим помочьопределить, в каком разделе они находятся (на странице с несколькими разделами / карточками), не оказывая негативного влияния на пользователей программы чтения с экрана.
Когда раздел выделен, я бы хотел, чтобы он был только графически (с контуром), но я не хочу, чтобы программа чтения с экрана читала его содержимое, потому что если внутри есть какой-либо интерактивный / фокусируемый контент, он будет прочитан дважды и не требует дубликатов.
Например: при использовании программы чтения с экрана, такой как ChromeVox или VoiceOver, при нажатии на вкладку будет выделен первый раздел ибудет звучать примерно так:
[Раздел] Раздел 1. Этот раздел будет выделен, но он не войдет внутрь, поскольку внутри ничего нет tabindex.Я не хочу, чтобы он читался вообще.
При повторном нажатии на вкладку будет выделен второй раздел, и он будет звучать примерно так:
[Раздел] Раздел 2. Этот раздел будет выделен, и внутри него будет элемент tabindex.Я не хочу, чтобы раздел читался, но я хочу прочитать фокусируемые элементы, когда они сфокусированы.Например: этот абзац имеет tabindex.Его следует читать, когда он сфокусирован.
При нажатии на вкладку в третий раз активируется последний абзац внутри раздела (он имеет tabindex), и программа чтения с экранаскажем:
Например: этот абзац имеет tabindex.Его следует читать, когда он сфокусирован.
Этот сценарий не идеален, потому что мы повторяем контент (помните, что приведенный выше код является примером, в действительности это больше, чем просто).Когда раздел получает фокус, он полностью читается;и когда содержимое внутри получает фокус, оно снова читается.Последнее предложение было прочитано дважды: когда раздел активен и когда он сам активен.
Я хотел бы получить следующее поведение:
- Нажмите tab и первый раздел выделен.Ничего не читается.
- Нажмите tab , и второй раздел будет выделен.Ничего не читается.
- Нажмите tab , и последний абзац будет выделен И он будет прочитан.
Я пытался разобраться в этом поведении с помощью различныхподходы:
- Использование
role="presentation": поэтому семантика роли не будет сопоставлена с API доступа и не будет прочитана ... проблема в том, что role="presentation" не применяется к фокусируемым элементам (например, элементы с tabindex). - Использование
role="none": это синоним role="presentation", поэтому он не работаеттаким же образом. - Использование
aria-label="": игнорирует пустое aria-label и все еще читает все содержимое раздела. - Использование
aria-hidden="true": таким образом раздел игнорируется, а его содержимое не читается ... но его фокусируемое содержимое также игнорируется и не читается при получении фокуса - вот что я хочу:
html {
background: #eee;
}
section {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
margin: 1em;
padding: 1em;
}
[tabindex]:focus {
outline: 1px dashed blue;
}
<section tabindex="0" aria-hidden="true">
<h1>
Section 1
</h1>
<p>
This section will be highlighted but it won't go inside as
nothing inside has tabindex. I don't want it to be read at all.
</p>
</section>
<section tabindex="0" aria-hidden="true">
<h1>
Section 2
</h1>
<p>
This section will be highlighted and there is an element inside with
tabindex. I don't want the section to be read, but I want to read
the focusable elements when they are focused.
</p>
<p tabindex="0">
For example: this paragraph has tabindex. It should be read when focused.
</p>
</section>
Я попытался обернуть все содержимое раздела в div с aria-hidden="false", но кажется, что родительский aria-hidden="true" заменяет его.
Есть ли способ достичь того, чего я хочу?