Проблемы с текущим решением ``:
$1$ Доступность (A11y):
- `` не имеет семантики кнопки → не объявляется экранным чтецом как интерактивный элемент.
- Клавиатурная навигация: `` по умолчанию не фокусируем и не реагирует на Enter/Space.
- Отсутствие ролей/aria → нет информации о состоянии (напр., переключателе) для ассистивных технологий.
$2$ Тестирование:
- Автотесты на клавиатуру/скринридер сложнее — нужно эмулировать фокус и клавиши вручную.
- Инструменты аудита (axe, Lighthouse) будут считать это проблемой.
$3$ SEO / семантика:
- Семантические элементы помогают ботам и структуре документа; интерактивные дивы нарушают модель содержимого и могут влиять на индексирование/понимание страницы (особенно при навигации).
Рекомендации — полная альтернативная реализация
1) Лучший вариант — нативная кнопка (рекомендуется всегда, если элемент выполняет действие, а не навигацию):
HTML + JS (не встраивать onclick inline):
```html
Go ```
```js
// JS: unobtrusive, для тестов и i18n
const btn = document.getElementById('doActionBtn');
btn.addEventListener('click', doAction);
// Пример i18n (зависит от вашей библиотеки)
btn.querySelector('[data-i18n]').textContent = i18n.t('action.go');
// Функция
function doAction(e) {
// декодируйте действия, учитывайте состояние и а11y (например aria-live при сообщениях)
console.log('action');
}
```
Почему:
- `` уже поддерживает клавиатуру (Enter/Space), фокус, роль и поведение по-умолчанию; экранные чтецы распознают как кнопку.
- Можно использовать `type="button"`, чтобы избежать submit в формах.
- Простая интеграция с тестами и SEO.
2) Если по дизайну нужен кастомный элемент и нельзя использовать ``, обеспечить полную полифилл-реализацию:
HTML + ARIA polyfill:
```html
<div
id="doActionDiv"
role="button"
tabindex="0"
aria-label="Go"
aria-pressed="false"
class="btn btn--div"
>Go ```
JS:
```js
const divBtn = document.getElementById('doActionDiv');
divBtn.addEventListener('click', doAction);
divBtn.addEventListener('keydown', (e) => {
// Space и Enter должны активировать элемент.
if (e.key === 'Enter') {
e.preventDefault();
doAction(e);
} else if (e.key === ' ' || e.key === 'Spacebar') {
// Space: предотвратить прокрутку страницы
e.preventDefault();
doAction(e);
}
});
// Обновление aria-pressed если это toggle
function doAction(e) {
const pressed = divBtn.getAttribute('aria-pressed') === 'true';
divBtn.setAttribute('aria-pressed', String(!pressed));
// действие...
}
```
Обязательно:
- `role="button"`, `tabindex="0"` — чтобы элемент был фокусируем и объявлен как кнопка.
- Обработать `keydown` для `Enter` и `Space` и вызывать `preventDefault()` для `Space`.
- Поддерживать состояние через ARIA (`aria-pressed`, `aria-disabled` и т.д.), если нужно.
3) Стили фокуса и адаптивность:
CSS (ключевые моменты):
```css
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 1rem;
border-radius: 6px;
border: 1px solid #2b6cb0;
background: #3182ce;
color: #fff;
cursor: pointer;
}
/* Видимый фокус, используя :focus-visible */
.btn:focus-visible {
outline: 3px solid Highlight;
outline-offset: 3px;
}
/* Увеличенная зона касания на мобильных */
@media (pointer: coarse) {
.btn { padding: 0.75rem 1.25rem; font-size: 1.125rem; }
}
/* Учитывать режим высокой контрастности и reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (forced-colors: active) {
.btn { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}
```
4) Международная локализация и RTL:
- Устанавливайте `lang` в `` и на динамических элементах при необходимости.
- Текст кнопки должен приходить из словаря i18n: не формируйте строк вручную в JS.
- Для RTL: используйте `dir="rtl"` на корневом элементе или на контейнере; проверяйте выравнивание и иконки (инвертируйте при необходимости).
- Атрибуты ARIA (например `aria-label`) тоже локализуются.
Примеры i18n:
```js
// Пример с библиотекой i18next / ваш i18n
btn.querySelector('[data-i18n]').textContent = i18n.t('buttons.go');
btn.setAttribute('aria-label', i18n.t('buttons.go_aria'));
document.documentElement.lang = i18n.language;
```
5) Тестирование и автоматизация:
- Линтеры/a11y: интегрировать axe-core, eslint-plugin-jsx-a11y (или аналог).
- E2E/UI: проверять фокус, активацию клавишами (Enter/Space), экранные чтецы симуляции.
- Unit: в Jest/Testing Library проверить, что при onKeyDown с ' ' и 'Enter' вызывается обработчик.
- Lighthouse/Axe: проверять отсутствие нарушений интерактивности.
Краткие рекомендации итогом:
- Используйте `` для действий; `` для навигации.
- Если используете нестандартный элемент — обязательно `role`, `tabindex`,keydown для Enter/Space, и aria-состояния.
- Давайте видимый фокус (:focus-visible), отвечайте на настройки системы (reduced-motion, forced-colors), локализуйте текст и aria-атрибуты, и покрывайте автотестами.
Это решение обеспечит корректную работу с клавиатурой, совместимость со скринридерами, удобство тестирования и корректную семантику для SEO.