DeutschDeutschEnglishEnglish | Imprint | Login
Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

1.4 Accessibility & Web Standards

The definitions of various levels of accessibility cannot be discussed here, and a thorough treatment of the advantages of using web standards goes beyond the scope of this site. Here are some highlights of YAML's usefulness in and practicability in both these areas.

Valid XHTML code and valid stylesheets

A valid skeleton structure is the basis of any website for all target audiences, regardless of any handicaps. Validity helps ensure a uniform website display in various browsers. The individual components of the YAML framework all found on valid XHTML and CSS code.

Extensive browser support

YAML aims to ensure that a website looks the same in all browsers. The problems of the sometimes highly variable support of CSS standards, in particular the many CSS bugs in Internet Explorer, are well known. Still, as Internet Explorer is clearly the worldwide market leader, it is completely supported. It is simply not sensible to optimize a CSS framework only for supposedly standard-conform browsers.

Internet Explorer’s current market share is estimated at about 90% worldwide. The percentage of IE 5.x users has fallen to below 10%. This number is close to the numbers of surfers using alternative browsers like Opera, Mozilla, or Safari. Firefox is the only one that has won more than 5% of internet users. Support for IE 5.x is thus just as sensible and justified as the support of modern browsers.

Doing without layout tables

Opposing opinions on layout tables are easily found online. While generally agreed that nested tables are outdated, user-unfriendly, and difficult to update, controversy still reigns over the use of tables themselves: if their (non-nested!) application is ever justifiable. The following presents a few advantages resulting from YAML’s tableless layout:

  • Free choice in column order
    The order of the column containers in the source code is completely independent of the columns’ positions on the screen. The accessibility of the content for text browsers and screen readers is greatly improved, as they present content linearly. Search engine placement can also benefit from this flexibility.
  • Flexibility in layout and printing
    Individual columns can be removed from the screen layout via CSS (for one- or two-column layouts). Specific features like the navigation, sidebars, etc., can be turned off for printing purposes with the print stylesheet. In addition, column containers are easily linearized for printing: each is set to full page width and presented in source order.
  • Rendering speed in the browser
    Tables are only rendered by the browser when all sections of the table have completely loaded. When using DIV containers, the browser starts rendering as soon as the first container has loaded. Pages with table layouts thus make users wait longer for content. Even today, many users still connect via modem and ISDN. Longer load times are particularly noticeable and annoying for these readers.
Applying variable size units

A further important milestone on the road to accessible websites is the use of relative units of measurement (for example in layout widths or font sizes). Accessibility problems occur for all of us, not just for those with disabilities, when fixed layouts and tiny type make reading difficult, or when web pages cannot be legibly printed. The flexible setup of all design elements (column sizes, margins, font sizes) was one of the main principles behind the development of the YAML framework.

Semantic Code

The semantically correct markup of content contributes to simpler code, easier reading in alternative browsers, and greater compatibility with future products. The YAML framework provides the design skeleton for a website, which must function regardless of the nature of the later content. The involvement of content elements in the layout design, which, when carefully done, could lead to fewer DIV elements for the basis layout, cannot be anticipated by YAML’s framer. The optimizing of the XHTML markup and the stylesheets must lie in the hands of the web designer after the end layout is final.

Skip Link Navigation

In addition to the possibilities of the variable column order, which allows for optimum linearization of content for text browsers and screen readers, the skip-link navigation improves maneuverability on a web page equipped with links to important content elements (navigation, content area) – particularly important for screen readers.

The YAML framework provides a flexible skeleton structure, oriented to the demands of barrier-free web design and exploiting the advantages of web standards. In this context, I am proud to mention the Redesign 2006 of the website “Einfach für Alle” (“Easy for Everyone”). The website is an initiative of “Aktion Mensch” (“Action Human”) and has promoted barrier-free web design for many years. The current flexible multiple-column layout from 2006 is based in great part on YAML.

Accessibility and standards could only be treated briefly here; I recommend the following online articles for those interested in more.