With Joomla 1.5 we are able to store the HTML edition in our template so that it is no longer vital to use the standard edition. This gives us the flexibility we need to create accessible, standard conformable pages.
Beez is just an example to demonstrate the new path which Joomla 1.5 opens up to us. It serves as a basis and can be modified and extended as much as you wish.
In creating it we were careful to make sure that by suitably adjusting the CSS files and the index.php a large part of the total number of designs could be used.
So, what have we actually done?
1. Separation of content and layout: the code
The first step was to separate content and layout from each other and get rid of the layout tables which up to now have only been irritating.
Separating as much as possible the content from the various types of layout is the basis of every design which can be on the one hand presented as device-independent and on the other hand can be adjusted to suit the different needs of the user.
The technical basis for this is the fact that the overwhelming majority of browsers used today can handle stylesheets with relative reliability.
That was not always the case: But if you are still working with layout tables today, you are using an outdated technology which, in most cases, can no longer be justified and you should start relearning.
The use of stylesheets allows the content of a website to be coded with a mark-up language, without having to consider the style of the presentation.
The style of presentation is determined in the stylesheets. This could be done in one or more separate stylesheets which to an extent can be chosen by the user.
It is also possible to present the basic content with a graphic browser without stylesheets - with stylesheets a layout is possible which complies with all the requirements of this audio-visual age.
On the basis of separating content from layout, we have developed a mark-up whose formal structure largely corresponds to content structure.
This means:
- that all the elements of a document are sorted into their correct and logical sequence in the source text - irrespective of whether they later appear on a screen next each other or above each other.
- that all the elements are marked according to their position and significance in the document (= semantics): headings as headings, paragraphs as paragraphs, quotes as quotes, addresses as addresses, table data as table data, form elements logically linked with one another, etc. in this way it is possible to work on the document automatically in various ways, not least that it can be reproduced as conveniently as possible in a screen reader.
2. The jump labels
However, presenting content in a linear way has one big disadvantage: in certain circumstances you have to go a long way to reach the content areas which are "at the back". In contrast, with a three-column layout on the screen more areas can at least start "at the top" and the eye can go straight to where it - supported by visual aids - suspects the information which it is interested in at that moment will be located. Here the concept of jump labels can offer a remedy. This actually creates a non-visual contrast to the graphic layout and allows users of linear reproducers to identify essential content areas right at the start of the page and then to go straight there where they expects the information they are interested in to be.
Essential content areas - these can be the navigation, the main contents, a column with news, a list of links, a search window, a form - this is by no means an exhaustive list. For pages with varied content, which present "complex documents" (as referred to above), it makes sense to enable users to jump to all the main areas in this way.
Beez concerns itself with these jump labels at two places.
Firstly in the index.php where their position is determined and secondly in the components and modules used which contain form elements.
If screen reader users send a form which does not have a jump label on it, they arrive at the start of the page and have to waste time navigating to the content they actually want.
To avoid this, the forms used in Beez have jump labels referring to the actual page content.
Example of the search module:
echo 'get('moduleclass_sfx') . '">';:
One or two of you will certainly notice that the jump labels become visible when navigating with the keyboard, something which makes the page easier to deal with for keyboard users.
3. The design and the CSS
1. Semi-scalable layout:
In web design you differentiate between fixed and fluid layouts.
Fluid layouts adjust themselves to the size of the screen and offer scalable text space. The width specifications of individual columns in a design are given in a percentage or em which allows the viewing area of the screen to be optimised. If the browser window changes its size, the content automatically changes too.
This is really a nice feature but in the framework of our creative task it can lead to enormous problems. If pages only have a small amount of text content, they can appear to be homogenous and well-adjusted at a resolution of 800 x 600 pixels. If you look at the page with a resolution of 1280 x 1024 pixels, it can happen that the content along the top edge of the screen sticks, something which does not look good and makes the text quite a lot more difficult to read.
The eye begins to swim and is no longer able to connect the start of a line with its beginning.
For this reason we have given Beez a maximum width.
2. Variable type sizes
It is often a temptation to use very small type sizes to pack more information onto the screen. If the size of the surface cannot be increased then you can increase the amount of information. Large type sizes also seem less elegant on the screen and for that reason disturb the "designer's eye".
However it is not just visually impaired or older people who find small type sizes difficult or impossible to read.
Fortunately current browsers offer us the chance to zoom the text, but this only works if we make relative specifications for the type size and do not choose a fixed pixel size.
For this reason Beez uses the relative specification em for the type size.
We also watch out for:
- sufficient contrast
- a logical content structure
- missing type graphics
- no transparent backgrounds for graphics
Finally, there is one more thing we have to say. Even if you use Beez, you still face a challenge. The concept behind the content and how the content is structured can significantly improve a page's accessibility. And that is a job we cannot do for you.
We hope you enjoy using Beez and would ask you to let us know if you should find any errors or mistakes.
Bye Angie
