Nate Koechley's Blog

Opera 8: Max Value for Text Indent

Nick Rigby discovers and writes that Opera 8 has a maximum text-indent value of 32697 pixels.

Clearly this is an edge case and not all that common, but those that use the "off-left" technique might find something familiar in his quote:

There would be no need to ever use a value this large, but I happened to be using -9999em originally, which, depending on the default font-size of the document, is a lot more than this limit value. Hence, it did not work in Opera 8.

Anyways, just a little tip for your toolbox.

DOM Scripting Task Force - WaSP

Once again the fine folks at the Web Standards Project are helping us all move the industry forward, this time with the launch of their DOM Scripting Task Force as announced in their buzz archive today.

"The skillset of a front end programmer is a three-legged stool: structure (XHTML) is the first leg, presentation (CSS) the second, and behavior (DOM Scripting) the third," said Peter-Paul Koch, a prominent scripting expert and one of the founders of the task force. "These three legs should be equal, but at the moment the behavior leg is the shortest, least-valued and least-understood of the three, even though the DOM has been a W3C specification for seven years and enjoys relatively solid browser support."

They have a press release, a manifesto, and of course a website.

These topics aren't anything new necessarily, but it's good to see more and more developers picking up the torch. For more reading on this/these topics, check out these other posts from my blog: The Behavior Layer, Unobtrusively, and Semantic Markup - Create, Support and Extract.

If you eat and breath these topics, I'd love to hear from you and your resume.

DOM Scripting Task Force - WaSP

Once again the fine folks at the Web Standards Project are helping us all move the industry forward, this time with the launch of their DOM Scripting Task Force as announced in their buzz archive today.

"The skillset of a front end programmer is a three-legged stool: structure (XHTML) is the first leg, presentation (CSS) the second, and behavior (DOM Scripting) the third," said Peter-Paul Koch, a prominent scripting expert and one of the founders of the task force. "These three legs should be equal, but at the moment the behavior leg is the shortest, least-valued and least-understood of the three, even though the DOM has been a W3C specification for seven years and enjoys relatively solid browser support."

They have a press release, a manifesto, and of course a website.

These topics aren't anything new necessarily, but it's good to see more and more developers picking up the torch. For more reading on this/these topics, check out these other posts from my blog: The Behavior Layer, Unobtrusively, and Semantic Markup - Create, Support and Extract.

If you eat and breath these topics, please send me your resume.

Rendering CSS Efficiently - Insider Tips from Safari

I just came drown from altitude in the Himalayas, so I'm admittedly pretty far behind in my technology reading, email maintenance and blogging. That said, in beginning to catch up I came across this complex and interesting post from David Hyatt on his Surfin' Safari blog. For those of you that have been paying attention, Hyatt is a leading browser developer, having worked on Gecko at AOL, and in his current position largely responsible for the magic in Safari and Web Core.

His post deals with the challenges of rendering CSS:

One of the most interesting problems (to me at least) in browser layout engines is how to implement a style system that can determine the style information for elements on a page efficiently.

Hyatt has created a new, more efficient algorithm for doing this (and a few other related things). For the algorithm to work, it checks ten features of each DOM node. I'm blogging this because it presents a new optimization opportunity for web developers. By being mindful of these 10 items, and not needlessly failing the 10 tests, we'll take advantage of these new rending efficiencies in Safari. These aren't revolutionary steps, but there are situations where they will certainly be the tie-breaker between alternate approaches.

There are a number of conditions that must be met in order for this sharing to be possible:

1. The elements must be in the same mouse state (e.g., one can't be in :hover while the other isn't)
2. Neither element should have an id
3. The tag names should match
4. The class attributes should match
5. The set of mapped attributes must be identical
6. The link states must match
7. The focus states must match
8. Neither element should be affected by attribute selectors, where affected is defined as having any selector match that uses an attribute selector in any position within the selector at all
9. There must be no inline style attribute on the elements
10. There must be no sibling selectors in use at all. WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.

In web development there are often 6 different similar ways to do the same thing. What makes a good web developer is continually choosing the best of nearly-indistinguishable paths. These insider tips from Hyatt give us a more complete understanding of the guts of the browsers, and will help us choose the best methods.

