Accessibility & Guidelines

Präsentation zum Thema: "Accessibility & Guidelines"—  Präsentation transkript:

1 Accessibility & Guidelines
Jakob Lindenmeyer Institute of Scientific Computing, ETH Zurich Im Mai 1999 besuchte ich zusammen mit Reto & Roberto die 8. WWW-Konferenz in Toronto. Zusammen mit Reto hatte ich dort eine Präsentation zum Thema Accessibility und in meinem Teil werde ich hauptsächlich auf diese aktive Teilnahme der ETH an der WWW-Konferenz und dem Echo, das dadurch ausgelöst wurde, eingehen. Jakob Lindenmeyer, Full presentation:

2 Procedure ETHZ Internet Guidelines Violations at our Institute
Accessibility Discussion Jakob Lindenmeyer, Full presentation:

3 Goals of the guidelines
Improve Quality Corporate Design (e.g.: ETH-logo) User friendly (accessible for all, navigation) Actual (last update date, functional links) Jakob Lindenmeyer, Full presentation:

4 Violating personal homepages @ IWR
Over 60 % of all personal homepages at the Institute of Scientific Computing violate the ETH Internet guidelines. Compatible pages Violating pages Detailed results Jakob Lindenmeyer, Full presentation:

5 Homepages compatible with the IR
Peter Arbenz Laurent Bernardin Walter Gander Roman Geus Gaston H. Gonnet Leonhard Jaschke Rolf Michael Koch Jakob Lindenmeyer Thom Mulders Anne Preisig Florian Schlotke Arne Storjohann Jakob Lindenmeyer, Full presentation:

6 Homepages violating the IR
Erwin Achermann Daniel Bielser Oliver Bröker Markus Gross Michael Hallett Hans Hinterberger Hubeli Andreas Chantal Korostensky Claudia Lorch Reto Lütolf Niklaus Mannhart Florian Nussberger Ronald Peikert Martin Roth Samuel Hans Martin Roth Thomas Sprenger Oliver Staadt Ulrike Stege Rolf Strebel Xianghong Zhou Matthias Zwicker Jakob Lindenmeyer, Full presentation:

7 Details about everybody’s violations
Under: Jakob Lindenmeyer, Full presentation:

8 Most common violations
No last update date (Art. 5 Abs. 1) No uplink (Art. 5 Abs. 2) Inofficial style elements (Art. 5 Abs. 3) No address (Art. 3 Abs. 1) No Organisational unit (Art. 3 Abs. 1) …and further violations… Jakob Lindenmeyer, Full presentation:

9 The Logo Problem Wrong: Correct:
Jakob Lindenmeyer, Full presentation:

10 Accessibility “Zugänglichkeit” definiert sich dadurch, wie einfach ein Dokument auf dem Web durch einen Empfänger “verwendet” werden kann. Je höher die Anforderungen, desto schlechter ist das Dokument zugänglich. Anforderungen beinhalten die Fähigkeit der benötigten Hard- & Software sowie auch die Fähigkeit der Person, welche versucht die in einem Dokument zur Verfügung gestellte Information zu verwenden. Accessibility is defined as how easy a document on the web can be "used" by a client. The higher the requirements are, the less accessible a document is. Requirements include capabilities of the hardware and the software deployed as well as the physical capabilities of the person trying to use the information provided in a document. A document may include text, sound, graphics etc in any combination. This paper will concentrate on technical issues, non-technical issues such as language, intellectual capabilities of the person required to actually understand the contents etc are important as well, but beyond the scope of this work. Jakob Lindenmeyer, Full presentation:

11 «Accessibility benefits all!»
Accessibility unterstützt: Menschen mit Behinderungen Mobile Devices Internationalization Jakob Lindenmeyer, Full presentation:

12 Problematik von «fettem» Design
«Low resource»-Geräte Mobile Devices Alte Software (Browser, Plug-In’s) Menschen mit Behinderungen Vorschriften, Richtlinien, Gesetze Jakob Lindenmeyer, Full presentation:

13 «Low resource»-Geräte
Ältere Computer (z.B. JVM auf 486) Kleiner Bildschirm (z.B. VGA & Monochrom) => s Langsames 14.4 Kb/s-Modem Langsame Netzanbindung (Kein ISDN) Verbreitet bei Studierenden (beschränkte finanzielle Ressourcen) Jakob Lindenmeyer, Full presentation:

14 Mobile Devices Mobiltelefon (Bp: Nokia; s = ca. 2”)
Handhelds (Screensize s = ca. 4 Zoll) Auto-Computer (mit Sprachausgabe für Fahrer) Browser & CE in Haushaltsgeräten (z.B. Kaffeemaschine) CE-Browser => fB Jakob Lindenmeyer, Full presentation:

