This is one in a series of Presentations given by Bud Kraus, Web Design Instructor and Consultant. Contact Bud at bud@joyofcode.com or 973 25 1452 if you'd like him to present any of these talks to your business or organization.
Summary
The benefits of making content accessible to the widest possible audience is not just about serving the needs of a growing group of disabled users. It's about reaping the benefits of best practices in web design and working with - not against - the properties of the electronic canvas.
This seminar has been presented before a wide variety of users - educators, business people and information designers.
Contents
Greetings
I'm a practitioner and promoter of accessible web design and I'm
- the creator and Friendly Instructor of the joyofcode.com site featuring the 12 week online Workshop, Introduction To XHTML And CSS.
- the guy who rescues web templates, pages and sites suffering from bad, old tag soup with Code Aid using web design standards.
How did I get here?
Confluence of 3 major developments.
- Learning then teaching HTML and Web Design.
- Searching for an overriding design philosophy I could take to every project.
- The ability to see the world from a different perspective (that's my unfair advantage).
The marriage of all these forces led me to Accessibility As Design Construct.
What do I do with Accessibility As Design Construct?
Bring it to every project and everything I do.
- projects where I have oversight responsibilities
- consultation services, including site evaluations and repair strategies
- in the work I have created for the educational environment
- drive everyone crazy
OK, I am biased.
School of Design Engineers vs. School of Design Arts. Form follows function.
The Greater Good
Design which works for everyone, everywhere is not about making sites for relatively few user groups. But it is about tearing down barriers to content which benefits everyone, everywhere.
Accessibility Unplugged is not about making you an expert on accessible web design. But it is about making the concept and techniques of open, or universal design, more...well...accessible.
The aim here is the utilization of best practices to give a user the best possible experience and the site owner a path to achieving objectives.
Designs which are accessible and work for everyone rely upon:
- Best Practices
- Adherence To Standards
- Quality Control
Myths
- Accessible sites are ugly, without graphics.
- All you have to do is put alternative text (Alt="") in your IMG tags and you're all set.
- Create a "text only" version of your site.
- Authoring Tools like Dreamweaver MX or Tool Assistants such as LIFT for Dreamweaver prompt content authors to create accessible information flawlessly.
- Creating sites which are accessible is difficult, time consuming, and costly.
- Only sites which are likely to be used by people who are disabled need to be accessible.
- The web is just a visual space.
Benefits
What have corporate executives learned about their web initiatives?
New revenue streams or expense reduction measures can not be achieved to fullest potential until a satisfying user experience, dependent on an accessible and usable interface, has been created.
Breaking down barriers to content benefits users and owners alike:
- Design Reliability and Integrity
- User Centric Satisfaction -- a win-win for users and owners
Compliance with the pressures of law and societal expectations
Themes
Take a look around. What makes good design in everything we see, touch or do? Design that works well in the real world works well in this one too.
These themes support my ideas of Accessibility As Design Construct. Many - but not all of them - have their origins in the W3C's Web Content Accessibility Guidelines (WCAG).
Separation Of Structure From Style
Learn the rules, use the rules, break them at your own risk or at least be aware of the violations and what consequences you are willing to accept when the rules are broken.
- Keep structure apart from style by using XHTML (Extensible Hyper Text Markup Language) for page structure and CSS (Cascading Style Sheets) for page styling.
- Use proper W3C (World Wide Web Consortium) markup grammars such as XHTML, CSS, and SMIL and create well formed documents that validate to published norms.
Graceful Transformation
- Are your information designs backwardly and forwardly compatible?
- Are your designs going to work in legacy as well as new technologies?
- Will your work transform to apply in yesterday's and tomorrow's environments?
Resolve these questions putting accessibility at the center of your information designs and you can rest easier that it will also work best with today's technologies.
Design Independence
Superior design does not rely upon the presence of one type of
- Hardware
- Pointer
- Display Device
- Other Hardware
- Software
- Operating System
- User Agent (browser)
- Display Driver
- Font
- Other Software
Design independence recognizes the wide variety of environments - user agents, assistive technologies and devices within which your design must reliably operate.
Hardware Independence
What if...
- a keyboard were the only pointing device someone could use?
- a blind user relied solely on a refreshable braille device?
- some one could only navigate your pages using voice commands?
All of these modalities are here today and new ones are on their way.
Are your designs accessible without using a mouse? Equivalent alternatives are your key to design independence.
Software Independence
Do your designs work best (or only) with one type of...
- platform?
- browser?
- display driver?
- or font?
The Old World - print publishing - featured a fixed canvas (paper) with absolute font sizing and positioning. The New World, electronic publishing, runs in a scalable canvas calling for relative sizing and proportionality. These are immutable laws of nature. Do you choose to work with them, leveraging the power of their inherent characteristics, or against them?
Working with these laws makes it far more likely that your designs will work with emerging technologies such as:
- Wireless Devices
- Information Appliances
- Other Industrial, Commercial And Private Use Applications
Consistent Navigation
Reliable navigation fosters user orientation which is critical to good design. Make sure the user knows where she is at all times.
Hallmarks of consistent navigation.
- Expected
- Uniform
- Grouped
Users are most unforgiving with bad navigation and will use this as a big reason to leave your site. (The "Oh, the heck with it" phenomenon.)
Navigation in the hypertext environment draws from its antecedents in print and other media but it has also developed a convention of its own. Refrain from "navigation invention." Use navigation systems that people have come to expect.
Simplicity And Elegance
- Subjective concepts which deliver presentation that does not crowd out the message intended by its creator
- Bringing a timelessness to designs which ensure they don't get outdated even before they are launched
Transparency And Persistency
- Absolutely not a requirement under any guideline or standard but a personal preference
- Where I can create the equivalent of invisible ramps and curb cuts I do
- Accessible design is embedded throughout the site and is everywhere. It's not something tacked or layered on.
From Here To There
What strategies should you employ to transform your content so that it can be reached and understood by the greatest number of people? A site remediation plan uses an Evaluation and Repair Process.
Evaluation - Discovering Barriers To Content
Step 1 - Site Audit
- Site wide scan conducted to get an overview of issues likely to be encountered.
- Useful in identifying issues which may be exceptions to what is found in templates.
- A Site Audit Report provides the Quantitative Analysis and other global facts needed to make intelligent site analysis.
Step 2 - An Accessibility Policy Statement
Following review and discussion of the Site Audit a consensus is reached as to the benchmarks that must be achieved and those that might be reached.
- A Web Accessibility Policy is developed. Will the site follow the Web Content Accessibility Guidelines or the Federal Section 508? Can it be a hybrid? What impact will evolving New state and local laws have on the objectives needed to be achieved?
- What operating systems, user agents and assistive technologies will be supported?
- A policy statement can also address methods used to repair and or rebuild and to safeguard accessible design.
Step 3 - Site Accessibility Evaluation Report
Results of global sweep, templates and key pages are thoroughly analyzed and reported upon against the Accessibility Policy Statement.
Reviews are not conducted just by running key pages through industry evaluation tools but by reading key files line by line to gain the best possible insight as to its construction and issues pertaining to content barriers. This process involves careful examination of all files - images , style sheets, external javascript including files used in achieving browser compatibility.
The results of testing using a variety of operating systems, user agents and assistive technologies are also part of Step 3 and used in the creation of a Site Accessibility Report which incorporates the total of all findings.
Repair - Road To Recovery
Step 1 - File Documentation
Before any files are amended page structures need to be properly labeled, issues specifically located and addressed and documented. This information is drawn from the results of the report made from Step 3 above -- Site Accessibility Evaluation.
Step 2 - Implementation
First revisions are made during this step. It frequently includes a series of operations that include code clean up, page commenting and other production and design enhancements. It also includes image and color revisions, script amendments and changes to using the CSS mechanism. It takes into consideration production and publishing methodologies and human resources.
Step 3 - Testing
Involves running templates and key pages undergoing remediation through a process similar to Step 3 -- Site Accessibility Evaluation. Industry tools are used including an examination of page operations within the user agents, operating systems and assistive technologies identified in Step 2 above -- Site Accessibility Statement.
Step 4 - Revisions and Re-tests
Using a Feedback Report generated in the previous step revisions are made. The page under goes re-testing, repeating all of the testing methods used in Step 3.
These last two steps - Step 3 Testing and Step 4 - Revisions and Re-testing are repeated until the page meets the requirements as defined in the Site Accessibility Statement.
The Top 10
Before we get to my list I had to share with you Ten Blunders written by Trenton Moss, founder of Webcredible, that the big players have committed. (Maybe some of these blunders will have been remedied by the time you get to see them).
Now, my list that the big boys and girls ought to be following:
1. Use W3C Technologies
Use XHTML, CSS and XML (Extensible Markup Language) and similar markup systems as being developed by the W3C. Those vendor neutral technologies enjoy the broadest support among user agents and have the widest installation base in the world.
2. Use Formal Markup Grammars Correctly
- Use XHTML for its strengths and what it is designed to do - provide the structural framework for the page. And use CSS for it's styling and positional properties.
XHTML is used for the structure, the foundation, the girders and ibeams of pages. CSS is used for style and positioning. It's the floor treatments, color of the exterior paint and distance placed between furniture in a cyber home.
Your HTML files are to function without the presence of styling information - that's the separation of structure from style.
Do not use deprecated elements such as FONT and CENTER or deprecated attributes such as Bgcolor, Hspace and Vspace.
3. Design For The Electronic Canvas By Favoring Relative Over Absolute Sizing
Design is a decision making process.
This environment calls for the use of relative, proportional and scalable topography over fixed width measurements. That is the only approach which ensures design reliability and leverages the flexibility of the user interface.
- no need for spacers, shims and other invisible transparent files which adds to site overhead and download delay
- font sizing expressed as a percentage of user's preference and not a fixed measurement
See another presentation I give, The Electronic Canvas: Designer Beware!! which gets after the not to be under emphasized differences between print and electronic design.
4. Use Alternatives To Achieve Design Independence
Better design requires alternative markup and text descriptions. Some examples:
- Alt attribute for every image (Where an image is only decorative use Alt="")
- keyboard commands with mouse event handlers (e.g. onFocus with onMouseOver)
- redundant text links for server side image maps
- NOFRAME and NOSCRIPT
- text captioning for auditory content and audio description for video presentation
5. Test And Validate Design During Development And Production
This is not like spell checking.
Do not wait until a page is almost finished before validating the file. It's too late by then. Code should be validated and cleaned throughout all phases of design and production.
| Tools | Purpose |
|---|---|
| TAW Web Accessibility Test or Cynthia Says | Checks for Accessibility (WCAG or Section 508) |
| W3C HTML Validation Tool | Checks for Conformance to HTML specs |
| W3C CSS Validation Tool | Checks for conformance to CSS specs |
I have a considerable list of other validation and quality control resources ranging from browser compatibility and color analyzers to accessibility tools which are available by request.
6. Group Content To Aid In Comprehension And Orientation
Grouping page components -- text, links, images - is the way to assist users wit understanding page content and navigation within the page.
- link mechanisms for contextual, navigation and external references
site map - Heading tags to separate content
- FIEDLSET and LEGEND to group Form controls
- OPTGROUP to group select menu items
7. Design From The General To The Specific
Organize information to move from the top to the bottom.
Page Design
- top and left is the most important screen real estate
- general information at the top and specific information toward the bottom
- each page requires self-integrity
Site Design
- organize site folders and files in a hierarchy - general to specific
- facilitate easier reference
8. Use Metadata
What you don't see in your browser could be as important as what you do. Make sure to include all proper documentation for your files:
- DOCTYPE statement (hard to validate without)
- TITLE
- META tags (description and content)
9. Set An Accessibility Objective
What are you trying to achieve? Are you required by Federal law to comply with Section 508? Is the operation of a Section 508-like law for state or local policy in place? Do you need to comply with the Web Content Accessibility Guidelines as developed by the W3C's Web Accessibility Initiative?
Perhaps you have the freedom to develop your own standards by cobbling together the best and most practical ideas of accessible design.
Whatever objective is required or agreed upon ensure that it is properly developed and articulated to key players: executives, legal staff, web development team - and that a system is put in place to monitor adherence and maintain compliance with objectives.
10. When Content Cannot Be Made Accessible Create A Separate Accessible Page ONLY As A Last Resort
If you can't make something accessible you have three choices:
- Don't do it but think of an alternative (simplify)
- Create a separate page that is accessible as a last resort
- Call me. 973 235 1452!! :-)
Sources
Here's another resource, like the above, that'll give you some good tips and tools on accessible web page design.
I recommend all of these books which were used, in part, as reference for this presentation.