798 lines
38 KiB
HTML
798 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ANDI - Accessible Web Development Guide</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta charset="UTF-8">
|
|
<!-- Google Tag Manager -->
|
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','GTM-5GQXH7Q');</script>
|
|
<!-- End Google Tag Manager -->
|
|
<!-- Google Analytics -->
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-25977386-2', {
|
|
cookieFlags: 'max-age=7200;secure;samesite=none'
|
|
});
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
<!-- End Google Analytics -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="DCTERMS:coderOffice" content="DCS" />
|
|
<meta name="DCTERMS:coder" content="SSA" />
|
|
<meta name="DCTERMS:contentOffice" content="DCS" />
|
|
<meta name="DCTERMS:contentOwner" content="SSA" />
|
|
<meta name="description" content="ANDI 508 accessibility testing tool Help Developer Guide" />
|
|
|
|
<link href="help.css" rel="stylesheet" media="all" />
|
|
<link href="print.css" rel="stylesheet" media="print" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script><script src="help.js"></script>
|
|
|
|
|
|
<script>(window.BOOMR_mq=window.BOOMR_mq||[]).push(["addVar",{"rua.upush":"false","rua.cpush":"false","rua.upre":"false","rua.cpre":"false","rua.uprl":"false","rua.cprl":"false","rua.cprf":"false","rua.trans":"","rua.cook":"false","rua.ims":"false","rua.ufprl":"false","rua.cfprl":"false","rua.isuxp":"false","rua.texp":"norulematch","rua.ceh":"false","rua.ueh":"false","rua.ieh.st":"0"}]);</script>
|
|
<script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="LERZW-HECFS-R8H4E-23UQ7-ERMQB",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"LERZW-HECFS-R8H4E-23UQ7-ERMQB";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="vht6pfix22vgcz6v4req-f-890320f0c-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1204614","ak.ai":parseInt("728289",10),"ak.ol":"0","ak.cr":3,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"e82223","ak.r":35636,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.bpcip":"169.231.231.0","ak.cport":36836,"ak.gh":"23.214.170.79","ak.quicv":"","ak.tlsv":"tls1.3","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"bbr","ak.t":"1742070857","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==m0G2cfrnoo2tSpFMCoksFc0508mJv/Sma89KMMd5iqANK56qgD2+MQUJtUddI7f9mUTai/w7WkESRi2pfM1m4yhazmEP8GvUe4Fi5V/m2a4lL9VgdReJCyZSBdSRnI7yJLgcgYFZtkoJssmh3TI5K+eWzo+EM2DHIg4S7Sfsh6Vx4zilduATjraXqZh48f8ciHkdkUmd5Qym6WgEX9nAFNYWzaf8ZSahJPc3VZWmbPflVWtLZR5ySyBMXoVA5LQTTYZNStjNNh5GHgBP+0K8oinIUiPf6hv4eNMivKfJuT54I5jroeq4pn1mz8oWi1fuOu8HGoHB+qfib6KN1NbYnucg8u8LZxbYdzeNX3q80nvIH+hnkz8Jk17o2rqP5T4JGNWh7IhXBqf5JwUO9cRPf8YzaZerdCreW0zwxu6wy9k=","ak.pv":"98","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head>
|
|
<body>
|
|
<a href="#skipnav" class="skipnav">Skip to Content</a>
|
|
<header>
|
|
<h1 class="toolName">ANDI</h1>
|
|
<nav id='navHeader'>
|
|
<a href="howtouse.html" class="howtouse">Tutorial</a>
|
|
<a href="modules.html" class="modules">Modules</a>
|
|
<a href="alerts.html" class="alerts">Alerts</a>
|
|
<a href="faq.html" class="faq">FAQ</a>
|
|
<a href="developerguide.html" class="developerguide">Developer Tips</a>
|
|
<a href="install.html" class="install">Install</a>
|
|
</nav>
|
|
<div id='pageTitle' class="developerguide">
|
|
<h2>Developer Tips</h2>
|
|
<p id='pageSummary'>
|
|
This page provides some helpful information about developing accessible websites and web applications.
|
|
</p>
|
|
<button id='tableOfContentsControl' aria-controls='tableOfContents'>View Table of Contents</button>
|
|
</div>
|
|
</header>
|
|
<main class="developerguide" id="skipnav" tabindex="-1" aria-label="main content">
|
|
<nav id='tableOfContents'>
|
|
<h3><a href="#NamingAndDescribing">Naming and Describing</a></h3>
|
|
<ul>
|
|
<li><a href="#Namers">Accessible Name Definition</a></li>
|
|
<li><a href="#Describers">Accessible Description Definition</a></li>
|
|
</ul>
|
|
<h3>Namers</h3>
|
|
<ul>
|
|
<li><a href="#aria-labelledby">[aria-labelledby]</a></li>
|
|
<li><a href="#aria-label">[aria-label]</a></li>
|
|
<li><a href="#alt">[alt]</a></li>
|
|
<li><a href="#label"><label></a></li>
|
|
<li><a href="#value">[value]</a></li>
|
|
<li><a href="#caption"><caption></a></li>
|
|
<li><a href="#innerHTML">innerHTML</a></li>
|
|
</ul>
|
|
<h3>Describers</h3>
|
|
<ul>
|
|
<li><a href="#aria-describedby">[aria-describedby]</a></li>
|
|
<li><a href="#aria-description">[aria-description]</a></li>
|
|
<li><a href="#title">[title]</a></li>
|
|
</ul>
|
|
<h3>States and Properties</h3>
|
|
<ul>
|
|
<li><a href="#tabindex">[tabindex]</a></li>
|
|
<li><a href="#accesskey">[accesskey]</a></li>
|
|
</ul>
|
|
<h3>Tables</h3>
|
|
<ul>
|
|
<li><a href="#dataTableCellAssociations">Table Cell to Header Associations</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-NamingAndDescribing" id='NamingAndDescribing' >
|
|
<h2 id="lby-NamingAndDescribing">Naming and Describing</h2>
|
|
<div class='details'>
|
|
<p>
|
|
All interactive elements on a web page must have explicitly defined text to distinguish
|
|
the element, or else the screen reader software
|
|
will not know what to speak,
|
|
thus the element will not be accessible
|
|
to screen reader users. This distinguishing text is called the <b>accessible name</b> of the element.
|
|
</p>
|
|
<p>
|
|
In addition to the required accessible name, interactive elements may be given
|
|
text that further describes the element or provides more information.
|
|
This supporting description text is called the <b>accessible description</b> of the element.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!--==========================-->
|
|
<hr />
|
|
<section tabindex="-1" aria-labelledby="lby-Namers" id='Namers' >
|
|
<details>
|
|
<summary id="lby-Namers">Accessible Name</summary>
|
|
<div class='details'>
|
|
<p>
|
|
Web authors must take additional steps to ensure that the accessible name of each
|
|
interactive element is properly identified.
|
|
There are several different components that can be used to provide a required accessible name.
|
|
</p>
|
|
<p>These components will provide an accessible name:</p>
|
|
<div class="example">
|
|
<ul>
|
|
<li><code>aria-labelledby</code></li>
|
|
<li><code>aria-label</code></li>
|
|
<li><code>label</code> (form elements)</li>
|
|
<li><code>alt</code> (images)</li>
|
|
<li><code>value</code> (input buttons)</li>
|
|
<li><code>figcaption</code> (figure)</li>
|
|
<li><code>caption</code> (table)</li>
|
|
<li><code>innerHTML</code> (container elements)</li>
|
|
</ul>
|
|
</div>
|
|
<h4>Use Only One Namer</h4>
|
|
<p>
|
|
ANDI advocates a methodology of using only one Namer (accessible name component) per element
|
|
which will provide consistent screen reader output and minimize accessibility issues.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-Describers" id='Describers' >
|
|
<details>
|
|
<summary id="lby-Describers">Accessible Description</summary>
|
|
<div class='details'>
|
|
<p>
|
|
In addition to a required accessible name,
|
|
web authors may add additional support text to further describe interactive elements.
|
|
There are several components that can be used to provide an accessible description.
|
|
</p>
|
|
<p>These components provide additional information about an element (an accessible description).</p>
|
|
<div class="example">
|
|
<ul>
|
|
<li><code>aria-describedby</code></li>
|
|
<li><code>aria-description</code></li>
|
|
<li><code>title</code></li>
|
|
</ul>
|
|
</div>
|
|
<h4>Use Only One Describer</h4>
|
|
<p>
|
|
Following ANDI's methodology of using only one Describer (accessible describer component),
|
|
when a Namer is present, will provide consistent screen reader output and minimize accessibility issues.
|
|
</p>
|
|
<h4>Use a Describer together with a Namer</h4>
|
|
<p>
|
|
Describers are meant to be used along with a Namer, not by themselves.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-Grouping" id='Grouping' >
|
|
<details>
|
|
<summary id="lby-Grouping">Grouping</summary>
|
|
<div class='details'>
|
|
<p>
|
|
When form elements have a common label that groups them together visually,
|
|
screen reader users benefit when the elements are contained by a grouping element and the grouping element is given an accessible name.
|
|
</p>
|
|
<p>
|
|
Using native HTML, the <code>fieldset</code> tag functions as the container, and the <code>legend</code> names the group. <a href="#legend">More info about Fieldset/Legend here.</a>
|
|
</p>
|
|
<div class="example">
|
|
<code>
|
|
<fieldset><br />
|
|
<legend>Billing Address</legend><br />
|
|
<label> Street: <input> </label><br />
|
|
<label> State: <input> </label><br />
|
|
<label> Zip: <input> </label><br />
|
|
</fieldset><br />
|
|
</code>
|
|
</div>
|
|
<p>
|
|
Using ARIA, the container should have <code>role=group</code> and the <code>role=group</code> element should be given an accessible name using <code>aria-labelledby</code> or <code>aria-label</code>.
|
|
</p>
|
|
<div class="example">
|
|
<code>
|
|
<div role="group" aria-labelledby="id1"><br />
|
|
<strong id="id1">Billing Address</strong><br />
|
|
<label> Street: <input> </label><br />
|
|
<label> State: <input> </label><br />
|
|
<label> Zip: <input> </label><br />
|
|
</div><br />
|
|
</code>
|
|
</div>
|
|
<p>
|
|
For a screen reader user, a benefit of grouping is this: The first time the user focuses on an item in the group, the group name is announced once.
|
|
If the user navigates to other items within the group, the group name is not announced again. This reduces verbosity compared to if the group name was announced for
|
|
every element within the group.
|
|
</p>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-aria-labelledby" id='aria-labelledby' class="sub" >
|
|
<details>
|
|
<summary id="lby-aria-labelledby">[aria-labelledby]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>aria-labelledby</code>
|
|
references other elements to provide an accessible name.</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
The <code>aria-labelledby</code> attribute establishes an association between
|
|
an element and the text that provides the accessible name.
|
|
It indicates the ids of other elements
|
|
which contain the naming text. The benefit of the <code>aria-labelledby</code>
|
|
attribute is that it can reference multiple elements in a specific order.
|
|
</p>
|
|
<p>
|
|
For example, consider this radio button which is labelled by an
|
|
<code><h1></code> heading and a <code><label></code> tag:<br />
|
|
<code>
|
|
<h1 id='id1'>Famous People</h1><br />
|
|
<label id='id2'> Andy Williams<br />
|
|
<input type='radio' aria-labelledby='id1 id2'/><br />
|
|
</label>
|
|
</code>
|
|
<br />
|
|
The accessible name for the radio button will be "Famous People Andy Williams".
|
|
In the example above, a space delimited list of ids was provided as the value of the <code>aria-labelledby</code>.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
Screen readers will speak the text contained within the elements referenced by the <code>aria-labelledby</code>.
|
|
</p>
|
|
<p>
|
|
The <code>aria-labelledby</code> attribute
|
|
is a powerful Namer since it can be used to reference several elements which contain text
|
|
that can contribute to an accessible name. Screen readers give it a high precedence over other Namers.
|
|
</p>
|
|
<h4>Improper Use</h4>
|
|
<p>
|
|
This attribute cannot take literal text; it expects an id or a space delimited list of ids only.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-aria-label" id='aria-label' class="sub" >
|
|
<details>
|
|
<summary id="lby-aria-label">[aria-label]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>aria-label</code> provides an accessible name.</p>
|
|
<h4>How To Use</h4>
|
|
<p>The value given to the <code>aria-label</code> attribute should contain the literal text that that will
|
|
explicitly name an element. The text will not appear on the screen.</p>
|
|
<div class="example">
|
|
Example:
|
|
<code><button aria-label='Close'>X</button></code>
|
|
</div>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>A screen reader will speak the literal text value of this attribute.
|
|
Screen readers give it a high precedence over other Namers.
|
|
</p>
|
|
<p>
|
|
For example, the screen reader output of this button will be the text in the <code>aria-label</code> not the innerHTML of the button:
|
|
<br />
|
|
<code>
|
|
<button aria-label='Andy Warhol's Can of Soup'><img src='soup_can.jpg' alt="" />soup</button><br />
|
|
</code>
|
|
</p>
|
|
<p>
|
|
This attribute provides additional details about an element to a person who is visually impaired.
|
|
When focus moves to the button, the screen reader would read "Andy Warhol's Can of Soup button".
|
|
In the example, the image and the innerHTML "soup" provides information about the button to a sighted user.
|
|
The text in the <code>aria-label</code> "Andy Warhol's Can of Soup" would not appear on screen,
|
|
but would be read by the screen reader.
|
|
</p>
|
|
<h4>Improper Use</h4>
|
|
<p>
|
|
It is advisable to not use <code>aria-label</code> together with <code>aria-labelledby</code> on the same element.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-alt" id='alt' class="sub" >
|
|
<details>
|
|
<summary id="lby-alt">[alt]</summary>
|
|
<div class='details'>
|
|
<p>The <code>alt</code> attribute is the HTML attribute used to specify alternative text (alt text)
|
|
that is to be displayed when the image to which it is applied cannot be rendered.
|
|
The <code>alt</code> attribute is a required attribute of the <code><img></code>, <code><area></code>, and <code><input[type=image]></code> tags.
|
|
When applied to images, the <code>alt</code> attribute provides an accessible name.
|
|
</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
The <code>alt</code> attribute should only be placed on <code><img></code>, <code><area></code>,
|
|
and <code><input[type=image]></code> tags.
|
|
The text of the <code>alt</code> should concisely describe the image.
|
|
If the image is purely decorative, does not require explanation, and does not gain focus,
|
|
then an empty string should be used for the value such as <code>alt=""</code>.
|
|
</p>
|
|
<div class="example">
|
|
Example:
|
|
<code><img src='logo.png' alt='social security administration' /></code>
|
|
</div>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
The <code>alt</code> attribute is used by screen readers to speak the content
|
|
of images to a person who cannot see the image because of a disablity.
|
|
If the <code>alt</code> has been intentionally set to empty string <code>alt=""</code>,
|
|
then the screen reader will ignore the image.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-label" id='label' class="sub" >
|
|
<details>
|
|
<summary id="lby-label"><label></summary>
|
|
<div class='details'>
|
|
<p>The <code><label></code> tag, when properly associated,
|
|
provides an accessible name for a form element.
|
|
In addition, clicking on a label that is properly associated will move focus to the form element with which it associates.
|
|
</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
Labels must have explicit associations with the form elements to which they refer.
|
|
<br />
|
|
There are two methods to form the association:
|
|
</p>
|
|
<h5>Label/For with Matching Id - explicit association</h5>
|
|
<div class="example">
|
|
Adding a <code>for</code> attribute to the label, which references the <code>id</code> of the form element.
|
|
Example:<br />
|
|
<code><label for='someId'> Enter Text: </label><br />
|
|
<input type='text' id='someId' /></code>
|
|
</div>
|
|
<h5>Nested Label (Label as a container) - implicit association</h5>
|
|
<div class="example">
|
|
Using the label as a container which contains the form element.
|
|
Example:<br />
|
|
<code><label> Enter Text: <br />
|
|
<input type='text' /><br />
|
|
</label></code>
|
|
</div>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
A screen reader will read the <code><label></code> if it is associated with a form element
|
|
(as long as the form element does not have an <code>aria-label</code> or an <code>aria-labelledby</code>).
|
|
</p>
|
|
<h4>Low Mobility Users</h4>
|
|
<p>
|
|
Clicking on a label that is associated with a form element will move focus to the form element (this is handled by default in the browser).
|
|
This functionality aids users with low mobility who have difficulties using a mouse by increasing the clickable area
|
|
of a form element. This is especially beneficial when a label is associated with radio buttons and checkboxes
|
|
which are relatively small click "targets".
|
|
If the label is not properly associated the size of the clickable area will not be automatically increased.
|
|
</p>
|
|
<h4>Improper Use</h4>
|
|
<p>
|
|
The following example is an improper use of the <code><label></code> tag.
|
|
The <code><label></code> tag does not make an association
|
|
to the form element.
|
|
</p>
|
|
<div class="example">
|
|
<code><label> Improper Use: </label><br />
|
|
<input type='text' /></code>
|
|
</div>
|
|
<p>
|
|
The example above will generate an accessibility defect.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-value" id='value' class="sub" >
|
|
<details>
|
|
<summary id="lby-value">[value]</summary>
|
|
<div class='details'>
|
|
<p>The <code>value</code> property
|
|
provides an accessible name for an <code><input></code> button.
|
|
The text of the <code>value</code> will also visually appear on the button.</p>
|
|
<h4>How To Use</h4>
|
|
<p>The text of the <code>value</code> attribute should contain the literal text that will
|
|
explicitly name an <code><input></code> button element:
|
|
<code><input type="submit"></code>,
|
|
<code><input type="button"></code>,
|
|
<code><input type="reset"></code>,
|
|
<code><input type="image"></code>.
|
|
</p>
|
|
<div class="example">
|
|
Example:
|
|
<code><input type='submit' value='button' /></code>
|
|
</div>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>For input buttons a screen reader will speak the literal text value of this attribute.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-caption" id='caption' class="sub" >
|
|
<details>
|
|
<summary id="lby-caption"><caption></summary>
|
|
<div class='details'>
|
|
<p>Introduced in HTML5,
|
|
the <code><caption></code> tag provides an accessible name for a <code><table></code>.
|
|
</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
The <code><caption></code> must be contained within a <code><table></code>
|
|
and there must not be more than one <code><caption></code> within.
|
|
The <code><caption></code> should be the first child in the <code><table></code>.
|
|
A <code><caption></code> is meant to be used on data tables, it is not needed (shouldn't be used) for layout tables.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
For a <code><table></code>, a screen reader will read the contents of the <code><caption></code>.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-innerHTML" id='innerHTML' class="sub" >
|
|
<details>
|
|
<summary id="lby-innerHTML">innerHTML</summary>
|
|
<div class='details'>
|
|
<p>The contents of an element: screen text and/or child nodes.</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
Adding screen text to an element is perhaps the best way to add an accessible name,
|
|
since every type of user will be able to read the exact same text.
|
|
For elements that cannot contain innerHTML such as
|
|
<code><img></code> or
|
|
<code><input></code>
|
|
additional components are needed to be accessible.
|
|
</p>
|
|
<p>
|
|
For basic HTML tags such as
|
|
<code><p></code>,
|
|
<code><div></code>,
|
|
<code><li></code>
|
|
It is perfectly reasonable to rely on the text within these basic elements to provide an accessible name.
|
|
If for some reason this text is not descriptive enough for users relying on screen readers, change the text!
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
A screen reader will read the contents of the element.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-aria-describedby" id='aria-describedby' class="sub" >
|
|
<details>
|
|
<summary id="lby-aria-describedby">[aria-describedby]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>aria-describedby</code> references other elements to provide an accessible description.</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
The <code>aria-describedby</code> attribute is used to indicate the IDs of other elements that describe this element.
|
|
It establishes an association between an element and the text that provides a description.
|
|
</p>
|
|
<p>
|
|
For example, consider this button which is described by some paragraph text:<br />
|
|
<code>
|
|
<button aria-describedby='pId'>Submit</button><br />
|
|
<p id='pId'>Clicking on this button will send an email to Andy Cooper</p>
|
|
</code>
|
|
<br />
|
|
The accessible name for this element will be "Submit Button"
|
|
and the accessible description will be "Clicking on this button will send an email to Andy Cooper".
|
|
</p>
|
|
<p>
|
|
This attribute is very similar to <code>aria-labelledby</code> which defines the essence of the element,
|
|
while <code>aria-describedby</code> provides a description or more information that the user might need
|
|
pertaining to the element.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
Screen readers will speak the <code>aria-describedby</code> at the end of its spoken phrase.
|
|
However, when multiple Describers are used on the same element (such as <code>title</code>),
|
|
one or the other might not be spoken and information could be lost.
|
|
Therefore, it is advisable to use only one Describer for an element.
|
|
</p>
|
|
<h4>Improper Use</h4>
|
|
<p>
|
|
This attribute cannot take literal text; it expects an id or a space delimited list of ids only.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-aria-description" id='aria-description' class="sub" >
|
|
<details>
|
|
<summary id="lby-aria-description">[aria-description]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>aria-description</code> uses literal text to provide an accessible description.</p>
|
|
<h4>How To Use</h4>
|
|
<p>The value given to the <code>aria-description</code> attribute should contain the literal text that will
|
|
explicitly describe an element. The text will not appear on the screen.</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
Screen readers will speak the <code>aria-description</code> at the end of its spoken phrase.
|
|
However, when multiple Describers are used on the same element (such as <code>aria-describedby</code> or <code>title</code>),
|
|
only one will be spoken and information could be lost.
|
|
Therefore, it is advisable to use only one Describer for an element.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-legend" id='legend' class="sub" >
|
|
<details>
|
|
<summary id="lby-legend"><legend></summary>
|
|
<div class='details'>
|
|
<p>Within a <code><fieldset></code>, the <code><legend></code> tag
|
|
associates a group of form elements.</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
The <code><legend></code> tag works best in this scenario:
|
|
</p>
|
|
<div class="example">
|
|
<ol>
|
|
<li>Within a <code><fieldset></code></li>
|
|
<li>The first child of the <code><fieldset></code></li>
|
|
<li>Naming a form element group</li>
|
|
<li>Each form element must have an associating <code><label></code> tag and be contained in the <code><fieldset></code></li>
|
|
<li>The <code><legend></code> text will be spoken before the <code><label></code> text.</li>
|
|
<li>Do not use with buttons (place buttons outside the <code><fieldset></code>)</li>
|
|
<li>Do not use other Accessibility Components including <code>title</code></li>
|
|
</ol>
|
|
</div>
|
|
<p>
|
|
Here is a code example of the proper usage of legend:
|
|
</p>
|
|
<div class="example">
|
|
<code>
|
|
<fieldset><br />
|
|
<legend>What Is Your Favorite Color?</legend><br />
|
|
<label>Red: <input type="radio" name="color" value="1" /></label><br />
|
|
<label>Yellow: <input type="radio" name="color" value="2" /></label><br />
|
|
<label>Blue: <input type="radio" name="color" value="3" /></label><br />
|
|
</fieldset><br />
|
|
<button>Submit</button><br />
|
|
</code>
|
|
</div>
|
|
<p>
|
|
When used this way, each <code><label></code> provides the distinctive name
|
|
for its associating form element,
|
|
and the <code><legend></code> names the group relationship of the
|
|
elements within the <code><fieldset></code>.
|
|
</p>
|
|
<h4>Improper Use</h4>
|
|
<p>
|
|
Combining <code><legend></code> with any other accessibility components and outside of
|
|
the recommended scenario described above will
|
|
cause screen reader inconsistencies or accessibility issues depending on the browser and screen reader version.
|
|
</p>
|
|
<h4>Legend Alternative</h4>
|
|
<p>
|
|
An alternative to <code><fieldset></code>/<code><legend></code> is <code>role=group</code>.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-title" id='title' class="sub" >
|
|
<details>
|
|
<summary id="lby-title">[title]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>title</code> can be placed on any HTML element.
|
|
It will also generate a "tooltip" when a mouse user hovers over the element.
|
|
</p>
|
|
<h4>How To Use</h4>
|
|
<p>The value given to the <code>title</code> attribute contains the literal text that that will
|
|
explicitly describe an element.
|
|
The length of the value is limited to 512 total characters in Internet Explorer
|
|
<a href="https://msdn.microsoft.com/en-us/library/ms534683(v=vs.85).aspx" target="_blank" aria-label='Source: IE limits the title to 512 character'>(source)</a>.
|
|
Depending on the browser, the tooltip generated by the title attribute may not be able to
|
|
be triggered (seen) without using a mouse.
|
|
Also, the <code>title</code> does not appear on touch screen devices (think mobile).
|
|
Therefore, <code>title</code> should not be the only means of conveying important information.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>A screen reader will speak the literal text value of this attribute.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-tabindex" id='tabindex' class="sub" >
|
|
<details>
|
|
<summary id="lby-tabindex">[tabindex]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>tabindex</code> provides a resting location for keyboard focus.</p>
|
|
<h4>How To Use</h4>
|
|
<p>The value given to the <code>tabindex</code> attribute should contain a numeric value.
|
|
The number specifies the tab order of an element (when the "tab" key is used for navigation).
|
|
</p>
|
|
<p>
|
|
The <code>tabindex</code> value does not have to be unique.
|
|
A <code>tabindex</code> value of zero (<code>tabindex="0"</code>) is the most common usage which
|
|
places it in the "normal" or literal sequence in which it exists in the DOM tree.
|
|
</p>
|
|
<p>
|
|
A <code>tabindex</code> value can be negative (<code>tabindex="-1"</code>) but this will remove the element from the
|
|
tab order, in which case, users will not be able to tab to the element. This technique is useful for sending focus to
|
|
an element programmatically where normal tab key navigation is not intended.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>A screen reader will not speak the tabindex.</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-accesskey" id='accesskey' class="sub" >
|
|
<details>
|
|
<summary id="lby-accesskey">[accesskey]</summary>
|
|
<div class='details'>
|
|
<p>The global attribute <code>accesskey</code>
|
|
provides the ability to hit a key combination and shift focus or "click" a button.
|
|
This is sometimes called a "hotkey" or "quick key".
|
|
</p>
|
|
<p>To activate an accesskey, different browsers use different key combinations:
|
|
Internet Explorer, Chrome, and Safari use the "alt" key.
|
|
Firefox uses "alt+shift" together.
|
|
</p>
|
|
<h4>How To Use</h4>
|
|
<p>
|
|
When adding an <code>accesskey</code> to an element, ensure that the element is focusable (natively or has a tabindex).
|
|
</p>
|
|
<p>Also ensure that the accesskey does not interfere with other accesskeys on the page.
|
|
As a best practice, accesskeys should be unique.
|
|
Accesskeys on buttons and links should be unique since the moment the accesskey is pressed, the button or link is selected.
|
|
Contrarily, some browsers allow duplicate accesskeys to be used to jump around to several focusable sections of a page.
|
|
However, as a best practice,
|
|
section jumping behavior based on repeated presses of one key command
|
|
should be implemented using javascript keypress event handling.
|
|
</p>
|
|
<p>
|
|
Most browsers use hotkeys to kick off browser menu functions, such as "File" or "Help". Care should be taken not
|
|
to override these keys. Modern browsers allow for this, but from an accessibility standpoint, it should be avoided
|
|
if possible.
|
|
</p>
|
|
<h4>Screen Reader Usage</h4>
|
|
<p>
|
|
A screen reader will announce the value of the accesskey when the element with the accesskey receives focus.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-dataTableCellAssociations" id='dataTableCellAssociations' >
|
|
<details>
|
|
<summary id="lby-dataTableCellAssociations">Table Cell to Header Associations</summary>
|
|
<div class='details'>
|
|
<p>
|
|
The cells of data tables must have additional markup to indicate the correct associations between table header cells
|
|
and table data cells. Simply declaring a cell a <th> does not always automatically imply the correct association.
|
|
Table cell associations can be programatically identifed by using one of two methods,
|
|
the <a href="developerguide.html#ScopeMethod">Scope Method</a> or
|
|
<a href="developerguide.html#HeadersIdMethod">Headers/id Method</a>.
|
|
The method chosen is often dictated by the design/structure of the table.
|
|
Moreover, only one association method should be used at a time per table for the sake of simplicity and maintainability.
|
|
</p>
|
|
<h4>Scope Method</h4>
|
|
<div class="example">To use the Scope Method, the <code>scope</code> attribute should be assigned to
|
|
each table header <code><th></code> that forms a column header or row header. Example:<br />
|
|
<code>
|
|
<table><br />
|
|
<caption>scope method</caption><br />
|
|
<tr><br />
|
|
<th <b>scope="col"</b>>col 1</th><br />
|
|
<th <b>scope="col"</b>>col 2</th><br />
|
|
<th <b>scope="col"</b>>col 3</th><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>scope="row"</b>>row 1</th><br />
|
|
<td>col 2</td><br />
|
|
<td>col 3</td><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>scope="row"</b>>row 2</th><br />
|
|
<td>cell</td><br />
|
|
<td>cell</td><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>scope="row"</b>>row 3</th><br />
|
|
<td>cell</td><br />
|
|
<td>cell</td><br />
|
|
</tr><br />
|
|
</table>
|
|
</code>
|
|
</div>
|
|
<h4>Headers/id Method</h4>
|
|
<div class="example">To use the Headers/id Method, each table header <code><th></code> should have a unique <code>id</code> attribute
|
|
and all cells which associated with that table header should have a <code>headers</code> attribute whose
|
|
value references the <code>id</code> of the table header cell. Example:<br />
|
|
<code>
|
|
<table><br />
|
|
<caption>headers method</caption><br />
|
|
<tr><br />
|
|
<th <b>id="col1"</b>>col 1</th><br />
|
|
<th <b>id="col2"</b>>col 2</th><br />
|
|
<th <b>id="col3"</b>>col 3</th><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>id="row1" headers="col1"</b>>row 1</th><br />
|
|
<td <b>headers="row1 col2"</b>>col 2</td><br />
|
|
<td <b>headers="row1 col3"</b>>col 3</td><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>id="row2"</b>>row 2</th><br />
|
|
<td <b>headers="row2 col2"</b>>cell</td><br />
|
|
<td <b>headers="row2 col3"</b>>cell</td><br />
|
|
</tr><br />
|
|
<tr><br />
|
|
<th <b>id="row3"</b>>row 3</th><br />
|
|
<td <b>headers="row3 col2"</b>>cell</td><br />
|
|
<td <b>headers="row3 col3"</b>>cell</td><br />
|
|
</tr><br />
|
|
</table>
|
|
</code>
|
|
</div>
|
|
<h4>Which Table Cell Association Method should be used?</h4>
|
|
<p>
|
|
Since only one method should be used at a time,
|
|
deciding between the Scope Method and the Headers/id Method method mostly depends on the design/structure of the table.
|
|
</p>
|
|
<p>
|
|
Most tables can use the Scope Method, even in some "complex" designs.
|
|
If text alignment, font size, color or other style adjustments
|
|
are being used to differentiate table headers within the same column or row,
|
|
the Headers/id Method should be used.
|
|
</p>
|
|
<p>
|
|
Many web authors would agree that the Scope Method is easier to maintain and reduces the
|
|
likelihood of any existing accessibility becoming "broken" with future table modifications.
|
|
However, the Headers/id Method offers an explicit way of making associations in a specific order for
|
|
highly complex tables. Remember that all users benefit from readability
|
|
when table design is simplified.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<footer>
|
|
<a href='#skipnav'>Back To Top</a>
|
|
<a href="/privacy/" class="privacy">Privacy</a>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|