Designing with Web standards means using the latest techniqes for Web design.
In this case we are talking about XHTML and Cascading Style sheets.
Dan Frommelt's Web standards presentation
http://www.cew.wisc.edu/accessibility/webstandards/
Dan Cederholm's book, Web Standards Solutions
CSS Zen Garden
http://www.csszengarden.com/
Designing with Web standards means involves using the elements and attributes in (X)HTML the way that they were designed to be used.
Example: Using the alt attribute to describe images.
<img src="example.gif" alt="Image of alt text." />
Example: Not using the blockquote element just to indent text.
Firefox can be downloaded at http://www.mozilla.org/
Download these three extensions at https://addons.update.mozilla.org/extensions/?application=firefox
Use the label element.
Example of a form
http://www.cew.wisc.edu/accessibility/examples/ aquaticArts/registration-hockey.htm
Example of an input box without a label:
First name:
First name: <input type="text" name="first" />
Example an input box with a label:
<label for="first">First name:</label>
<input type="text" id="first" name="first" />
Example of labels with a text area:
<label for="comments">Comments:</label><br />
<textarea name="comments" id="comments"></textarea>
Example of labels with radio buttons:
Student status:
Student status:<br />
<input type="radio" name="RadioGroup1" id="radio" value="1">
<label for="radio" > Junior </label>
<input type="radio" name="RadioGroup1" id="radio2" value="2">
<label for="radio2" > Sophomore </label>
<input type="radio" name="RadioGroup1" id="radio3" value="3">
<label for="radio3" > Senior </label>
<input type="radio" name="RadioGroup1" id="radio4" value="4">
<label for ="radio4" >Graduate </label>
Example #1:
Example #2:
Example #2:
<fieldset>
<legend>Login</legend>
<label for="username">Username:</label>
<input id="username" type="text" id="username"><br />
<label for="password">Password:</label>
<input id="password" type="password" name="password">
</fieldset>
Like any image, make sure you use the alt attribute.
<input type="image" alt="submit!" border="0" name="imageField" src="graphics/submit.gif" width="109" height="41">
Example of a list of items.
Fruits:<br />Lists should be marked up as XHTML lists with <li>.
Fruits:Code for a properly marked up list.
Fruits:<br />
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
<li>Grapes</li>
</ul>
What if we don't want bullets?
Answer: Use style sheets to remove them.
What if the spacing between the list items is too large?
Answer: Use style sheets to remove the space.
What if we don't want the items indented?
Answer: Use style sheets to remove the space.
This style will remove the bullets, remove the indentation, and remove the spacing between list items.
ul {
list-style:none;
padding-left:0;
margin:0;
padding-bottom:0;
}
What if we don't like the bullets that exist?
Answer: Use your own images as bullets.
li {background-image: url(fancybullet.gif) no-repeat 0 50%; padding-left: 20px; }
Lists are now used for navigation bars.
Web Accessibility for All Web site
http://www.cew.wisc.edu/accessibility/
CSS Zen Garden example:
http://www.csszengarden.com/?cssfile=/158/158.css&page=0
Instead of :
<p><b>Title</b></p>
Use a heading like:
<h1>Page Title</h1>
One reason is that they come with a preset look to them. Some people use images instead of the headers to make them look better.
CSS Zen Garden example:
http://www.csszengarden.com/?cssfile=/163/163.css&page=0
View headings the way a screenreader user would by using the Fangs Screen Reader Emulator extension to simulate a screen reader.
CSS Zen Garden example:
http://www.csszengarden.com/?cssfile=/163/163.css&page=0
Phark method:
<h1 id="mainTitle">Main Title</h1>
#mainTitle {
height:20px;
text-indent: -5000px;
background: url(mainTitle.gif) no-repeat;
}
Many Webmasters don't even know about these elements.
Example:
WAFA
<abbr title="Web Accessibility for All">WAFA</abbr>
Data tables, not layout tables. In fact layout tables aren't necessary using the latest Web standards.
CSS Zen Garden example:
http://www.csszengarden.com/?cssfile=/163/163.css&page=0
A modern table:
http://www.sandlotsports.cdxsolutions.com/spring/standings.asp?leagueid=22
quotewhen they come across a <blockquote>.
People have often used blockquotes for indenting.
Instead, use style sheets to indent things:
<div id="content">
</div>
#content {
margin-left: 3em;
}
This presentation is done with Web standards using a free tool called S5.
You can download it on Eric Meyer's Web site at: