Recently in Web Standards Category

Yes, I know that there are already a million posts around the web on the best Firefox extensions. However, I had a colleague ask me for some resources specific to making a site more Accessible. So I sent her a list of Firefox extensions specific to testing a site for Accessibility, and thought I would share them here as well.

First, here is the list of IT Accessibility Standards for the state of Missouri: http://www.oa.mo.gov/itsd/cio/standards/ITGS0003.pdf. This is the standard that we try to meet with the websites/web apps we develop.

Accessibility related

Accessibility Toolbar

This Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility. In addition, it provides link to submit a page to the Functional Accessibility Evaluator at the University of Illinois at Urbana-Champaign.

Fangs Screen Reader Emulator

Creates a textual representation of a web page similar to how the page would be read by a modern screen reader.

Yellowpipe Lynx Viewer Tool 1.2.1

Enables you to see what a page will look like when viewed with Lynx, a text-mode web browser. It is also presumably, how search engines see your site. In addition, it can help determine if web pages are accessible to the vision impaired. Also gives a pretty good idea of how your site will work when javascript is unavailable.

General Web Development

Web Developer Toolbar

Absolutely invaluable collection of tools/utilities for web developers. Way too many features to try and list. If you do web development, you need this extension.

HTML Validator

Performs an inline evaluation/validation of the html code of any page you look at. Essentially, this is the same thing as running your code through the W3C.org’s code Validator, except that it is done locally on your computer. It also allows you to see, at a glance via a status bar icon, if the page you are viewing passes the validator, and if not, how many errors/warnings there are. Having standardized code doesn’t make your site Accessible, but having standardized code makes it easier to make it Accessible.

Firebug

Another invaluable web developer tool. Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I could not live without Firebug and the Web Developer toolbars installed. Well, I could live, but I certainly couldn’t develop nearly as efficiently.

Yslow

YSlow analyzes any web page and generates a grade for each rule (based on Yahoo’s “Rules for High Performance Web Sites”) and an overall grade. If a page can be improved, YSlow lists the specific changes to be made.

Jason posted a couple of weeks ago about the release candidate for Firefox 3. We now have an official launch date for the final version of Firefox version 3. The Mozilla developers announced last night that it is their “… expectation to ship Firefox 3 this upcoming Tuesday, June 17th.”

Google recently released Google Doctype, “…a Google-sponsored open encyclopedia and reference library for developers of web applications.”

I’m a little disappointed in the content of some of the “HOWTO” articles (they just aren’t very deep) though the security articles are very good. The DOM, HTML and CSS References are top notch and are sure to be EXTREMELY handy in the future.

I originally posted this to our internal Web Dev mailing list, but Josh Nichols suggested that I also publish it here for our external audience.

First, Microsoft has released the developer beta of IE8 : http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx

As with previous versions, it overwrites your older IE installation, so you can not have it installed along side IE7. Personally, I would suggest installing it in a VM. What I have done is installed the Internet Explorer Application Compatibility VPC Image for IE6 (http://tinyurl.com/y64upm), made a copy of it, and then in the copy installed the beta of IE8. That way I have IE6 and IE8 running in separate VM’s and IE7 actually installed on my computer.

*update* - Microsoft has released a separate VM of IE8 : http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

The biggest change I have noticed so far is the way it handles forms. From the sites I visited, it renders legends (with no additional CSS applied) inside of fieldsets differently than in previous versions. It also seems to be adding extra padding to button elements. They've added further support for CSS and will, supposedly, completely support all aspects of CSS 2.1 by the time IE 8 goes final. They've also improved Javascript speed and increased IE's compliance with the DOM spec.

Microsoft has a complete list of changes available here: http://msdn2.microsoft.com/en-us/library/cc288472(VS.85).aspx

PCMag has a complete review of IE8 available here: http://www.pcmag.com/article2/0,2704,2274126,00.asp

Second is that microsoft has flip-flopped on IE8's rendering mode and instead has decided that IE8 will render according to the DOCTYPE declaration in the page. Initially, Microsoft had announced that IE8 (and all future browser versions) would default to IE7's rendering mode. So even if your page had a doctype of XHTML 1.1 strict and the code was completely compliant, IE8 would render the page the same as IE7. If you wanted your page to render in the new IE8 standards compliant mode, you would have to add a custom meta tag to your page to tell IE8 to render as IE8. Supposedly, it was to ensure that pages across the vast Web wouldnt "break" once IE8 comes out.

I, for one, applaud microsoft's decision to look forwards towards standards compliance instead of looking backwards to what has been a frustrating mess.

Third is that the Web Standards Project has released the Acid3 test: http://www.acidtests.org/ If you aren’t familiar with the Acid tests, they are test pages designed to test a browser’s ability to render HTML and CSS (and with Acid 3, ECMAScript and the DOM) according to the W3C specifications. Acid3 features 100 different tests and “grades” a browser by how many of the tests it passes. The following page charts a large collection of browsers (and multiple versions) and how they fare with Acid 3 : http://www.anomalousanomaly.com/2008/03/06/acid-3/

Julie Harpring from the MU Graduate School gave a great presentation* today at the Web Developers Group meeting on the value of Web standards. A lively discussion followed where many of the developers in the room shared their experiences with CSS and creating standards-compliant sites. Despite a bit of a learning curve and some frustration, I think it's fair to say that most of the folks who have moved to standards-based design are reaping the benefits.