Skip to content

Commit

Permalink
[A11y] Use title value when the input type image with empty alt and
Browse files Browse the repository at this point in the history
non-empty title

At the discussion[1], in case of the `img` element, it is written to use
the alt even if it is an empty string explicitly. But in case of alt of
input type=image, there is no explicit description of empty value. So
like aria-label and aria-labelledby, it was understood that if it has
an empty value, it allows a meaningful value in the next step to be used.

Therefore, the `title` value has been changed to be used as accessible
name, according to the accessible name computation algorithm[2], when
the `alt` attribute does not provide a meaningful value.

[1]: w3c/html-aam#414
[2]: https://www.w3.org/TR/html-aam-1.0/#img-element-accessible-name-computation

Signed-off-by: Hunseop Jeong <[email protected]>
Bug: 1342873
Change-Id: Ifc7dfcd22897f0a59943c2330b5808afb494f889
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4700003
Reviewed-by: Aaron Leventhal <[email protected]>
Commit-Queue: Aaron Leventhal <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1177870}
  • Loading branch information
hs85jeong authored and Chromium LUCI CQ committed Aug 1, 2023
1 parent 04e00a3 commit 576e51e
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -5493,7 +5493,7 @@ String AXNodeObject::NativeTextAlternative(
name_sources->push_back(NameSource(*found_text_alternative, kAltAttr));
name_sources->back().type = name_from;
}
if (!alt.IsNull()) {
if (!alt.empty() && !alt.IsNull()) {
text_alternative = alt;
if (name_sources) {
NameSource& source = name_sources->back();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -221,3 +221,15 @@
assert_equals(axImageInput5.nameFrom, "title");
}, "Image input with title only");
</script>

<div class="container">
<input id="image-input6" type="image" src="resources/cake.png" alt="" title="image-input-title6">
</div>

<script>
test(function(t) {
var axImageInput6 = accessibilityController.accessibleElementById("image-input6");
assert_equals(axImageInput6.name, "image-input-title6");
assert_equals(axImageInput6.nameFrom, "title");
}, "Image input with empty alt and title");
</script>

0 comments on commit 576e51e

Please sign in to comment.