Accessibility Widget

Возможности

Всё для комфортного чтения

Шесть инструментов доступности, которые работают на любом сайте без изменения исходного кода.

Размер текста

Озвучка страницы

Межстрочный интервал

Жирный текст

Цветовые темы

Скрытие изображений

Демонстрация

Попробуйте прямо сейчас

Нажмите на кнопку ниже — и страница преобразится на ваших глазах.

Доступность в вебе

Доступность веб-контента — важнейший аспект современной разработки. Каждый пользователь, независимо от физических возможностей, должен иметь равный доступ к информации и функциям сайтов.

Стандарты WCAG описывают четыре принципа доступности: воспринимаемость, управляемость, понятность и надёжность. Наш виджет охватывает наиболее востребованные из них.

Настройки сохраняются в localStorage — пользователю не нужно перевыбирать параметры при каждом посещении сайта.

Пример длинного текста

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

Согласно статистике ВОЗ, более 2.2 миллиарда человек в мире имеют нарушения зрения. Из них около 1 миллиарда живут с нарушениями, которых можно было бы избежать.

Подключение

Работает везде

Один виджет — четыре способа подключения.

<!-- Connect before </body> -->
<script src="accessibility-widget.umd.js"></script>
<script>
  new AccessibilityWidget.AccessibilityWidget({
    position: 'bottom-right',
    locale: 'ru'
  });
</script>

import { AccessibilityWidget } from 'accessibility-widget';

new AccessibilityWidget({
  position: 'bottom-right',
  locale: 'ru'
});

import { AccessibilityWidgetComponent } from 'accessibility-widget/react';

export function App() {
  return (
    <>
      <AccessibilityWidgetComponent
        position="bottom-right"
        locale="ru"
      />
    </>
  );
}

<template>
  <AccessibilityWidgetComponent
    position="bottom-right"
    locale="ru"
  />
</template>

<script setup lang="ts">
import { AccessibilityWidgetComponent } from 'accessibility-widget/vue';
</script>

Доступный интерфейс для каждого пользователя

Всё для комфортного чтения

Попробуйте прямо сейчас

Доступность в вебе

Пример длинного текста

Работает везде

Доступный интерфейс
для каждого пользователя