WaSP InterAct is a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional. Adapt and reuse our resources. Contribute your own content and ideas.

WaSP InterAct

This needs to translated into local languages & we are going to do translations with the help of WaSP ILGers & other local translators. So we need more Volunteers to do this.

Volunteers who are going to translate InterAct are organised into groups by country and have members from both within and outside ILG.

If you are interested in helping out contact ILG at: ilg-info at webstandards dot org.

We are open to suggestions and ideas and expect that each country group will find their own way to manage the process. Feel free to share ideas and ask questions.

Follow this link for more information,
WaSP InterAct Forum

WAI has announced that WCAG 2.0 has moved to Proposed Recommendation. So now only one step away to becoming a W3C Recommendation and hopefully December it will be.

Proposed Recommendation means is that the guidelines have reviewed by the community and also tested on real world websites. Now anyone can start using this even though it’s not official yet!

In other news the mobileOK Basic Tests also moved into Proposed Recommendation. So home this will help to solve mobile web and web accessibility issues.

More information on can be found at http://www.w3.org/WAI/mobile/.

This is the document I prepared sometime back to do a small workshop about Web Accessibility.

What is Web Accessibility?

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities.

For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware. When text and images are large and/or enlargable, it is easier for users with poor sight to read and understand the content.

When links are underlined (or otherwise differentiated) as well as coloured, this ensures that colour blind users will be able to notice them. When clickable links and areas are large, this helps users who cannot control a mouse with precision.

When pages are coded so that users can navigate by means of the keyboard alone, or a single switch access device alone, this helps users who cannot use a mouse or even a standard keyboard.

When videos are closed captioned (subtitles) or a sign language version is available, deaf and hard of hearing users can understand video.

Make flashing effects avoid or optional.

The needs that Web accessibility aims to address include:

• Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of colour blindness;
• Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson’s Disease, muscular dystrophy, cerebral palsy, stroke;
• Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
• Seizures: Photoepileptic seizures caused by visual strobe or flashing effects;
• Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental “maturity,” problem-solving and logic skills, etc.;

Assistive technologies used for web browsing

Disabled users use assistive technologies such as the following to enable and assist web browsing:

• Screen reader software, which can read out, using synthesised speech, either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties), or which can read out everything that is happening on the PC (used by blind and vision impaired users).
• Braille terminals, consisting of a Refreshable Braille display which renders text as Braille characters (usually by means of raising pegs through holes in a flat surface) and either a QWERTY or Braille keyboard.
• Screen magnification software, which enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.
• Speech recognition software that can accept spoken commands to the computer, or turn dictation into grammatically correct text – useful for those who have difficulty using a mouse or a keyboard.
• Keyboard overlays, which can make typing easier and more accurate for those who have motor control difficulties.

Example for a court case

In 2000, an Australian blind man won a court case against the Sydney Organising Committee of the Olympic Games (SOCOG). This was the first successful case under Disability Discrimination Act 1992 because SOCOG had failed to make their official website, Sydney Olympic Games, adequately accessible to blind users.

Web Accessibility checkpoints

Basic checkpoints;

1. Validate HTML and CSS
2. No frames, please
3. Automated accessibility checking tools
4. Images and alternative text
5. Make sure that JavaScript is unobtrusive
6. Increase text size
7. Look for semantic markup
8. Disable CSS
9. Use Fangs to emulate a screen reader

Digging deeper;

1. Colour contrast
2. Document titles
3. Link text
4. Non HTML formats
5. Platform discrimination
6. Keyboard navigation
7. Data tables
8. Form controls and labels
9. Use a screen reader
10. Don’t overlook the content
11. Further reading on other experiments & articles

Standards, guidelines & Government regulations

1. The W3C’s Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines 1.0 (WCAG 1.0)
2. Disability Discrimination Act UK
3. Section 508 – requires U.S. government web sites to be accessible
4. Disability Act 2005 Ireland
5. National Disability Authority Ireland

If anyone need to add anything to this or if I have missed anything, please put those as a comment.

Here I am going to list down couple of useful online tools to optimize accessibility of website. Optimizing accessibility of a website is really useful to capture widen audience.

Give a try and test your website with these tools to see how accessible your website is.

