[Webkit-unassigned] [Bug 221587] New: AX: VO reads out empty group for decorative img inside a dialog

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=221587

            Bug ID: 221587
           Summary: AX: VO reads out empty group for decorative img inside
                    a dialog
           Product: WebKit
           Version: Safari 14
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: diane.ko at airbnb.com
                CC: webkit-bug-importer at group.apple.com

Created attachment 419659

  --> https://bugs.webkit.org/attachment.cgi?id=419659&action=review

Screencast of using VO on dialog containers with decorative images

When using an image inside of an img tag that's decorative (via alt="") inside of a container that's marked as a dialog (via role="dialog"), VoiceOver will read out "group" for the empty image.

Steps to reproduce:
1. Go to a page with a dialog that has a decorative image (ex: https://cdpn.io/backwardok/debug/JjbKpVb)
2. Navigate into the dialog and then navigate through the dialog contents.

What's expected:
The decorative image is passed over and/or navigation does not continue to the decorative image

What happens:
The decorative image exists in the navigation flow as "group"

Things to note:
In the codepen I created (https://codepen.io/backwardok/pen/JjbKpVb), I have a few test cases that I added:
1. A decorative svg image not inside of a dialog container
2. A decorative svg image as the last item inside of a dialog container
3. A decorative svg image as the 2nd to last item inside of a dialog container
4. A decorative jpg image as the 2nd to last item inside of a dialog container

I had tested mostly with svgs since it seemed at first that it might be related to being an svg, but I was surprised that the same behavior happened with a jpg image as well. Adding aria-hidden to the img node doesn't affect whether VO will read out the image as an empty group (it will still do so). 

This can result in confusing behavior for screen reader users when they come across an unnamed group element that isn't meant to be something that they should have to interact with in any way.

I also attached a screencast of me going through the codepen example I shared with VO in Safari. Note that in the 2nd example I go through, I ended up hitting the group twice because I was at the end of the dialog and ended up on the image twice when I forgot I'd need to get out of the dialog container to move forward, not because it existed twice.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210209/411ac02d/attachment-0001.htm>