Creating Accessible web sites with CSS
AIR Houston Developer Training
Knowbility and AIR Houston
What is this Course?
- The course will cover the broad foundation of accessible web design and development with CSS.
- The course will cover best practices in CSS layout.
- The course provide hands-on experience with CSS layout.
- NOT the absolute authority on learning about accessibility.
- NOTE: Additional Resources available when printed
[any material that should appear in print but not on the slide]
What Do You Want To Learn?
Let's start with a few questions...
- How many people have at least attempted a layout with CSS?
- What do you expect to get from a course like this?
- Is there anything in particular you would like to cover?
[any material that should appear in print but not on the slide]
What will we cover today?
- What tools do we use?
- Why Do we want to use CSS for accessible web sites?
- What are the benefits of using CSS?
- Semantics: Do you mean what you say?
- Layout 101: What should you do?
- CSS Layout best practices
[any material that should appear in print but not on the slide]
What tools will we use?
- Dreamweaver 8
- Firefox 1.06
- Internet Explorer 6.01
- Firefox Extensions [Web Development with Firefox]
- Internet Explorer Extensions [New Internet Explorer Toolbar Beta]
[any material that should appear in print but not on the slide]
Why Do we want to use CSS for accessible web sites?
- Web standards help make your site more accessible [XHTML]
- To separate structure and presentation
- Simpler development and maintenance
- Better search engine rankings
- Faster download and rendering of web pages
- Better accessibility
- Wider reach
Additional Resources
- My Web site is standard! And yours? - http://www.w3.org/QA/2002/04/Web-Quality
- What are Web standards and why should I use them? - http://webstandards.org/learn/faq/
- Web Standards for Business - http://webstandards.org/learn/reference/web_standards_for_business.html
What are the benefits of using CSS?
- Heading outline navigation
- Announced page headers
- Data table navigation
[any material that should appear in print but not on the slide]
Semantics: Do you mean what you say?
- What is Semantics?
- Commonly Misused Tags
- Tip #1: Use semantics, avoid “divitis”
[any material that should appear in print but not on the slide]
Some CSS Examples
- Style Gala [Style Gala Archives]
- Unmatched Style [Unmatched Style Gallery]
- CSS Zen Garden [CSS Zen Garden Gallery]
- AIR Winner - Coefficient Design [www.johnpointer.com]
- AIR Winner: Frog Design [www.umlaufsculpture.org]
[any material that should appear in print but not on the slide]
Exercise #1: What are some uses for these tags?
- Headings [H1,H2,H3,H4,H5,H6]
- Lists [OL,UL]
- Text Containers [BLOCKQUOTE,Q,P]
- Anchors [A]
- Definition Lists [DL]
- Bonus 1: What should they not be used for?
- Bonus 2: What tags should be avoided?
Additional Resources
- Semantics, HTML, XHTML, and Structure - http://brainstormsandraves.com/articles/semantics/structure/
- HTML, XHTML, semantics and the future of the web - http://www.westciv.com/style_master/house/good_oil/xhtml/
- About the Talking About Semantics - http://www.simplebits.com/notebook/2003/09/28/about_the_talking_about_semantics.html
CSS Layout 101: What should you do?
- The anatomy of a CSS element
- Learn the box model [The box model at W3C]
- Best practices in layout and structure control
- Tip #2: Start with a framework in mind
- Tip #3: Use a standard typography stylesheet [New Sample typography template]
- Tip #4:Use a standard layout stylesheet [New A CSS Framework]
Additional Resources
- A CSS Framework - http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
- CSS Discuss Wiki Layouts - http://css-discuss.incutio.com/?page=CssLayouts
- A Solution for Clearing DIVs - http://positioniseverything.net/easyclearing.html
- Common Names for CSS elemtns - http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
- The Box Model Hack - http://tantek.com/CSS/Examples/boxmodelhack.html
Exercise #2: Creating a vertical navigation bar
CSS can easily be used to style vertical menus. Let's create the menu below
Additional Resources
- Brother Cake's Ultimate Drop down menu - http://www.udm4.com/
- List-a-matic - http://css.maxdesign.com.au/listamatic/
Exercise #3: Creating a horizontal menu bar
While not as straight forward as a vertical menu horizontal menus can be created in CSS as well
Exercise #4: Creating CSS Button
Now let's create a CSS button
Image Replacement, Hacks and More
- Leahy/Langridge Image Replacement (LIR)[How-To]
- Rundle’s Text-Indent Method [How-To]
- SiFr version 2 [How-To]
- If you must use a hack [CSS Hacks at CSS Wiki]
[any material that should appear in print but not on the slide]
Additional CSS Best Practices
- Tip #5: Try to allow your page source code to be read in order
- Tip #6: Always specify a generic fallback font
- Tip #7: Reveal acronyms and abbreviations
- Tip #8: Base
classandidnames on structure, not style
[any material that should appear in print but not on the slide]
Additional CSS Best Practices Cont'
- Tip #8: Build and test your CSS in the most advanced browser available first
- Tip #9: Reduce code by combining selectors
- Tip #10: Don’t use quotation marks around paths/URLs
- Tip #11: Remember “LoVe/HAte” linking
- Tip #12: Rock around the clock when using shorthand
[any material that should appear in print but not on the slide]
Closing Thoughts and Resources
- Getting ready for rally day
- Makiing it through rally day
- How to win [Revised AIR Judging Criteria]
- What can I do? [AIR Rules and regulations]
[any material that should appear in print but not on the slide]