Friday, March 30, 2007

Quick Tips to Make Accessible Web Sites

Images & animations: Use the alt attribute to describe the function of each visual.
Image maps. Use the
client-side map and text for hotspots.
Multimedia. Provide
captioning and transcripts of audio, and descriptions of video.
Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
Graphs & charts. Summarize or use the
longdesc attribute.
Scripts, applets, & plug-ins. Provide
alternative content in case active features are inaccessible or unsupported.
Frames. Use the noframes element and meaningful
Tables. Make line-by-line reading sensible. Summarize.
Check your work. Validate. Use tools, checklist, and guidelines at

What is Web Accessibility

Web Content Accessibility Guidelines 1.0

Must read

XHTML™ Modularization 1.1

Must read for UI designers

XHTML 1.0 and 1.1: Current Ideas and New Directions

XHTML 1.0 is the reformulation of HTML as an XML application. This means that documents as well as syntax must conform strictly to the concepts and DTDs of the language version. The ideas from HTML 4.0, especially the separation of document structure from presentation and issues concerning accessibility and internationalization, are intact in XHTML 1.0. What’s more, the three DTD offerings (strict, transitional, and frameset) originally from HTML 4.0 and later refined by HTML 4.01 are essentially the same DTDs found in XHTML 1.0.

XHTML 1.0 is best seen as a transitional language that helps puts professional Web authors in the position of writing specification-oriented markup. It puts browser manufacturers on the hot-seat and tells them “get your acts together!” It also moves us toward the extensible intelligence of XML and away from the limitations of HTML.
But transition also means that readying yourself for XML is very important, too. Fortunately, XHTML contains enough of each to help strengthen your HTML skills and to get those of you unfamiliar with XML more comfortable with its applications. Several of the primary XML concepts introduced in XHTML 1.0 are as follows:

Reintroducing structure back into the language. Picking up on the SGML and XML idea that documents should be written in conformance with the rules set out within the languages, XHTML insists upon a variety of syntax and semantic rules that must be adhered to. One such rule is the idea of well-formed.

Providing authors with incentives to validate documents. The validation of documents is somewhat controversial for a number of reasons. Certain people believe that validation is an unnecessary part of the process so long as the documents are well-formed. However, I personally feel that validation is a powerful learning tool that helps us find our mistakes, fix them, and in the process, understand the way a specific DTD works. Validation, therefore, is encouraged throughout.

Accommodating New Devices. Part of the drive to accommodate XML in the Web development environment has to do with an intriguing phenomenon. If the 90s were the years of information explosion and the movement of the PC from the workplace to the home, this decade will be known for the movement away from the desktop.

With XHTML 1.1, the concept of separation of structure and presentation is complete. XHTML 1.1 has only one public DTD, based on the Strict DTD found in XHTML 1.0. Web authors also have the option to work with modularization. Modularization breaks HTML down into discrete modules such as text, images, tables, frames, forms, and so forth. The author can choose which modules he or she wants to use and then write a DTD combining those modules into a unique application. This is the first time we really see the extensibility introduced by XML at work, because instead of having only the public DTDs to choose from, authors can now create their own applications.

HTML 4.0 and 4.01: Concepts

Within HTML 4.0 are specific ideas necessary to study if you’re to have a full understanding of the versions and languages that have followed. Specifically, HTML 4.0 provides these critical concepts as follows:
Deprecation of presentational elements in favor of style sheets. Consider this the heart and soul of contemporary Web design. HTML 4.0 clearly states that the separation of structure and presentation are an imperative goal in order for Web authoring to progress. CSS is the suggested alternative, which in HTML 4.0’s emergence in 1997 was more problematic due to browser support than it is today.

Awareness of Accessibility and Internationalization. HTML 4.0 is very concerned with ensuring that pages are available to those individuals using alternative user agents, whether due to a disability or simply by virtue of circumstance. Internationalization concerns are brought forth in HTML 4.0, and discussions about how to Internationalize and Globalize HTML and XHTML are ongoing.