Read about it in his own words here: http://weblogs.mozillazine.org/hyatt/archives/2005_05.html#007507

Awesome Firefox Extensions

Anthony Lieuallen of Arantius.com has a great page called Awesome Firefox Extensions. If you're new to Firefox or extensions, or are interested in finding some great new one, definitely head over there to check it out.

One extension not listed that I would personally recommend is Target Alert. This extension adds a small icon next to any links that aren't to standard web pages. For example, it inserts a small envelope icon next to any email links, and a small PDF icon next to any .pdf links. (The PDF alert is particularily useful, since loading a PDF is slow sluggish and I often want to avoid it all together!) It offers alerts for many file extension (you can turn on and off as needed), and also alerts to links that will open new windows. The new window alert is great, because I then know to press alt-shirt to force the load into a new tab instead of a new browser window.

Anyways, I've been meaning to publish my recommended list of extensions, but this will have to do for now.

Three Weeks of W3C

Below are pointers to about a dozen activites coming out of the World Wide Web Consortium over the last three weeks. You can follow along on their homepage or with their feed. Standards-based design and development can be about more than using existing standards; in the best cases, it's about helping to create the standards in the first place! By being aware of the work underway at the W3C, you can have a good sense of where the industry and technologies are going, even if you don't get your hands dirty in any of the working groups.

Working Draft: SVG's XML Binding Language (sXBL)

2005-04-06: The Scalable Vector Graphics (SVG) Working Group and the CSS Working Group have released a third Working Draft of SVG's XML Binding Language (sXBL). The sXBL language defines the presentation and interactive behavior of elements outside the SVG namespace. The XBL task force welcomes comments and seeks feedback on three issues outlined in the status section. Visit the SVG and CSS home pages. (News archive)

Last Call: XQuery, XPath and XSLT

2005-04-04: The XML Query Working Group and the XSL Working Group released twelve Working Drafts for the XQuery, XPath and XSLT languages. Seven are in last call through 13 May. Important for databases, search engines and object repositories, XML Query can perform searches, queries and joins over collections of documents. XSLT transforms documents into different markup or formats. Both XQuery and XSLT 2 use XPath expressions and operate on XPath Data Model instances. Visit the XML home page. (News archive)

Working Draft: Compound Document Use Cases and Requirements

2005-04-04: The Compound Document Formats Working Group has released an updated Working Draft of Compound Document by Reference Use Cases and Requirements Version 1.0. A compound document combines multiple formats, such as XHTML, SVG, XForms, MathML and SMIL. This draft introduces compounding by a reference like img, object, link, src and XLink. Compounding by inclusion is planned for a later phase. Visit the Compound Document home page. (News archive)

Last Call: Web Services Addressing

2005-03-31: The Web Services Addressing Working Group has released two Last Call Working Drafts. Web Services Addressing - Core enables messaging systems to support transmission through networks that include processing nodes such as endpoint managers, firewalls, and gateways. SOAP Binding defines the core properties' association to SOAP messages. Visit the Web services home page. (News archive)

XML Binary Characterization Notes Published

2005-03-31: The XML Binary Characterization Working Group has released its evaluation, recommending that W3C produce a standard for binary interchange of XML. Published today as a Working Group Note, XML Binary Characterization is supported by use cases, properties and measurement methodologies. Optimized serialization can improve the generation, parsing, transmission and storage of XML-based data. Visit the XML home page. (News archive)

Upcoming W3C Talks

2005-03-31: Browse W3C presentations and events also available as an RSS channel. (News archive)

Last Call: XML Schema Component Designators

2005-03-29: The XML Schema Working Group has released a Last Call Working Draft of XML Schema: Component Designators. Comments are welcome through 26 April. The document defines a scheme for identifying the XML Schema components specified by the XML Schema Recommendation Part 1 and Part 2. Visit the XML home page. (News archive)

Working Draft: RDF/Topic Maps Interoperability

2005-03-29: The Semantic Web Best Practices and Deployment Working Group has released the First Public Working Draft of A Survey of RDF/Topic Maps Interoperability Proposals. The document is a starting point for establishing standard guidelines for combined usage of the W3C RDF/OWL family and the ISO family of Topic Maps standards. The group expects to publish Survey and Guidelines Working Group Notes based on this draft. Visit the Semantic Web home page. (News archive)

RDF Data Access Use Cases and Requirements Updated

2005-03-25: The RDF Data Access Working Group has released an updated Working Draft of RDF Data Access Use Cases and Requirements. The draft suggests how an RDF query language and data access protocol could be used in the construction of novel, useful Semantic Web applications in areas like Web publishing, personal information management, transportation and tourism. The group invites feedback on which features are required for a first version of SPARQL and which should be postponed in order to expedite deployment of others. Visit the Semantic Web home page. (News archive)

C

all for Participation: W3C Workshop on XML Schema 1.0 User Experiences

2005-03-23: Position papers are due 20 May for the W3C Workshop on XML Schema 1.0 User Experiences to be held 21-22 June in Redwood Shores, California, USA. Schema authors and users, developers and vendors of schema-aware code generators, middleware, validators, and the W3C XML Schema Working Group will gather to discuss user experience with XML Schema 1.0. The workshop goal is to arrive at plan of action for XML Schema 1.0 interoperability, errata and clarification. Read about W3C workshops and visit the XML home page. (News archive)

Last Call: Timed Text Distribution Profile

2005-03-21: The Timed Text (TT) Working Group has released a Last Call Working Draft of the Timed Text (TT) Authoring Format 1.0 Distribution Format Exchange Profile (DFXP). The format enables authors and authoring systems to interchange style, layout and timing associated with text. DFXP helps to transform and distribute subtitles and captions to legacy systems. Comments are welcome through 11 April. Visit the Synchronized Multimedia home page. (News archive)

Working Draft: Compound Document Use Cases and Requirements

2005-03-15: The Compound Document Formats Working Group has released the First Public Working Draft of Compound Document by Reference Use Cases and Requirements Version 1.0. A compound document combines multiple formats, such as XHTML, SVG, XForms, MathML and SMIL. This draft introduces compounding by a reference like img, object, link, src and XLink. Compounding by inclusion is planned for a later phase. Visit the Compound Document home page. (News archive)

Working Draft: Timed Text Distribution Profile

2005-03-14: The Timed Text (TT) Working Group has released an updated Working Draft of the Timed Text (TT) Authoring Format 1.0 Distribution Format Exchange Profile (DFXP). The format enables authors and authoring systems to interchange style, layout and timing associated with text. DFXP helps to transform and distribute subtitles and captions to legacy systems. Visit the Synchronized Multimedia home page. (News archive)

Call for Participation: W3C Workshop on Frameworks for Semantics in Web Services

2005-02-10: Position papers are due 22 April for the W3C Workshop on Frameworks for Semantics in Web Services to be held 9-10 June in Innsbruck, Austria. Participants will discuss possible future W3C work on a comprehensive and expressive framework for describing all aspects of Web services. The workshop's goal is to envision more powerful tools and fuller automation using Semantic Web technologies such as RDF and OWL. Read about W3C workshops and visit the Web services home page. (News archive)

More Mac, More Firefox

John Battelle points to the updated Yahoo! toolbar and let's out a big "Yeeeehaw!" because it supports Mac users via Firefox.

Those involved in promoting standards-based developments are happy with each of these wins that directly benefit users. Way to go Yahoo! Toolbar.

Internet Explorer and Accessibility

From the IEBlog:

Today I wanted to talk about three aspects of accessibility as they relate to IE and Windows in general. First is access to the Windows OS for individuals with disabilities, second are a couple of hints for users of screen readers using IE in XPSP2 and finally is a request for feedback to help guide our development in IE7 and beyond.

While it's fun to pan Microsoft, and particularily, in my circles at least, Internet Explorer, I have to give them some credit for leaving comments enabled on their blog. It would be even better if they responded to some of the comments - a comment is more valuable if it initiates dialog - but at least they're doing an ok job experimenting in the blog space. It can't be a bad thing.

W3C: Working Draft: CSS3 Backgrounds and Borders

The CSS Working Group has released a Working Draft of CSS3 Backgrounds and Borders Module. The Cascading Style Sheets (CSS) language is used to render structured documents like HTML and XML on screen, on paper and in speech. Replacing two separate CSS3 modules, the draft proposes CSS Level 3 functionality including borders consisting of images and backgrounds with multiple images. (emphasis mine)

It's great to see work continue in these areas. It's due to their move to modularity that components can be released independently like this. I know I'm not alone in my excitment at the possibility of better control of backgrounds and borders (since so much of CSS design comes down to backgrounds and border tweaks).

W3C: Specifying the Language of XHTML and HTML Content

The W3C's Internationalization GEO (Guidelines, Education & Outreach) Working Group has published an updated Working Draft of Specifying the Language of Content. Part of a series designed for authors, the document is an aid to specifying the language of content for an international audience.

This is still a working draft, so comments are welcome!

Evolution vs Revolution in Web Standards

CNet's Paul Festa filed a story today, Fight over 'forms' clouds future of Net applications, with a subhead of "As Net heavyweights vie to define the next generation of Web applications, the Web's main standards body is facing a revolt within its own ranks over electronic forms, a cornerstone of interactive documents."

The article sheds some light on the WHAT-WG, as well as some of the players in this general saga. The most interesting section to me:

WHAT-WG members say the forms dispute illustrates a larger conflict over whether the W3C should proceed in a "revolutionary" mode, tackling problems from square one and coming up with technically elegant solutions--even if that results in the loss of backward-compatibility with older browsers--or an "evolutionary" mode, maintaining older technologies like HTML 4 and extending the usefulness of current browsing software.

I also enjoyed Steven Pemberton's comments:

"The WHAT approach works OK for small examples," Pemberton said. "But actors like the Department of Defense say 'no scripting.'"

And:

"I understand where WHAT is coming from, but they are browser makers, not forms experts," Pemberton said. "It is important to build something that is future-proof and not a Band-Aid solution. Forms (technology) is the basis of the e-commerce revolution and so it is important to do it right."

[All emphasis mine.]

News from the World Wide Web Consortium

For better or worse, I only catch up on my W3 reading every month or so. That said, here's the stuff that caught my eye recently:

• Call for Participation: W3C Workshop on Frameworks for Semantics in Web Services
• Working Draft: Glossary of Terms for Device Independence
• W3C Launches Voice Browser Activity
• 'Architecture of the World Wide Web, Volume One' is a W3C Recommendation

Browser Speed Comparisons

"There is a speed war on the web. Browsers compete on many fronts; security, standards support, features and speed. Most people are aware of which major browser fails on three of these, but one of them is still open for grabs. Speed."

Today’s Wrong Solution is Tomorrow’s Constraint

Layered Semantic Markup (LSM) is not a technology, but a framework comprised of HTML, XHTML, Cascading Style Sheets (CSS), Javascript, DOM and other Web technologies. LSM allows for appropriately implemented principles and standards.

LSM is a development framework for creating Web documents and experiences. LSM builds for the least capable devices first, then enhances those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. LSM supports all user agents, and is inclusive by design. (Progressive Enhancement - Unobtrusive Javascript)

LSM has structural semantic markup at its core, which provides lean, meaningful, accessible pages. This well-built core and the clear separation of structural, presentational and behavioral layers make this development philosophy superior to many short-sighted approaches.

Today’s wrong solution is tomorrow’s constraint. A holistic vision - an underlying philosophy - must guide technical decisions. LSM provides the strategy for a sound and future-ready approach.

LSM embraces Graded Browser Support by using one markup document, subsequently layered with stylesheets and scripts that provide a gradually enhanced experience across a wide variety of browsers and devices.

This approach has profound advantages over other browser support approaches such as graceful degradation. Graded Browser Support recognizes that advanced technology support is not a guarantee of the future, and that legacy software as well as alternative devices (mobile) must always be considered. Graded Browser Support defines support in terms of current capabilities, not in terms of legacy or obsolete software; it embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices; and it allows for adoption of new technology and strategies without leaving any browser/device behind.

