New issue
Advanced search Search tips

Issue 708192 link

Starred by 4 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Empty-value 'ALT=""' attribute in source are rendered as no-value 'ALT' attributes in developer tools element inspector

Reported by wahar...@gmail.com, Apr 4 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce the problem:
1. Create page markup with an image having null ALT text ('ALT=""'), as described in WCAG 2.0 technique H67: https://www.w3.org/TR/WCAG20-TECHS/H67.html
2. Compare the source HTML to the rendered page HTML as seen through the developer tools "Inspect" feature
3. Source HTML attribute will be: 'ALT=""'
4. Rendered HTML attribute will be 'ALT' (no attribute value)

A reproduction page with some longer explanations is available via https://rawgit.com/waharnum/chromiumAltReplication/master/index.html

What is the expected behavior?
Given source HTML '<img src="sunCat.jpg" alt="" />', the rendered HTML when inspecting via the dev tools should be '<img src="sunCat.jpg" alt="" />'

What went wrong?
Given source HTML '<img src="sunCat.jpg" alt="" />', the rendered HTML when inspecting via the dev tools is '<img src="sunCat.jpg" alt />'.

Did this work before? Yes Unsure, but appears to be a recently introduced issue around 55/56

Chrome version: 57.0.2987.133  Channel: stable
OS Version: OS X 10.12.3
Flash Version: 

1) This issue was originally surfaced by a colleague who works as a web accessibility audit specialist, and uses the development tools as part of her auditing workflow. She noticed many rendered pages had begun to have an incorrect no-value use of the ALT attribute that was not matched by the original page markup.

2) When using VoiceOver with Chrome on OS X, VoiceOver treats images as though they have no ALT attribute when they in fact have the WCAG-advised null ALT text.

3) This issue is also present in Safari, so may originate in some shared code from Webkit (pure speculation). It doesn't exhibit the same issue with VoiceOver in Safari, presumably because of different approaches between Chrome and Safari to the accessibility APIs on OS X.

4) While I'm filing this is a Developer Tools issue because that's how it originally surfaced for us, I believe it is a larger issue with Chrome's interpretation and rendering of HTML source code with regard to ALT attributes of IMG tags. As far as I can tell, it is incorrect to render an ALT attribute as though it is a binary attribute like CHECKED - it must have a value, even if the value is blank.
 

Comment 1 by wahar...@gmail.com, Apr 4 2017

The issue described at https://bugs.chromium.org/p/chromium/issues/detail?id=701747 may be connected to this issue.
Status: WontFix (was: Unconfirmed)
This is something that was deliberate.

We chose to hide empty strings by default because empty strings is often the "i-have-no-data" value for (X)HTML attributes. So, if the user set an attribute to empty string we show it as not having a value to save real estate on the screen.

Thanks for the bug though, we really do appreciate them!

Comment 3 by wahar...@gmail.com, Apr 5 2017

Thank you for the response. This clarifies that what I thought were connected issues (the VoiceOver failure + the empty-value ALT attributes in the Inspector) are probably separate. I'll file a separate accessibility bug related to the behaviour we're seeing with VoiceOver on Mac behaving as though images with empty-value ALT attributes do not have an ALT attributes, which seems to have started around January of this year.

You mention that you hide empty strings of attributes "by default" - is there a way to enable the full display of these in the Inspector, in order to be able to distinguish attributes with no value from attributes with empty string values? 

The main use case for this that springs to mind is the ALT attribute case mentioned above - it can be important when debugging accessibility issues around images to be able to distinguish between a no-value ALT attribute (not a valid usage) and empty-string value ALT attribute (valid usage and recommended WCAG 2.0 usage).

Comment 4 Deleted

This is bad for accessibility because presentational images will have their filenames read by the screen reader.

Comment 6 Deleted

I opened an issue for the accessibility impact of this: https://bugs.chromium.org/p/chromium/issues/detail?id=710537
Project Member

Comment 8 by bugdroid1@chromium.org, May 3 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96

commit 7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96
Author: aleventhal <aleventhal@chromium.org>
Date: Wed May 03 18:46:45 2017

Handle <img alt> and <img alt=""> as purposefully empty alt.

BUG= 701747 , 708192 , 710537 

Review-Url: https://codereview.chromium.org/2833843005
Cr-Commit-Position: refs/heads/master@{#469050}

[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/chrome/common/extensions/api/automation.idl
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/accessibility_tree_formatter_auralinux.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/accessibility_tree_formatter_win.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility.h
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility_android.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility_auralinux.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility_cocoa.mm
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/browser_accessibility_win.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/browser/accessibility/dump_accessibility_tree_browsertest.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/renderer/accessibility/blink_ax_enum_conversion.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/renderer/accessibility/blink_ax_tree_source.cc
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/shell/test_runner/web_ax_object_proxy.cc
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-empty-alt-expected-android.txt
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-empty-alt-expected-blink.txt
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-empty-alt-expected-mac.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-empty-alt-expected-win.txt
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-empty-alt.html
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-expected-android.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-expected-blink.txt
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-expected-mac.txt
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-expected-win.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-link-empty-alt-expected-android.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-link-empty-alt-expected-blink.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-link-empty-alt-expected-mac.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-link-empty-alt-expected-win.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/img-link-empty-alt.html
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/picture-expected-android.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/picture-expected-mac.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/picture-expected-win.txt
[add] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/content/test/data/accessibility/html/picture.html
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/third_party/WebKit/Source/modules/accessibility/AXNodeObject.cpp
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/third_party/WebKit/Source/modules/accessibility/AXObject.h
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/third_party/WebKit/Source/modules/accessibility/InspectorTypeBuilderHelper.cpp
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/third_party/WebKit/Source/web/AssertMatchingEnums.cpp
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/third_party/WebKit/public/web/WebAXEnums.h
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/ui/accessibility/ax_enums.idl
[modify] https://crrev.com/7ae4d36b7f3b88d7998cc86c2fc6a7245ccdba96/ui/accessibility/platform/ax_platform_node_win.cc

Sign in to add a comment