Semantic code and header tags within DotNetNuke skins
Demo of Fangs
If we now view the Home page using:
Fangs for Firefox: The Screen Reader Emulator
http://www.standards-schmandards.com/index.php?show/fangs
Fangs Headings List
You will see that Fangs can read and display the list of header titles within our Home page.
Demo of Document Outline
Using the Firefox web developers toolbar, go to Information / View Document Outline.
You will see that the document outline view states that there are missing headings. This is because we have used the heading tags to outline the importance of the content, rather than placed the heading tags in the order of h1, h2, h3, h4, h5, h6 on the page.
If you view the websites that we analysed at the beginning of the tutorial, you will also see that some of them also receive missing heading statements.
Missing heading statements can be prevented when you design your actual skin. A missing heading statement is caused because the document outline is created by the order of the source code.
In the DNN-Blue skin, the order of the source code consists of the left pane, content pane and right pane.
This means that the first header tag that is read is a h2 tag, rather than a h1 tag and therefore the reader displays a missing header statement.
This doesn’t cause any error problems, but it is something to be aware of as the most important element for your skin design is to have the important content (which should contain a h1 tag) appear at the top of the source code.
We discuss the order of source code in the following tutorials:
How to create a skin for DotNetNuke
Table tricks for search engine optimized skins in DotNetNuke
How to create a pure CSS skin |  |
|
|