Credits

This work is heavily influenced and contains directly passages from Debra Chamra's "Progressive Enhancement: Paving the Way for Future Web Design", Steven Champeon and Nick Finck's presentation "Inclusive Web Design For the Future with Progressive Enhancement", and Steven Champeon's "Progressive Enhancement and the Future of Web Design", all of which may be found here.

Thanks also to the great people who have endlessly debated and developed these topics with me: James Berry, Sean Imler, Todd Kloots, Jon Koshi, Mike Lee, Thomas Sha, Matt Sweeney, Chanel Wheeler, and Christina Wodtke; and everybody else; and to everybody who puts their ideas online so that others may be inspired. Thanks.

Mobile Content Market

From the Internet Stock Blog, some highlights from Verisign's conference call (VRSN):

"our mobile content services were the highlight… even without a major new market entry impacting Q4. Revenues… were up 27% sequentially, as we saw increased penetration in Europe and the initial contribution from Australia"

Clearly the U.S. market for mobile content is growing rapidly

Even if you're not interested in the money side of things, the Internet Stock Blog has some pretty sweet tidbits and insights.

Opera Interview; Opera v8 beta; XmlHttpRequest

Opera Watch (The Unofficial Opera Blog) has An Interview with Opera's Berit Hanson. It's a good read. It sounds like Opera plans to stay true to themselves, and if you read between the lines it sounds like they have some cool things just around the corner. Opera has always been the most innovative company and browser, so this comes as no surprise.

Beautiful API

This page is beautiful: http://www.flickr.com/services/api/. Every service-based web site should have a page like this.

This is a great way to understand and communicate your functionality. If you can't describe your site in these terms, well, start trying because you should be able to. (You don't have to make it public.)

I'm not here to talk about the benefits of web services and open APIs -- but at least internally, if you can think about your offerings in these clean and explicit terms you'll be much more successful.

We've moved beyond the "If you build it, they will come" days. We're now in the "If you offer it, they will build it" days. This cool map-based Flickr interface was built because the API existed.

Digital-proof that you should stop using Internet Explorer for your browser.

Digital-proof that you should stop using Internet Explorer for your browser.

The goal is simple: to collect a database of every single article ever published on the internet about why one should not use Internet Explorer.

Firefox Tip: Quick Complete URLs

Here is how I enter a new URL into the Firefox Address Bar. It is the fastest way to jump somewhere new (without linking), and it keeps my hands on the keyboard (not the mouse).

Step One ("Quick Complete" starts on Step Three, but this is a bonus tip, and will speeds things up too.):

Press "Alt-D" on the keyboard (hold down both keys at the same time). This will more the cursor to go to the Address Bar, and also select any URL that is already there. With all the text highlighted, the next thing you type will erase what's already there, saving you the step of manually erasing the current URL before typing a new one.

Step Two:

Type the base of the URL. In other words, if you want to go to http://www.yahoo.com, you'd only type "yahoo" at this point.

Step Three: Quick Complete

With just the base entered into the Address Bar, you now press "Control-Enter" to wrap the base with the full .com stuff. By pressing "Control-Enter", the base "yahoo" instantly becomes "http://www.yahoo.com. (You may use the 10-Key number pad's "Enter" key in addition to the primary "Enter/Return" key.)

If you want a .org address, press "Control-Shift-Enter" instead. This will turn "craigslist" into "http://www.craigslist.org".

With those three tiny steps, you'll be flying around in no time. Alt-D, "cnn", "Control-Enter" take no time at all.

Note: On Mac's, replace "Control" with the "Apple" key I think.

CSS Hack vs CSS Filter

I was in the midst of some late-night coding. Well, not really late-night I guess. Let me rephrase.

It was 10:30pm and I was just getting started with some nighttime coding. I was searching for something, and ended up reading a july 2003 evolt post. In it, PPK describes the difference between CSS Hacks and CSS Filters. I've read tons about each, but this is the first time that I really noticed their definitions.

CSS Hacks

Techniques and syntax that achieve desired results by exploiting a bug in a particular browsers rendering engine.

