Category: color

Podcast #73: Bandwidth & Download Time

Post author By Dennis
Post date August 9, 2009
1 Comment on Podcast #73: Bandwidth & Download Time

Dennis and Ross provide nearly an hour of news, knowledge, and fun!

Download Web Axe Episode 73 (Bandwidth & Download Time)

Michigan and Web Dudes, Lab, and Accessible Twitter

Dennis’ vacation including visit to Michigan

Met creators of BongoTones
Met creator of Twilk

Web Accessibility News

WebAIM – Colors and Links and WCAG 2.0
ACCESS-IT 2009 Awards

Nominations will be submitted online only.
Submission deadline of nominations: 25th August 2009.

CVS Accessible Web Site and Point of Sale (nice sub-heading).
Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip by Jeremy Keith @adactio.
Accessible drag and drop using WAI-ARIA on Dev.Opera by Gez Lemon .
Don’t Just Tick Boxes – Meeting the diverse needs of your site’s visitors is likely to mean a great deal more than ticking off individual accessibility checkpoints.
AccessibilityWatch.com – fairly new accessibility blog (more than web).

Main Segment

The Issue & Statistics

Web accessibility is about providing content for everyone; even if the user is unable to have access to a broadband internet connection.
Economic issue; many people simply can’t afford broadband.
Mobile–light and fast web sites can be more easily viewed on you phone!
Average Web Page Size Triples Since 2003 (study from 2003-2008 data)
In the U.S. in March 2008, users connecting at 56Kbps or less now make up 11.18% of active Internet users.
CWA Communications reported that the “median real-time download speed in the U.S. is a mere 2.3 megabits per second (mbps). The best available estimates show average download speeds in Japan of 63 mbps, in South Korea of 49 mbps and in France of 17 mbps.

Chart shows that from January 1995 to January 2008, there was a tremendous growth of average page size and average number of objects. The average page file size went from 14.1k in 1995, to 93.7k in 2003, to over 312k in 2008. The average number of page objects went from 2.3k in 1995, to 25.7 in 2003, to nearly 50 in 2008.

Related WCAG Guidelines

WCAG 2.0 Principle 4: Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

WCAG 1.0 Intro states:

user may have a text-only screen, a small screen, or a slow Internet connection and users may have turned off support for images (e.g. due to a slow Internet connection)

Greatly outdated web portion of Section 508 doesn’t mention internet connection speed.

What You Can Do

Use progressive enhancement.
Optimize images; use sprites.
Write clean code.
Use external CSS and JavaScript files. For CSS, use not @import.
Combine multiple CSS files into one. Same for JavaScript.
Use media domains.
Minify CSS and JS files.
Setup your server to send pages and files compressed.

Cache dynamic data and Ajax when appropriate.

Sufficient Color Contrast

Post author By Dennis
Post date February 28, 2007
No Comments on Sufficient Color Contrast

On the blog Bite Size Standards, a post by Ann McMeekin Colour with Contrast discusses color and accessibility, and also provides some excellent links to tools and references.

code color design layout navigation podcast text

Podcast #34: Design Considerations for Accessibility

Post author By Dennis
Post date November 17, 2006
1 Comment on Podcast #34: Design Considerations for Accessibility

Considerations for designing an accessible web site, including discussion on web site conventions, navigation, color, text, and layout.

Download Web Axe Episode 34 (Design Considerations for Accessibility)

[Transcript for Web Axe 34]

Stick to Conventions

Search upper right
Global navigation across top
Sub navigation on sides
Icons

Navigation Considerations

Skip navigation
Indicate visited pages, current page
Use breadcrumbs where possible

Color Considerations

Ensure enough color contrast
Light on dark, or dark on light?
If you change the color of an anchor state, change them all
Never use color to convey information

Layout Considerations

If you have a low vision/large text style sheet, convert layout to one column
Pay attention to if it is obvious you can scroll downward or not
If Article is broken up between several pages, provide a link to a single page with the whole article for easy printing
Try and design for 760px minimum width

Text Considerations

Sans-serif fonts are generally easier to read on a screen

Print serif fonts are, but light reflects off of paper where screen illuminates light

Text Sizing

Ensure font can be enlarged with out breaking the design
Headers should be larger than regular text (to indicate more importance)
Fonts should be decent size, not everyone knows how to resize text

Other Considerations

Limit the use of Flash
Print Style Sheets
Graphical buttons should be text with graphical backgrounds (for sizing without pixelation)
Include an access guide, or site help
No flickering
Audio–plan for text-only version and links
Video–plan for real-time captioning

color validation

CSS Validator color warnings are not errors

Post author By Dennis
Post date October 10, 2006
No Comments on CSS Validator color warnings are not errors

A highly accessible web site uses web standards, which means XHTML and CSS. When using the W3C CSS validator to validate your CSS, many times the following warnings come up: “You have no color with your background-color” and “You have no background-color with your color”. In his blog posting, Roger Johansson explains why CSS Validator colour warnings are not errors. He states:

Those particular warnings are there for accessibility reasons and to remind you that you need to take care when specifying colours. The validator is trying to help you reduce the risk of your author stylesheets interfering with user stylesheets or system-wide colour settings.

color impairment podcast visual

Colors & Accessibility

Did you know that 1 in 12 people have some sort of color deficiency? This episode discusses colors and web accessibility including color contrast, conveying meaning through color, and CSS colors.

Download Web Axe Episode 16