A A A A A

Text Styling Example: align Attribute

Inaccessible use of the align attribute

HTML Example

Example Heading

This is a sample paragraph to demonstrate the inaccessible use of the align attribute.

HTML Source Code

<p align="center" style="margin-top: 1em"> <font size="6" face="sans-serif"> Example Heading </font> </p>

<p>This is a sample paragraph to demonstrate the <font size="4" color="#999999" face="monospace"><b><u>inaccessible</u></b></font> use of the <code>align</code> attribute.</p>

Accessible use of CSS and text-align property instead of align attribute

HTML Example

Example Heading

This is a sample paragraph to demonstrate replacing the align attribute with the accessible heading attribute that is styled with the CSS text-align property.

HTML Source Code

<div class="example">

  <h3> Example Heading </h3>


  <p> This is a sample paragraph to demonstrate replacing the <code>align</code> attribute with the <strong>accessible</strong> <code>heading</code> attribute that is styled with the CSS <code>text-align</code> property. </p>

</div>

CSS Source Code

/* CSS Document */

#content div.example h3
{
  text-align: center;
  font-size: xx-large;
  font-family: sans-serif;
}

#content div.example strong
{
  font-size: large;
  color: #999999;
  font-family: monospace;
  text-decoration: underline;
  font-weight: bold;
}

Styling Best Practices

Other Best Practices

Working Group