Принятый ответ не является доступным решением.
Я внес некоторые исправления и некоторые замечания здесь. Не используйте принятый ответ в производстве, если вы наткнетесь на этот вопрос в будущем. Это ужасный опыт работы с клавиатурой.
Ответ ниже устраняет некоторые проблемы CSS, чтобы сделать его более доступным.
Однако Я бы порекомендовал вам пересмотреть требование не JavaScript.
Я могу понять, что есть хороший запасной вариант (пример которого я привожу ниже с исправлениями) есть) но нет никакого способа сделать полностью доступный набор CSS только вкладок.
Во-первых, вы должны использовать WAI-ARIA, чтобы дополнить ваш HTML, чтобы сделать экранные программы еще более понятными. См. Примеры вкладок на W3 C, чтобы увидеть, какие роли WAI-ARIA вам следует использовать. Это НЕ возможно без JavaScript, так как необходимо изменить состояние (например, aria-hidden должно измениться).
Во-вторых, вы должны иметь возможность использовать определенные сочетания клавиш. Например, нажмите клавишу home , чтобы вернуться на первую вкладку, что вы можете сделать только с помощью небольшой справки JS.
С учетом сказанного ниже я приведу несколько вещей. исправлено с принятым ответом, чтобы, по крайней мере, дать вам хорошую отправную точку, как ваше 'нет JavaScript отступление '.
Проблема 1 - tabindex на этикетке.
Добавляя это, вы создаете фокусируемый элемент, который нельзя активировать с помощью клавиатуры (вы не можете нажать пробел или Введите на метке, чтобы изменить выбор, если вы не используете JavaScript) .
Чтобы это исправить, я просто удалил tabindex с меток.
Проблема 2 - нет индикаторов фокуса при навигации по клавиатуре.
В примере вкладки работают только тогда, когда вы сфокусированы на переключателях (которые скрыты). Однако на этом этапе индикатор фокуса отсутствует, так как стиль применяет стилизацию к флажку, когда он находится в фокусе, а не к его метке.
Чтобы исправить это, я настроил CSS с помощью следующей
/*make it so when the checkbox is focused we add a focus indicator to the label.*/
.tabs__input:focus + label {
outline: 2px solid #333;
}
Задача 3 - использование одного и того же состояния для состояний :hover и :focus.
Это еще одна плохая практика, которую нужно go убрать, всегда по-другому показывать состояния наведения и фокуса. Некоторые пользователи программы чтения с экрана и экранной лупы будут использовать свою мышь, чтобы проверить, правильно ли они сфокусированы, и ориентироваться на странице. Без отдельного состояния наведения трудно проверить, что вы находитесь над сфокусированным элементом.
/*use a different colour background on hover, you should not use the same styling for hover and focus states*/
.tabs__label:hover{
background-color: #ccc;
}
Пример
В примере я добавил гиперссылку вверху, чтобы вы могли видеть, где ваш индикатор фокусировки при использовании клавиатуры.
Когда ваш индикатор фокусировки находится на одной из двух вкладок, вы можете нажимать клавиши со стрелками, чтобы изменить вкладку (что является ожидаемым поведением), и индикатор фокусировки будет соответствующим образом изменяться, чтобы сделать это ясно, какая вкладка была выбрана.
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
position: fixed;
top:-100px;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__label:hover{
background-color: #ccc;
}
.tabs__input:focus + label {
outline: 2px solid #333;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
<a href="#">A link so you can see where your focus indicator is</a>
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>