VGAR Content Requirements

VGAR Overview Requirements Test Procedures PDF Tools
Page
Navigation
Interaction

Content

Visual

Lists and Paragraphs (CON-WEB-004)

Use lists to markup groups of items and p for blocks of text

Make sure that paragraphs are coded using the appropriate tag so they are interpreted as paragraphs.

Also, make sure that content which is grouped in a list format conceptually is presented using the correct ordered or unordered list markup. Items such as navigation and tabs should be marked up with lists also.

Requirements

Markup Lists and Paragraphs (CON-WEB-004-01)

Paragraphs MUST be marked up as such.

Group Items with Lists (CON-WEB-004-02)

Groups of items (e.g., a navigation menu or group of tabs) MUST be marked up as a list.

<div id="tab-list">
	<ul role="tablist">
		<li id="tab1" role="tab" aria-controls="panel1" aria-selected="true"
 tabindex="0">Nunc tincidunt</li>
		<li id="tab2" role="tab" aria-controls="panel2" aria-selected="false"
tabindex="0">Proin dolor</li>
	</ul>
	<div id="panel1" role="tabpanel" style="display:block" aria-labelledby="tab1" 
aria-hidden="false">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus.</p>
	</div>
	<div id="panel2" role="tabpanel" style="display:none;"
 aria-labelledby="tab2" aria-hidden="true">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat.</p>
	</div>
</div>

Test Procedures

Firebug > Inspect Element (CON-WEB-004-01-T)

If a page contains paragraphs visually, pull up the source code and confirm that those paragraphs are marked up properly (i.e. with < p >).

FAE > Style > Lists (CON-WEB-004-02-T)

Confirm that groups of items (e.g., a navigation menu or group of tabs) on the page are marked up as lists.

Related Content

WCAG Success Criteria

W3C Techniques

These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information.  You should not act or rely on such content without seeking the advice of a professional.  All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.