Network for Inclusive Distance Education

Cascading Style Sheet (CSS) Generator

The University of Toronto's Adaptive Technology Resource Centre (ATRC) has created a Cascading Style Sheet (CSS) Generator that allows users to control how web pages are displayed on their monitor.

This tool was part of the ATRC's Network for Inclusive Distance Education (NIDE) project and funded through Networks Ontario's Telecommunications Access Partnerships (TAP) program. NIDE projects are designed to make distance education available to all Ontarians – especially those with special needs.

Distance learning enables students to complete courses at home or work, communicate with faculty members and other students via computer-based tools such as email, electronic forums, and videoconferencing. It can be particularly helpful to students with disabilities who face transportation, accessibility, and technological barriers in many traditional learning environments.

The CSS Generator allows people with low vision, colour blindness, mobility or cognitive problems to change font colours, font size, and enlarge hyperlinks to improve web site accessibility. This utility makes it easy for individuals to create their own style sheets and customize web page presentations to meet their own special needs. It creates style sheets automatically. Users are not required to have any HTML or CSS coding knowledge.

After the CSS Generator identifies the type of browser being used, clients are presented with the option of selecting a pre-existing style sheet designed to meet special needs, or creating one of their own choosing. The CSS utility will generate the style sheet and email it to the user along with instructions on how to incorporate it into their web browser.

The CSS Generator offers four pre-configured style sheets selected via radio buttons. They include:

• a style sheet for low vision users that increases font size and maximizes colour contrast between the background and text.
• a style sheet for colour-blind users that eliminates colours and maximizes contrast between the background and text.
• a style sheet designed to assist users with limited manual dexterity by increasing the size of links.
• a style sheet designed to assist users with cognitive disabilities by increasing text size, line spacing, and enlarging links.

For those who wish to create a customized style sheet, select the radio button "Design your own" (style sheet). A variety of preference settings are offered in an easy-to-use form consisting of drop down menus, checkboxes, and text entry fields. Settings determined by the user will be applied to all web pages they choose to view.

Should an individual decide to design their own style sheet, they have five categories to choose from. They include: Basic Document Attributes; Headers; Indents; Tables and Images, and; Anchor Colours.

Basic Document Attributes allow users to set text and background colours, text size, and line spacing. The Header section controls how the various headings are displayed on a web page while Indents enables users to specify the amount of spacing when indenting list items and word definitions.

With regard to Tables and Images, users have the option of selection document colours for tables, choosing border colours for table cells, widening table cell borders, adding additional spacing to table cells, and widening borders around anchor images (i.e. images used as a hyperlink). The "Design your own" style sheet form also allows users to choose specific colours for unvisited, visited and active links on a web page.

Clients can test their style sheets by entering the address (i.e. the URL) of a web page and having their preferences applied to that document. In addition to emailing the style sheet to the client, the source code is also displayed at the bottom of the CSS Generator page. To save the information as a Cascading Style Sheet, copy and paste the code into a new document and attach the extension .css to the filename (i.e. my_style.css).

>>> Access the CSS Generator <<<