Drag & Drop components for blind users? Are you kidding me?

Drag & Drop components
for blind users?
Are you kidding me?

Sergei Kriger

@_sergeikriger

About me

Use cases for Drag & Drop

Blind users

Slider

Styles for a native slider

danielstern.ca/range.css

Styled slider

Drag and drop events

Drag and drop events

Drag and drop events on mobile

Slider

ARIA

        <div class="thumb" tabindex="0"
          role="slider"
          aria-label="Slider"
          aria-valuenow="5"
          aria-valuemin="0"
          aria-valuemax="10"
        ></div>
      

Accessible slider

Attribute draggable

Draggable elements by default

How drag end drop works

draggable

drop-zone

Data Transfer

          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 Zone

          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 = 'New text';
      

Task board

Resume

• Native HTML elements
• HTML + JavaScript + ARIA
• Select mode
• Context menu

Thanks!.. Questions?

@_sergeikriger

Credits