Outline
- Introduction
- W3, the interwebz, and what it all means.
- Why is this accessibility stuff important?
- What you might learn if you decide to stay.
- What you probably won't learn even if you do.
- Anatomy 101
- HTML body parts, versions and standards.
- CSS, the skin of the interwebz.
- Creating a symbiotic relationship.
- Genesis
- With great power comes great responsibility.
- Creating a simple HTML template.
- Skinning your page.
- Adding pieces of flair.
- Testing your page
- Your lowest common denominator is...
- Making sure things degrade gracefully, and what that actually means.
- Common browser bugs.
- What comes next?
- Getting even funkier with CSS templates.
- Tools and resources you will need.
- Cool sites to check out.
- Start your own web design business!
We will be working with an example – please download and unzip this on your desktop:
Workshop Example
Introduction
W3, the interwebz, and what it all means.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." – Tim Berners-Lee, W3C Director and inventor of the World Wide Web
The W3 is described as being an organization that, "develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding."
In short, the W3 is a collective caretaker for the web who sets guidelines and standards to help lead it in the right direction.
- The web is a way to access and publish information freely.
- The W3 is a community promoting standards and guidelines to perpetuate these means.
Read more on the W3 and the history of the web
Why is this accessibility stuff important?
Defining "accessibility"
- Accessibility is a subset of usability.
- Usability is how easy it is for anybody to use something.
- Things are easy to use when they are natural or require a minimal amount of thinking.
A common misconception is that accessibility means whether or not someone with a disability can access it. Accessibility and usability applies to everyone.
Accessibility leads to success
Popular tools you will find on Google and Yahoo! are successful because they are usable and accessible to large audiences and varying skill sets.
Making a usable (and accessible) tool is an invaluable part of any project. Poor usability can overshadow a great backend or excellent software engineering. This is why you must always take usability seriously if you are designing software, hardware or even constructing a building.
What you might learn if you decide to stay.
- How to apply CSS to a simple HTML template.
- How to create professional-looking lists for site navigation.
- How to use 1-pixel gradients and other very small images to spice up any page.
- How to easily adjust your methods to make a site accessible.
- Myths and truths about what is actually accessible.
- Tools to help you test your site.
- Tools and resources to keep going after you leave.
The next time you make a web page, if you think about accessibility, you will have taken the biggest step towards actually making it accessible. This tutorial is meant to help you get the rest of the way there.
What you probably won't learn even if you do.
- Ajax
- Flash
- Javascript
- A complete beginner's course in basic HTML
- PHP
- How to start a web design business
This focuses on CSS/HTML and related resources. Tools that span beyond markup such as scripting or client-side scripting languages will not be covered.
Anatomy 101
HTML body parts, versions and standards.
Your basic HTML document
If you have any questions about HTML structure:
<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http: xml:lang="en">
<head>
<title> OSU Open Source Lab :: osuosl.org</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen"/>
</head>
<body>
<!-- This is a comment. -->
<p>Content would go here.</p>
</body>
</html>
What (markup) language are you speaking?
<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- At the top of every web page, before the <html> tag, you should see a DOCTYPE, or Document Type Declaration.
- This explains which standard the page will be written for, and provide a DTD, or Document Type Definition.
- The DOCTYPE and DTD tell the browser what language it's speaking, so it knows what to expect.
- Leaving out this information forces the browser to guess what version/type of HTML your web page is in, which could lead to unexpected results.
- Most pages use HTML 4.01 or xHTML 1.0.
Different types of markup
- Structural/Functional (h1-h6, div, hr) - describes the purpose of an element in relation to the rest of the document. Ideally, your HTML is entirely structural, and does not dictate style or presentation. It is just content.
- Presentational (b, i, font) - describes the appearance or display of an element or text, avoid this in your HTML and use CSS instead!
CSS, the skin of the interwebz.
CSS stands for Cascading Style Sheets, due mostly to the flexibility of CSS when it comes to using multiple CSS definitions and taking advantage of inheritence:
# Simple example of how CSS actually cascades
.bar {
color: blue;
}
#nav .bar {
font-weight: bold;
}
...
<div class="bar">blue text</div>
<div id="nav">
<div class="bar">blue and bold text (just pretend... :D)</div>
</div>
CSS cascades in a few different ways, depending on how you look at it
- Multiple CSS documents can be used in one web page, with the last-loaded taking precedence
- Elements that have CSS styles defined more than once end up with all assigned attributes that do not conflict
- Using CSS on a parent element, like a <div> with an id=#someid allows you to then control everything underneath it (like #nav .bar controls every instance of the .bar class inside of the #nav div)
The bottom line is that CSS offers a lot of flexibility when it comes to design, and it lets you completely separate it from your content.
CSS Information
Different ways to use CSS
Link to a CSS document
Why you should do it this way
- Centralizes all styles
- Is cacheable (only have to load it once for a site, not everytime you load a page)
- Proper separation of content and design/layout makes for a simpler, smaller page
<head>
...
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen"/>
...
</head>
Style tags
Try not to use this method because
- Loads everytime a page is loaded
- Is not centralized across different pages, so it's hard to make global style changes
You may need to use this to override other styles for a particular page, which is the only good reason I can think of for using this method.
<head>
...
<style type="text/css">
.hide {
display: none;
}
</style>
...
</head>
Inline style definitions
If you use this, you might as well not use CSS
- Inside of content, hard to keep track of
- Error-prone
- Impossible to adjust styles once they've been spread out over a whole site
- Obfuscates all of your structural markup, and increases the size of your documents
<span style="font-weight:bold; font-size:19em; color: red;">This method is almost completely useless.</span>
CSS for different mediums
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="./css/all.css" media="all"/>
The media attribute specifies which medium the CSS is meant for. In the above example:
- "screen" says that the CSS document is for things that are displayed visually on a screen
- "print" is a media type your browser looks for when it prints - this is a great, easy way to make any page you make printable!
- "all" means this CSS document will apply to all media types – be careful with this one. It is also the default if you don't specify a media type, unfortunately.
- There are many other media types, these are just the 3 most common.
Other media types
Creating a symbiotic relationship.
When proper HTML markup meshes with proper use of CSS, many things happen:
- compatibility improves
- pages degrade gracefully when viewed in older browsers
- page size decreases
- it becomes easier to make global, drastic changes to your layout whenever you want
- your HTML is much easier to read
In the next section, we'll focus on turning this HTML into a cool template:
Genesis
With great power comes great responsibility.
Like Spiderman, you have great powers when you create and publish web pages, but power without responsibility is a recipe for disaster. You should fully understand your responsibilities:
- Know your audience - and make your site for them (not you).
- Don't make people think - visiting your site shouldn't be hard work.
- Write simple content - make your words valuable and not verbose.
- Uphold the universality of the web - use standards and follow guidelines to make sure your page is accessible to ~100% of your audience.
More responsibilities and rules to live your webmaster life by
Creating a simple HTML template.
Things we'll cover today
- Your template should always have some basic components:
- Navigation
- Clear headings
- Easy-to-read content
- A purpose (some are better than others, like http://stuffonmycat.com/
)
- A title
Since this is an overview, our test page will only have these base components.
Other things you'd see that we won't play with today
- Though, depending on the complexity of your site, you may have more:
- Secondary navigation
- Search features
- Comprehensive sitemap
- Alternative stylesheets
- Forms
- Multimedia
- Scripting
Our example template
<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http: xml:lang="en">
<head>
<title>My Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print"/>
</head>
<body>
<!-- skip navigation link -->
<div id="skip-nav">
<a href="#content">Skip to Content</a>
</div>
<hr class="hidden"/>
<!-- top -->
<div id="top">
<h1 id="logo"><a href="#">Example</a></h1>
</div>
<hr class="hidden"/>
<!-- wrapper -->
<div id="wrapper">
<!-- navigation -->
<div id="sidebar">
<ul id="navigation">
<li><a href="#">Some Link</a></li>
</ul>
</div>
<!-- end navigation -->
<!-- content -->
<div id="content">
<!-- end content -->
</div>
<!-- end wrapper -->
</div>
<hr class="hidden"/>
<!-- start bottom -->
<div id="bottom">
<div id="copy">© 2005, Someone</div>
</div>
</body>
</html>
Dissecting our example template
Aside from our basic HTML blocks, we see a lot of div's. What are they for?
- #skip-nav provides a means for people with screenreaders to jump to the content (or navigation, depending on where your navigation is in the page) so they don't have to read through a lot of stuff repetatively everytime they load a page.
- hr.hidden is a visual separator between blocks, seen in browsers that don't support CSS and typically gone unnoticed.
- #top is our page header, and should display the site name and purpose, and maybe would contain some global navigation links. Typically this contains the logo, which we will put in #logo. Avoid using names like "banner" to describe this section because some ad-blocking software could hide it mistakingly.
- #wrapper is a parent container for our content and navigation. We wrap the content and navigation blocks in case we want to apply a common background to them, and also to float them properly.
- #bottom is our footer, where we'll put some copyright information or other links that would belong at the bottom of the page.
Skinning your page.
Now that we have our basic HTML template set up, we need to start getting into the CSS. First we need to set up our CSS documents.
Typically I start with the most general blocks and work my way down the page from top to bottom.
Skipping to the content and why it's important.
Users who cannot see rely on audible readers to read web pages to them. Without this link, they would have to read through the navigation everytime they visited a page. Imagine having to watch 8 commercials between scenes in every movie. You just want the content! People with screen readers aren't any different.
You don't have to sacrifice style to have this link in here, though. Just define this as hidden for screen media, and it won't ruin your page:
#skip-nav {
display: none;
}
Now your site will let screen-readers or text-only browsers leap directly to the start of the #content block and get your users to the juicy stuff. 
Setting up a wrapper to give us more flexibility.
You might wonder why #wrapper exists. It's common to use a wrapper when you have two child elements that will share common values. In our case, we might put a background image that sits behind #sidebar and #content but on top of <body>. Wrappers are a great way to add flexibility and creativity when dealing with background images and layers.
In our example, we have the following CSS for #wrapper:
#wrapper {
clear: both;
}
This ensures that everything in the #wrapper block is below anything that is floating above it.
Floating our sidebar.
Speaking of floating... now our page looks funny because it doesn't resemble a normal page. We fix this by adjusting the positioning of the #navigation and #sidebar blocks:
#content {
margin: 0 0 0 12em;
padding: 1em;
}
#sidebar {
float: left;
margin: 0 0 0 1em;
width: 12em;
}
This tells #content to begin 12em from the left of the page, and tells #sidebar to 'float' to the left, where it will fall into that space we just created for it.
Transforming our simple little unordered list.
Now that we have our #sidebar and #content lined up, it'd be nice to make the navigation look less crappy.
First we want to adjust the padding and strip the default styling on the <ul> itself so it isn't all awkward in #sidebar:
#navigation ul {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 14em;
}
List elements, or <li> items, we will pretty much leave alone, except for giving them some text-alignment and a border.
#navigation li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
The anchor links have most of the actual styling in them. We make them block level elements, so even if you aren't over the text it still highlights like it was a button. We also set padding, borders and background colors. We can also define what color they turn when we move a mouse over them.
#navigation li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #fda;
background: #fff;
text-decoration: none;
}
#navigation li a:link {
color: #000;
}
#navigation li a:visited {
color: #333;
}
#navigation li a:hover
{
border-color: #fff;
background: #ccc;
}
Adding pieces of flair.
Now we're ready to mess with some graphics and see what we can do to spice things up. You can accomplish a lot of style with very small graphics.
- With a simple 1-pixel gradient we can spice up a couple of our big containers to have a little bit of life.
#wrapper {
background: transparent url(../img/contentbg.png) no-repeat 99% 99%;
}
body {
background: transparent url(../img/bodybg.png) repeat-y left;
}
- Likewise, we can use the same method horizontally to give a gradient/shadow effect to our horizontal bars.
#top {
background: #eee url(../img/topbg.png) repeat-x;
}
#bottom {
background: #fff url(../img/bottombg.png) repeat-x top;
}
Testing your page
Your lowest common denominator is...
- Use your lowest target 'look alike' browser to test – this is the oldest browser you want the site to look exactly the same in.
- Test it in a text-browser like Lynx – if you can't use and understand your site in Lynx, you didn't do a good job of making it accessible.
- If you have access to a screenreader like IBM Homepage Reader, you should test it in that. Typically, these aren't readily available, so it makes guidelines that much more important. If you follow WAI guidelines (priority 1) you should create a site that is useable in a screenreader.
- Use validation tools to make sure your markup and CSS don't have serious errors in them.
- Get people to take a look at it. You may get some valuable feedback if you take a break and let some of your friends pick on your page.
Making sure things degrade gracefully, and what that actually means.
- Degrading gracefully means that your site will still work in older browsers.
- In order to do this, you should make all CSS2 styles in a separate stylesheet.
- Your layout, background-pictures, etc. should be in its own stylesheet.
- Your screen.css should @import('css2.css');.
- This causes CSS1 browsers to not load CSS2 code, which breaks things often, and causes such errors as black-on-black text or overlaying/conflicting HTML blocks.
*Aside from this, make sure your HTML is straightforward and clean. It should work well in older browsers if you keep it simple.
- TIP: Use the WebDeveloper plug-in for firefox to disable CSS on a site to see how well it degrades.
Common browser bugs.
- Peek-a-Boo
- Infinite horizontal scrolling
- Resources for common browser bugs
What comes next?
Getting even funkier with CSS templates.
- Now that you've learned the basics, play around!
- Revamp your blog. Deck it out and impress all your friends!
- Play with different CSS properties you havne't seen before. Sometimes I go down the index list and see something I haven't seen and mess with it.
- Look at other sites and how they do things to keep
- Read the CSS3 specs and read about the cool things that are coming.
Tools and resources you will need.
- Mozilla Firefox - A web browser that adheres to internet standards, and is more secure and reliable than Internet Explorer.
- Web Developer Extension for Firefox - An extension to Firefox that lets you manipulate the Document Object Modem (DOM) to view/change any HTML page.
- W3 CSS Index - CSS Reference that I use all the time.
- Visibone's Colorlab - A useful web-based color picker for web-safe colors.
- Listamatic - A useful tool for creating different kinds of navigation.
Cool sites to check out.
- Don't Make Me Think - An excellent book on web design, usability, and writing for the web. I highly recommend that you read this book. It might change how you approach web design. Yeah, it's a book, sorry. Toughen up!
- CSS Zen Garden - A site that demonstrates the usefulness of CSS.
- MySQL.com - A good example of a popular usable site. Look at the template.
- mozilla.org - Another good example - the Cavendish template they use is pretty advanced, but very effective.
- Eric Meyer - An expert on CSS, accessibility - has some great resources.
- A List Apart - A useful site for good articles on CSS tips and tricks.
- Jeffrey Zeldman - Another usability expert, a good read and links to cool sites.
- Glish CSS Layouts - Useful site for CSS layouts.
Start your own web design business!
You can do this if you want, but I'd say, "Don't quit your day job." Here is a business plan for ya:
- Learn more about making accessible web sites.
- Practice, practice, practice.
- (something happens here)
- Profit!
