Атрибут accesskey тега <marquee>
Описание
Атрибут accesskey для тега <marquee> позволял назначать горячую клавишу для активации или управления бегущей строкой. Этот атрибут является устаревшим в контексте тега <marquee> и не рекомендуется к использованию.
<marquee accesskey="S" id="news-ticker">
Последние новости...
</marquee>
<script>
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === 's') {
document.getElementById('news-ticker').stop();
}
});
</script>
Современная альтернатива:
<div class="news-ticker" id="modern-ticker" tabindex="0">
<div class="ticker-content">Актуальные новости...</div>
</div>
<style>
.news-ticker {
overflow: hidden;
position: relative;
}
.ticker-content {
animation: scroll 15s linear infinite;
}
</style>
<script>
document.getElementById('modern-ticker').addEventListener('keydown', function(e) {
if (e.key === ' ' || e.key === 'Enter') {
this.querySelector('.ticker-content').style.animationPlayState = 'paused';
}
});
</script>
Рекомендации по доступности:
- Используйте семантические HTML-элементы для интерактивных компонентов
- Добавляйте
tabindexдля управления с клавиатуры - Реализуйте обработчики клавиш через JavaScript
- Сообщайте о состоянии через ARIA-атрибуты
Лучшие практики:
| Устаревший подход | Современная альтернатива |
|---|---|
| accesskey на <marquee> | JavaScript-обработчики событий |
| Нет контроля доступности | ARIA-роли и атрибуты |
| Ограниченная функциональность | Полный контроль над поведением |
Пример полной реализации:
<div class="accessible-ticker"
id="news"
tabindex="0"
role="marquee"
aria-live="polite">
<div class="ticker-content">Важные обновления...</div>
</div>
<script>
const ticker = document.getElementById('news');
const content = ticker.querySelector('.ticker-content');
// Управление с клавиатуры
ticker.addEventListener('keydown', (e) => {
if (e.key === ' ' || e.key === 'Enter') {
const isPaused = content.style.animationPlayState === 'paused';
content.style.animationPlayState = isPaused ? 'running' : 'paused';
ticker.setAttribute('aria-label',
isPaused ? 'Анимация продолжена' : 'Анимация остановлена');
}
});
</script>
Ограничения устаревшего подхода:
- Конфликты с комбинациями клавиш браузера
- Отсутствие стандартизованного поведения
- Плохая поддержка скринридерами
- Несовместимость с современными стандартами
Примечание: Для создания доступных интерактивных компонентов вместо устаревшего <marquee> с accesskey используйте семантическую HTML-разметку с ARIA-атрибутами и JavaScript-управлением. Это обеспечит лучшую доступность и пользовательский опыт.