A11y-inspector

Accessibility Inspector - Расширение для проверки доступности веб-сайтов

Расширение для браузеров на движке Chromium, которое проверяет веб-сайты на соответствие критериям доступности (WCAG) и предоставляет детальные отчеты в различных форматах.

Возможности

• ** Комплексная проверка доступности** по стандартам WCAG
• ** Проверка контрастности** с реальными расчетами по алгоритму WCAG
• ** Мультиформатные отчеты** (JSON, HTML и обычный текст)
• ** Проверка изображений** на наличие альтернативных текстов
• ** Проверка клавиатурной навигации**
• ** Анализ семантической разметки**
• ** Проверка ARIA-атрибутов**
• ** Скачивание отчетов** для дальнейшего анализа

Поддерживаемые проверки

Контрастность текста

• Расчет коэффициента контрастности по алгоритму WCAG
• Проверка соответствия уровням AA (4.5:1) и AAA (7:1)
• Учет размера и жирности шрифта
• Рекурсивный анализ фоновых цветов

Изображения

• Отсутствие атрибута alt
• Пустые атрибуты alt для декоративных изображений

Семантическая разметка

• Наличие заголовков (h1-h6)
• Использование семантических элементов вместо div
• Корректная структура заголовков

ARIA-атрибуты

• Проверка корректности использования aria-label
• Валидация ARIA-ролей и свойств

Клавиатурная навигация

• Проверка атрибутов tabindex
• Обнаружение потенциальных проблем с фокусом

Установка

Установка из исходного кода

1. Клонируйте репозиторий

   git clone https://github.com/Kostenkov-2021/A11y-inspector.git
   cd A11y-inspector

2. Установите расширение в браузере

   • Откройте браузер Chrome/Edge/Brave
   • Перейдите на страницу chrome://extensions/
   • Включите "Режим разработчика" (переключатель в правом верхнем углу)
   • Нажмите "Загрузить распакованное расширение"
   • Выберите папку с расширением

Установка из файла

1. Скачайте последнюю версию расширения из Releases
2. Распакуйте архив в выбранную папку
3. Следуйте шагам 2-5 из инструкции выше

Использование

Базовое использование

1. Откройте расширение

   • Нажмите на иконку расширения в панели инструментов браузера

2. Введите URL для проверки

   • Вставьте URL сайта в поле ввода
   • Или используйте текущую вкладку (URL подставляется автоматически)

3. Выберите формат отчета

   • JSON - для программной обработки
   • HTML - для визуального просмотра
   • Обычный текст - для быстрого импорта

4. Запустите проверку

   • Нажмите кнопку "Проверить"
   • Дождитесь завершения анализа

5. Просмотрите и скачайте отчет

   • Изучите результаты в интерфейсе расширения
   • Скачайте отчет в выбранном формате

Расширенное использование

Проверка конкретных элементов

Расширение автоматически проверяет все элементы страницы, но вы можете проверять на конкретных проблемах:

• Контрастность: Отчет включает точные значения коэффициентов и требования
• Изображения: Список всех изображений без альтернативных текстов
• Навигация: Проблемы с клавиатурным доступом

Интерпретация результатов

Уровни серьезности:

• 🔴 Ошибка - Критические проблемы, нарушающие доступность
• 🟡 Предупреждение - Потенциальные проблемы и рекомендации

Категории проверок:

• contrast - Проблемы с контрастностью
• images - Проблемы с изображениями
• headings - Структура заголовков
• aria - ARIA-атрибуты
• keyboard - Клавиатурная навигация
• semantics - Семантическая разметка

Форматы отчетов

JSON

{
  "url": "https://example.com",
  "timestamp": "2024-01-15T10:30:00.000Z",
  "issues": [
    {
      "type": "error",
      "category": "contrast",
      "message": "Недостаточный контраст: 3.2:1 (требуется 4.5:1)",
      "selector": ".main-content",
      "details": {
        "ratio": "3.20",
        "requiredRatio": 4.5,
        "fontSize": "16px",
        "fontWeight": 400
      }
    }
  ],
  "summary": {
    "total": 5,
    "errors": 3,
    "warnings": 2
  }
}

HTML

Отчет с цветовой кодировкой и детальной информацией о каждой проблеме.

Обычный текст

Формат для импорта в текстовые редакторы.

Структура проекта

accessibility-inspector/
├── manifest.json                 # Конфигурация расширения
├── popup/                        # Интерфейс расширения
│   ├── popup.html               # HTML popup
│   ├── popup.js                 # Логика popup
│   └── popup.css                # Стили popup
├── background.js                 # Фоновый скрипт
├── content-script.js            # Скрипт для проверки страниц
├── utils/                       # Вспомогательные модули
│   ├── report-generator.js      # Генератор отчетов
│   └── color-utils.js           # Утилиты для работы с цветом
└── icons/                       # Иконки расширения
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Разработка

Требования

• Браузер на движке Chromium (Chrome 88+, Edge 88+, Brave 1.20+)
• Базовые знания JavaScript и HTML/CSS

Настройка среды разработки

1. Клонируйте репозиторий

   git clone https://github.com/Kostenkov-2021/A11y-inspector.git
   cd A11y-inspector

2. Внесите изменения в код

3. Тестирование изменений

   • Откройте chrome://extensions/
   • Нажмите "Обновить" на карточке расширения
   • Проверьте функциональность

Архитектура расширения

Content Script (content-script.js)

• Выполняется в контексте проверяемой страницы
• Собирает данные о доступности элементов
• Реализует алгоритмы проверки контрастности

Background Script (background.js)

• Управляет процессами проверки
• Координирует взаимодействие между компонентами

Popup Interface (popup/)

• Пользовательский интерфейс расширения
• Отображение результатов и управление настройками

Report Generator (utils/report-generator.js)

• Генерация отчетов в различных форматах
• Форматирование и экспорт данных

Тестирование

Ручное тестирование

Для проверки функциональности используйте следующие тестовые сценарии:

1. Проверка контрастности

   • Сайты с низкоконтрастным текстом
   • Элементы с различными размерами шрифтов

2. Проверка изображений

   • Страницы с изображениями без alt атрибутов
   • Декоративные изображения с пустыми alt

3. Проверка семантики

   • Страницы без заголовков
   • Использование несемантических элементов для интерактивных компонентов

Производительность

Расширение оптимизировано для работы с большими страницами:

• Проверка выполняется асинхронно
• Минимальное влияние на производительность браузера
• Инкрементальный анализ элементов

Вклад в проект

Мы приветствуем вклад в развитие расширения!

Как помочь

1. Сообщение об ошибках

   • Используйте Issues для сообщения о багах
   • Включайте информацию о браузере и версии расширения
   • Прикладывайте примеры проблемных страниц

2. Предложение новых функций

   • Опишите предлагаемую функциональность
   • Обоснуйте полезность для пользователей
   • Предложите возможную реализацию

3. Участие в разработке

   • Форкните репозиторий
   • Создайте ветку для новой функции (git checkout -b feature/amazing-feature)
   • Закоммитьте изменения (git commit -m 'Add amazing feature')
   • Запушьте в форк (git push origin feature/amazing-feature)
   • Создайте Pull Request

Планы развития

• Проверка мобильной доступности
• Поддержка пользовательских правил проверки
• Визуальное выделение проблем на странице
• История проверок

Поддержка

Если у вас возникли проблемы или вопросы:

1. Проверьте документацию - многие вопросы уже освещены
2. Создайте Issue на GitHub для багов и предложений

---

Accessibility Inspector - Доступность - неотъемлимая часть разработки и жизни!