Введение

Веб-доступность имеет решающее значение в современном цифровом мире, поскольку она гарантирует, что люди с ограниченными возможностями могут легко получать доступ к веб-сайтам и перемещаться по ним. В этом сообщении блога будут рассмотрены некоторые передовые методы реализации веб-доступности в ваших приложениях JavaScript, что позволит вам создавать инклюзивные и удобные веб-сайты.

Используйте семантический HTML

Использование семантических элементов HTML помогает программам чтения с экрана понять структуру и значение вашего контента. Обязательно используйте соответствующие теги для заголовков, абзацев, списков и т. д. Например:

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

Добавьте правильные роли и атрибуты ARIA (доступные многофункциональные интернет-приложения).

Роли и атрибуты ARIA улучшают доступность, предоставляя дополнительную информацию вспомогательным технологиям, таким как программы чтения с экрана. Используйте ориентиры ARIA для определения структуры контента и атрибуты ARIA для описания состояния интерактивных элементов. Например:

<div role="search">
    <label for="search">Search:</label>
    <input type="search" id="search" name="search" aria-label="Search the site">
</div>

Управляйте фокусом с помощью JavaScript

Убедитесь, что пользователи клавиатуры могут перемещаться по вашему сайту, правильно управляя фокусом. Это можно сделать, установив атрибут tabindex и используя JavaScript для управления поведением фокуса. Например, при открытии модального окна вы должны установить фокус на первом фокусируемом элементе и перехватить фокус внутри модального окна:

function openModal(modal) {
    let focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    focusableElements = Array.prototype.slice.call(focusableElements);
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];

    firstFocusableElement.focus();

    // Trap focus within the modal
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Tab' && e.shiftKey && document.activeElement === firstFocusableElement) {
            e.preventDefault();
            lastFocusableElement.focus();
        } else if (e.key === 'Tab' && !e.shiftKey && document.activeElement === lastFocusableElement) {
            e.preventDefault();
            firstFocusableElement.focus();
        }
    });
}

Используйте JavaScript для улучшения проверки формы

Предоставляйте четкие сообщения об ошибках и выделяйте недопустимые поля, чтобы помочь пользователям понять и исправить ошибки ввода. Используйте JavaScript для проверки в реальном времени и улучшения взаимодействия с пользователем:

const form = document.querySelector('form');
const emailInput = document.querySelector('#email');
const emailError = document.querySelector('#email-error');

form.addEventListener('submit', (e) => {
if (!isValidEmail(emailInput.value)) {
e.preventDefault();
emailError.textContent = 'Please enter a valid email address.';
emailInput.classList.add('error');
} else {
emailError.textContent = '';
emailInput.classList.remove('error');
}
});

emailInput.addEventListener('input', () => {
if (isValidEmail(emailInput.value)) {
emailError.textContent = '';
emailInput.classList.remove('error');
}
});

function isValidEmail(email) {
const regex = /^[\w-]+(.[\w-]+)*@([\w-]+.)+[a-zA-Z]{2,7}$/;
return regex.test(email);
}

Убедитесь, что ваши анимации JavaScript доступны

Анимации могут быть проблематичными для пользователей с определенными когнитивными или вестибулярными расстройствами. Используйте медиа-запрос prefers-reduced-motion, чтобы настроить анимацию соответствующим образом:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReducedMotion) {
    // Add your animation code here
}

Заключение

Следуя этим рекомендациям, вы сможете создавать более доступные и инклюзивные приложения JavaScript. Помните, что доступность — это не разовое усилие, а непрерывный процесс, который требует постоянной оценки и улучшения. Включение этих методов с самого начала сделает ваш сайт более приятным для всех пользователей, независимо от их способностей.

  1. Руководство по доступности веб-контента (WCAG) 2.1
  2. WAI-ARIA Authoring Practices 1.1
  3. Веб-документы Mozilla Developer Network (MDN) — Специальные возможности

Понравилось читать? Еще не являетесь участником Medium? Вы можете поддержать мою работу напрямую, зарегистрировавшись по моей реферальной ссылке здесь. Это быстро, просто и не требует дополнительных затрат. Спасибо за вашу поддержку!