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

Sergei Kriger

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

Sergei Kriger

@_sergeikriger

About me

Robotise logo Jeeves robot

Use cases for Drag & Drop

Trello board. Gmail. Google Keep. Goeuro.

Blind users

Glasses.

Sliding

Goeuro screenshot

Goeuro screenshot.

Slider

Styles for a native slider

::-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

Styled slider

Goeuro dev tools screenshot

Goeuro dev tools.

Drag and drop events

position: absolute;

Drag and drop events

mousedown mousemove mouseup

Drag and drop events on mobile

touchstart touchmove touchend

Slider

ARIA

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

Accessible slider

Sorting

Google Keep screenshot

Google Keep screenshot.

Todo List

Empty list.

Attribute draggable

draggable="true"

Draggable elements by default

<img> <a>  selected text

How drag end drop works

draggable

Picture.

    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();
                });
            

      Todo List

      Empty list.

      Live Region

                <div class="live-region visually-hidden"
                  aria-live="polite"
                  role="status"
                ></div>
                 
                const liveRegion = document.querySelector(".live-region");
                liveRegion.textContent = 'New text';
            

      Todo List

      Empty list.

      Moving

      Trello screenshot

      Trello screenshot.

      Task board

      Gmail screenshot

      Gmail screenshot.

      Drag and drop file or .

      Resume

      Inclusive components by Heydon Pickering

      Aria best practices.

      Accessibility for everyone

      Accessibility for everyone by Laura Kalbag.

      Inclusive components by Heydon Pickering

      Inclusive components by Heydon Pickering.

      Thanks!.. Questions?

      @_sergeikriger

      Credits

      Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
      Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY