[wp-trac] [WordPress Trac] #30155: Fix crop image functionality within edit flow

[WordPress Trac]

#30155: Fix crop image functionality within edit flow
-------------------------------------+-------------------------------------
 Reporter:  sonjanyc                 |       Owner:  adamsilverstein
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  Future Release
Component:  Media                    |     Version:  2.9
 Severity:  normal                   |  Resolution:
 Keywords:  needs-patch has-         |     Focuses:  ui, accessibility,
  screenshots wpcampus-report        |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  needs-patch => needs-patch has-screenshots wpcampus-report


Comment:

 This is also reported in the
 [https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
 WPCampus accessibility report issues on GitHub], see
 https://github.com/WordPress/gutenberg/issues/15341. Quoting:

  Image cropping requires mouse and keyboard

 -   **Severity:** Medium
 -   **Affected Populations:**
     -   Blind
     -   Low-Vision
     -   Motor Impaired
     -   Cognitively Impaired
 -   **Platform(s):**
     -   All / Universal
 -   **Components affected:**
     -   Edit Media


 #### Issue description


 On the Edit Media page, the functionality to crop images relies on a
 combination of mouse and keyboard interaction.

 Although touch can be used to create an initial selection, the handles
 to adjust the size are only available to mouse users. The instructions
 in the cropped section also mention that the Shift key can be used to
 maintain aspect ratio while cropping, however this assumes that users
 can manipulate both mouse and keyboard at the same time. (And while
 testing, this functionality did not appear to work anyway; aspect ratio
 was only maintained after explicitly setting a ratio in the text
 inputs.)

 Users with disabilities may not be able to use a mouse, or may not be
 able to use a mouse and keyboard at the same time. Making tasks such as
 this input-agnostic will allow users more freedom and ability to perform
 the task.




 #### Remediation Guidance


 Firstly, it would be beneficial to low-vision users and users with
 cognitive disabilities if the crop/aspect ratio and selection inputs
 were closers to each other (both in layout, and in source order). It
 would then be easier for such users to move between sections and adjust
 the input values after making an initial imperfect selection. It would
 also be more logical to place these fields after the image editing area,
 rather than before it.

 The cropping feature should function for any input mode, i.e. it should
 work from only the keyboard, only the mouse, only touch, or any
 combination of those.

 For combined functions such as maintaining an aspect ratio while
 resizing the crop region, have a separate checkbox which users can
 select to maintain (or ignore) aspect ratio. The current Shift key
 functionality can be retained, but only as a shortcut for users who can
 use mouse and keyboard at the same time, it should not be the only way
 of doing this.




 #### Relevant standards

 -   [https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable
 2.1.1 Keyboard (Level A)]

 **Note:** This issue may be a duplicate with other existing accessibility-
 related bugs in this project. This issue comes from the Gutenberg
 accessibility audit, performed by [Tenon](https://www.tenon.io) and funded
 by [WP Campus](https://wpcampus.org/). This issue is GUT-88 in Tenon's
 report

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/30155#comment:38>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform