Inclusion by Design June 1-5 2001, Montréal, Canada

Barrier-Free Internet - 
Information Access for the Blind and Visually Impaired
by Brigitte Bornemann-Jeske (BIT GmbH, Hamburg, Germany)

Talk Manuscipt
<items in brackets <> refer to slides>

<Title>

Good afternoon, Ladies and Gentlemen. I am glad to be here and have the chance to share some experiences with you. My talk is about Barrier-Free Internet or what can be done to assure Information Access for the Blind and Visually Impaired.  

<Slide 2>
This is the Table of Content:
After a short introduction, I shall focus on the Guidelines on Accessible Web Content which have been released by the WAI - the Web Accessibility Initiative of the W3 Consortium, the international group which is organizing and surveying the Internet. Next there will be some Examples discussed - some Websites are presented and outlined what is good or poor design in the sense of accessibility. I had planned to consider some political strategies of how to foster the goal of a Barrier Free Internet, but today, I should prefer to skip this issue. Last but not least there will be some hints for further information.

<Slide 3>
First let me give you some information on Who is talking to you. I am the director of BIT Ltd. We are a service provider in the field of vocational rehabilitation and information access, sited at Hamburg, Germany. We are a small company, just 3 professionals, but networking with other organizations including the German Blind Unions. So we have been able to contribute to large projects during the last years. 

BIT means Barrier Free Information Technologies. We have a strong background in adapting computers for disabled office workers including software training. For long years, we have been specializing in usability testing of computer access devices for the blind and visually impaired, products like screenreaders, speach output, braillebars, large screens. Only recently have we widened our portfolio by web design services. These we offer under the premises of ”Design for All”. We are designing accessible, easy to use information systems, and also are offering consultancy services in this area. 

So we know a lot about what blind people need and what their access technologies can do for them. Today I’ll focus on how the Web should be so that the blind could take the best advantage of the information provided there.

<Slide 4>
Some thoughts to identify the situation about Barrier Free Internet. 

I needn´t go in much detail to point out that the Internet is a good information source for anybody including the Blind and Visually Impaired, making available many things of every day life like distance learning, shopping, public services, and communication. To the blind and visually impaired, equal access to information makes a difference in independent living and quality of life, for the community it means less special needs to be cared for. 

However, blind people find more and more that many Websites are not accessible to them. The information cannot be read by the access technologies blind people rely upon. Screen readers, and some types of web browsers, will only work properly if web pages are written in correct HTML. HTML is Hyper Text Markup Language, the standardized programming language for internet pages. Many web designers do not apply the rules of proper, accessible HTML, maybe because they do not know them, as they have never had a formal education, or, on the other hand, because they aspire to more sophisticated methods of web content presentation. Many of the little animations and pop up boxes which you can nowadays find in the Internet are not HTML but different programming languages like Java or Flash. - you may put it like HTML is going to become outdated nowadays. There are a couple of design principles on how to handle these add-ons in an accessible environment, the WAI guidelines, about which I am talking today. These guidelines are generally ignored not only by the public but also by web designers and programmers.

Actually, the Blind Unions are doing a considerable amount of political work in order to raise public awareness on the fact that the blind want to read the Internet and how easy it would be to attend to them. But let me cut this aspect of politics short today, as I should like to focus on the design work we are doing. Just Iet me expess that I am very grateful for the ”Design for All” approach of this congress, which is indeed the strategy we are following as a company to convince our customers. In Germany, we do not yet have the legal requirement of equal access to public information systems, so our point is to include the aspect of accessibility for the blind and visually impaired under the goal of better usability for all people. 

Als I shall point out, we still need some more best practices, especially considering large information systems. On this congress, I did have the pleasure to learn a lot about this aspect from architects talking about orientation in buildings, so it was good to meet people from other professions, too.
<Slide 5>
WAI Guidelines
The rules of inclusive Web design are written down in the Web Content Accessibility Guidelines of the W3C (World Wide Web Consortium). 
As I mentioned before, the W3C is just an international organizing body, so these guidelines are just recommendations and do not have the status of a legal standard. 

This is the web adress where you can read them in detail: http://www.w3.org/TR/WAI-WEBCONTENT/

From these guidelines are drawn some Quicktips to make accessible web sites, which are disseminated a lot by accessibility consultancies. You can have them in several languages as a small card in business card format, or even as a mousepad, I have one here from Bartiméus, an accessibility consultancy from the Netherlands.

Is anybody here in the audience who are web programmers or are used to maintain their own homepage? (Some few are.) Has anybody seen these Quicktips before? (Most of them did.)

They are very detailed tips for HTML programmers - the do‘s and don‘ts of accessible HTML code. I shall try to explain some of them for a general audience:

Images and Animation: Use the ALT Attribute to describe the function of each visual.
In other words: put a text label on any graphic, especially on those important for navigation, because access technologies cannot read graphics. The same applies to the next tip on image maps. Up to now this has been the most important rule for accessible websites, which is easy to comply with but often neglected. There is a quicktip for testing saying: switch off graphics in your browser - if you then can understand what a homepage is about, and how to use it, a blind person does, too.
Hypertext links: Use text that makes sens when read out of context. Avoid “click here”. This tip attends to blind people who are used to tabbing through all the links on a page, in order to see what is behind, but if their speach output repeatedly says ”click here” this is not much of an information. It would be better to name the destination of each link properly.
Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style. In other words: make use of HTML as a structuring language. If you want to outline a heading, tell the system it’s a heading, and not it is, let’s say, a different colour. Define colours separately in a stylesheet. Neglecting this rule is one of the most common mistakes which make it difficult for the visually impaired to use their personal set of fonts and colors without loosing the information about page organization. 
Scripts, applets, plug-ins: Provide alternative content in case active features are inaccessible. This refers to animation, but also to data base content, which are more and more being included in websites as separate programs. They mostly are not accessible by screen readers, a major problem that is going to be really serious. We have just started a study on so called content management systems in order to find out what can be done. 

The next two tips concerning Frames and Tables deal with common features to structure the content of a website - column structures are used in order to discern areas of different function, especially navigation and text areas. An example is these slides: They have an overview block aside, giving you some orientation on where we are in the context of this talk. If these were a website, a blind person would probably not be able to read them easily. Computer access devices are a line-based type of media, reading line by line of the screen, thereby mixing up the blocks so that the sense is getting confused. I shall return to this issue shortly and discuss how to handle it.
<Slide 6>
While the Quicktips are mostly focused on access for the blind and visually impaired, the WAI Guidelines as a whole are dedicated to a Design for All approach, where the visually challenged actually represent the bottleneck. The Guidelines take in account all the different people that now are going to use the Internet: 
•	the elderly
•	people with malfunctions in vision, hearing, mouse handling
•	people in challenging surroundings such as car driving 
•	and people using the most different technical equipment. 

The Principles of the Accessibility Guidelines may be summarized to some major requirements:
First they are concerned with legibility for all perception needs and put it in terms of Multimodal Legibility: For the most constraint circumstances, there should always be a text alternative available, so that graphics and multimedia content could be replaced or transformed. This is good for those using access technologies, as well as for those using a cellphone or a slow modem for transmission who should prefer to switch graphics off. 
In the nearer sense of legibility, the guidelines consider fonts, color, contrast which should be made up for the ”normal” sight of an ageing, 40+ person – this is our interpretation of this guideline for our practical work - and should allow personalized browser settings for the visually impaired. Flicker and animation should be avoided. 
Next, the guidelines are concerned with how the Structure of a web site can be made clear under all circumstances. They point out that tables, frames, columns should be handled very carefully, because they depend on a large screen available. Not only on line-based devices, but also on small screens they loose their capacity of giving an overview. Once again these slides give you an example: they were formatted as a PowerPoint presentation, but now as I use them on an overhead, this overview block turns out to be nearly useless. So, you better think on other means of facilitating context orientation and navigation when designing for an audience with different technical equipment. 

This is one of the major demands of the guidelines: Design for device-independence: This is why standards, especially proper HTML are so important. New technologies which are beyond standards work only on a few devices - they need a special, the latest and most potent computer. Of course we cannot stop new technologies - nor should we want to - but provide alternatives for all users who still use their old equipment, or use a screen reader which also relies upon given standards. 
<Slide 7>
skip
<Slide 8>
Examples: “Don‘t use Tables for Layout”
http://www.ccrw.org/worldcongress/honorary.htm

Let us discuss some of the problems of installing accessible design on an example. This is the CCRW Congress Site which many of you will have seen before, and I am sorry to present it as an example of imperfect accessibility. As this is a site addressed to a disabled audience, you should suppose to find the highest accessibility standards applied.

Bus as you see here, this site uses a menu column at the left side of the screen, which we just learned causes problems for screen reader users who will hardly be able to read it properly.

To me it is an example of the obstacles to struggle against when engaging in accessible design. Since call of papers, I visited this site repeatedly and could observe that there must have been some considerable amount of testing and corrections in place. When I saw this site first, this menu column was an image map, which causes even more problems, and now it has been changed to proper text. So now the menu items can be detected, and a visually impaired person can set the colors on their own in order to get a better contrast. Yet the column structure is remaining, which most of the equipment blind people are using today will not read properly. 

When discussing this site with the person in charge, I found out that they were well aware that a table could cause some problem, but had used the testing tools available and got a positive ranking. No blind person had ever complained to them about the menu. Yet, on the other hand I heard from a blind person who was very skilled on his computer but it took him hours to find a special information he was looking for on the Congress site. 