Improved rendering of Web documents. HTML 4.0 added several elements, specifically in terms of tables, that aid in accelerated interpretation and rendering of markup.

Introduction of three unique DTDs. With HTML 4.0 came the concept of three unique public DTDS: Strict, Transitional, and Frameset. The Strict DTD is HTML 4.0 at its most ideal, with the presentation of a document relying on CSS almost entirely. The Transitional DTD allows for the use of deprecated elements, understanding the transitional need for presentation in HTML. Finally, the Frameset DTD formalizes the use of frames in HTML 4.0 and provides a specific set of rules for their implementation.

HTML 4.0 really upped the ante in terms of offering real options and alternatives to Web developers interested in also writing documents that conformed to W3C goals. However, many authors have missed learning these important concepts, which lay the foundation for XHTML.
With HTML 4.01, a few errors and editorial

What are the advantages of using web standards?


To software/machines
Complying with web standards can give your web pages greater visibility in web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.Because use of web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.Standards are written so that old browsers will still understand the basic structure of your documents. Even if they can’t understand the newest and coolest additions to the standards, they’ll be able to display the content of your site. The same, of course, applies to robots - systems that collect information from your site on behalf of search engines and other indexers.Compliant code gives you the opportunity of validating your page with a validation service. Validators process your documents and present you with a list of errors. This makes finding and correcting errors a lot easier, and can save you a lot of time.Compliant documents can easily be converted to other formats, such as databases or Word documents. This allows for more versatile use of the information within documents on the World Wide Web, and simplified migration to new systems - hardware as well as software - including devices such as TVs and PDAs."

To people

Accessibility is an important idea behind many web standards, especially HTML.
Not only does this mean allowing the web to be used by people with disabilities, but also allowing web pages to be understood by people using browsers other than the usual ones - including voice browsers that read web pages aloud to people with sight impairments, Braille browsers that translate text into Braille, hand-held browsers with very little monitor space, teletext displays, and other unusual output devices.
As the variety of web access methods increases, adjusting or duplicating websites to satisfy all needs will become increasingly difficult (indeed, some say it’s impossible even today). Following standards is a major step towards solving this problem. Making your sites standards-compliant will help ensure not only that traditional browsers, old and new, will all be able to present sites properly, but also that they will work with unusual browsers and media.
Some consequences of ignoring standards are obvious: the most basic consequence is that you will restrict access to your site. How much business sense does it make to limit your audience to only a fraction of those who wish be a part of it? For a business site, denying access to even small portions of a target audience can make a big difference to your profit margin. For an educational site, it makes sense to allow access not only to affluent, able-bodied school-children with graphical browsers, but also to children in regions with poorly-developed infrastructure who are best served by text-only browsing, or disabled students using specialized browsers.
The same principle applies to all types of websites — while straying from the standards and taking advantage of browser-specific features may be tempting, the increased accessibility which comes from standards-compliance will lead to far greater rewards in the long run.


Most web standards are generally designed with forward- and backward-compatibility in mind — so that data using old versions of the standards will continue to work in new browsers, and data using new versions of the standards will “gracefully degrade” to produce an acceptable result in older browsers.
Because a website may go through several teams of designers during its lifetime, it is important that those people are able to comprehend the code and to edit it easily. Web standards offer a set of rules that every Web developer can follow, understand, and become familiar with: When one developer designs a site to the standards, another will be able to pick up where the former left off.


