Web Content Accessibility Guidelines (WCAG) 2.0 is the Bible of web developers who are responsible for HTML templating and independent content authors who are eager to reach the biggest audience possible. However, if you think that’s just for the sake of that, accessibility, think again.
WCAG is way more than just accessibility, it’s also the technical part of on-page SEO — leveraging the most out of HTML and make your web pages full of meaningful structures serving as containers of keywords.
Keywords alone don’t rule. Much attention should also be paid to how to combine and where to place them. Think about your competitors who are already writing rich HTML structures WCAG-wise such as by implementing the alt property / attribute of img tags. Yep, your explicit content is much better but in this case, without descriptive information for the images, you lost a combat in the search engine ranking war. Search engines just don’t know what the heck the image is about and you lost a good chance to tell them that it’s about the very niche you’ve been focusing on.
HTML?
HTML is the language of the Web. Beginner webmasters who have just started a blog with WordPress may or may not know exactly what it is. Search engines read your content pages which is written in HTML to decide what your content is about and how relevant it is to a search phrase. Therefore, knowing how to write a rich structure HTML content page with as many HTML features as possible is crucial in winning the search engine war.
The most important tag or element of HTML in terms of SEO is undoubtedly <title></title>. It’s simply the first on-page factor that search engines look into to determine about your pages and what the content is. A page with a title will be significantly more successful than one without. A page with a fully descriptive title that is well optimized in keyword research will be much higher in search engine rankings than one with a poor title. It’s as simple as that.
WCAG?
WCAG is actually not the reason why I’m writing nor is it that for why you are reading this. Technically, it’s how we can make online content better to accommodate as much audience or terminals as possible by optimizing content structures. Accessibility and semantics is the meter and goal of it.
As search engines’ sophistication grows in analyzing large amount of online data, it’s now taking everything into consideration in rating web sites and their pages. HTML is the tool while WCAG is the perfect guideline for us to use that tool to extremes for our own as well as visitors’ sake.
SEO?
SEO is the war to win search engine favors, thus visitors, ultimately buyers.
It’s where the money lies, baby.
Enough for the bullshit, now let’s get something done.
The On-page SEO Checklist
While you may have your own ideas to get things done in a certain way, below are a compilation of guidelines that may help you do them better in providing as much juicy keyword information to search engines as possible – in W3C‘s web standard way!
- Provide anchor text that describes the purpose of a link for anchor elements.
<a href="routes.html"> Current routes at Boulders Climbing Gym </a><a href="routes.html"> <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> </a> - Combine ordinary text link with an adjacent image that’s relevant for the same destination. Add to the image an alternative text that’s different from the link anchor text.
<a href="products.html"> <img src="icon.gif" alt="product listings icon" /> Products page </a>For every image link, try adding a word or two of anchor text to it or at least make sure you have a descriptive alternative text for the image.
- Do provide text alternatives for the area elements of image maps.
<img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab" /> </map>It helps the search engines as well as other web terminal devices understand the area and the linked resource better.
- Provide a descriptive title to every page you create.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>On-page SEO Guidelines through WCAG 2.0 Techniques</title> </head> <body> ... </body> </html>A good title is worth a thousand dollars.
- Provide text and non-text alternatives for object.
<object classid="java:Press.class" width="500" height="500"> As temperature increases, the molecules in the balloon... </object><object classid="java:Press.class" width="500" height="500"> <object data="Pressure.mpeg" type="video/mpeg"> <object data="Pressure.gif" type="image/gif"> As temperature increases, the molecules in the balloon... </object> </object> </object> - Provide definitions for abbreviations by the help of abbr elements.
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p> <p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p> <p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit brought by members of the National Writers Union against ......</p> - Provide definitions for acronyms by the help of acronym elements.
<p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p> <p><acronym title="World Wide Web">WWW</acronym></p> - Supplement a text link with the title attribute.
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" title="Read more about failed elephant evacuation"> Evacuation Crumbles Under Jumbo load </a> - Provide alt attributes and title attributes on images used as submit buttons.
<form action="http://example.com/prog/text-read" method="post"> <input type="image" name="submit" src="button.gif" alt="Submit" title="Submit" /> </form> - Use alt attributes on img elements.
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." /> - Use table markup to present tabular data and information.
<table> <tr> <td> </td> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <th>8:00-9:00</th> <td>Meet with Sam</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>9:00-10:00</th> <td> </td> <td> </td> <td>Doctor Williams</td> <td>Sam again</td> <td>Leave for San Antonio</td> </tr> </table> - Use caption elements to associate table captions with data tables.
<table> <caption>Schedule for the week of March 6</caption> ...</table> - Use summary attribute that describes the content of the table.
<table summary="Schedule for Route 7 going downtown. Service begins at 4:00 AM and ends at midnight. Intersections are listed in the top row. Find the intersection closest to your starting point or destination, then read down that column to find out what time the bus leaves that intersection."> <tr> <th scope="col">State & First</th> <th scope="col">State & Sixth</th> <th scope="col">State & Fifteenth</th> <th scope="col">Fifteenth & Morrison</th> </tr> <td>4:00</td> <td>4:05</td> <td>4:11</td> <td>4:19</td> </tr> … </table> - Use the scope attribute to associate header cells and data cells in data tables.
<table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">Fax#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>412-212-5400</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-1420</td> <td>410-306-5400</td> <td>Baltimore</td> </tr><tr> <td>3.</td> <td scope="row">Gordon Greenidge</td> <td>281-564-6720</td> <td>281-511-6600</td> <td>Houston</td> </tr> </table> - Use id and headers attributes to associate data cells with header cells in data tables.
<table> <tr> <th rowspan="2" id="h">Homework</th> <th colspan="3" id="e">Exams</th> <th colspan="3" id="p">Projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">Final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">Final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table> - Use ol, ul and dl elements for lists.
<ol> <li>Mix eggs and milk in a bowl.</li> <li>Add salt and pepper.</li> </ol><ul> <li>Milk</li> <li>Eggs</li> <li>Butter</li> </ul><dl> <dt>blink</dt> <dd>turn on and off between .5 and 3 times per second </dd> </dl> - Use definition lists for lists of terms and definitions.
<dl title="Nautical terms"> <dt>Port</dt> <dd> <p><em>Port</em> is the nautical term (used on boats and ships) that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</p> </dd> <dt>Starboard</dt> <dd> <p><em>Starboard</em> is the nautical term (used on boats and ships) that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</p> </dd> </dl> - Use h1, h2, h3, h4, h5, h6 to identify headings and different page sections.
<head> <title>Stock Market Up Today</title> </head> <body> <!-- left nav --> <div class="left-nav"> <h2>Site Navigation</h2> <!-- content here --> </div> <!-- main contents --> <div class="main"> <h1>Stock Market up today</h1> <!-- article text here --> </div> <!-- right panel --> <div class="left-nav"> <h2>Related links</h2> <!-- content here --> </div> </body> - Use label elements to associate text labels with form controls.
<input type="checkbox" id="markuplang" name="computerskills" checked="checked"> <label for="markuplang">HTML</label> - Use longdesc attributes to further describe important non-text objects such as images.
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p> - Use noembed element with embed element.
<embed src="../movies/history_of_rome.mov" height="60" width="144" autostart="false"> <noembed> <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a> </noembed> </embed> - Use semantic markup such as strong and em elements to mark emphasized or special text.
...What she <em>really</em> meant to say was, "This is not ok, it is <strong>excellent</strong>"!... - Use blockquote element for block quotations and q element for inline quotations.
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p> <blockquote> <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.</p> </blockquote><p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world.</q>"</p> - Use the body of object elements.
<object classid="http://www.example.com/analogclock.py"> <p>Here is some text that describes the object and its operation.</p> </object><object classid="http://www.example.com/animatedlogo.py"> <img src="staticlogo.gif" alt="Company Name" /> </object> - Use the dfn element to identify the defining instance of a word.
<p>The Web Content Accessibility Guidelines require that non-text content has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language; this includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which is character substitution), and images representing text .</p> - Use the dir attribute on an inline element to resolve problems with nested directional runs.
<p>The title says "<span lang="he" dir="rtl">פעילות ×”×‘×™× ×ו×, W3C</span>" in Hebrew.</p>rtl stands for right to left while ltr is left to right.
- Use the language attributes on the html element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> ...document écrit en français... </body> </html> - Use lang attributes to identify specific changes in the human language.
<blockquote xml:lang="de" lang="de"> <p> Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, daß kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. </p> </blockquote> - Use the link element and navigation tools to designate page relationships.
<link rel="Contents" href="Contents.html" title="Table of Contents" /> <link rel="Index" href="Index.html" title="Index" /> <link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" /> <link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" /> - Use ruby element to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.
<p> <ruby> <rb>慶應大å¦</rb> <rp>(</rp> <rt>ã‘ã„ãŠã†ã ã„ãŒã</rt> <rp>)</rp> </ruby> </p> - Use the title attribute of the frame and iframe elements.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A simple frameset document</title> </head> <frameset cols="10%, 90%"> <frame src="nav.html" title="Main menu" /> <frame src="doc.html" title="Documents" /> <noframes> <body> <a href="lib.html" title="Library link">Select to go to the electronic library</a> </body> </noframes> </frameset> </html> - Use the title attribute to identify form controls when the label element cannot be used.
<label for="searchTerm">Search for:</label> <input id="searchTerm" type="text" size="30" value="" name="searchTerm"> <select title="Search in" id="scope"> … </select> - Use null alt text and no title attribute on img elements for images that user browsers or search engines should ignore.
<img src="squiggle.gif" width="20" height="20" alt="" /> - Provide a description for groups of form controls using fieldset and legend elements.
<form action="http://example.com/vote" method="post"> <fieldset> <legend>Your preferred philosopher</legend> <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/> <label for="philosopher_socrates">Socrates</label> <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/> <label for="philosopher_plato">Plato</label> <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/> <label for="philosopher_aristotle">Aristotle</label> </fieldset> </form> - Ensure that opening and closing tags are used according to specification.
- Ensure that Web pages are well-formed with respect to XML.
- Use optgroup to group option elements inside a select.
<form action="http://example.com/prog/someprog" method="post"> <label for="food">What is your favorite food?</label> <select id="food" name="food"> <optgroup label="Fruits"> <option value="1">Apples</option> <option value="3">Bananas</option> <option value="4">Peaches</option> <option value="5">...</option> </optgroup> <optgroup label="Vegetables"> <option value="2">Carrots</option> <option value="6">Cucumbers</option> <option value="7">...</option> </optgroup> <optgroup label="Baked Goods"> <option value="8">Apple Pie</option> <option value="9">Chocolate Cake</option> <option value="10">...</option> </optgroup> </select> </form> - Use the title attribute to provide context-sensitive help.
<label for="searchAddress">Address: </label> <input id="searchAddress" type="text" size="30" value="" name="searchAddress" title="Address example: 101 Collins St, Melbourne, Australia" />
What a list.
Make yourself familiar with each and every of these guidelines and your days as a HTML student is well over. It’s also a very good start for SEO courses.
Pingback: A grand compilation of on-page SEO guidelines checklist | Make Money with Adsense
Great SEO ideas! I will definitely use!
I’m a greedy collector of check lists and esp seo ones – and this, my new found rssfeed, is the best one I’ve found so far. The clear code examples make it all the better.
Thank you for this Mr. Yang, keep up the good work, quality list posts like this are missing these days, cheers!
Glad it helps!
Yang Yang,
Very detail post actually. I like it. 🙂
But, should we have an “icon” text on
altattribute? Such asalt="logo of... or image of... or icon of ...". Does it just a decorative?I think similar
altandtitletext should not contain redundant/reduplication information. While not all screen readers/aural agents may readtitleattributes, perhaps we should put descriptive anchor text properly. And context related of text alternative if needed.@dani,
That’d be nice but not generally necessary as they are already images – search engine knows it, visitors know it (browsers know it)…