Without discussing this case any further - what could be interesting among experts, as the accessibility of tables in general is currently changing - I should like to point to this basic obstacle to accessible Web design which is very common:

Accessibility tools are used as a repair kit but not as a guideline to a bottom-up construction of an accessible site. So, even if there is awareness of the goal and of the means of accessibility, web masters are having a hard time to comply. They are relying upon hints from users to detect obstacles in their pages, but users are not very likely to complain unless very certain of a solution. Moreover - when done, only minor improvements can be implemented to a site without too much of an effort. In this case, the overall structure of CCRW congress site would have to be changed. Not many chief staff would dare such a decision.

<Slide 9>
Examples: “Don‘t use Java Script” / “Don‘t use moving content”
http://www.bundesregierung.de/
(To readers: Sorry, but the page shown in the slides cannot be referred to more precisely, due to the frame structure of the site. If you can use mouse-over pop up boxes, you may wish to click on “Deutsch – Themen A-Z – Informationsgesellschaft – Internet für Alle”, then activate the pop up on “Service”. )

This is the website of the German Federal Government which is accessible to blind people by a separate text-only version. 

As you can see here, this site also uses a column structure, and additionally there is a small service block on each page. They use a pop up box showing up when you touch this menu item with the mouse and disappearing when the mouse is off. There are several accessibility problems with these boxes - screen readers will have difficulties to find them, the font size cannot be changed, and so on. Funny to find out that there is a link to the text only version from here, which no blind person would find. Of course the main link to the text only version is the first item on the homepage, which is perfect. 

To me this is an example why programmers have good reasons to use non HTML features. It is obvious that this pop up box is not installed as gimmicks, or to show off that they are on top of technology, but in order to facilitate the user’s exploration of the site content. There is an understanding of usability saying that there should always be the menu on the screen, so that the user may not lose orientation, and here you see a solution of how to apply this rule in a large, complex information system. The main menu of this site is placed as a bar in top, I cut if off in the slide to show this side menu. 

So you can understand that it is not always because of ignorance when accessibility requirements are frauded, but because things seem too complex to comply. 
<Slide 10>
Examples: Try something else: Mind-Mapping
http://www.orgoville-hamburg.de/m_index.html

Now I shall show you some of our own developments. BIT is acting as a consultancy, so we have to present solutions for this problem of large, complex information systems. As you can see here, we also are deeling with the prejudice that accessible design must be dull - this is definitely an esthetic site which performs perfectly the atmosphere and corporate identity of the organization. 

This is a commercial site presenting the curriculum of a recreational and therapeutical service provider. The program brochure is 70 pages in print, they give about 120 classes and lectures a year. There are a wide range of topics, including yoga, massage, meditation, and all levels from first touch up to vocational education. In order to present this complex structure, we have tried something else. 

This is the main menu, where we have grouped the branches in the style of mind maps, or concept maps as they are called in educational methodology. By installing such maps, we are avoiding the long listings of menu items which I feel do not help much for an overview, and also are avoiding a very abstract top level menu which would fit in a menu bar. 

<Slide 11>
Examples: Try something else: Hierarchic Navigation
http://www.orgoville-hamburg.de/massage/ma_index.html

This is a submenu, the massage school, grouped in the same mind mapping style. All major branches are represented by such a map, they fit in a small screen with a solution of 800 * 600 used by old computers and screen readers. You see that there is not much text on the screen, we prefer to have several small pages over filling up the screen with various types of content. 
We have menu pages and text pages, they are in a hierarchic or tree order. That means, there are several levels, from the main menu down to the description of the single classes, you navigate through them by clicking on this set of arrows in the upper right, representing the previous and next page and up to the next level. Users said that they could easily understand this structure. By clicking through, you build something like a 3-dimensional mental map of the site structure. 
The navigation buttons are doubled by text links for those who do not on a first glance recognize the function of the arrows. To screen readers, both types of links are accessible. Additionally, there is an alternative navigation provided by a sitemap which contains all pages in a structured list. We learned this from ergonomics: always provide for different mental models of viewing and understanding.

I am sure that this is a structuring model which could deal with thousands of pages of content, and I hope that we shall soon be able to prove this on an even bigger project. 

Summary
Here I am at the end of my presentation. I tried to line out the basic issues of accessible web design, and hopefully could make it clear to you that some aspects could easily be applied if only there was sufficient public awareness to do so. Other aspects are more complex, they need to be worked through at every single site. This is what a consultancy can do for an Internet publisher. 

Let´s have a short glance on Further Information 

<Slide 15>
Here are some books listed, two manuals on accessible design and this study on online shops by the RNIB: ”Get the message online” which is very useful for more examples. 

Slide 14
Here are some web addresses where you can find guidelines and consultancy services, you better read them later, this presentation will be available on Internet. 

Tank you very much for your attention. 

Copyright: BIT GmbH  2001