Supporting keyboard movement of annotations for WCAG 2.2 (SC 2.5.7)

Technical Support WebViewer
, ,
1

WebViewer Version: 11.9.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
Supporting keyboard movement of annotations for WCAG 2.2 (SC 2.5.7)

Please describe your issue and provide steps to reproduce it:

In WebViewer 11.9.1, annotations such as shapes and text boxes can be selected, but moving them appears to require mouse-based drag-and-drop. We have not found an out-of-the-box way to reposition annotations using the keyboard or another non-drag interaction.

We need a solution for our application to comply with WCAG 2.2 Success Criterion 2.5.7 (Dragging Movements):
https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html

Does Apryse have an existing solution or a recommended approach for supporting keyboard-based movement of annotations?

Steps to reproduce:

  1. Go to https://showcase.apryse.com/

  2. Create a “Free Text” annotation

  3. Select the annotation

  4. Try to move it using the arrow keys

  5. Observe that the annotation can only be repositioned via mouse drag

Please provide a link to a minimal sample where the issue is reproducible: Not Applicable

3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems you’re looking to implement keyboard accessibility for moving annotations in Apryse’s WebViewer to comply with WCAG 2.2 Success Criterion 2.5.7. Currently, the WebViewer API does not natively support keyboard-based movement of annotations, but you can implement this functionality by capturing keyboard events and updating the annotation’s position programmatically.

Some things you can try:

  • Listen for keyboard events, such as arrow key presses, within the viewer.

  • Use the docViewer instance to get the currently selected annotation.

  • Modify the annotation’s position in response to the keyboard events by updating its X and Y coordinates.

  • Programmatically trigger the annotation’s setPosition method to update its location.

  • Ensure that the changes are committed to the document by refreshing the viewer or the specific annotation.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hi Tony,

Thank you for reaching out.

You could implement this on your side using something like this:

const { annotationManager, Annotations, documentViewer } = instance.Core;

  document.addEventListener('keydown', function(e) {
    if (!e.shiftKey) return;

    // Define the movement step in page coordinates (adjust as needed)
    const step = 5;

    // Get selected annotations
    const selectedAnnots = annotationManager.getSelectedAnnotations();
    if (selectedAnnots.length === 0) return;

    let dx = 0, dy = 0;
    switch(e.key) {
      case 'ArrowUp':
        dy = -step;
        break;
      case 'ArrowDown':
        dy = step;
        break;
      case 'ArrowLeft':
        dx = -step;
        break;
      case 'ArrowRight':
        dx = step;
        break;
      default:
        return;
    }

    selectedAnnots.forEach(annot => {
      annot.X += dx;
      annot.Y += dy;
      annotationManager.redrawAnnotation(annot);
    });

    // Prevent default scrolling behavior
    e.preventDefault();
  });

This code snippet allows the user to move selected annotations using SHIFT + Arrow.

I went with SHIFT + direction because the arrow up & down are already used to move on the page.

Let me know if this works for you.

Best Regards,
Mickaël.