Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Drag-&-Drop компоненты
для слепых пользователей?
Вы шутите?

Сергей Кригер

@_sergeikriger

Слайдер

::-webkit-slider-runnable-track
::-webkit-slider-thumb
::-moz-range-track
::-moz-range-thumb
::-ms-track
::-ms-thumb
::-ms-fill-lower
::-ms-fill-upper

danielstern.ca/range.css

position: absolute;

mousedown mousemove mouseup

touchstart touchmove touchend

Слайдер

ARIA

        <div class="thumb" tabindex="0"
          role="slider"
          aria-label="Слайдер"
          aria-valuenow="5"
          aria-valuemin="0"
          aria-valuemax="10"
        ></div>

https://www.w3.org/TR/wai-aria-practices-1.1/#slider

Доступный слайдер

Сортировка

Список дел

погулять с собакой
записаться к врачу

Пустой список.

draggable="true"

<img> <a> выбранный текст

draggable

drop-zone

Перенос данных

          draggable.addEventListener("dragstart", e => {
            e.dataTransfer.setData("text/plain", e.target.id);
          });
          dropZone.addEventListener("drop", e => {
            const id = e.dataTransfer.getData("text/plain");
            const el = document.getElementById(id);
          });

Drop зона

          dropZone.addEventListener("dragenter", e => {
            e.preventDefault();
          });
           
          dropZone.addEventListener("dragover", e => {
            e.preventDefault();
          });

Список дел

погулять с собакой
записаться к врачу
приготовить ужин

Пустой список.

Live region

          <div class="live-region visually-hidden"
            aria-live="polite"
            role="status"
          ></div>
           
          const liveRegion = document.querySelector(".live-region");
          liveRegion.textContent = 'Новый текст';