CSS Filters

Techniques and syntax that achieve desired results by exploiting a feature that a particular browsers rendering engine does not yet support.

CSS Hacks - Collection of Articles and Links

I've been thinking about CSS hacks lately, so I thought I'd gather together some of the resources I've been using and articles I've been considering.

• Over on CNET, Michael Meadhra writes (yesterday) CSS: To hack or not to hack. While not introducing much new information, and it's always useful to consider another professionals thought process and approach. In addition, he makes important reminders, including that our work is it's highest quality when we

  [think] of design and coding as parts of the same process and [are] willing to go through multiple iterations of the process to refine [our] design. It doesn't work if you approach coding as the task of precisely implementing a preconceived design.

• Doug Bowman has an article on his stopdesign site entitled Filtering CSS. The article gives some background on CSS hacks and filters, then introduces a new CSS filter that can be used to import a separate style sheet for IE5/Mac, named the IE5/Mac Band Pass Filter.
• Molly Holzschlag's piece for informIT, Strategies for Long-Term CSS Hack Management is definitely worth reading.
• No hack list would be complete without at least a passing mention of Tantek's Box Model Hack. Turns out I don't use it that often, but you still gotta have it in your toolbox.
• If you're not using del.icio.us, you definitely should be. Either way, you can find more CSS hack info in their collection: http://del.icio.us/tag/css-hacks
• In addition to those articles, there are a bunch of quality resources too: Centricle's CSS Filters (css hacks) compatibility grid, Dithered's CSS Filters main page, and the always useful CSS-Discuss Wiki has a dedicated page: http://css-discuss.incutio.com/?page=CssHack. If you still need more, there are about a quarter-million here.

Enjoy.

MIME Type Test Suite

I pointed to Juicy Studio's article It's all in the MIME a few days ago in my mini-blog. Well, Gez Lemon, the author of Juicy Studio, follows that up with some MIME Type Test Suites.

Did you notice the shameless plug for my Mini-Blog? Good. Enjoy it. (The 8 most recent posts to my mini-blog are included in the right column on my main blog.)

Why have a mini-blog? What's the difference? Who's idea was it? First of all, it wasn't my idea. I remember noting it first at my friend Ernie's blog, but it's pretty common and you'll find something similar at mezzoblue and even Digital-Web's What's New area.

