CODEWITHSUNDEEP
htmlwai-aria
Neithrik
Neithrik

Reputation: 2078

Trigger screen-reader when button clicked

I have a button that when clicked removes an image from the screen. I would like to have screen reader announce: "image removed" when this happens. What is the easiest way to this using ARIA?

Thank you!

Upvotes: 2

Views: 5340

Answers (1)

Robert Paulsen
Robert Paulsen

Reputation: 5151

In my head I'm imagining you have a grid of 3 images that the user has uploaded. Each of these images most likely sit in DIV. The user then has the ability to click an "delete" button/link that removes the image.

Assuming that's the case, my suggestion is to replace the deleted image with a new element that has role="alert" and some form of "This image was deleted" text. This will allow visual users to see the image was deleted and give your screen reader something to read back.

The following example will say "The image was deleted" when clicking the 'delete' link.

NOTE: With NVDA, this doesn't work too well in IE because NVDA/IE seem to ignore role=alert. 

    <!DOCTYPE html>
    <html>

        <script language="javascript">

            function deleteImage(img) {
              var theImage = document.getElementById(img);
              var theDiv = document.createElement("div");
              var theText = document.createTextNode("The Image was deleted.");
              theDiv.appendChild(theText);
              theDiv.setAttribute("role", "alert");
              theImage.parentNode.replaceChild(theDiv, theImage);
              return false;
            }

        </script>

        <body>
            <form>
                    <div id="image1"><img id="image1" src="" alt="image 1"/><a href="javascript:void(0);" onclick="return deleteImage('image1');">Delete</a></div>
                    <div id="image2"><img id="image2" src="" alt="image 2"/><a href="javascript:void(0);" onclick="return deleteImage('image2');">Delete</a></div>
                    <div id="image3"><img id="image3" src="" alt="image 3"/><a href="javascript:void(0);" onclick="return deleteImage('image3');">Delete</a></div>
            </form>
        </body>
    </html>

Upvotes: 1

Related Questions