Logical Order (CON-WEB-003)

Code content (without CSS) in a logical order

To ensure that AT encounters the content in the same order as the logical presentation of the content it should be structured in this logical order in the HTML code.

Do not use CSS to order content. Additionally, any content that is not shown until a specific time or event should be removed from the DOM or parked at the bottom of the DOM. This will help avoid the possibility that a screen reader will encounter the information out of context.

Requirements

Code Order=Logical Content Order (CON-WEB-003-01)

The logical order of content MUST be present in the code order, allowing for successful use of the content when linearized and/or without CSS.


Remove or Park "hidden" Content at the Bottom (CON-WEB-003-02)

"Hidden" content being "parked" for later (e.g., the text to be used by a JS calendar picker) SHOULD be removed from the DOM if possible, and if not it SHOULD be placed at the bottom.


Test Procedures

WAVE > Disable Styles (CON-WEB-003-01-T)

Disable styles, linearizing the page and confirm that the logical order of content is present in the code order.

WAVE > Disable Styles (CON-WEB-003-02-T)

Disable styles and confirm that "hidden" content being "parked" for later use/display is located at the bottom of the document.


Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

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.