• WebXACT
• Web Accessibility Checker
• WAVE 3.0 Accessibility Tool
• TAW3 online
• HiSoftware® Cynthia Saysâ„¢ Portal
• HERA 2.0
• Readability Test
• Truwex Online 2.0: Section 508 and WCAG Accessibility, Privacy, Quality Assurance Tool
• GrayBit
• Functional Accessibility Evaluator
• XRAY :: for web developers

If anyone know more good accessibility testing tools, please add them as comments.

Let’s make a better WEB for ALL!!!

While the community argued over X-UA-Compatible or X-IE-VERSION-FREEZE, depending on which side of the fence you sit, the W3C published two new and important documents:

Moments ago the joint effort of the W3C HTML WG and WHATWG resulted in publication of two documents in the W3C Technical Report space: HTML 5 and HTML 5 differences from HTML 4. I think I can safely say that the WHATWG community is very happy with the W3C publishing HTML 5 as a First Public Working Draft. Many thanks to all involved!

It is great to see this actually getting out there. It is very fun indeed to look at the new elements and think about how you would use the likes of <dialog>, <command>, <meter>, and finally being able to do things like input type=”datetime|datetime-local|date|month|week|time|number|range|email|url”.

It feels like semantics are being added in. The generality of div class=”whatever” is all well and good, but for the very common situations, I am looking forward to using type=”email” and having the browser take care of validation, and using my address book to pick through.

Via Ajaxian

It’s a good news for all Web Standard evangelists all around the world that IE8 has passes the ACID 2 Test.

IE8 ACID2 test

Acid2 is a test case designed by the Web Standards Project to identify web page rendering flaws in browsers and authoring tools. It is a modern take-off of the Box Acid Test, also known as Acid1, from 1997.

This is the article posted at IEBlog;

As a team, we’ve spent the last year heads down working hard on IE8. Last week, we achieved an important milestone that should interest web developers. IE8 now renders the “Acid2 Face” correctly in IE8 standards mode.

If you’re not a web developer, the details of this blog post probably aren’t all that interesting for you. I’d like you to know that we’re building IE8 for many different customers (consumers, web service providers, independent software vendors, enterprises, web developers, and others), and we’ll cover more details of the non-developer oriented work (e.g. user experience, reliability, security, etc.) in other posts in the future, after MIX.

While web developers will immediately recognize what Acid2 means, I want to step back and offer some context for other readers of this blog who may not be familiar with web standards. Briefly: Acid2 is one test of how modern browsers work with some specific features across several different web standards.

At first glance, this test seems simple. I think it actually offers a view into the subtle and complex world of web standards in a number of ways. Showing the Acid2 page correctly is a good indication of being standards compliant, but Acid2 itself isn’t a web standard or a web standards compliance test. The publisher of the test, the Web Standards Project, is an advocacy group, not a web standards defining body.

When we look at the long lists of standards (even from just one standards body, like the W3C), which standards are the most important for us to support? The web has many kinds of standards – true industry standards, like those from the W3C, de facto standards, unilateral standards, open standards, and more. Some standards like RSS or OpenSearch lack a formal standards body yet work pretty well today across multiple implementations. Many advances in web technologies, like the img tag, start out as unilateral extensions by a vendor. The X in AJAX, for example, has only started the formal standardization process relatively recently. As some comments have pointed out, CSS 2.1, one of the key standards that Acid2 exercises, is not “finalized” yet. Different individuals have different opinions about different standards. The important thing about the Acid2 test is that it reflects what one particular group of smart people “consider most important for the future of the web.”

The key goal (for the Web Standards Project as well as many other groups and individuals) is interoperability. As a developer, I’d prefer to not have to write the same site multiple times for different browsers. Standards are a (critical!) means to this end, and we focus on the standards that will help actual, real-world interoperability the most. As a consumer and a developer, I expect stuff to just work, and I also expect backwards compatibility. When I get a new version of my current browser, I expect all the sites that worked before will still work.

With respect to standards and interoperability, our goal in developing Internet Explorer 8 is to support the right set of standards with excellent implementations and do so without breaking the existing web. This second goal refers to the lessons we learned during IE 7. IE7’s CSS improvements made IE more compliant with some standards and less compatible with some sites on the web as they were coded. Many sites and developers have done special work to work well with IE6, mostly as a result of the evolution of the web and standards since 2001 and the level of support in the various versions of IE that pre-date many standards. We have a responsibility to respect the work that sites have already done to work with IE. We must deliver improved standards support and backwards compatibility so that IE8 (1) continues to work with the billions of pages on the web today that already work in IE6 and IE7 and (2) makes the development of the next billion pages, in an interoperable way, much easier. We’ll blog more, and learn more, about this during the IE8 beta cycle.

