Add ARIA support (accessibility fix) #120

Open
wants to merge 3 commits into from

1 participant

@cheshrkat

Currently tooltips aren't vocalised by screen readers as they aren't associated in any way.

Added an option aria:true (default false) which...

  • sets tooltip role to tooltip
  • adds a generated ID to the tooltips
  • uses that ID to set aria-describedby

Dependency/assumption: the author must have set role application or document on a parent element for ARIA to work but that's beyond the scope that Tipsy can assert ARIA attributes. It seems appropriate to leave that to the author; noted the dependency in the docs.

Tested using Firefox 15 and NVDA.

Couldn't get the docs to build on my machine so I hope the formatting is ok.

Test file (drop in parent dir of tipsy clone):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Page Title</title>
    <style>
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="tipsy/src/javascripts/jquery.tipsy.js"></script>

    <link rel="stylesheet" type="text/css" href="tipsy/src/stylesheets/tipsy.css">
    <style type="text/css">
    body { padding: 2em; font-size: 14px; }
    a:after {
        content: " (aria-describedby:"attr(aria-describedby)")";
        color: black;
        speak: none;
    }
    .tipsy:after {
        content: "(role:"attr(role)") id: "attr(id);
        font-size: 14px;
        speak: none;
    }
    p { margin: 0 0 50px 0; }
    </style>

</head>
<body role="application">

<p>NB: role application or document must be set on parent for screen readers to vocalise this.</p>

<p><a class="ariatest" id="simple-tooltip" href="#" title="trigger describedby should match this id and you should hear this text in screen readers">tooltip</a></p>
<p><a class="ariatest" id="simple-tooltip2" href="#" title="trigger describedby should match this id and you should hear this text in screen readers">tooltip</a></p>
<p><a class="ariatest" id="simple-tooltip3" href="#" title="trigger describedby should match this id and you should hear this text in screen readers">tooltip</a></p>

<p><a class="ariafalse" id="simple-tooltip3" href="#" title="trigger describedby should be null and you will not hear this text in screen readers">tooltip aria false</a></p>


<script>
$(document).ready( function() {
    // needs a both option
    $(".ariatest").tipsy({trigger: "focus", aria: true});
    $(".ariatest").tipsy({trigger: "hover", aria: true});

    $(".ariafalse").tipsy({trigger: "focus", aria: false});
    $(".ariafalse").tipsy({trigger: "hover", aria: false});
});
</script>

</body>
</html>
@cheshrkat

Test page (place in parent of tipsy clone):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Page Title</title>
    <style>
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="tipsy/src/javascripts/jquery.tipsy.js"></script>

    <link rel="stylesheet" type="text/css" href="tipsy/src/stylesheets/tipsy.css">
    <style type="text/css">
    body { padding: 2em; text-align: center; font-size: 14px; }
    #simple-tooltip:after {
        content: " (aria-describedby:"attr(aria-describedby)")";
        color: black;
    }
    .tipsy:after {
        content: "(role:"attr(role)") id: "attr(id);
        font-size: 14px;
    }
    </style>

</head>
<body>


<p><a id="simple-tooltip" href="#" title="trigger describedby should match this id">tooltip</a></p>


<script>
$(document).ready( function() {
    $("#simple-tooltip").tipsy();
});
</script>

</body>
</html>
Ben Buchanan added some commits Sep 24, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment