A A A A A

Text Styling Example: b Element

Inaccessible use of b element

HTML Example

Example Heading

This is a sample paragraph to demonstrate the inaccessible use of the b element.

HTML Source Code

<p style="margin-top: 1em"> <font size="6" face="sans-serif"> <b> Example Heading </b> </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>b</code> element. </p>

Accessible use of CSS and font-weight property instead of b element

HTML Example

Example Heading

This is a sample paragraph to demonstrate replacing the b element with the accessible font-weight property and CSS styling.

HTML Source Code

<div class="example">

  <p> <b> Example Heading </b> </p>

<p> This is a sample paragraph to demonstrate replacing the <code>b</code> element with the <strong>accessible</strong> <code>font-weight</code> property and CSS styling. </p>

</div>

CSS Source Code

/* CSS Document */

#content div.example b
{
  font-weight: bold;
  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