Specifying alignment either to the left OR right in CSS

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

All technologies that support CSS

This technique relates to Success Criterion 1.4.8: Visual Presentation (Sufficient).

Description

This technique describes how to align blocks of text either left or right by setting the CSS text-align property.

Examples

Example 1

In the following example, text is aligned left. In the style sheet, define the class:

p.left {text-align: left}

In the content call the up the class.

<p class="left"> Lorem ipsum dolor sit …</p>

Example 2

In the following example, text is aligned right.

p.right {text-align: right}

In the content call the up the class.

<p class="right"> Lorem ipsum dolor sit …</p>

Tests

Procedure

  1. Check that the text is aligned either left or right.

Expected Results

  • Check #1 is true.