HTML Forms

Forms are the primary means by which users interact with Web applications from simple searches to requests for information, goods and services. Therefore, forms should be accessible to users with diverse skills and abilities.

Best Practices

Labeling Form Elements
Labeling Sets of Form Elements
Required Fields
Context Dependent Controls

Labeling Form Elements

Placing a label near its corresponding form element (proximity) does not ensure that screen readers will read the correct label or any label at all. Failure to programmatically associate a label with a form element also denies users with mobility impairments the ability to select small form elements, such as checkboxes and radio buttons, by clicking the corresponding label — HTML <label for> only.

HTML
ARIA

HTML

Text Entry Field

Example

Name:

Code

<label for="fullNameHtml">Name:</label> <input type="text" id="fullNameHtml" />

Accessibility Details

Include an id attribute for each <input type="text"> or <textarea> element.
Wrap each field label in a <label for> tag that references the id for the text entry element.

Spoken by Screen Reader

"Name: edit."

Radio Button

Example

Code

<ul class="noBullets" role="presentation">

<li><input type="radio" id="yes" name="radioButtons" /> <label for="yes">;Yes</label></li>

<li><input type="radio" id="no" name="radioButtons" /> <label for="no">No</label></li>

</ul>

Accessibility Details

Include an id attribute for each <input type="radio"> element.
Wrap each field label in a <label for> tag that references the id for the radio button element.

Spoken by Screen Reader

"Yes radio button checked."
"No radio button checked."

Checkbox

Example

I have read and agree to the terms and conditions.

Code

<input type="checkbox" id="iAgree"> <label for="iAgree">I have read and agree to the terms and conditions.</label>

Accessibility Detail

Include an id attribute for each <input type="checkbox"> element.
Wrap each field label in a <label for> tag that references the id for the checkbox element.

Spoken by Screen Reader

"I have read and agree to the terms and conditions. Checkbox not checked."

Dropdown List (combobox)

Example

These HTML and ARIA accessibility examples are helpful and easy to follow.

Code

<label for="q1">These HTML and ARIA accessibility examples are helpful and easy to follow.</label>

<select   id="q1" size=1>

<option value="2">Strongly Agree</option>

<option value="1">Agree</option>

<option value="0" selected>No Opinion</option>

<option value="-1">Disagree</option>

<option value="-2">Strongly Disagree</option>

</select>

Accessibility Details

Include an id attribute for each <select> element.
Wrap each field label in a <label for> tag that references the id for the dropdown element.

Spoken by Screen Reader

"These HTML and ARIA accessibility examples are helpful and easy to follow. Combobox No Opinion."

ARIA

Text Entry Field

Example

Name:

Code

<span id="fullNameAria">Name:</span> <input type="text" id="nameFld" aria-labelledby="fullNameAria" />

Accessibility Details

Include an id attribute for each element (e.g., p, span, div) containing a field label.
Include an "aria-labelledby" attribute in each <input type="text"> or <textarea> element that references the id for the field label container.

Spoken by Screen Reader

"Name: edit."

Radio Button

Example

Code

<ul class="noBullets" role="presentation">

<li><input type="radio" id="radioButtons2" aria-labelledby="yes2" aria-hidden="true" />
<span id="yes2">Yes</span></li>

<li><input type="radio" id="radioButtons2" aria-labelledby="no2" aria-hidden="true" /><span id="no2">No</span></li>

</ul>

Accessibility Details

Include an id attribute for each element (e.g., p, span, div) containing a field label.
Include the aria-hidden="true" attribute for each element containing the field label — prevents the field label from being read twice (once for the control and once for the on-screen label).
Include an "aria-labelledby" attribute in each <input type="radio"> element that references the id for the field label container.

Spoken by Screen Reader

"Yes radio button checked."
"No radio button checked."

Checkbox

Example

I have read and agree to the terms and conditions.

Code

