Creating Accessible Joomla Templates
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
This tutorial assumes that you already know the basics of Joomla! templates, and will focus on ensuring that your templates designs are accessible, and outline what to look out for when you design templates to ensure that they look smart and can be used by everyone.
[edit] Understanding How Joomla! Templates Work
Designing Joomla! templates certainly requires a different approach to the usual web standards-based site design. It needs a little bit of lateral thinking and good planning to get it right from the very beginning. The more time and effort you put into thinking about your design needs, the modules that you need to use, the better it pays off in the end. So getting it right with Joomla! really does mean, good planning.
Earlier versions of Joomla! (<1.5) also used tables for layout. This goes against the grain of accessible web standards design. While it is not always a showstopper, it is not an ideal development method as it is preferential to use various CSS <div> elements as containers for your Joomla! module content. This is possible with Joomla! 1.5, so let's look at this issue first.
[edit] Separation Anxiety Layout Tables, HTML, and CSS
A big step forward in recent years has been the move towards separating the code that is used to mark up content (HTML) from the code that you use to tell the browser for displaying that content (CSS), and also from code that tells the content how to behave (JavaScript).
While using Joomla! you won't really have to worry about this as Joomla! manages your HTML, CSS and JavaScript files, but in principle it's important to note some of the benefits. They are as follows:
- Site content is easier to edit and maintain. HTML files are not cluttered with
<font>tags and style information, and as a result, are much lighter and easier to understand. - Good housekeeping. If you need to edit how something looks you will need to use the CSS file. If you wish to change a behavior, you edit the JavaScript file. This again makes managing your projects much easier. Revisiting a site for a client, to make some changes in what you built over a year ago could be a nightmare if all the elements were mixed up haphazardly.
- Clean HTML generally lends itself to more structured content, which means more accessible websites. And more accessible websites are also more SEO friendly, as search engines like Google, etc. often look for keywords in the headings.
[edit] Joomla! 1.0 Used Tables for Layout, So What's the Problem?
Tables were originally designed to work with tabular data. They were not designed to be used as mere scaffolding for images at all, which is what they often became when used online. As William Gibson said, "The street finds its own uses for things".
In the last decade most of the sites that you must have seen used tables for layout (and many still do) including earlier versions of Joomla!. This was due in part to limitations in the support for presentational specifications like CSS, and using tables for layout was basically a hack, or fix that worked in the real world when you wanted to position something in a precise part of the web page such as a company logo or other graphics.
Unfortunately, designers were forced to resort to such ingenious methods to make their websites work. This was because you could not rely on how the various browsers would present your styled content. This lead to all sorts of complex hacks and multiple versioning and other time consuming methods, poor designer had to come up with to get the pages to look the same in multiple browsers.
[edit] Why Are Tables Bad for Layout?
Firstly when tables are being used as placements for images and general layout duties, they are not being used for what they were originally designed for. Many web standards people will rightly say that this reason is enough for not using them, especially as the graphical web no longer needs tables to hold it all together, as browser support for CSS has improved greatly.
Secondly, when you use tables for layout, it means a lot of tables on your page. Tables within tables (nested tables) and so on. This can get messy but for whom? Well apart from the coder having a hard time coming up with ever more ingenious ways to use tables to support their designs, blind users using screen reader software can have a hard time when a website has a lot of tables.
Why? Since there is just no indication for a screen reader user about the purpose of the table, and as the table element was designed for presenting tabular data, there are no specific attributes to support their use for layout. So the tables that are invisible to the sighted person, who just sees a nice website layout. Whereas the screen reader user often has to listen to the screen reader output 'table', 'table',..'table' for each table that is included in the site. This can impact negatively on the usability of the site and the quality of the browsing experience for a screen reader user.
As I mentioned there are no support attributes that make it easier for screen reader users, when tables are used for layout. There is however another 'hack'. It is to use the summary attribute of the table element. The summary attribute can be set to say <table summary="This table is used for layout">, but this will not be ideal if there are 20 tables outputting this information; it can be tedious for a screen reader user to listen to.
We are not going to look at the older methods of using tables for layout, as was the way for many of the older Joomla! templates, and instead we will concentrate on using a more web standards-based approach.
[edit] Building a Standards-Compliant Joomla! Template from Scratch
As I mentioned earlier I am assuming that you already know how to build a Joomla! template. What we will focus on here is what to look out for, whilst ensuring that the template is as accessible as possible. Once you have got to grip with how to build your template, or modify an existing one, for it to be considered more accessible, there are only a couple of major issues that you need to keep in mind while designing. There are many advanced aspects of using Joomla! templates, such as using image replacement techniques for graphical headers, or adding AJAX functionality; and these have specific workarounds in order for them to be considered accessible. However, there are more advanced techniques that we will not cover here as what I want is for you to start with an accessible canvas that you can later add to, if you wish.
So briefly I will look over what core areas you need to have ready in order to put the whole thing together and then I will build a template theme based on Funk Music called the "Funk Factory".
[edit] What Modules Do I Need?
You should have a clear idea of all the modules that you wish to include in this project and the functionality that each of them has. Each module function is loaded with the following code.
<jdoc:include type="modules" name="user1" style="" />
<jdoc:include type="module"> refers to the module that you wish to insert in your webpage, name="user1" is the module position (you set what modules go into what position in the Module Manager).
The function also has various style options that take the following arguments 0,1,-1,-2,-3 that allow the following options when it comes to developing your template.
The style option -2 allows you to wrap modules in a single <div> element and section titles in <h3> tags.
The style option -3 will wrap modules in a several <div> elements and titles in <h3> tags.
These will be the probable settings you will be using. You may also want menus to be displayed as 'flat lists' and these headings are available in the Joomla! Administration panel, within the Module Manager by choosing Flat List from the Menu Style option.
( Note - Joomla! arranges everything in your website by using Module Positions. These are Left, Top, and Rightand can be considered to be like scaffolding for your content, which is going to come from Site modules. Site Modules are like the building blocks of your site and contain your content.You can position multiple Site Module content by stacking them in a module position such as to the left, right or top of your page and determine the order they appear in by giving each module a number. So a site module with an order value of 1 will appear first, 2 will appear second, and so on.)
[edit] Color scheme
It really is worthwhile spending time to come with a suitable color scheme for your Joomla! site. This can be difficult if you have no experience of design but don't fear. It's not as difficult as you think. Here is my color palette for my 'Funk Factory' template. I haven't decided what I will use each color for at this stage, but I will completely base my choices on my chosen palette.
Some useful things that you can do to find ideas for your color palette are as follows:
- Look at websites that have color schemes that you like and ask yourself: "What is it about these colors that works well together?". Don't be shy about using color schemes you see on other sites, on your own site. The Web is a highly derivative medium, which is a posh was of saying "everyone copies everybody else". Just make sure you take inspiration from the best!
- Take inspiration from art, nature, posters you see, and magazines that you read.
- Understand your audience. Who will be using the site? Is it for a young hip crowd? A more corporate look or a community website? All these factors will influence your decision and should inform the color choices that you make.
[edit] Ensure Good Color Contrast for Your Site
Try and ensure that there is sufficient color contrast used on your site, especially when displaying text such as headings and other content. There are tools available to measure whether the color contrast works and if there could be problems for visually impaired people. These include Gez Lemon's excellent 'Luminosity Contrast Ratio Algorithm' (http://juicystudio.com/article/luminositycontrastratioalgorithm.php), which was later added to Steve Faulkner's AIS Accessibility Toolbar (http://www.webaim.org/articles/ais/).
These tools are really useful to check if the color contrast is sufficient or not. It is rather difficult to make this judgment correctly yourself, especially if you are not familiar with the needs of users with limited or residual vision combined with the effect that various retinal conditions can have on a person's visual perception. Low vision users are some of the users that will benefit the most from your accessible template design. Choosing a good color scheme is a rather simple, but very effective, way of creating a more accessible website.
However, a certain degree of common sense will help you figure out if there would be any problems. For example, using a light blue text on a dark blue background, or a light green text on a light green background will not help, and I hope that you can easily grasp why!
You can also offer the user a choice of different style sheets if the user requires a higher contrast version. You could use large yellow text on a black background and that would really help users with limited vision.
[edit] Icons and Graphics
Create all the graphics that you want for the project before you go to Joomla!.
When using icons to indicate certain sections or functionalities of your site, decide on a look and feel and then design suitable logos that fit your needs. How they look will depend on many of the issues that you saw in the last section on colors and audience.
[edit] Create a Mock Up If Possible
If you can, design a full mock up of the site template in your favorite image editor. This will allow you to play with different ideas and give you something tangible to reach for when you start coding. Don't worry if the final version of your site doesn't exactly match your mock up, and on the other hand your final site might be better than what you thought it would!
Following is a screenshot of some graphics that I did in Adobe Illustrator for my template 'Funk Factory'. The design will be tweaked later and I have included placeholders to indicate roughly where I hope to include the final Site Module content.
[edit] Roll Your Own Accessible Joomla! Template
As I mentioned you will pretty much have to create your own template from scratch when you want to build a nice accessible standards-compliant website. Don't be put off by this task. If you are familiar with CSS and have some web design experience, the extra steps and lateral thinking needed to style your site using Joomla! are really in the planning and preparation stages where you figure out the modules, colors and graphics that you want to use.
[edit] Using Dreamweaver
If you are using Dreamweaver there are a couple of things that you can do to make developing the template easier. The first thing is to download the excellent (and free) extension developed by Daniel Duvald. It can plug into Dreamweaver, where you will see it as an option at the top of your workspace menu which contains the options Common, Layout, Forms, etc., and lets you edit your templates much more quickly.
You can use this extension to edit your PHP file, add XML data, and insert various pieces of module code for Joomla! 1.5.
[edit] Set Up FTP Server Connection to Your Local Host
Set up an FTP connection to your local host in your WYSIWYG editor such as Dreamweaver. You may be used to doing this for websites that are hosted remotely. The process is exactly the same except that here, you point to a directory on your own machine.
You can then make changes to your code, and save directly to the host server (which is the quickest way), or copy your files to your host server after you make changes, refresh your browser and see the changes you have made. This will be your basic workflow.
( Note - You will also need to run a local server application such as Xampp where you will install Joomla!. I like Xampp as it is easy to install and use. For more on setting up and using a local server, consult the following website: (http://www.apachefriends.org/en/xampp.html) )
[edit] Create a Template for Your Template
For the creation of my 'Funk Factory' template, I took an existing template (Beez) and made a copy of it in my htdocs/templates folder of my local host server. I then renamed the entire folder Music and this folder then became my basic Joomla! universe (meaning all the files that I need for my new template will be contained here). I could then manage the new template from my administration section of my Joomla! installation. From here I could edit HTML and CSS if I wish, though in this case I am happy to use Dreamweaver for the editing tasks and then upload the files to my local host server.
[edit] A Few More Steps, Before We Get Going with Coding Our New Template
- Open the
index.phpfile on your local host server. If you are using Xampp, it will be in the Templates folder, which is a sub folder of htdocs. All these files are in the xampp folder, which will be wherever you installed it on your C drive if using a PC or another suitable directory. - Select the contents of the file and delete them.
- Don't worry about what you just did. Joomla! will populate the file with the necessary information needed to make your website work.
- Open all the CSS files and do the same. For this example I will try to use only one CSS file, though in principle having several that contain different layout details can be a good idea and makes the content easier to manage. If we need more than one, later we can add our CSS declarations to more than one file.
- Open the
templateDetails.xmlfile and edit the text between the<name></name>tags to reflect what you are calling your template. In this case I called itMusicso the code now looks as follows:
<?xml version="1.0" encoding="iso-8859-1"?> <install version="1.5" type="template"> <name>Music</name> <version>1.0.0</version>
[edit] Selecting Your Template
Once you perform the above steps, you can select your new template and apply it as your default in the Joomla! administration panel. To do this you must:
Go to Extensions -> Templates Manager.
Select the template you have named by clicking on the radio button beside the name. In this case I called mine Music.
Select the Default button (the large yellow star).
This will make your new template the Joomla! default one.
[edit] Choosing the Correct DOCTYPE
The first thing that we are going to do is add a DOCTYPE to our template (the index.php file). This will then be applied to every page throughout the site. The subject of DOCTYPES is probably not one that you will need or wish to give much attention to, but it is important to understand what they represent and why they are important.
The DOCTYPE basically determines the HTML or XHTML version that your Joomla! site will use. The two main DOCTYPES that we will be concerned with are the Strict and Transitional DOCTYPES.
The Strict DOCTYPE is rather like its name implies; a form that means that your pages must conform, or be syntactically correct, or the web pages will be at best, considered invalid or at worst, not rendered at all.
The Strict DOCTYPE looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Transitional DOCTYPE is more forgiving and while you must use the syntax of XHTML
if you have regular HTML elements and attributes, or presentational elements, jumbled up in your
code you will still be able to produce a conforming web page, which is a another way of saying you can get away with more when you code! You can also use this DOCTYPE for browsers that don't do CSS.
The Transitional DOCTYPE looks like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
( Note - So we will use a Transitional DOCTYPE for our template. In order to support some older Joomla! modules that use tables or contain presentational elements in the code they output, you may also need to stick with the Transitional DOCTYPE as using the Strict DOCTYPE could break them, or render them invalid. )
[edit] XHTML Rules
- XHTML code must be written in lower case (all elements and attributes),
- All elements must be closed, even empty elements (so you write
<br />) - Attribute values must be quoted and may not contain any blank spaces. Get into the habit of use an underscore "_" to separate attribute values or even longer file names.
- Elements must be nested properly. For example:
<p><strong>this is wrong</p></strong> <p><strong>This is right</strong></p>
So I hope that you can see that using XHTML is not such a great leap. In fact, with time you will understand that it all comes down to good authoring practice, and helps to keep your code tidy and easier to manage.
[edit] Just One More Thing
I am also going to add a couple of more pieces of code just to go that extra mile. Firstly, they declare the language of the document we are using, which is English and secondly, to tell the browser what kind of content it can expect to come across within the document that its going to render (i.e. your web pages):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Both of these pieces of code can go directly after your DTD or DOCTYPE declaration.
[edit] Putting It All Together
Add the transitional DOCTYPE to your index.php file along with the other code I have shown. Your index.php page should look as follows.
Add the following XHTML code after the DOCTYPE and save the file:
<html> <head> <title>Funk Factory Template</title> </head> <body>This is where your body contents go.</body> </html>
Enter the URL to the local host where your index.php file is located. It should look something the following: http://localhost/joomla/index.php
Refresh your browser and you should see something like the following screenshot:
( Note - If you got the previous screenshot, well done! Though it may not be very exciting yet, you are on your way! If not please make sure that you have either uploaded the index.php to the local host server or saved the index.php file properly.)
[edit] Basic Template Layout
In order to get the ball rolling with the layout we will start with a more traditional page layout, which I drew in Adobe Illustrator, and then further style it to fix the template's design requirements. A basic template layout for my requirements will look something like the following screenshot. Please note I have indicated what kind of module or functionally I would like each part of the page to contain. The design may also change and I have not decided if I want the module content to span the entire page or to be placed within a moveable <div> container element. The best thing about working like this is that you can tweak your design as you go. At this stage it is important to have an idea of the functionality that you want your site to have, and roughly what you want it to look like.
I then create the container <div> elements within my index.php file, which are going to act as containers for each of the site modules I have illustrated. The code for the <div> elements for each section looks like as follows:
<body> <div id="main_wrapper"><!--Main wrapper for all content --> <div id="search"> Search Feature goes here </div><!--//Search--> <div id="navigation"> Navigation Menu goes here </div><!--//Navigation--> <!-- Start wrapper for main content, login feature and whos online --> <div id="content_wrapper"> <!--Secondary wrapper for main content etc --> <div id="main_content"> Main Content will go here </div> <!-- //main_ content--> <div id="login"> Login feature and who is online </div><!--//login feature --> <div id="whoisonline"> Login feature and who is online </div><!--//who is online --> </div> <!-- //main_wrapper--> </body>
Save the file and refresh your browser and you should see something like the following:
What you see in your browser is a simple textual outline where later the content will be inserted from the MySQL database that is styled using CSS and hopefully looks the part!
The next step is to write the CSS code needed to create something more along the lines of my original outline. So you can think of this stage as the scaffolding stage.
[edit] CSS Scaffolding
In order to make the CSS easier to code and manage, I am going to create two separate CSS files; one for layout and the other for finer presentational declarations. You may want to put all your CSS declarations into one file; and even that is fine. I am going to separate them as this can be an easier way of managing your CSS, as you don't have to go through a long jumble of mixed declarations to find certain rules.
The code that will link to the CSS files looks as follows:
<head> <title>Funk Factory Template</title> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/layout.css" type="text/css"/> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/presentation.css" type="text/css" /> </head>
[edit] My CSS Layout
Here is the CSS that I need, to position everything where I need it. I have added some presentational
declaration so you can see the positioning of the <div> containers.
/* CSS Document */
/* Layout of Funk Factory Template */
/*Wrappers */
#main_wrapper {
margin: 60px auto;
padding: 10px;
padding-left: 200px;
width: 800px;
border: 10px solid #fff;
}
#content_wrapper {
background: #ccc;
color: #333;
margin: 10px auto;
padding: 10px;
padding-bottom:300px;
border: 10px solid #ccc;
width: 800px;
}
/*Search */
#search {
width: 100%;
height: 40 px;
border: 10px solid #ccc;
padding: 10px;
}
#navigation {
width: 100%;
height: 40 px;
border: 10px solid #ccc;
padding: 10px;
}
/* Main Content */
#main_content {
width: 60%;
background: #fff;
margin: 10px 10px 200px 10px;
padding: 25px 20px 20px 20px;
border: 10px solid #ccc;
float: left;
}
/*Site Module Layout*/
#login {
width: 20%;
background: #fff;
margin: 10px;
padding: 25px;
float: right;
}
#whoisonline {
width: 20%;
background: #fff;
margin: 10px;
padding: 25px;
float: right;
}
#footer {
clear: both;
width: 100%;
height: 10 px;
border: 10px solid #ccc;
padding: 10px;
}
After saving the file and refreshing the browser my layout looked as follows:
[edit] Just Before We Add Any Content Modules
Using the Joomla! extension for Dreamweaver is really useful as it makes important things like adding the links to your various CSS files, adding the title information and other metadata really easy with Joomla!. By pressing the Insert header code button you will get everything from the DTD to the META data from your configuration settings, all at the click of a button!
[edit] Adding Content Modules
At this stage you should know what modules you wish to use in your project. If not, go to the Module Manager in your Joomla! administration section and find out more about the modules that are available and what they do. For my project I wish to use the following modules:
- Search Module (mod_search)
- Top Menu (mod_mainmenu)
- Polls (mod_poll)
- Who's Online (mod_whoisonline)
- Login Form (mod_login)
- Breadcrumbs (mod_breadcrumbs)
- Footer (mod_footer)
The syntax for adding your modules to your index.php file is as follows:
<jdoc:include type="modules" name="user3" style="-2" />
The name of the module is user3 and the style value of -2 is a way for you to control how Joomla! will output the module content. So I need to add the above line of code with the name of each of my modules above into my index.php file. The final file will look
as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <html> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/layout.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/presentation.css" type="text/css" /> </head> <body> <div id="main_wrapper"><!--Main wrapper for all content --> <div id="search"> <jdoc:include type="modules" name="top" style="-2" /> </div><!--//Search--> <div id="navigation"> <jdoc:include type="modules" name="user3" style="-2" /> </div><!--//Navigation--> <!-- Start wrapper for main content, login feature, whoisonline and poll --> <div id="content_wrapper"> <!--Secondary wrapper for main content etc --> <div id="main_content"> <div id="pathway"> <jdoc:include type="module" name="breadcrumbs" /></div> <jdoc:include type="component" /> </div> <!-- //main_ content--> <div id="login"> <jdoc:include type="modules" name="right" style="-2" /> </div><!--//login, whoisonline and poll feature --> </div> <!-- //content_wrapper--> <div id="footer"> <jdoc:include type="modules" name="footer" style="-2" /> </div> <!-- //Footer--> </div> <!-- //main_wrapper--> </body> </html> (Note that the code <div id="login"> <jdoc:include type="modules" name="right" style="-2" /> </div>
Inserts the three modules (Login, WhoisOnline and Poll) neatly into <div id ="login"> as I have set them the module position
right in the Module Manager.)
On saving file and refreshing the browser the following output was obtained:
The tricky things about working with Joomla! is getting used to how Joomla! deals with the content. Remember that it is a CMS, therefore it needs a robust way of managing a lot of content and functionality, which can take some time getting used to. When you design your layout you really need to understand where you want things to go and create <div> placeholders using CSS. Then by using a combination of your Module Managerand a useful tool like theJoomla! Dreamweaver extension, you can populate those place holders with module content.
The hardest thing I found, when I first used Joomla!, was knowing how to reference your modules or what they are called. The funny thing with Joomla! is that you don't really call or insert a module into your container <div> 's by its name such as mod_search or mod_mainmenu and so on.
You actually arrange the position of the modules using the Module Manager and arrange them
into suitable 'slots' like top, left, right, etc. These are the Module position slots that you then insert into your <div> elements. Say if you place three modules in the 'right' slot and then place that slot in a suitable <div> each of the modules will slot nicely in on top of each other.
You arrange the order in which they display in the Module manager by clicking on a particular module and entering the Edit Module page. You then add your desired module to a suitable position such as top, left, right, and so on. This is the key to adding your modules to your website using Joomla!
I have broken up my layout to show what slot relates to what module, so that you get a better idea. It can be confusing at first, but hang in there and persevere, as once you get used to developing like this, it opens a world of possibilities.
[edit] Module Options
Module options are really useful for controlling how Joomla! outputs the content. They also perform some important accessibility related functions. The style value when you add module information to your <div> containers:
<div id="login"> <jdoc:include type="modules" name="right" style="-2" /> </div>
-2 in this case will mean that the modules are displayed in a <div> with module titles in <h3> elements. The style option takes several arguments 0, -1, -2, -3. The first two values output the modules within tables so you will never really use them. Both -2 and -3 however give you room to modify how your module is presented using CSS.
[edit] Finishing the Template
Learning more about CSS is the best way to get the most out of your designs. Some great places for you to learn more are: A list apart (http://www.alistapart.com), CSS Beauty (http://www.cssbeauty.com), W3 Schools (http://www.w3schools.com) and CSS Zen Garden (http://www.csszengarden.com).
All that's left now is to finally finish off the design and in effect add a suitable skin to your projects. In order to get the most out of Joomla! I recommend that you try and get better at CSS and you will in no time be producing visually pleasing and accessible websites.
At this stage you will have done most of the hardest part of getting your project off the ground. Finishing the template is a case of styling it to suit your needs. In order to be able to style my interface I will have to look at the source code in my browser by going to View -> Source in IE or View -> Page Source in Firefox. There we will see the class names and ids that Joomla! generates when it inserts a module into your webpage. These then act as 'hooks that you use for your CSS declarations.
Following screenshot shows the final template:
[edit] Advantages of Joomla! Templates
By using a template that is well designed (or by building your own), you will have gone a long way towards having a more accessible website before you even write a line of code or add any content.
So what are the advantages of using Joomla! templates?
There is a complete separation of content from presentational elements. Using CSS for layout means that you are using the right tool for the right job. Leave the tables for your tabular data and nothing else.
One of the greatest benefits of CSS is that by changing a rule in the CSS declarations, you can change the entire look and feel of all of the elements of your site that use that rule.
This makes site design and maintenance so much easier than having to individually change each instance of each element like you had to do with inline styles (back in the day).
It therefore means that when you use a template for your site's design, by making simple changes to your template you can make radical changes site wide, very easily.
Easily change the site's design completely by adding a new template and 'Hey presto' you now have a complete new look for your website.
[edit] Editing Joomla! Templates
Joomla! makes it rather easy to edit existing templates or to create your own.
Existing template parameters can be edited to suit your needs, as can the template's HTML and CSS using Joomla!'s own edit facility if you don't use an editor.
The CSS template editor is very useful as it gives you the ability to select and modify all the various style sheets that your site uses whether for printing out the pages of your site or adding certain style sheets to serve to other browsers or platforms like mobile devices, PDA's and so on.
This obviously gives you a great deal of control over your site's design and layout but also means that many accessibility issues can be easily avoided by using well designed accessible templates for all of the sites that you build with Joomla!. Ensuring that you use a well designed template means that you can concentrate on structuring your content and improving the information architecture of your projects knowing that the templates that you use are already well designed, can have sufficient color contrast and are a solid foundation for all of your Joomla! projects.
We have looked at the needs of users with low vision and using a color scheme that has sufficient color contrast is a great help. But what else should you be aware of? Here are some other pointers what will help to make your site more accessible.
[edit] Resizable Text
Many users with low vision will need to be able to resize the text. All modern browsers have the facility to be able to resize the text using the browser's built in controls. Some websites have a widget, which allow the user to increase or decrease the font size by pressing a + or sign. While these are OK to add if you wish, there are not really necessary, as many users who require large text will already know how to increase the font size using the browsers built in controls.
[edit] How to Make Sure That Text Will Resize
Always use a relative font size in you CSS. This means using % or ems.
For example:
#Joomla_em_header h3 {
border-top: 1px dashed #cccccc;
border-bottom: 2px solid white;
padding: 25em;
background-color: #666666;
color: #ffffff;
font-size: 1.2em;
}
#Joomla_percentage_header h2 {
color: #fff;
font-size: 110%;
padding: 2px;
text-align: center;
}
Both % and em are relative font sizes. This means that they will display the content relative to how the page author (you) sets it. So you can make all text large by default by setting this value in your style sheet and then by giving the specific site content (various headings, paragraphs or list items) higher or lower % values. The declarations that
you write will make the headings etc. appear to be larger or smaller, as you wish.
Do not use px or absolute font sizing. Using pixel values means that your font will
stay that size even if the user tries to resize your text in their browser. Hence the name absolute!
[edit] Without a Mouse
When building your site make sure that users can get around the site content without a mouse. This means that your site must be keyboard navigable. Many users will prefer to use the TAB key to navigate about your page and this method of interaction is therefore very important for people who have limited physical mobility, tremors or who have had a stroke. In fact it is preferable to try any make all your sites work without your users having to use a mouse at all. I don't have a physical disability and I still like to be able to navigate a website using my keyboard.
Unfortunately, there are only two elements within a webpage - when coding with HTML - that can actually receive focus when navigating by the keyboard and they are anchor elements and form control elements.
These are the elements that the user can use to TAB through the interface. The order that these anchor tags (hyperlinks), or form controls, appear within the source order of your pages code then determines their tab order when the user is navigating via the keyboard. Please be mindful of this when you build your site and adopt a common sense approach to your information architecture and how your structure your page. People with limited mobility who can get to sections of the site with a small number of clicks will thank you for it.
[edit] Highlighting Links
CSS can also be used to highlight the elements on the page that have focus at any point in time, which is really useful so the user can visually follow where the TAB order is going, as well as their place in the web page. This is useful for everybody and can have a particular use for low vision users as well as users with cognitive or intellectual disabilities as it can help to aid comprehension and orientation.
I will show you some sample code that you can use in your Joomla! projects to highlight the link that has focus. It's not complex at all and can be easily added to your CSS style sheet.
[edit] Some Basic Link Styles
The following is a basic link style that will make your link red. Note that you can of course use any color of hex value that you need.
a {
color: red;
}
This can be added to for various effects such as underlining your link text.
a {
color: red;
text-decoration: underline;
}
If you don't wish to underline your link text you can add the declaration text-decoration: none; or leave it out altogether.
a {
color: red;
text-decoration: none;
}
Now that we have a basic style what we need to do is tell the browser how and when to display the link in the way we want. This is called adding focus and is done using CSS pseudo-classes.
a {
color: red;
}
a:hover, a:focus, a:active {
color: yellow;
text-decoration: none;
}
Internet Explorer doesn't support a:focus but Firefox and other standards compliant browsers do. So this pseudo-class is there for them while IE just ignores it and actives the focus declaration when it comes across a:active.
So we are nearly there. There may however be a case where you will want to also change the background color of the highlighted element. This can be easily done by slightly modifying your CSS as follows.
a {
color: red;
}
a:hover, a:focus, a:active {
color: yellow;
text-decoration: none;
}
a:focus, a:active {
background-color: blue;
text-decoration: none;
}
There are more tweaks and improvements that you can do and I recommend Mike Cherims' tutorial on Accessites.org for more (http://accessites.org/site/2007/05/keyboard-friendly-link-focus/).
[edit] Skip Navigation
Allowing users to skip over groups of links like navigation bars or other groups of content is also really useful. The Accessible Template Beez, has some nice features that do just that for more, see the section on accessible templates.
'Skip navigation' or 'Jump to Content' links are rather easy to implement even if you don't use that template and are useful as they reduce the physical load on the user when they navigate your site via the keyboard.
It is basically a link to another link within your page, and that's it. It may look something like this:
<! - somewhere at the top of your page --> <a href="#content">Jump to Content</a> <! - navigation links --> <a name="content"></a> <! - start of your content or any part of page you want the user to get to -->
If you are writing in XHTML then you may wish to use both name and id attributes to ensure it works. This would look something like this:
<! - somewhere at the top of your page --> <a href="#content">Jump to Content</a> <! - navigation links --> <a id="content" name="content"></a> <! - start of your content or any part of page you want the user to get to -->
It may be better to say 'Jump to content' rather that 'Skip navigation'. This is because many users will not know what navigation is (seafaring analogies aside like 'surging the web' etc). So 'Jump to content' is good, clean, descriptive and unambiguous.
Some developers also choose to hide the 'Jump' link using CSS but it may be best to leave it visible, users with cognitive disabilities may find it useful, as the page focus will shift if the page has a lot of content and jump the user right to where they want to be.
'Back to the top' links are also very useful, especially for pages with a lot of content. This principle is exactly the same.
[edit] Accessible Templates
Beez is an extended template that has been designed for use with Joomla!. This means that it is a basic template system that does some extra stuff that you may find useful. With Beez, particular attention has been paid to Web standards and accessibility.
How has this been done? Firstly, by separating the content from the presentation and layout - the benefits of this we mentioned earlier.
Secondly, Beez uses the aforementioned skip to content links, which the Beez developers call 'Jump links'. These 'Jump links' can be tabbed through by using the keyboard and brings up several options that the user can select, depending on what part of the page the user would like to get to. On the Beez website they use three categories 'Skip to Content', 'Jump to Main Navigation' and 'Jump to additional Information'. These could be useful to screen reader users who are, in a sense, given a menu that outlines the main content types on the page. The designers of Beez see this feature as being useful for screen reader users who could use the 'Jump links' to easily get to a form within the page.
'Jump links' is an optional feature in the Beez template but I think it could also be useful for users with limited physical mobility who can toggle through these options and easily select the section of the site they want. It's a nicely designed feature of the Beez template so I'll give it the thumbs up.
Beez also boasts a 'semi-scalable' layout, which means that the developers designed the template to resize. The text does resize quite well - depending on the amount of content you put on each page
and where you put it. Its important that you keep your web page designs fluid and ensure that your text size can resize so visually impaired users can increase the size of the text and modify the layout size as they need to. Graphic designers love small text, as it does look cool, but it's often rather impractical. So care must be taken to be aware and your users will often really appreciate it if they can resize the text and actually read your content comfortably. Care has also been taken in this template to use relative font sizes (em) that allow your text to be easily resized.
Beez contains a font-size widget that your site visitors can use to increase or decrease the font size of your pages. There are different opinions about the efficacy of these kind of widgets - as there are already tools within the browser that can be used to resize text - so you should use your own judgment as to whether you should use them or not.
For more on Beez visit http://www.joomla-beez.com/.
[edit] Additional References
- For instructions on Installing Joomla v1.0, click here
- For instructions on Customizing Joomla v1.0 Templates, click here
- For instructions on Creating Accessible Joomla Templates, click here
- For instructions on Debugging and validating Joomla Templates, click here
- For instructions on Handling Joomla! Errors, click here
[edit] Source
The source of this content is Chapter 5: Creating Accessible Templates of Joomla! Accessibility by Joshue O Connor (Packt Publishing, 2007).