Now, with all that context, I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. While supporting the features tested in Acid2 is important for many reasons, it is just one of several milestones for the interoperability, standards compliance, and backwards compatibility that we’re committed to for this release. We will blog more on these topics. Here’s a relevant video.

For IE8, we want to communicate facts, not aspirations. We’re posting this information now because we have real working code checked in and we’re confident about delivering it in the final product. We’re listening to the feedback about IE, and at the same time, we are committed to responsible disclosure and setting expectations properly. Now that we’ve run the test on multiple machines and seen it work, we’re excited to be able to share definitive information.

While blog posts and links to videos are a good start, publicly available code is even better. We will have a lot more information available at sessions at MIX08 and will release a beta of IE8 in the first half of calendar 2008.

Dean Hachamovitch
General Manager

Browser war is ending slowly… thanks to WaSP.

[This is the reply post to shanX's reply post regarding my "Making Websites for ALL" post.]

This will be a short & sweet post as I’m struggling with time these days. Lots of work to finish but still have 24 hours per day. Now the time is 12.58 am, and I have to get up early in the morning.

Here goes my 10 points…

1. Web standards are standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web.
2. Yes, I also prefer to code by hand.
3. Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
4. An especially useful feature XHTML inherits from its XML underpinnings is XML namespaces. With namespaces, authors or communities of authors can define their own XML elements, attributes and content models to mix within XHTML documents. This is similar to the semantic flexibility of the ‘class’ attribute from HTML, but with much more power. Some W3C XML namespaces/schema that can be mixed with XHTML include MathML for semantic math markup, Scalable Vector Graphics for markup of vector graphics, and RDFa for embedding RDF data.
5. HTML Versus XHTML
6. HTML 5 is still a working draft with major knows issues.
7. When consider mobile web browsers table layout is way out.
8. Semantic markup is the future today
9. We are fighting for standards which ensure simple, affordable access to web technologies for all.
10. We have to think as a user not as a developer when making a website as end of the day site is access by different type of users.

To learn more about web standards go to my Web standards round-up post.

I’m not good at writing at ALL, but hope my series of posts regarding web standards will help anyone who want to make a web better place for ALL.

We all know the importance of checking our web pages with multiple browsers, especially when we are designing a new layout for a website.The number of extant browsers we need to check with are enormous: Internet Explorer (IE) 7, 6, 5.5 and 5.0, Firefox 3.0, Firefox 2.0 and 1.5, Opera 9 and 8, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. And even the on the mobile devices there are different type of browsers and versions. The problem for most people is that multiple versions of certain browsers cannot co-exist with each other, the most notable example of this is IE for Windows. Unless you are privileged to have multiple computers, this presents a certain difficulty for the average webmaster.

So here I’m listing some useful browser simulators and multiple browser installations.

• Browsershots
• IE NetRender
• ready.mobi
• BrowserPool
• ieCapture
• iCapture
• evolt.org Browser Archive
• Browser Suite For Developers
• Multiple IE
• BrowserCam
• Net Mechanic Browser Compatibility

If I have missed out anything in this list, please add it as a comment.

I thought to write this blogpost after I saw a comment from shanX in my Web Standards Awareness Survey For Sri Lankans post and will tell why I am much more concern about Web Standards.

Following is shanX’s comment;

I have developed several content sites, al though i have used latest techs like Ajax, Flv …etc on them, I never preferred Standards such as XHTML …etc, although am aware of them (rules to be broken? )
But I do think clean, efficient and cross-browser compatible HTML and CSS coding as a must

So you are developing sites only can view by web browsers? But I am trying to develop websites which can access by all available devices as well as future devices which will could access Internet.

Web standards are for making the web for all, not only for part of people.

Have you ever tried to develop a website for a blind person? Have any Sri Lankan web designer consider this? How many of you’ll have did a accessibility test or an Usability test for a website?

Areas that we have to consider are Accessibility, Usability, Browser Compatibility as well as the Future Compatibility of a website.

Because of these standards the browser war is ending slowly. So all major browsers including Firefox, Internet Explorer, Opera, Safari… etc and their latest versions are compatible with most web standards for some extends and still they are improving. So web standards and it’s backward compatibility feature will ensure older browsers, current browsers as well as future browsers will display your website without doing any disturb to the user.

Even if you ever tried some semantic data formating technology like Microformats, you will realize how important and user friendly is Web Standards and how it will help developer or the website user. And how it’s compatible with web and the desktop.

It’s good that we use latest technologies but we have to make sure we are using it in correct way and for the correct purpose.

We are now in Web 2.0 era, and we are moving forward to Web 3.0 where we might have Web OS where can any device can access from any where in the world and share anything in our Web OS desktop like we are doing Social Networking with Web 2.0 now.

I know, it’s really hard to get rid of from the old school web designing and from those fancy heavy weight HTML editors, but finally we have to consider about the out come and make sure your website is have reached the correct audience as well as it has accessible to wider audience end of the day.

As Glenda said in WaSP ILG

“Internationalization? Localization? Forget these clumsy buzzwords and focus on the global reality. Hear world designers and developers share firsthand experiences with international best practices and Web standards. Learn technical infrastructure principles for creating sites with the flexibility to be global while keeping visual designs sensitive to regional needs.”

As Saleh Esmaeili said in WaSP ILG

it’s “Globally Local” Websites

W3C (World Wide Web Consortium) is the authority for recommending those standards and there are working committees for all areas. Go to the W3C site and refer their specifications for further learning.

The Web Standards Project (WaSP) is also fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. They work with browser companies, authoring tool makers, and their peers to deliver the true power of standards to this medium.

Introduction

The implementation of valid/standard methods, guidelines and best practices will help to produce high quality websites that are accessible to as many as possible. By building valid websites you can save time and money for the development and provides a better experience for the visitor.

Validation is also an important part of web development. Many errors that are hard to find can discover during validation. This is like spell checking and proofreading for grammar and syntax in a document. but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language. You can validate your (X)HTML page as well as your CSS.

Here I’m not going brief you about Web Standards, but I’m going to tell how we can use those best practices in Web standards to produce a valid (X)HTML page.

Benefits of having a valid code

• Future compatibility: Your website will compatible with future web browsers.
• Simpler development and maintenance: Creating Valid (X)HTML Documents Means Cleaner Code and Easier Maintenance.
• Faster download and rendering of web pages: Less (X)HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
• Better accessibility: Semantic (X)HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
• Simpler adaptation to any media or screen devices: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

Best Practices…

• Include the correct DOCTYPE declaration at the beginning of the file. A DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
• The DOCTYPE is case-sensitive so use the correct case:
  <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
• Add the attribute xmlns="http://www.w3.org/1999/xhtml" to the <html> element.
• Close all elements: Omitting </p> is not valid anymore.
• Change all elements to lowercase: <P> becomes <p>.
• Correctly specify empty elements: <hr> becomes <hr />.
• Quote all attribute values: <p align="right">.
• Always add attribute values: <hr noshade="noshade" />.
• Always use & in place of &. : <a href="foo.php?chapter=1&amp;section=2 />
• <form> element should have to have a action attribute always: <form action="#"
• If you are using name & id attributes in input element, both should be in same name: <input name="field_name" id="field_name" />
• Use alt attribute always for <img> element: <img src="image.gif" alt="" />
• Use width & height attributes as in this order in <img> element: <img src="image.gif" width="100" height="100" alt="" />
• Use a separate JavaScript file always & make sure you have put type attribute correctly: <script type="text/javascript" src="javascript.js"></script>
• Try to use a external CSS file for styles.
• Always try to use tables only for TABULAR data.
• Make sure you are using <th> for table headers & <td> for table data.
• Elements in (X)HTML must be closed in the reverse order that they were opened in: <strong><em>…</em></strong>

(X)HTML Validation services

• W3C Markup Validation Service
• CSE HTML Validator
• Site Valet
• Dr. Watson

CSS Validation services

• W3C CSS Validation Service
• CSS Validator/Syntax Checker
• About.com CSS Validator
• Web Design Group CSSCheck
• Web Design Group CSSCheckUp

Accessibility Validation services

• Hermish Accessibility Evaluation Tool
• Cynthia Says^TM Portal
• Vischeck URL
• WebXACT

Useful Firefox Add-ons for validation services and web development

• HTML Validator
• Web Developer
• CSS Validator
• View Source Chart
• Firebug
• JavaScript Debugger