<input type="checkbox" id="agree2" aria-labelledby="iAgree2"> <span id="iAgree">I have read and agree to the terms and conditions.</span>

Accessibility Detail

Include an id attribute for each element (e.g., p, span, div) containing a field label.
Include an "aria-labelledby" attribute in each <input type="checkbox"> element that references the id for the field label container.

Spoken by Screen Reader

"I have read and agree to the terms and conditions. Checkbox not checked."

Dropdown List (combobox)

Example

These HTML and ARIA accessibility examples are helpful and easy to follow.

Code

<span id="q2">These HTML and ARIA accessibility examples are helpful and easy to follow.</span>

<select aria-labelledby="q2" size=1>

<option value="2">Strongly Agree</option>

<option value="1">Agree</option>

<option value="0" selected>No Opinion</option>

<option value="-1">Disagree</option>

<option value="-2">Strongly Disagree</option>

</select>

Accessibility Details

Include an id attribute for each element (e.g., p, span, div) containing a field label.
Include an "aria-labelledby" attribute in each <select> element that references the id for the field label container.

Spoken by Screen Reader

"These HTML and ARIA accessibility examples are helpful and easy to follow. Combobox No Opinion."

Labeling Sets of Form Elements

Programmatically group related form elements and provide an associated label for the group. Doing so will make the purpose/function of the element clear to screen reader users.

Programmatically associate a label with a set of form elements, such as radio buttons and checkboxes, to which individual labels have been associated using either the <label for> tag or aria-labelledby atribute.
Determine functional differences between groups of identicle or nearly identicle form elements.
- Name — Shipping Name | Billing Name
- Address — Home Address | Campus Address
- Yes | No — Are you a student? Yes | Are you a student? No
- State MN — Shipping State MN | Billing State MN

There are two techniques for programmatically associating labels with sets of related form elements.

HTML
- fieldset
- legend
ARIA
- role="group"
- aria-labelledby

HTML
ARIA

HTML

Labels Programmatically Associated with Sets of Form Elements

Example

Happenings Newsletter

Code

<h5>Happenings Newsletter</h5>


<form action="index.html" method="post" name="htmlFrm">

<fieldset>

<legend>Sign-up</legend>
<div class="sampleFld">

<div class="fldLabel">

<label for="recipientName">Name:</label>

</div>

<div class="fldElement">

<input type="text" id="recipientName" />

</div>

</div>

<div class="sampleFld">

<div class="fldLabel">

<label for="recipientEml">Email:</label>

</div>

<div class="fldElement">

<input type="text" id="recipientEml" />

</div>

</div>

</fieldset>

<fieldset>

<legend>Newsletter Preferences</legend>

<div class="sampleFld">

<div class="fldLabel">

<label for="freqSelection">Frequency:</label>

</div>

<div class="fldElement">

<select id="freqSelection" name="updateFreq" size=1>

<option value="0">Please Select</option>

<option value="daily">Daily</option>

<option value="weekly">Weekly</option>

<option value="monthly">Monthly digest</option>

</select>

</div>

</div>

<div class="sampleFld">

<div class="fldLabel">

Format:

</div>

<div class="fldElement">

<ul id="updateFmt" class="noBullets">

<li><input type="radio" id="htmlFmt" name="updateFormat" checked /> <label for="htmlFmt">HTML</label></li>

<li><input type="radio" id="textFmt" name="updateFormat" /> <label for="textFmt">Plain Text</label></li>

</ul>

</div>

</div>

</fieldset>


<div class="sampleFld">

<ul id="formBtn" class="noBullets" role="presentation">

<li><button type="submit" onClick="alert('Thank You!' + '\n' + 'Look for the Happenings Newsletter in your inbox.')"><img id="submitBtn" src="../img/submit.gif" width="82" height="27" tabindex="-1" alt="Submit" /></button></li>

<li><button type="reset" onClick="(this.form.clear)"><img id="clearBtn" src="../img/clear_btn.gif" width="82" height="27" tabindex="-1" alt="Clear" /></button></li>

</ul>

</div>

</form>

Accessibility Details

Wrap related form elements in a <fieldset> tag.
Note: The <fieldset> tag displays a colored border around the set of related form elements. This border can be changed or eliminated using CSS.
- fieldset { border: 10px solid #7a0019; }
- fieldset { border: none; }
Wrap the label in a <legend> tag for each fieldset.

Spoken by Screen Reader

"Sign-up Name: edit."
"Sign-up Email: edit."
"Newsletter Preferences Frequency: Combobox Please Select."
"Newsletter Preferences HTML radio button checked."
"Submit button."
"Clear button."

ARIA

Labels Programmatically Associated with Sets of Form Elements

Example

Happenings Newsletter

Code

<h5 id="hnl">Happenings Newsletter</h5>

<form action="index.html" method="post" name="ariaFrm">

<p id="signUp" class="legend">Sign-up</p>

<div role="group" aria-labelledby="hnl";>

<div class="sampleFld">

<div class="fldLabel">

<span id="recipienthtmlName2">Name:</span>

</div>

<div class="fldElement">

<input type="text" id="recipientFld2" aria-labelledby="signUp recipienthtmlName2" />

</div>

</div>

<div class="sampleFld">

<div class="fldLabel">

<span id="recipientEml2">Email:</span>

</div>

<div class="fldElement">

<input type="text" id="emlFld2" aria-labelledby="signUp recipientEml2" />

</div>

</div>

</div>

<p id="newsletterPref2" class="legend">Newsletter Preferences</p>

<div role="group" aria-labelledby="newsletterPref2">

<div class="sampleFld">

<div class="fldLabel">
<span aria-hidden="true">Frequency:</span>

</div>

<div class="fldElement">

<select id="freqSelection2" name="updateFreq2" aria-label="Frequency:" size=1>

<option value="0">Please Select</option>

<option value="daily">Daily</option>

<option value="weekly">Weekly</option>

<option value="monthly">Monthly digest</option>

</select>

</div>

</div>

<div class="sampleFld">

<div class="fldLabel">

<span id="format" aria-hidden="true">Format:</span>

</div>

<div class="fldElement">

<ul id="updateFmt2" class="noBullets" role="presentation">

<li><input type="radio" id="updateFormat2" aria-labelledby="format htmlFmt2" checked /> <span id="htmlFmt2" aria-hidden="true">HTML</span></li>

<li><input type="radio" id="updateFormat2" aria-labelledby="format textFmt2" /> <span id="textFmt2" aria-hidden="true">Plain Text</span></li>

</ul>

</div>

</div>

</div>

<div class="sampleFld">

<ul id="formBtn2" class="noBullets" role="presentation">

<li><button type="submit" id="submitBtn2" value="Submit" onClick="alert('Thank You!' + '\n' + 'Look for the Happenings Newsletter in your inbox.')"><img src="../img/submit.gif" width="82" height="27" alt="Submit"></button></li>

<li><button type="reset" id="clearBtn2" value="Clear" onClick="(this.form.clear)"><span aria-hidden="true"><img src="../img/clear_btn.gif" width="82" height="27" alt="Clear"></span></button></li>

</ul>

</div>

</form>

Accessibility Details

Include an id attribute for each element (e.g., h#, p, span or div) that comprise the label for a group of related form elements.
Include related form elements in <div> tags with the following ARIA attributes:
- role="group"
- aria-labelledby="ID(s)_of_the_element(s)_that_comprise_the_label_for_the_group"
Include form element labels in containers (e.g., p, span or div) with ID attributes.
Include the aria-labelledby="ID(s)_of_the_element(s)_that_comprise_the_label_for_the_group" attribute for each form element.
Note: The aria-labelledby attribute cannot be used to associate a label with a list element — <ul> or <ol>. Use the aria-labelledby attribute for each form element in a list.
Radio buttons laid-out using list markup should include the aria-labelledby attribute with IDs for both the group and form element labels — aria-labelledby="groupLabelID formControlLabelID").
Include the aria-hidden="true" attribute for dropdown, checkbox and radio button element label containers (prevents the field label from being read twice — once for the control and once for the on-screen label.
Include the role="presentation" attribute for list elements used for layout of form elements.

Spoken by Screen Reader

"Happenings Newsletter Sign-up Name: edit."
"Happenings Newsletter Sign-up Email: edit."
"Newsletter Preferences Frequency: Combobox Please Select."
" Newsletter Preferences Format: HTML radio button checked."
"Submit button."
"Clear button."

Required Fields

In order to be accessible, required field indicators must meet the following criteria.

The technique used does not rely solely on color, size, position or other visual-only attributes.
The indicator is programmatically associated with the text entry field.
Required field icons, text-based and color indicators are defined in a legend at the top of the form.

Note: Using a combination of techniques, such as programmatically associated indicators and color, can improve accessibility for a variety of users.

There are a variety of techniques for identifying required fields.

HTML
- symbol — *
- text — (required)
- icon with an alt="required"alt attribute —
ARIA
- aria-required="true"

HTML
ARIA

HTML

Programmatically Associated required Field Text Identifier

Example

Name: required

Code

<div class="fldLabel">

<label for="htmlName1">Name: <span class=Required Field>required</span></label>

</div>

<div class="fldElement">

<input type="text" id="htmlName1" />

</div>

Accessibility Details

Include both the field label and the required field text indicator within the <label for> tag for each text entry field.
Change the font characteristics of the required field text indicator in order to draw the attention of visual users — including users with low vision or a learning disability.
- face
- size
- color
- weight
- style

Spoken by Screen Reader

"Name: required edit"

Programmatically Associated required Field Icon Identifier

Example

Name:

Code

<div class="fldLabel">

<label for="htmlName2">Name: <img src="../img/req-icon.png" width="12" height="13" alt=Required Field /></label>

</div>

<div class="fldElement">

<input type="text" id="htmlName2" />

</div>

Accessibility Details

Include both the field label and the required field icon within the <label for> tag for each text entry field.
Include an alt="Required" attribute in each required field icon specification.

Spoken by Screen Reader

"Name: required edit"

Programmatically Associated required Field Symbol Indicater

Example

* Name:

Code

<div class="fldLabel">

<label for="htmlName4"><span class=Required Field>*</span> Name:</label>

</div>

<div class="fldElement">

<input type="text" id="htmlName4" />

</div>

Accessibility Details

Include both the field label and the required field symbol within the <label for> tag for each text entry field.
Change the font characteristics of the required field symbol in order to draw the attention of visual users — including users with low vision or a learning disability.
- size
- color
- weight

Spoken by Screen Reader

"Star Name: edit"

Text Entry Field required Value Attribute

Example

Name:

Code

<div class="fldLabel">

<label for="htmlName3">Name:</label>

</div>

<div class="fldElement">

<input type="text" id="htmlName3" id="nameFld3" value=Required Field />

</div>

Accessibility Details

Include a value="required" attribute in each required field specification.
Note: Text entry will eliminate the required field indication.

Spoken by Screen Reader

"Name: edit required"

ARIA

Programmatically Associated Required Field Text Identifier

Example

Name: required

Code

<div class="fldLabel">

<span id="ariaName1">Name: required</span>

</div>

<div class="fldElement">

<input type="text" id="nameFldA" aria-labelledby="ariaName1" />

</div>

Accessibility Details

Include both the field label and the required field text indicator within a <span> tag for each text entry field.
Include an "aria-labelledby" attribute in each text entry field specification that references the corresponding label <span> ID .

Spoken by Screen Reader

"Name: required edit"

Programmatically Associated Required Field Icon Identifier

Example

Name:

Code

<div class="fldLabel">

<span id="ariaName2">Name: <img src="../img/req-icon.png" width="12" height="13" alt=Required Field></span>
</div>

<div class="fldElement">

<input type="text" id="nameFldB" aria-labelledby="ariaName2" />

</div>

</div>

Accessibility Details

Include both the field label and the required field icon indicator within a <span> tag for each text entry field.
Include an "aria-labelledby" attribute in each text entry field specification that references the corresponding label <span> ID .
Include an alt="Required field" attribute in each required field icon specification.

Spoken by Screen Reader

"Name: required edit"

Programmatically Associated Required Field Text and/or Icon Indicater

Example

Name:

(

and/or required)

Code

<div class="fldLabel">

<span id="ariaName4">Name:</span>
</div>

<div class="fldElement">

<input type="text" id="nameFldD" aria-labelledby="ariaName4 rti" />
 <span id="rti" class=Required Field>(<img src="../img/req-icon.png" width="12" height="13" alt=Required Field> and/or required)</span>

</div>

Accessibility Details

Include the field label and the required field text and/or icon indicator within <span> tags for each text entry field.
Include an aria-labelledby attribute in each text entry field specification that references the corresponding <span> ID for both the label and the required field indicator(s).
Use an appropriate alt attribute for required field icons.
- Icon only — alt="Required"
- Icon and text — alt=""

Spoken by Screen Reader

"Name: (required" text and/or Icon Indicater) edit"

Aria-required Attribute

Example

Name:

Code

<div class="fldLabel">

<span id="ariaName3">Name:</span>
</div>

<div class="fldElement">

<input type="text" id="nameFldC" aria-labelledby="ariaName3" aria-required="true" />
 <span class=Required Field aria-hidden="true">required</span>
</div>

Accessibility Details

Include the field label within a <span> tag for each text entry field.
Include an aria-labelledby attribute in each text entry field specification that references the corresponding label <span> ID.
Include an aria-required="true" attribute in each text entry field specification.

Spoken by Screen Reader

"Name: required edit"

Context Dependent Controls

Controls that depend on context for clarity of function or purpose may require additional time and effort for screen reader and screen magnification users. In order to be considered accessible, a form control must meet one of the following criteria.

The function or purpose of a control can be determined independent of the context in which it appears.
The control is programmatically associated with the context in which it appears.

HTML
ARIA

HTML

Expanded Alt Attribute

Example

Item	Price	Quantity	Cost
Total:		6	$63.70
Doohicky	$12.95	2	$25.90
Thingamabob	$9.45	4	$37.80

Code

<table>

<thead>

<tr>

<th>Item</th>

<th>Price</th>

<th>Quantity</th>

<th>Cost</th>

<th>&nbsp;</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2" class="fc1">Total:</td>

<td class="fc2">6</td>

<td class="fc3">$63.70</td>

<td class="fc4">&nbsp;</td>

</tr>

</tfoot>

<tbody>

<tr>

<td class="r1c1">Doohicky</td>

<td class="r1c2">$12.95</td>

<td class="r1c3">2</td>

<td class="r1c4">$25.90</td>

<td class="r1c5"><input type="image" id="itemH1" src="img/edit.png" width="82" 
height="82" alt="Edit Doohicky Quantity" /></td>

</tr>

<tr>

<td class="r2c1">Thingamabob</td>

<td class="r2c2">$9.45</td>

<td class="r2c3">4</td>

<td class="r2c4">$37.80</td>

<td class="r2c5"><input type="image" id="itemH2" src="img/edit.png" width="82" 
height="82" alt="Edit Thingamabob Quantity" /></td>

</tr>

</tbody>

</table>

Accessibility Details

Include a description of the control's funtion in the alt attribute for the <img> element.
Use an appropriate alt attribute.
- Function Target ̬ Change Shipping Address.
- Function, Context — Read More, Information on inclusive Web design.
- Function, Context Label/Function — Expanded Alt Attribute spoken by screen reader Play button.

Spoken by Screen Reader

"Edit Doohicky Quantity button"
"Edit Thingamabob Quantity button"

Hidden Image with Text Equivalent

Example

Item	Price	Quantity	Cost
Total:		6	$63.70
Doohicky	$12.95	2	$25.90	Change Doohicky Quantity
Thingamabob	$9.45	4	$37.80	Change Thingamabob Quantity

Code

<table>

<thead>

<tr>

<th>Item</th>

<th>Price</th>

<th>Quantity</th>

<th>Cost</th>

<th>&nbsp;</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2" class="fc1">Total:</td>

<td class="fc2">6</td>

<td class="fc3">$63.70</td>

<td class="fc4">&nbsp;</td>

</tr>

</tfoot>

<tbody>

<tr>

<td class="r1c1">Doohicky</td>

<td class="r1c2">$12.95</td>

<td class="r1c3">2</td>

<td class="r1c4">$25.90</td>

<td class="r1c5"><a href="#"><img id="itemH3" src="img/edit.png" width="82" height="82" alt="" /><span class="umnhf">Change Doohicky Quantity</span></a></td>

</tr>

<tr>

<td class="r2c1">Thingamabob</td>

<td class="r2c2">$9.45</td>

<td class="r2c3">4</td>

<td class="r2c4">$37.80</td>

<td class="r2c5"><a href="#"><img id="itemH4" src="img/edit.png" width="82" height="82" alt="" /><span class="umnhf">Change Thingamabob Quantity</span></a></td>

</tr>

</tbody>

</table>

Accessibility Details

Include the image and text equivalent in a single link element.
Include an empty alt attribute (alt="") in the <img> specification to hide the image from screen readers.
The text label/description may be hidden from view using CSS.
- HTML — <span class="umnhf">Text Label/Description</span>
- CSS — .hidden { display: none; }

Spoken by Screen Reader

*Hidden Image*

"Change Doohicky Quantity link"
"Change Thingamabob Quantity link"

ARIA

Expanded Label

Example

Item	Price	Quantity	Cost
Total:		6	$63.70
Doohicky	$12.95	2	$25.90
Thingamabob	$9.45	4	$37.80

Code

<table>

<thead>

<tr>

<th>Item<tr>

<th>Price<tr>

<th>Quantity<tr>

<th>Cost<tr>

<th> <tr>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2" class="fc1">Total:<tr>

<td class="fc2">6<tr>

<td class="fc3">$63.70<tr>

<td class="fc4"> <tr>

</tr>

</tfoot>

<tbody>

<tr>

<td class="r1c1">Doohicky<tr>

<td class="r1c2">$12.95<tr>

<td class="r1c3">2<tr>

<td class="r1c4">$25.90<tr>

<td class="r1c5"><button type="button"><img id="itemA1" src="img/edit.png" width="82" height="82" aria-label="Edit Doohicky Quantity" /></button></td>

</tr>

<tr>

<td class="r2c1">Thingamabob<tr>

<td class="r2c2">$9.45<tr>

<td class="r2c3">4<tr>

<td class="r2c4">$37.80<tr>

<td class="r2c5"><button type="button"><img id="itemA2" src="img/edit.png" width="82" height="82" aria-label="Edit Thingamabob Quantity" /></button><tr>

</tr>

</tbody>

</table>

Accessibility Details

Include an aria-label attribute in the <img> element that describes the purpose/function of the control.
Include an alt attribute in the <img> specification for users whose technology does not support ARIA.

Note; The aria-label attribute overrides native HTML.

Spoken by Screen Reader

"Edit Doohicky Quantity button"
"Edit Thingamabob Quantity button"

Attached Hidden Label

Example

Item	Price	Quantity	Cost
Total:		6	$63.70
Doohicky	$12.95	2	$25.90
Thingamabob	$9.45	4	$37.80

Code

<table>

<thead>

<tr>

<th>Item</th>

<th>Price</th>

<th>Quantity</th>

<th>Cost</th>

<th> </th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2" class="fc1">Total:</td>
<td class="fc2">6</td>

<td class="fc3">$63.70</td>

<td class="fc4"> </td>

</tr>

</tfoot>

<tbody>

<tr>

<td class="r1c1">Doohicky</td>

<td class="r1c2">$12.95</td>

<td class="r1c3">2</td>

<td class="r1c4">$25.90</td>

<td class="r1c5"><button type="button" aria-labelledby="edq"><img id="itemA3" src="img/edit.png" width="82" height="82" alt="Edit" /></button><div id="edq" class="umnhf" aria-hidden="true">Doohicky Quantity Edit</div></td>

</tr>

<tr>

<td class="r2c1">Thingamabob</td>

<td class="r2c2">$9.45</td>

<td class="r2c3">4</td>

<td class="r2c4">$37.80</td>

<td class="r2c5"><button type="button" aria-labelledby="etq"><img id="itemA4" src="img/edit.png" width="82" height="82" alt="Edit" /></button><div id="etq" class="umnhf" aria-hidden="true">Thingamabob Quantity Edit</div></td>

</tr>

</tbody>

</table>

Accessibility Details

Include a <div> element that contains the text to be spoken.
Hide the <div> element from both visual and screen reader users.
- HTML — <div id="Text2BSpoken" class="umnhf" aria-hidden="true">
- CSS — .hidden [ display: none; }
Include an aria-labelledby attribute that references the ID of the hidden <div> element in the <button> specification.

Spoken by Screen Reader

"Doohicky Quantity Edit button"
"Thingamabob Quantity Edit button"

Label Referencing On-screen Elements

Example

Item	Price	Quantity	Cost
Total:		6	$63.70
Doohicky	$12.95	2	$25.90
Thingamabob	$9.45	4	$37.80

Code

<table>

<thead>

<tr>

<th>Item</th>

<th>Price</th>

<th><span  id="quantity">Quantity</span></th>

<th>Cost</th>

<th> </th>

</tr>

</thead>

<tfoot><tr>

<td colspan="2" class="fc1">Total:</td>

<td class="fc2">6</td>

<td class="fc3">$63.70</td>

<td class="fc4"> </td>

</tr>

</tfoot>

<tbody>

<tr>

<td class="r1c1"><span id="itemR1">Doohicky</span></td>

<td class="r1c2">$12.95</td>

<td class="r1c3">2</td>

<td class="r1c4">$25.90</td>

<td class="r1c5"><button type="button" aria-labelledby="itemA5 itemR1 quantity"><img id="itemA5"src="img/edit.png" width="82" height="82" aria-label="Edit" /></button></td>

</tr>

<tr>

<td class="r2c1"><span id="itemR2">Thingamabob</span></td>

<td class="r2c2">$9.45</td>

<td class="r2c3">4</td>

<td class="r2c4">$37.80</td>

<td class="r2c5"><button type="button" aria-labelledby="itemA6 itemR2 quantity"><img id="itemA6"src="img/edit.png" width="82" height="82" aria-label="Edit" /></button></td>

</tr>

</tbody>

</table>

Accessibility Details

Include an id attribute for each element (e.g., h#, p, span, div, th or td) that will comprise the label for the form element.
Include an aria-labelledby attribute that includes the ID for each element comprising the label in the form element specification — <button>.
Include an aria-label attribute in any <img> element specifications referenced by the aria-labelledby attribute.
Include an alt attribute in the <img> element that mirrors the aria-label content for users whose technology does not support ARIA.

Spoken by Screen Reader

"Doohicky Quantity button"
"Thingamabob Quantity button"