Download Slide 2 - bit. Informationsdesign

Inclusion by Design
Seite 1
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.
Inclusion by Design
Seite 2
<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.
Inclusion by Design
Seite 3
<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.
Inclusion by Design
Seite 4
<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.
Inclusion by Design
Seite 5
<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
Inclusion by Design
Seite 6
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.
Inclusion by Design
Seite 7
<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.
Inclusion by Design
<Slide 7>
skip
Seite 8
Inclusion by Design
Seite 9
<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.
Inclusion by Design
Seite 10
<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.
Inclusion by Design
Seite 11
<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.
Inclusion by Design
Seite 12
<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