Why have a mini-blog? The idea it to be able to quickly blog lots of things, without diluting the quality of the main blog. My mini-blog is hosted for free by bloglines. I read most of my feeds at Bloglines (it's my recommended RSS Aggregator). Their integrated publishing/blogging capabilities make it trivial to blog things of interest without breaking stride. Instead of writing a long entry of for this blog, I can just quickly and effortlessly flag things of interest and they show up in my mini-blog.

Anyways, I hope this will allow me to publish even more content, and that you find it interesting.

Now, go get a free Bloglines account, I can't recommend it enough!

Douglas Bowman's presentation from Web Essentials 2004 in Sydney

Doug Bowman, of Stopdesign and adaptive path, famous for the Blogger and Wired News redesigns, posts his great presentation Pushing Your Limits (And Other Secrets of Designing with CSS) from the Web Essentials 2004 conference in Sydney.

It's a great presentation, and beautiful too. Whether you know your CSS or not, it's well worth a click-through.

Accessibility Conference slides

Slides are up from the accessibility Conference at the University of Central Lancashire from 2004-06-23.

Speakers include:

Bob Regan - Macromedia Inc.
"Accessibility in Rich Media for the Web"
With the growing importance of rich media and multimedia on the web, it is important for educators to address issues of accessibility. This presentation looks at accessibility in the context of rich media, providing an overview of standards, common concerns and remedies to everyday issues. Real life examples will be used to provide a context for the issues presented.
Breeze Presentation + Slides

Jim Byrne - Making Connections Unit
"What is an accessible website?"
Examining common definitions of accessible web design, and discussing their practical implications for web ublishers/designers. By looking at accessible web design from the producers point of view (i.e., taking into account the reality of limited time and resources), and not just concentrating on consumer needs, we can derive some important practical lessons to help us in produce accessible sites. This approach leads to more flexibility, which (ironically) meets the needs of a greater number of end users.
Breeze Presentation (followed by Zoe Neumann) + Slides

Zoe Neumann - RNIB
"Is it legal? You decide..."
In this session, I will recap the requirements of SENDA and present some e-learning experiences students have described. The audience will consider the experiences and vote on the legality of the provision, how beneficial adjustments can be made and ponder "inclusion".
Breeze Presentation (Preceded by Jim Byrne) + Slides + Transcript of slide 21

Hard Working George

Hard Working George -- it's hard work.

The Behavior Layer - Unobtrusively

I've been working on a framework called Layered Semantic Markup for I guess a few years now. While I spend most of my time considering the Structural Layer (Content, aka HTML) and the Presentation Layer (CSS), there is a third layer: Behavior Layer (scripts and the DOM). Having stable and appropriate Content and Presentation layers are helpful before one can appropriately address the Beharior Layer, which is why I've spent my time as I have.

A foundational idea of Layered Semantic Markup is Accessibility (and not just in the Section 508 of Accessibility for indivisuals with disabilities). Content should be accessible to ALL. Content should be available without Presentation. Presentation should be available without Behavior. In other words, each can only reach their potential (and some would argue bare minimum) if they are isolated and independent.

I don't want my snazzy Javascript DHTML behaviors (which makes my navigation more efficient to desktop computer users) to make my navigation unusable to cell phone browsers. With a nod to "One man's treasure is another man's trash", what's good for one user may be detrimental to another.

With this in mind, take a look at this great tutorial on how to write an Unobstrsive Behavior Layer, or as the author brands it, "Unobtrusive Javascript .

Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up 'what is this text' and the CSS 'how should it be displayed'. Javascript adds a new dimension, the 'how should this element behave'.

On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. The technique to completely separate Javascript from the other two layers of web development has become commonly named 'unobtrusive Javascript', as 'accessible Javascript' does not quite cut it. You can have a perfectly separated Javascript and still be totally inaccessible.

Hat tip to little. yellow. different's mini-blog.

Layered Semantic Markup hits the big-time at Yahoo!

I'll post some more details when I get a second, but I wanted to quickly point out that the new launches of http://www.yahoo.com/beta and my.yahoo.com are among the most visible examples of Layered Semantic Markup on the Yahoo! Network.

Isn't the markup beautiful! Isn't the CSS wonderful?

Congrats, one and all!

Video of Screen Readers in Action

I suppose I've talked about this before, but it came up again at work today:

"Introduction to the Screen Reader" with Neal Ewers of the Trace Research Center is a short 6 minute video demonstrating how screen readers assist people who are blind navigate the web, access the electronic page, and more.

That and more: http://www.doit.wisc.edu/accessibility/video/.

If you're involved in web design or web development, or if you spend time thinking or working on accessibility, it's well worth your time to watch this and the related videos.

Introducing sIFR

Mike Davidson, in conjunction with Shaun Inman and Tomas Jogin has released "a scalable, multi line, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial."

This system uses JS, DOM and Flash to provide scalable, typographically-rich headlines and font treatments through dynamic replacement of H1, H2 and DIV tags.

Seems interesting.

I'm historically pretty anti Flash. I believe in HyperText and meaningful, semantic markup. I believe in access to information to all. I believe that pure text is faster, better, and more "Web". Just being up front about it. (On the other hand, I also believe in Progressive Enhancement, which is consistent with this approach.)

So I'm not yet sure what I think about this technique.

I know I'm more fixated on edge cases than many people, and that my work necessitates a never-wavering focus on speed, performance and efficiency, and that I have strong feelings about the benefits of "built-in" usability. But...

One reason I generally don't like text as images is because you can't select or copy-paste the content when it's locked in an image. Organizations that have their address locked in an image prevent me from Yahoo-mapping their address and therefore lose my business.

My first test was to select the text of this flash headline. Happily, I was successful (though it's pretty clunky, and much more difficult than normal HTML text).

One of Flash's historic downsides is that .swf text is more or less unknown to the browser. They seem to have fixed this for mouse-based text selection, but using the keyboard doesn't seem to work. Modern browsers have started introducing "Find As You Type" functionality, which lets you navigate (and select) the text of a page from your keyboard. This isn't compatible with sIFR in my testing. Further, the standard "Control-F" on-page search isn't aware of sIFR text. I, and many people, use Control-Find often. That IFR is for headlines instead of body content is some consolation, but... I'll lump those together as one strike.

I wonder how well .swf text is indexed by search engines? I don't have an easy way to test this, but because I can't select the .swf text via the keyboard, and because test uses of Control-F "find" failed, I'm skeptical.

Interesting technique. Definitely one to keep an eye on.

Cheers
Nate

Three Things I Learned About Screen Reader Users | unraveled

cafedave.net linked to this interesting post, Three Things I Learned About Screen Reader Users on http://unraveled.com.

You should hop over there and read the whole thing, but here are my notes:

Make sure [access keys] don’t conflict with browser or screen reader shortcuts. Thankfully, the good folks at Web Accessibility Testing and Services have already started looking at this. Here’s their article on the topic.

Everyone...used JAWS, which doesn't read display:none; content. Thankfully, the good folks at the CSS Discuss Wiki have researched the issue and designed an improved method that works in 11 major browsers.

(Because of forms mode in JAWS), use the fieldset and legend elements as suggested by Derek Featherstone’s comment.

Braille Biz Cards

Access-USA http://www.access-usa.com/Welcome_1.htm will print Braille on your business cards. We don't have an official vendor relationship with them. Our business card folks were pretty clueless on Braille, but you can order your cards the normal way and send them to Access-USA for Braille printing. It's about $65 for 250 cards.

Accessibility Comes For Free

Jeffery Veen writes a nice piece on his blog called I don't care about accessibility. (It's from his speaking notes at SXSW-04.)

He uses a term spectrum of degradability, which is very similar our thinking that has lead to

This content has been censored during migration from my behind-the-firewall blog to this public one.

:

Their designs are explicitly intended to work in what we call the spectrum of degradability -- that is, consider the current Mozilla in the middle, with less advanced and broken browsers like Blazer, Netscape 4 and IE6 on one end, and more advanced browsers like OmniWeb, screen readers, and other accessibility devices on the other.

It's noteworthy that he puts omniweb and screenreader agents on the the more advanced side of the stectrum.

Veen's dead on though, and we XXXXXXXXX's have been touting this too:

...when Web design is practiced as a craft, and not a consolation, accessibility comes for free.

Accessibility Toolbars

XXXXXXX previously pointed us to the NILS Accessibility toolbar.

I just came across this other one, the WAVE Toolbar. WAVE let's you submit a url (or trigger the toolbar), and receive an instant Accessibility report. The report is customize and thorough, and uses an extensive icon language to communicate it's finding on your page itself.

The service also provides some interesting additional features:

Icon View

This representation shows your page, overlaid with an extensive iconic library that communicates the findings

Text View

Shows your page as a text-only user agent would see it. See processes CSS for font-family, and size and color seem to be respected too. An enlightening view.

Outline View

This view transforms your page into it's hierarchical view, nesting H2 headers under H1 headers, and so on.... A good tool to help verify your semantic markup structure.

Report View

Unknown (error on page)

All and all, it seems to be another good tool for our arsenal.

The Behavior Layer - Accessible Javascript

Digital Web Magazine - Keep It Simple: The Behavior Layer

Now that Web developers have a solid grip on the XHTML structural and CSS presentation layers, it�s time to consider the JavaScript behavior layer and especially its accessibility.

We have now added a behavior layer to our simple page. It lies on top of the structural layer, and next to the presentation layer. This means that instead of two views we suddenly offer four.

Web Accessibility Best Practices Exchange Training

Web Accessibility Best Practices Exchange Training

W3C Web Accessibility Initiative is holding a 2-day Web Accessibility Best Practices Exchange Training on 9-10 February 2004 in Madrid, Spain. Participation is open to anyone interested in Web development. There is no registration fee; however, pre-registration is required. See the Education and Outreach Working Group's event page for further details.