< Back to Demos | Learn more at PaulJAdam.com >

Draggable Attribute

This demo is to test screen reader support for the HTML draggable attribute and its usage with role=application and aria-grabbed. Major desktop screen readers JAWS, NVDA, VoiceOver, and mobile screen readers TalkBack and VoiceOver were tested.

Conclusion on Accessibility Support of HTML draggable Attribute:

• No support on Mobile Screen Readers on iPhone, iPad, or Android
• No support with Apple's VoiceOver screen reader for Mac and iOS
• Only supported with JAWS and NVDA Windows Desktop screen readers
• The only way to get good support with NVDA and JAWS is to use role="application" and aria-grabbed
• aria-grabbed is a deprecated attribute in ARIA 1.1
• For robust support on all desktop and mobile screen readers make sure to layer ARIA live region announcments on top of any draggable attribute usage.
• role=button is likely a better choice to convey operability to the screen reader user and aria-pressed=true/false can convey when a draggable button is pressed
• adding role=button and aria-pressed conveys a role and pressed state to all screen readers tested

Drag and Drop with draggable attribute only

Drag the image back and forth between the two div elements.

Screen Reader Speech Output

• NVDA+Firefox = "logo"
• NVDA+Chrome = "logo graphic"
• JAWS+Firefox = "logo"
• JAWS+Chrome = "logo graphic"
• VoiceOver + Safari macOS = "logo, image"
• VoiceOver + Safari iOS = "logo image"
• TalkBack + Chrome Android = "logo"
• TalkBack + Firefox Android = "logo logo"

Drag and Drop with draggable attribute and aria-grabbed=false

Drag the image back and forth between the two div elements.

Screen Reader Speech Output

• NVDA+Firefox = "logo"
• NVDA+Chrome = "logo graphic draggable"
• JAWS+Firefox = "logo"
• JAWS+Chrome = "logo graphic"
• VoiceOver + Safari macOS = "logo, image"
• VoiceOver + Safari iOS = "logo image"
• TalkBack + Chrome Android = "logo"
• TalkBack + Firefox Android = "logo logo"

Drag and Drop with draggable attribute and role=application

Drag the image back and forth between the two div elements.

Screen Reader Speech Output

• NVDA+Firefox = "application logo text frame"
• NVDA+Chrome = "application logo graphic"
• JAWS+Firefox = "logo frame"
• JAWS+Chrome = "logo graphic readonly"
• VoiceOver + Safari macOS = "logo, image, web application"
• VoiceOver + Safari iOS = "logo image"
• TalkBack + Chrome Android = "logo"
• TalkBack + Firefox Android = "logo logo"

Drag and Drop with draggable attribute, aria-grabbed=false, and role=application

Drag the image back and forth between the two div elements.

Screen Reader Speech Output

• NVDA+Firefox = "application logo text frame draggable"
• NVDA+Chrome = "application logo graphic draggable"
• JAWS+Firefox = "logo frame draggable"
• JAWS+Chrome = "logo graphic readonly draggable"
• VoiceOver + Safari macOS = "logo, image, web application"
• VoiceOver + Safari iOS = "logo image"
• TalkBack + Chrome Android = "logo"
• TalkBack + Firefox Android = "logo logo"

Drag and Drop with draggable attribute, aria-grabbed=true, and role=application, draggable control is a role=button with aria-pressed=true

Drag the image back and forth between the two div elements.

Screen Reader Speech Output

• NVDA+Firefox = "application logo toggle button pressed dragging"
• NVDA+Chrome = "application logo toggle button pressed dragging"
• JAWS+Firefox = "logo toggle button pressed grabbed"
• JAWS+Chrome = "logo toggle button pressed grabbed"
• VoiceOver + Safari macOS = "logo, selected, toggle button, web application"
• VoiceOver + Safari iOS = "logo toggle button pressed"
• TalkBack + Chrome Android = "logo, checked"
• TalkBack + Firefox Android = "logo pressed toggle button"