As web developers, we are constantly trying to address the problem of inconsistencies between the renderings of web pages by different browsers and browser versions. This necessitates either time-consuming double/multiple coding, or coding for a single browser which makes it harder, if not impossible, for some of the public to use the site. This situation will be made even worse with the advent of additional hardware and software which will be able to browse the Web, such as telephones, pagers, and PDAs.
Web standards are not arcane laws decreed by ivory-tower organizations. As we have described, the standards are for the most part decided by representatives of the same people who use them — browser makers, web developers, content providers, and other organizations.
Writing web pages in accordance with the standards shortens site development time and makes pages easier to maintain. Debugging and troubleshooting become easier, because the code follows a standard. No longer do you have to worry about the coding and maintenance for several versions of code that are supposed to accomplish the same presentation. One version of your site, and that is it.
The universal adoption of web standards is becoming of paramount importance. The mission of The Web Standards Project is to make the Web a better place, for developers and for end-users, by encouraging browser and web page editor makers to follow the standards in their applications. This effort will be greatly helped when web developers use the standards as a matter of course, and insist that generators and renderers of their code comply with the standards.
The reasons we have given should give you, the web developer, plenty of incentive to begin using standards, and also plenty of ammunition with which you can encourage your place of business and fellow developers to use those standards.

What are the W3C standards? HTML 4.0 - HyperText Markup Language
HyperText Markup Language (HTML) is widely used on the Web for adding structure to text documents. Browsers interpret these documents, representing the structure in media-specific ways to the user. For example, visual browsers typically display the strong element () as bold text, while text-to-speech readers might emphasize that text when pronouncing it.With the help of Cascading Style Sheets (CSS) the author may define how structural elements are to be represented, overriding the browser defaults."

XML 1.0 - Extensible Markup Language
Example of part of an XML document

Bill Gates

Marc Andreesen

Jon S. von Tetzchner

Extensible Markup Language (XML) is a markup language like HTML, but instead of having a single, fixed set of elements, it allows you to define your own - or use a set made by someone else. It even allows using multiple sets within a single document - by using XML namespaces.
Some applications of XML, such as XHTML and MathML, have already become W3C Recommendations. Others are currently W3C Working Drafts.
Style sheet standards, such as CSS and XSL, offer a variety of options for specifying how XML elements are to be rendered. Standards-compliant support for direct rendering of XML is spotty in browsers, so for presenting information to humans, HTML (or XHTML) with CSS-driven styling is the way to go. XML is mostly used for machine-to-machine communication today.
XML is more flexible than HTML, primarily because of the ability to add your own elements and make your own structural systems. This makes it an ideal format for the organization of large quantities of data - it is already in use in many databases and search engines. XHTML 1.0, 1.1, and Modularization

XHTML 1.0 is a reformulation of HTML as an XML application. XHTML 1.0 can be seen as ideologically coming from HTML 4.01, and being technically stricter because of XML’s influence.
XHTML will display in your browser identically to the equivalent HTML. You might want to use XHTML if there is any chance you’re going to need to reprocess your content, for example to send it to a PDA; XML’s stricter syntax rules make automatic processing of XHTML much easier and cheaper than ordinary HTML.
Ideologically, XHTML 1.0 inherits the following general concepts from HTML 4.01:
That presentation and document formatting should be separated via style sheets
That documents should be made accessible
That documents should be internationalized
XHTML 1.0 also uses the model of three DTDs: Strict, Transitional, and Frameset. This model originally emerged in HTML 4.0 and followed through to HTML 4.01.
Some important technical practices from XML onto XHTML includes:
That all document types are declared via the correct DOCTYPE declaration
That the structure of a conforming document contain the DOCTYPE declaration, an html element with the XHTML namespace declared, a head element including the title element, and a body element
That all elements and attribute names are written in lower case, and that all attribute values are quoted
That all non-empty elements (e.g. p, li) are properly terminated with a closing tag
That all empty elements (e.g. br, hr, img) are properly terminated with a trailing slash (
That documents validate against the DTD that is declared
For templates, please see Learn > Templates
XHTML 1.1 is made up of three primary parts:
The XHTML 1.0 Strict DTD (with minor modifications)
XHTML Modularization
The Ruby Annotation
If you’d like to author documents in XHTML 1.1, you can do so in a couple of ways. The first is by using the public XHTML 1.1 DTD. By doing this, your work will be extremely structured because there are virtually no presentational attributes in XHTML 1.1. The separation of structure and presentation is complete here, and all of your presentation work will go in a style sheet.
Another means of authoring documents in XHTML 1.1 is to tap into XHTML Modularization. This is the breakdown of familiar components of HTML and XHTML (such as text, tables, frames, forms) into discrete chunks. You can then write your own DTD and use only those components you require. This is extensibility in action, essentially giving you, the web author, the opportunity to customize your markup.
The Ruby Annotation is a special means of dealing with certain Asian character annotations. Ruby falls under the work being done with Internationalization.

CSS - Cascading Style Sheets

Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.
Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.

DOM 1 - Document Object Model Level 1

The DOM allows the full power and interactivity of a scripting language (such as ECMAScript, the standardized version of JavaScript) to be exerted on a web page. (In programming terms, the Document Object Model (DOM) Level 1 is an Application Programming Interface (API) for interacting with web pages.) It gives the scripting language easy access to the structure, content, and presentation of a document which is written in such languages as HTML and CSS.
The DOM is compatible with future improvements in technology; it will allow any scripting language to interact with whatever languages are being used in the document. This standard will not only make it easier to program dynamic HTML, but will also make adapting to future Internet technology much less painful.

ECMA Standards

2.2.1 What is the ECMA?
The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.
The ECMA is based in Geneva, Switzerland, near the headquarters of the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC). In 1994, the organization’s name was changed to the ECMA - European Association for Standardizing Information and Communication Systems, in order to reflect its broader range of activities.

