Highlights of Week 30/2010
Posted by Michael Gaigg
- How Web Designers Can Adopt a Global Mindset (by Christian Arno) - Cultural differences are shamelessly overlooked, depending on your audience that might be ok but you should know... read the article.
- User Interface Design Framework (by webalys) - a really nice set of flexible GUI elements, free icon library and a graphic style library.
- The Hackday Toolbox – getting you started faster (by Chris Heilmann) - wow, what a great set of resources to get you started with YQL for PHP and JavaScript.
- How to Navigate Design by Committee (by Andrew Follett) - Andrew outlines a feasible approach to steering design discussions into a successful direction.
- Accessiblity Forum 2.0 (by buyaccessible.net) - promising blog to follow if you are into accessibility.
- 10 Free Online Books for Web Designers (by Henry Jones) - add to your never ending supply of good stuff.
Highlights of Week 14/2010
Posted by Michael Gaigg
- Aggressive, spiky button vs. rounded corner button (by 37signals) - snapshot of the fantastic video The Science of Aesthetics (by Keith Lang)
- iPad Accessibility (by Kel Smith) - with all the buzz around the iPad... what about accessibility? Jennison Asuncion on How to Make a Screencast for Your Website (by Stu Green) - another amazing tutorial posted on webdesignerdepot.
- A Basic Look at Typography in Web Design (by Shannon Noack) - typography is more important than one might think, worth another look, again.
- You’re Failing as a Web Developer — and Here’s Why (by Louis Lazaris) - hahaha, you think 'specs' are glasses... a good one.
Highlights of Week 12/2010
Posted by Michael Gaigg
I'm still feeling enriched by the exciting sessions presented at the Web App Masters Tour in San Diego. Check out Luke's notes of all the 9 sessions presented - fantastic!
- Techniques for Squeezing Images for All They’re Worth (by Ben Gremillion) - image optimization is key to fast loading web sites.
- UX Design Versus UI Development (by Mike Hughes) - who designs and who builds and where do they overlap? Is it about data?
- Board Releases Draft Refresh of Section 508 Standards and Section 255 Guidelines (by Tim Creagan) - a major step towards WCAG 2.0 becoming a law.
- 20 Portable Applications Web Designers Should Have On Their USB Sticks (by Joel Reyes) - go get a memory stick
- Understanding the Power of Social Media with Infographics (by Paul Andrew) - some real gems there.
- Adobe expanding the accessibility of Acrobat and Flash! (by Jeff Singleton) - don't know how they relate exactly to WCAG but surely welcome to see.
- The Impossible Bloomberg Makeover (by Dominique Leca) - a great example of the kitchen-cabinet problem.
- 10 Principles of UX (by Joshua Porter) - very nice top 10 collection.
Highlights of Week 07/2010
Posted by Michael Gaigg
- The Skinny on CSS Attribute Selectors (by Chris Coyier) - CSS attribute selectors are really useful and I've been using them for ages; here a nice summary by Chris.
- Common Misconceptions about Web Designers (by Shannon Noack) - working odd hours? When was the last time I've seen day-light?
- CSS files downloaded twice in Internet Explorer with protocol relative URLs (by Robert Nyman) - and Robert gives three nice (and trivial) examples on how to avoid it.
- Create a Clean and Professional Web Design in Photoshop (by Waheed Akhtar) - Step-by-step guide for Photoshop geeks. Really basic but a nice start.
- Is Web accessibility a human right? (by Vlad Alexander) - excellent article; and Ian Pouncey's response: Accessibility is a human right.
- How to Make Your Small Business Geolocation-Ready (by Leah Betancourt) - jump on the train of geographically optimized interaction!
- The Browser Choice Screen for Europe: What to Expect, When to Expect It (by Dave Heiner) - Microsoft finally bowed to pressure by the EU (better late than never).
- 25 Beautiful Examples of “Coming Soon” Pages (by Tyler Denis) - get inspired; and Walter offers similar A Collection of “Coming Soon” Web Pages
Highlights of Week 04/2010
Posted by Michael Gaigg
- Win 5 Copies of “Fluid Web Typography” (by WebdesignerDepot) - leave a comment with your favorite typography link for the chance to win a copy of Jason Cranford Teague's book (I hope this trackback counts as a comment .
- Finding the current location by IP and with the W3C Geo API (by Chris Heilmann) - nice writeup on how to read the IP in PHP and call the API with cURL.
- Web accessibility myths (by Ian Pouncey) - accessibility isn’t a target to aim for, it is a goal to aspire to.
- 13 video player UIs in 24 hours (by Jason F.) - form follows function, or not? What do you think about these media players?
- There are always more than two options (by Derek Sivers) - couldn't agree more. Counting choices means limiting yourself, like "all flights to Europe are too expensive therefore I cannot go to Europe" - how about taking a cruise?
- Resist the urge to punish everyone for one person's mistake (by Derek Sivers) - another great by Derek, on how to stay positive when your thinking is clouded.
Highlights of week 01/2010
Posted by Michael Gaigg
Happy New Year everybody! Hope you are healthy and fully motivated for a new decade of great things to happen. It's going to be great!
If the last decade gave us wikipedia, digg, facebook and all the other fascinating apps based on web 2.0, collaboration and connection then we can truly be excited of what lies ahead of us - I am!
Highlights of week 01/2010
Here is what made me happy last week:
- Placebos Are Getting More Effective. Drugmakers Are Desperate to Know Why (by Steve Silberman) - Belief is power, color, shape and labeling are important triggers for effectiveness; good article on wired; applicable to web design as well?!
- WAI initiative: Speak up! Tell organizations if their website is inaccessible - Take a few minutes to encourage web accessibility. Your voice counts.
- Myths & Misconceptions About Grid Systems - I'm a big believer in grid systems, but is it a one fits all? Do grid systems benefit each and every development? Is a website less valuable when not based on a grid system?
- Simple Numbers, Complicated Dates: 49 Innovative Calendars (by Michael Poh) - Start the New Year with some creative calendars.
- Web Design Trends and Resolutions for 2010 - A good collection and reflection by designreviver.com
- More Like This: A Design Pattern (by Greg Nudelman) - Design Patterns like 'More like this' help to speed up development, define a common language and should be part of everybody's toolkit
- Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors (by Nate Eagle) - How to design them correctly, please have a look, no excuses later!
Best Practices for Accessible Stylesheets
Posted by Michael Gaigg
Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.
The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:
- Can be re-used for many documents
- Saves download times by caching by the browser
- Presentational changes are fast and easy and only in one document
- Development can be done independently from content and logic
- Increases ability to program for device independence
- Application of different styles for different output formats (e.g. print)
Basic Rules
- Add Stylesheets whenever possible (minimize number of stylesheets)
- Use them consistently across all pages
- Use linked stylesheets rather than embedded styles; avoid inline stylesheets
- Stylesheets do not substitute correct and meaningful structure
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Organize documents so they may be read without style sheets | 6.1 | d | Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements). |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Use style sheets to control layout and presentation | 3.3 | n/a | <HEAD> <TITLE>Drop caps</TITLE> <EM class="highlight" title="provide STYLE element">STYLE</EM> type="text/css"> .dropcap { font-size : 120%; font-family : Helvetica } </EM class="highlight" title="provide STYLE element">STYLE</EM>> </HEAD> <BODY> <P><SPAN class="dropcap">O</SPAN>nce upon a time... </BODY> |
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Create a style of presentation that is consistent across pages | 14.3 | n/a | A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content. |
Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>
/* Base CSS Document */
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
References
- Chisholm. W., Vanderheiden, G., Jacobs, I.; CSS Techniques for Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10-CSS-TECHS/
Best Practices for Accessible Frames
Posted by Michael Gaigg
Frames are hardly used anymore (thanks God) but they can be useful and a good method to organize huge sites with lots of content, e.g. document libraries, API documentation, etc.
The 508 standard has no objection against frames and screen readers can handle frames well even though it might be difficult to comprehend the structure. The following basic rules and best practices outline how one can make frames accessible:
Basic Rules
- Title frameset and frames with meaningful names (descriptive instead of location, i.e. ‘navigation’ instead of ‘left’)
- Provide an alternative (NOFRAMES tag)
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Provide a text equivalent for every non-text element | 1.1 | a | <FRAMESET cols="50%,50%" title="...">
<FRAME src="sitenavbar.htm" ...> <FRAME src="story.htm" ...> <NOFRAMES> [<A href="sitenavbar.htm" title="...">Table of Contents</A>] [<A href="story.htm" title="...">Story</A>] </NOFRAMES> </FRAMESET> |
| Title each frame to facilitate frame identification and navigation | 12.1 | i | <FRAMESET cols="10%, 90%" title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> </FRAMESET> |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone | 12.2 | i | <FRAME src="sitenavbar.htm" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.htm#navbar">
<FRAME src="story.htm" name="story" title="Selected story - main content" longdesc="frameset-desc.htm#story"> |
Template
<frameset cols="50%,50%" title="Our library of electronic documents">
<frame src="navigation.htm" title="Navigation bar">
<frame src="start.htm" title="Main Content">
<noframes>
[<a href="navigation.htm" title="Navigation bar">Table of Contents</a>]
</noframes>
</frameset>
References
- WebAIM; Creating Accessible Frames; http://webaim.org/techniques/frames/
Best Practices for accessible Images
Posted by Michael Gaigg
Graphics can be of great benefit to the accessibility of a Web page by providing
- Illustrations
- Icons
- Animations
- other visual cues that aid comprehension for sighted individuals
When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Basic Rules
- Do not use color alone to convey meaning
- Choose contrast so that text is easily distinguishable from the background
- Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
- When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
- Use empty alt text for decorative, transparent, spacer, and redundant images
- Try to limit the amount of text in graphics
- Do not use effects that flicker or produce a strobe-like effect
- Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Ensure that all information conveyed with color is also available without color | 2.1 | c | Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute). |
| Until user agents allow users to control flickering, avoid causing the screen to flicker | 7.1 | j | n/a |
| Provide text equivalent for Images, graphical or animated buttons, spacers, bullets | 1.1 | a | <FORM action="..." method="post">
<INPUT type="button" alt="Click this button to verify form" value="Verify" onclick="verify()"> <INPUT type="image" name="submit" src="button.gif" alt="Submit form"> </FORM> |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen | 2.2 | c | For more information check the online paper about Effective Color Contrast. |
| When an appropriate markup language exists, use markup rather than images to convey information | 3.1 | n/a | Mark up complex equations with e.g. MathML. |
| Avoid causing content to blink | 7.2 | n/a | n/a |
| Avoid movement in pages | 7.3 | n/a | i.e., hide/show content or change presentation (movement and colors). |
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page | 14.2 | n/a | n/a |
References
- Arditi, Aries PhD. Effective Color Contrast. http://www.lighthouse.org/color_contrast.htm
- Ion, P., Miner, R. (editors); Mathematical Markup Language. http://www.w3.org/TR/REC-MathML/
- WebAIM; Creating Accessible Images. http://webaim.org/techniques/images/
Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
Posted by Michael Gaigg
Overview
Last week the W3C announced the publishing of the Web Content Accessibility Guidelines (WCAG) 2.0 as a final Web Standard "W3C Recommendation". This is good news for many reasons:
- Guidelines are more specific, e.g. specifying contrast ratio or time-based actions in seconds.
- Success Criteria are written in a technology neutral fashion.
- Success Criteria are written as testable statements.
- Past killer arguments like "Javascript is forbidden" are now included as a technique to enhance accessiblity.
- Gathering 'implementation experience' is now part of the W3C Process.
- Guidelines include requirements related to informing users of data entry errors.
WCAG 2.0 Overview showing Principles, Guidelines, and Success Criteria (Level A, Level AA, Level AAA).
But what I personally like the best is the revamped structure called layers of guidance:
Structure
The four principles of Web accessibility: perceivable, operable, understandable, and robust.
The WCAG 2.0 define a logical hierarchy of accessibility guidelines called layers of guidance. All of these layers work together to provide guidance on how to make content more accessible.
Principles
The foundation is built on four principles that are essential for anyone to access and use Web content, i.e. every Web content must be:
- Perceivable
- Operable
- Understandable
- Robust
These principles are the four pillars of Web accessibility and describe at a high level what can be done to assist users with varying needs to successfully access your content.
Guidelines
The 12 WCAG 2.0 Guidelines provide basic goals for creating accessible content.
The 12 guidelines are basic goals that authors of Web content should work toward in order to create accessible content. None of them are testable and are only meant as a framework of overall objectives. The guidelines are:
- 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- 1.2 Provide alternatives for time-based media.
- 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- 1.4 Make it easier for users to see and hear content including separating foreground from background.
- 2.1 Make all functionality available from a keyboard.
- 2.2 Provide users enough time to read and use content.
- 2.3 Do not design content in a way that is known to cause seizures.
- 2.4 Provide ways to help users navigate, find content, and determine where they are.
- 3.1 Make text content readable and understandable.
- 3.2 Make Web pages appear and operate in predictable ways.
- 3.3 Help users avoid and correct mistakes.
- 4.1 Maximize compatibility with current and future user agents, including assistive technologies.
Success Criteria
WCAG 2.0 Success criteria shown in three column: column 1 (red) are Level A, column 2 (yellow) are Level AA, column 3 (green) are Level AAA.
Now, the success criteria is where the meat is. For each Guideline, testable success criteria are provided. Every Web content or series of Web content (complete web page or series of connected pages) can be tested and evaluated against these criteria and further assigned a true/false (equals pass or fail) value.
These success criteria are further divided into three levels of conformance, meaning satisfying all the requirements of a given standard, guideline or specification:
- Level A (lowest; minimum level of conformance)
- Level AA
- Level AAA (highest)
The notion of conformance is so important that I will discuss it in a separate blog entry.
Sufficient and Advisory Techniques
Up until now all the principles, guidelines, and success criteria are written in a technology neutral fashion. That's great but what now? The Working Group has identified and published examples for HTML implementations that should serve as examples and tutorials and are kept in the living document called Techniques for WCAG 2.0. This document explains a variety of techniques on how to implement the given guideline for each success criteria. The list is not complete and will be expanded as new techniques are discovered.
The techniques fall into two categories:
- Sufficient techniques: considered to be sufficient to meet a success criteria.
- Advisory techniques: enhance accessibility, but did not qualify as sufficient techniques.
Most Success Criteria have multiple sufficient techniques listed. Any of the listed sufficient techniques can be used to meet the Success Criterion. Also there may be other techniques which are not documented by the working group that could also meet the Success Criterion. This is especially true for content that is not HTML.
Resume & Criticism
I'm really excited about the WCAG 2.0, their clear structure and promising, almost marketing-like wording. I also like the amount of effort taken to document examples, techniques and common failures.
What I miss is the programmer perspective that outlines each element with its associated success criteria and code samples, e.g. how can I make tables accessible, what about links, captcha, maps, etc.? I think this work is up to us and I will continue to tackle this issue by grouping, summarizing and compiling elements so I can publish them on this blog.
What are your opinions on WCAG 2.0?
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Go figure: 10 Comic Strips that have Something in Common
- Powerpoint Wireframe Stencils as Free Download
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 3 weeks ago
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...