Semantic Mark-up

Web pages are built using mark-up languages. HTML 4.0, xhtml 1.0, HTML 5 etc are few such mark-up languages. Mark-up languages help in displaying content on the browser, just to display the content on the browser. To align the content properly, style the content and to make other visual effects cascading style-sheets (CSS) are used.

HTML mark-up have many elements that allow the content authors to display the content. Eg: to mention headings on the page h1 to h6 tags are used. Each of these headings provide a specific font size to the content. A h1 tag have the highest priority in the page hierarchy and will be having the largest font-size 24 pt, then h2 having little lower priority with 18 pt. This is a default font-size, Ofcourse this font-size can be overwritten with styles.

<table>, <blockquote>, <q>, <ul> <li> are few such elements in HTML.

Where is the problem?

The accessibility problem occurs when the HTML elements are not properly used or CSS is used to manipulate the UI instead. The assistive technologies such as screen readers can read the mark-up but not the CSS properties.

What to do

For screen readers and other assistive technologies to identify the content along with its semantics proper HTML elements need to be used. Below are few such examples.

Examples

Example use of <em> and <strong>

In the following example the word life is marked with <em> and death is marked with <strong>.

<span>Strength is <em>life</em>, weekness is <strong>death</strong> </span>

How does it look?

Strength is life, weekness is death

Example use of <q>

<q>Take risk in your life, if you win you can lead! If you lose you can guide!</q>.

Some browsers may not render the quotes as expected. Better provide a single quote along with the <q> element as follows. Take care with CSS that both <q> and single quotes both work.

“<q>Take risk in your life, if you win you can lead! If you loose you can guide!</q>”.

How does it look?

Take risk in your life, if you win you can lead! If you loose you can guide!.

Example use of <blockquote>

<blockquote>
Take up one idea, make that one idea your life, think of it, dream of it. live on that idea. let the brain, muscles, nerves every part of your body full of that idea and just leave every other idea alone. This is the way to “success” and this is the way great spiritual gaints are produced others are mere talking machines.
</blockquote>

How does it look?

Take up one idea, make that one idea your life, think of it, dream of it. live on that idea. let the brain, muscles, nerves every part of your body full of that idea and just leave every other idea alone. This is the way to “success” and this is the way great spiritual gaints are produced others are mere talking machines.

Example use of <cite>

In the below example <cite> element is used for “Tim Berners-Lee”.

<p>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.<cite> -Tim Berners-Lee.</cite></p>

How does it look?

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. -Tim Berners-Lee.

Example use of <abbr>

In the below example HTML is marked-up with <abbr>.

<p><abbr>HTML</abbr> is used to develop web pages</p>

How does it look?

HTML is used to develop web pages

Example use of <sup>

The <sup> element is used to denote the superscript values on a web page. The following example shows a simple mathematical equation.

<p>(a + b)<sup>2</sup> = a<sup2</sup> + 2ab + b<sup>2 </sup>.</p>

How does it look?

(a + b)2 = a2 + 2ab + b2.

Example use of <sub>

The <sub> element is used to denote the subscript values on a web pages. The following sentence shows the chemical notation of water.

<p>The chemical notation of water is h<sub>2</sub>o</p>

How does it look?

The chemical notation of water is h2o

Many of the above HTML elements may not accurately pas the semantics to screen readers. We will write a different article on those after doing some research on the screen reader compatibility of elements such as <abbr>, <cite>, <sup>, <sub> etc.

Uncategorized

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

914 823 3361