What does it do?

The main role of the ECMA is to develop Standards and Technical Reports in the area of information and communication technology. As ECMA is an association of companies and not an official standardization institute, they often collaborate with official national or international institutes.
ECMA Standards have been accepted as a base for international and European standards. So far more than 270 ECMA Standards and 70 Technical Reports have been published.
Of these standards 85 have been accepted as international standards by the International Organization for Standardization (ISO). In addition, 25 have been accepted as European standards by the European Telecommunications Standards Institute (ETSI).

What are the ECMA standards? ECMAScript (standardized JavaScript)
ECMAScript is a standardized scripting language, based largely on Netscape’s JavaScript and Microsoft’s JScript. The ECMAScript standard is defined by ECMA’s Technical Committee 39 (TC-39).
The main use of ECMAScript, which is an object-based language, is to manipulate the objects in web pages which are specified by the Document Object Model (DOM). These objects (effectively, the elements which make up web pages, or the web pages as a wholes) can then be added to, deleted, moved, or have their properties changed. This lets web developers implement such effects as animated text, graphic roll-overs, and pages that change based on user input without having to be reloaded.
The current ECMAScript specification is ECMA Standard ECMA-262,

1. Introduction

Tim Berners-Lee’s dream for his invention, the World Wide Web, is a common space where users can share information to work together, to play, and to socialize (The World Wide Web, A very short personal history). As web developers, creating business, social, and educational sites, we turn this dream into reality.
But in this period of tremendous growth, the Web needs guidance to realize its full potential. Web standards are this guidance. These standards help ensure that everyone has access to the information we are providing, and also make web development faster and more enjoyable.
Standards compliance makes it easier for people with special needs to use the Web. Blind people may have their computer read web pages to them. People with poor eyesight may have pages rearranged and magnified for easier reading. And people using hand-held devices can browse the Web just as easily as those using high-end workstations.
As we will explain, there are also many practical reasons for developers to be concerned with web standards. Search engines can do a better job of indexing sites, for example. Using browser-specific code often doubles or triples the work to create web pages, and leaves a lot to be desired when new media are introduced. This situation will only get worse without the sound direction of web standards.
Some people fear that standards are limiting. In reality, they remove much of the tedious labour involved in web development, and give developers more time and more flexibility to be truly creative. They are both open to future improvement and mindful of past technology.
Many uses of the Web, including some that are only dreamed of today, will not be possible, or will be more difficult, without widespread standards compliance. At the moment, there are systems and software that are very common, seemingly close to universal, but who knows what tomorrow will bring? Tying ourselves to the control of any single company means limiting our future to the fortunes and misfortunes which that one company can or will provide. Maintaining universal standards will allow the Web to survive while encouraging innovation to continue at its current pace.