img-fallsback-to-title.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body id="body">

    <img id="img1" title="test1" height="100" width="100">
    <img id="img2" alt="alt" title="test2" height="100" width="100">
    <div id="img3" role="img" title="test3" width="100" height="100">test</div>
    <div id="img4" role="img" alt="alt" title="test4" width="100" height="100">test</div>

<p id="description"></p>
<div id="console"></div>

<script>

    description("This tests that images will fallback to using the title attribute if no other descriptive text is present.");

    if (window.accessibilityController) {

        // First image should have a description of "test1" because there is no alt tag (it should use the title).
        // The title should NOT be in the description.
        var image1 = accessibilityController.accessibleElementById("img1");
        debug("Image1 name: " + image1.name);
        debug("Image1 description: " + image1.description + "<br>");

        // Second image should use the alt tag instead of the title.
        // The description should reflect what's in the title.
        var image2 = accessibilityController.accessibleElementById("img2");
        debug("Image2 name: " + image2.name);
        debug("Image2 description: " + image2.description + "<br>");

        // Now do the same checks for ARIA type images.
        var image3 = accessibilityController.accessibleElementById("img3");
        debug("Image3 name: " + image3.name);
        debug("Image3 description: " + image3.description + "<br>");

        // Now do the same checks for ARIA type images.
        var image4 = accessibilityController.accessibleElementById("img4");
        debug("Image4 name: " + image4.name);
        debug("Image4 description: " + image4.description + "<br>");
    }

</script>

</body>
</html>
chromium/third_party/blink/web_tests/accessibility/img-fallsback-to-title.html