15 Alte Software z.B. Browser - Neue PC’s haben oft noch Internet Explorer 2.0 vorinstalliert. Browser im Institut? oder ? Plug-in’s (z.B. Shockwave, Quicktime, Realplayer) Jakob Lindenmeyer, Full presentation:

16 Menschen mit Behinderungen
Laut Microsoft: 8%, WWW8: 10% Farbenblindheit (4 % aller Männer) Sehbehinderung (Grosse Schriften notwendig) Blindheit => Audio-Browser oder Braille Bewegungseinschränkung (Keyboard- bzw. Mouse-only Navigation) Taubheit (Alternativen für Audio-Dateien) Tages-Anzeiger vom S. 61: "Auch Blinde wagen sich ins World Wide Web".URL: Jakob Lindenmeyer, Full presentation:

17 Poster Abstract: Tim Berners Lee - often referred to as the "father of the Web" - once said: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect". To underline this, the W3C has started the "Web Accessibility Initiative" (WAI) in But regardless of these activities, it seems to me, many designers of web pages do not care too much about accessibility. This poster tries to find out what influences accessibility of web pages. Research was performed on how the code generated by an authoring tool and the HTML -tags and attributes present in a document influence accessibility. In addition, the impact of the capabilities of the hardware and software deployed on the client side as well as potential disabilities of the person who actually tries to use the information was analyzed. This was done in our accessibility lab, where web pages were looked at with many different browsers on various hardware platforms. Based on the findings, a method was developed to measure accessibility of web pages and a list of recommendations to create documents that are accessible by virtually everyone was compiled. Jakob Lindenmeyer, Full presentation:

18 «Zugänglichkeit des Inhalts» c
Testen mit verschiedenen Clients (Bp: ZKB) Wieviel Informationen erreicht man mit verschiedenen Browsern («content-accessibility» c) (Berücksichtigung der Fähigkeiten der verschiedenen Browser (fB)) To measure accessibility, web pages have been tested with different clients (see Example). An accessibility value in percent was calcula-ted depending on how much of the web pages actually could be used with each browser ("content-accessibility" c) and depending on each browsers capabilities (fB). Jakob Lindenmeyer, Full presentation:

19 Browser-Faktor fB(i) Many web sites depend on Java scripts or applets, but some browsers are not able to execute such scripts, including Microsoft Pocket Internet Explorer on Windows CE and most non-graphical browsers, such as Lynx or WebSpeak. Also, some people may have configured their browser to disallow the execution of any scripts locally for security reasons. fB(i) = Browser factor Jakob Lindenmeyer, Full presentation:

20 «Text als Bild»-Faktor fi
Problematiken von Text als Bild: 1. Bilder skalieren nicht. 2. ...eignen sich nur für grafische Browser. 3. ...werden durch Suchmaschinen nicht indexiert. 4. ...verlangsamen den Transfer. 5. ...sind schwieriger zu unterhalten. Text as images: 1. Images do not scale. 2. Images are good for graphical browsers only. 3. Images will not be indexed by search engines. 4. Images slow down the transfer of a document. 5. Images are more difficult to maintain. fI = "text as images"-factor: No: [1], Yes: [0.8] Jakob Lindenmeyer, Full presentation:

21 Minimale Bildschirmbreite s
Fixe Attribute von Tabellen oder Frames können zu unzugänglichen Bereichen einer Webseite führen. Werte: z.B. VGA: Pixel XGA: 1024 Pixel Resolution of the screen: Some layouts depend on a minimal win-dow width. Fixed width attributes of tables or frames may lead to inaccessible parts of a document on screens with low resolution. s = minimal screen width of the web page in pixels. Heuristically 640 pixels (VGA) has been chosen as an acceptable screen width without loss of accessibility. The formula leads to a decrease of the accessibility by 10% if a minimal screen width of 1024 pixels (XGA) is required. Jakob Lindenmeyer, Full presentation:

22 «Fixierte Farbe»-Faktor fC
Anzahl der Farben: Je kleiner, desto schlechter unterscheidbar Fixierung der Farbschemata: Schwierigkeiten bei Farbwahrnehmung und Unterschiede bei Monitoren Number of colors: The lower the number of supported colors, the less distinguishable similar colors may become. Fixed color sche-mes: Some people have difficulties to see some particular colors or color combinations. In addition, colors appear different from monitor to monitor. fC = "fixed color"-factor: No: [1], Yes: [0.9] Jakob Lindenmeyer, Full presentation:

23 Measuring Accessibility
To measure accessibility, web pages have been tested with different clients (see fig.1: Browsers). An accessibility value in percent was calculated depending on how much of the web pages actually could be used with each browser ("content-accessibility" c) and depending on each browsers capabilities (fB). Let: a = accessibility value in percentages c = content-accessibility: the information is: fully accessible: [100%], still useful: [67%], important information is missing: [33%], not accessible: [0%] fB = browser-factor: Fig.1: Browsers (1) fC= "fixed color scheme"-factor: No: [1], Yes: [0.9] fI = "text as images"-factor: No: [1], Yes: [0.8] s = minimal screen width of the web page in pixels. Heuristically 640 pixels (VGA) has been chosen as an acceptable screen width without loss of accessibility. The formula leads to a decrease of the accessibility by 10% if a minimal screen width of 1024 pixels (XGA) is required. then: see formula in slide Publikation unter: Jakob Lindenmeyer, Full presentation:

24 Rangliste Complete list of results under: Jakob Lindenmeyer, Full presentation:

25 ZKB mit Netscape Communicator 4.5
Bildschirmbreite = 640 Pixel Jakob Lindenmeyer, Full presentation:

26 ZKB mit MS Pocket Internet Explorer
(Kein Java) Jakob Lindenmeyer, Full presentation:

27 ZKB mit Lynx V 2.8 (Textbrowser)
Jakob Lindenmeyer, Full presentation:

28 ZKB mit pw WebSpeak (Audio Browser)
Jakob Lindenmeyer, Full presentation:

29 Solutions “It’s all just a question of organisation!”
HTML-validators und -correctors (e.g. W3C) Accessibility-Checker e.g. Bobby Online-Help (e.g. guidelines of ETH or W3C) Solution for the future: XML Jakob Lindenmeyer, Full presentation:

30 XML From 1 XML-Mastercode extract: WWW-Full version
“WWW light” for Mobile Devices Audio version Print version Internationalization: E, D, F, I, J, Chinesich, … Jakob Lindenmeyer, Full presentation:

31 WAI Quick Tips Reference Card
 Handout Jakob Lindenmeyer, Full presentation:

32 German translation of the W3C-Quicktips
Liegt unter:  Handout Tips zur Entwicklung zugaenglicher Webseiten * Bilder und Animationen. Verwende das "ALT"-Attribut zur Beschreibung der Funktion aller visuellen Objekte. * Image maps. Benuetze Client-side "MAP" und Text fuer "Hotspots". * Multimedia. Biete Ueberschriften, Abschriften von Tondokumenten, Beschreibungen von Videosequenzen und alternative Versionen an fuer den Fall, dass nicht unterstuetzte Formate benutzt werden. * Hypertext-Verknuepfungen Verwende sinnvollen Text fuer Links. Vermeide z.B. "Hier klicken!". * Seitenorganisation. Verwende Titel, Listen und eine einheitliche Struktur. Setze nach Moeglichkeit CSS zur Steuerung des Layouts ein. * Grafiken. Biete Zusammenfassungen an oder verwende das "LONGDESC"-Attribut. * Skripte, Applets & Plug-ins. Stelle Alternativen zur Verfuegung fuer den Fall, dass gewisse Funktionen nicht unterstuetzt werden. * Frames. Kennzeichne Frames mit "TITLE" oder "NAME" Attributen. * Tabellen. Tabellen sollen auch zeilenweise gelesen verständlich sein. Fasse zusammen. Vermeide den Missbrauch von Tabellen fuer die Darstellung. * Ueberpruefung. Validiere den HTML-Code. Benuetze Validierungswerkzeuge und Textbrowser zur Ueberpruefung der Zugaenglichkeit. Jakob Lindenmeyer, Full presentation:

33 Publications & handouts of this presentation
ETHZ Internet Guidelines Paper-Abstract “Measuring Accessibility” Web Content Accessibility Guidelines WAI Quick Tips Jakob Lindenmeyer, Full presentation:

34 Now, there’s still some time for Questions & Discussion
Get the slides under… Now, there’s still some time for Questions & Discussion Jakob Lindenmeyer, Full presentation:

35 Discussion points Accessibility and Design: Opposite?
Redesign vs. New design: Priorities Which corrections have higher priority? Paper-Design vs. Object-oriented Design (XML) Sacrifice of 5% of the visitors? Filter in Webserver for validated pages? How to improve the quality of the ETH-web? Jakob Lindenmeyer, Full presentation: