Adaptable

Understanding Guideline 1.3

Info and Relationships 1.3.1

Understanding Success Criterion 1.3.1

Examples

Required fields are identified

Starred(*) fields are required.

Appropriate table markup
    				
<table class="text16">
	<caption class="textLeft">Example Table</caption>
	<thead>
		<tr>
			<th class="padding5" scope="col">Header content 1</th>
			<th class="padding5" scope="col">Header content 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="padding5">Body content 1</td>
			<td class="padding5">Body content 2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td class="padding5">Footer content 1</td>
			<td class="padding5">Footer content 2</td>
		</tr>
	</tfoot>
</table>
HTML5 Elements & ARIA Roles
    				
<header role="banner">
	<p>Put company logo, etc. here.</p>
</header>	
<nav role="navigation">
	 <ul>
		<li>Put navigation here</li>
	 </ul>
</nav>				
<main role="main">
	<p>Put main content here.</p>
</main>				
<footer role="contentinfo">
	<p>Put copyright, etc. here.</p>
</footer>
No HTML5 landmarks using ARIA Roles

Note: HTML5 landmarks and roles like above is the best way to mark up the page.

    				
<div role="banner">
	<p>Put company logo, etc. here.</p>
</div>
<div role="navigation">
	<ul>
		<li>Put navigation here</li>
	</ul>
</div>
<div role="main">
	 <p>Put main content here.</p>
</div>
<div role="contentinfo">
	<p>Put copyright, etc. here.</p>
</div>
Multiple landmarks of the same type and aria-label

Adding landmarks where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

    				
<nav id="leftnav" role="navigation" aria-labelledby="leftnavheading">
	<h2 id="leftnavheading">Institutional Links</h2>
	<ul>
		<li>list item one</li>
		<li>list item two</li>
		<li>list item three</li>
	</ul>
</nav>
<nav id="rightnav" role="navigation" aria-labelledby="rightnavheading">
	<h2 id="rightnavheading">Related topics</h2>
	<ul>
		<li>list item one</li>
		<li>list item two</li>
		<li>list item three</li>
	</ul>
</nav>
Multiple landmarks of the same type and aria-labelledby

If a navigation role is used multiple times on a Web page, each instance may have a unique label specified using aria-labelledby.

    				
<div id="leftnav" role="navigation" aria-label="Primary">
	<ul>
		<li>list item one</li>
		<li>list item two</li>
		<li>list item three</li>
	</ul>
</div>
<div id="rightnav" role="navigation" aria-label="Secondary">
	<ul>
		<li>list item one</li>
		<li>list item two</li>
		<li>list item three</li>
	</ul>
</div>
Acceptance Criteria
  1. Use semantic elements & aria landmarks to markup structure. (nav, section, article, etc. instead of div)
  2. DO NOT use inline styles.
  3. Use standard text formatting conventions for paragraphs. (p)
  4. Use standard text formatting conventions for lists. (ul, ol, li)
  5. Use standard text formatting conventions for headings. (h1, h2, h3, etc.)
  6. Organize a page using headings.
  7. Use CSS to control visual presentation of text.
  8. Use the aria-describedby property to provide a descriptive label for user interface controls.
Form Acceptance Criteria
  1. Identify a required field with the aria-required property.
  2. Using OPTGROUP to group OPTION elements inside a SELECT.
  3. Using label elements to associate text labels with form controls.
  4. Use the title attribute to identify form controls when the label element cannot be used.
  5. Provide a description for groups of form controls using fieldset and legend elements.
  6. Required fields must be identified.
Table Acceptance Criteria
  1. Use table markup to present tabular information. Tables should ONLY be used to markup tabular information.
  2. Table markup needs to consist of at least the elements table, tr, th, and td.
  3. Use the summary attribute to associate header cells and data cells in data tables.
  4. Using the scope attribute to associate data cells with header cells in data tables.
  5. Use id and headers attributes to associate data cells with header cells in data tables.
Notes

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

HTML5 elements and corresponding ARIA roles
HTML 5ARIA Role
<header>role="banner"
<nav>role="navigation"
<main>role="main"
<footer>role="contentinfo"
<aside>role="complementary"
<section>role="region" *
<article>role="article" *
nonerole="search"
<form>role="form"

* The region and article roles are not ARIA landmarks. The most useful of these for most websites are header/banner, nav/navigation, main, and footer/contentinfo.

Best Practice
  1. Include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.
  2. There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary navigation menus.
  3. In these cases, identical roles should be distinguished from each other using a valid technique for labelling regions.

Meaningful Sequence 1.3.2

Understanding Success Criterion 1.3.2

Examples

Incorrect Alignment

Kari with 4imprint 12 years

Correct Alignment

Kari
with 4imprint
12 years

Acceptance Criteria
  1. The DOM order must match the visual order.
  2. Use left justified text for languages that are written left to right.
Notes

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Sensory Characteristics 1.3.3

Understanding Success Criterion 1.3.2

Example

Graphical Symbols

An arrow symbol is used to move to the next portion of a survey.
Use positioning, color and labeling to identify the icon.

Arrow must be clearly labeled with "Next" and instructions should also be included:

Next
Acceptance Criteria
  1. Do not use a graphical symbol alone to convey information.
  2. Use an image with a text alternative for graphical symbols.
  3. See SVG Library Examples on how to use icons.
Notes

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Orientation 1.3.4

Understanding Success Criterion 1.3.4

Acceptance Criteria

None at this time.

Notes

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Identify Input Purpose 1.3.5

Understanding Success Criterion 1.3.5

Example

Autocomplete attribute
        			
<div class="form2018">		
	<span class="form-group">
		<label for="FirstName">First Name<abbr title="required">*</abbr></label>
		<input id="FirstName" class="txtReq input-control" name="FirstName" value="" title="Please enter a first name." autocomplete="given-name" aria-required="true" type="text">
		<span class="errorMessage hide"></span>
	</span>		
</div>
Acceptance Criteria
  1. The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  2. The content is implemented using technologies with support for identifying the expected meaning for form input data.
Notes

The purpose of each input field collecting information about the user can be programmatically determined when meeting the below acceptance criteria.

To Top