0

I have an interactive widget where a box image is draggable. Since the images are not interactive elements, I am not sure if the image can be focused. I have gone through the functional image accessibility rules, but they all describe the logo, icons, and button images. Ours is a normal box image that can be dragged anywhere within a certain area. Can we focus on this type of image for accessibility?

As of now, if we focus on the image, the screen reader would read "Focused on box image". Is this the correct approach?

Eflyax
  • 5,307
  • 2
  • 19
  • 29
Preeti
  • 43
  • 1
  • 5
  • you have `tabindex` as an attribute for that. However, drag and drop is not accessible at all. What purpose has a user to be focused on a draggable image? what does a person need to do with it or need to the image at all? – tacoshy May 22 '23 at 06:52
  • The functionality of my interactive is, the box can be lifted upwards and based on this we are calculating the work done against gravity. The question is, can we focus on this image as our accessibility user reports, "Non interactive element is receiving focus". @tacoshy – Preeti May 22 '23 at 07:01
  • 1
    yes, you can focus on an element with the `tabindex` attribute. However, the issue remains that the drag and drop will not be useable for accessibility users as they can't see at which height the image is dragging. – tacoshy May 22 '23 at 07:23
  • An equivalent experience should be provided for keyboard users, and as @tacoshy mentioned, information about how high you are dragging the box will also need to be announced. The box should be an interactive element that you can TAB to and then use the up arrow to drag up. As you drag up, the "height" of the box can be announced to screen reader users ([aria-live](https://www.w3.org/TR/wai-aria/#aria-live)). – slugolicious May 22 '23 at 23:47

0 Answers0