Please also see my current work at The Enabled Web.

Semantic markup examples

Situations, techniques, and tests are from the W3C WCAG 2.0 Draft. These examples also map to Section 508 paragraphs 1194.22(d) and (g); please see Wayne Dick's CSU Accessibility Standards for Custom Websites for further information.

1.3.1 Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:

  1. G115: Using semantic elements to mark up structure...

  2. Making information and relationships conveyed through presentation programmatically determinable using the following techniques:

Incorrect example (visual markup only) adapted from my Designed-in Accessibility tutorial

Campus links

Academics

Colleges
Academic calendars
Schedule of classes
Research units
University extension

Administration

Office of the President
Academic Senate
Registrar
Personnel and payroll
Accounting and finance
Facilities managment

News

Baseball: Launchers blast Dirtbags in cliffhanger

It took a bottom-of-the-ninth two-out solo homer by shortstop Alvaro Monge, but Lompoc pulled off a stunning 4-3 upset victory over the heavily favored Long Beach nine. Read full "Launchers" article...

Evening course for gourmets

Chef Tom Jewett, owner of the 3-star Chez T.J. restaurant in Lompoc, will offer a course in wine and food pairing, featuring wines and produce from the Santa Maria Valley. Students under 21 will enjoy the chef's custom sparkling fruit juice blends. Read full "gourmet" article...

The University of Lompoc

Nestled among the rolling hills and flower fields of northern Santa Barbara County, the University of Lompoc is a private, non-sectarian baccalaureate institution. Offering a wide range of fully-accredited degree programs while emphasizing a well-rounded liberal arts education, U.L. also specializes in the agricultural and engineering disciplines valuable to our surrounding communities.

Coming events

May 11 - Band concert, 7:00 pm, Auditorium

May 21 - Final exam week

May 28 - Memorial Day holiday, campus closed

May 30 - Commencement, 1:00 pm, Launchers Stadium

 

Code excerpts for incorrect example:

<p class="h2fake">Campus links</p>
...
<p class="ulfake">&bull; <a href="#">Colleges</a><br />
...
<p class="event"><b>May 11</b> - Band concert, 7:00 pm, Auditorium </p>

Correct example (same with semantic markup)

Campus links

Academics

Administration

News

Baseball: Launchers blast Dirtbags in cliffhanger

It took a bottom-of-the-ninth two-out solo homer by shortstop Alvaro Monge, but Lompoc pulled off a stunning 4-3 upset victory over the heavily favored Long Beach nine. Read full "Launchers" article...

Evening course for gourmets

Chef Tom Jewett, owner of the 3-star Chez T.J. restaurant in Lompoc, will offer a course in wine and food pairing, featuring wines and produce from the Santa Maria Valley. Students under 21 will enjoy the chef's custom sparkling fruit juice blends. Read full "gourmet" article...

The University of Lompoc

Nestled among the rolling hills and flower fields of northern Santa Barbara County, the University of Lompoc is a private, non-sectarian baccalaureate institution. Offering a wide range of fully-accredited degree programs while emphasizing a well-rounded liberal arts education, U.L. also specializes in the agricultural and engineering disciplines valuable to our surrounding communities.

Coming Events
DateEventTimePlace
May 11Band concert7:00 pmAuditorium
May 21Final exam week  
May 28Memorial Day holiday campus closed
May 30Commencement1:00 pmLaunchers Stadium
 

Code excerpts for correct example:

<h2>Campus links></h2>
...
<ul><li><a href="#">Colleges</a></li>...
...
<table class="comingevents">
<caption>Coming Events</caption>
<tr><th scope="col">Date</th><th scope="col">Event</th>...
<tr><th scope="row">May 11</th><td>Band concert</td>...

Tests

Procedure

  1. Check if there are parts of the content that have a semantic function.

  2. For each part that has a semantic function, if corresponding semantic markup exists in the technology, check that the content has been marked up using that semantic markup.

Expected Results