Версия для слабовидящих

1. Загрузите модуль
   
2. Нажмите кнопку Установить
   
3. Включите модуль в настройках: Рабочий стол / Настройки / Настройки продукта / Настройки модулей / Версия для слабовидящих
   

<button data-js-vipanel-toggle="">Версия для слабовидящих</button>

• visibleUntil: "(max-width: 300px)" - указывает разрешение, на котором будет скрыта панель. По умолчанию стоит в "(max-width: 350px)". Значение для поля указывается в том же формате, как ожидается в matchMedia. Значение по умолчанию "(max-width: 350px)".

• brailleFontPath: "/bitrix/fonts/delement.visuallyimpaired/Braille.woff2" - путь до файла со шрифтом Брайля. Значение по умолчанию "/bitrix/fonts/delement.visuallyimpaired/Braille.woff2", в пакете уже присутствует файл шрифтов.

• pageUtterSelectors: [ "#viPanelUtterContent", ".viPanelUtterContent", "[data-js-some-selector]" ] - принимает массив селекторов для элементов на странице, которые будут зачитаны после нажатия на кнопку "Озвучить всё" на панели. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "#viPanelUtterContent" ].

• hiddenElementsSelectors: [ ".myAwesomeList", "#myAwesomeQuote" ] - принимает массив селекторов для элементов на странице, которые будут скрыты после того, как будет открыта панель. Элементы отобразятся, как только панель будет закрыта. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [].

• ignoreElementsSelectors: [ "#viPanelUtterContent", ".viPanelUtterContent", "[data-js-some-selector]" ] - принимает массив селекторов для элементов на странице, которые будут игнорировать стили панели, когда панель будет открыта. Тем не менее часть свойств может наследоваться от родителей. Для исправления этого можно использовать класс isDeViPanelIgnored, он будет добавлен на элементы, найденные по указанному селектору. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [].

• captchaElementsSelectors: [ "[class*='captcha']" ] - принимает массив селекторов для элементов капчи на странице. Найденные элементы будут обработаны так же, как элементы из массива ignoreElementsSelectors. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "[class*='captcha']" ].

• fontSizeSettings: { fontSizeSmall: "14px", fontSizeStandard: "default", fontSizeLarge: "20px" } - позволяет передавать собственные настройки размера шрифта для кнопок, изменяющих размер шрифта. Указаны значения по умолчанию.

• isShouldUtterControls: true - boolean-флаг, который указывает, будет ли по умолчанию включена опция "Синтез речи" (см. п. 4). Флаг будет учитываться при первом открытии панели. Если пользователь включит/выключит опцию, при следующем открытии панели опция будет в том состоянии, в которой её выставил пользователь. Значение по умолчанию true.

• isFixed: true - boolean-флаг, который указывает, будет ли панель зафиксирована в верхней части страницы при прокрутке (иметь position: fixed). Значение по умолчанию true.

• targetSelectors: [ ".panelScope", "#panelScope" ] - принимает массив селекторов для элементов, на которые будут распространены стили панели в открытом виде. Поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "body" ], то есть стили открытой панели будут применены ко всей странице целиком.

• defaultSettings: {  deViImagesDisplay: "none" } - дефолтные настройки, в которых указывается начальное состояние панели при первом открытии. Если пользователь уже открывал панель и перевыбирал опции отображения страницы, значения из дефолтных настроек будут заменены опциями, которых сохранены в локальном хранилище пользователя. Пример: в дефолтных настройках указано, что при открытой панели скрываются картинки. Пользователь открывает панель в первых раз - картинки скрыты. Пользователь меняет размер текста, обновляет страницу - картинки всё так же скрыты, размер текста соответствует тому, что ранее выбрал пользователь. Пользователь нажимает на кнопку "показать картинки" - картинки появляются. Пользователь обновляет страницу - картинки будут отображаться.

Настройки по умолчанию:

{
  "deViBaseFontSize": "default",
  "deViBaseFontFamily": "sans-serif",
  "deViBaseLetterSpacing": "default",
  "deViBaseLineHeight": "1.5",
  "deViBaseBgColor": "default",
  "deViBaseFontColor": "default",
  "deViFilter": "default",
  "deViImagesDisplay": "default"
}

{
  "isOpened": true,
  "settings": {
    "deViBaseFontSize": "default",
    "deViBaseFontFamily": "sans-serif",
    "deViBaseLetterSpacing": "5px",
    "deViBaseBgColor": "#3b2716",
    "deViBaseFontColor": "#a9e44d",
    "deViFilter": "grayscale(100%)",
    "deViImagesDisplay": "none",
    "deViBaseLineHeight": "1"
  }
}

• увеличить/уменьшить шрифт/стандартный шрифт
  
• увеличить/уменьшить интервал/стандартный интервал
  
• включить/отключить изображения
  
• шрифт/гарнитура с засечками, шрифт/гарнитура без засечек
  
• изменить цвет сайта чёрным по белому/белым по чёрному/синим по голубому/коричневым по бежевому/зелёным по коричневому
  
• включить шрифт брайля
  
• распечатать