Professionelle Suchmaschinenoptimierung - II

Transkript

1 Professionelle Suchmaschinenoptimierung - II Ziel: Themen: Erlernen konkreter Umsetzungsparameter für valides, barrierearmes Webdesign 1. XHTML - Angaben im Dokumentenkopf 2. XHTML - Angaben im Dokumentenkörper 3. CSS - Formatzuweisungen 4. Prüfwerkzeuge ITIB IT in Berlin Christiane Müller contact@itib.de Veranstaltungsort: IHK Cottbus Datum: 02. Dezember 2008

2 Barrierefreies Webdesign Dimensionen der Barrierefreiheit Standardkonformität Zugänglichkeit (Accessibility) Gebrauchstauglichkeit (Usability) Verständlichkeit Design traditionelle Barrieren abbauen Tabellen-/Frame-basierte Layouts ablösen semantisch fehlerhaften Code korrigieren Inhalt und Layout trennen Standards und Richtlinien umsetzen nutzerorientierte Gestaltung anstreben medienneutrales Publizieren ermöglichen Bilder Konzept Schrift XHTML Struktur Aufbau WCAG Sprache Technologien Farben BITV Informationen CSS Dokumente Zielgruppen-gerecht Bedienbarkeit Christiane Müller, IHK Cottbus Folie: 2

3 Umsetzen barriere-armer Webseiten wird verschiedenen Anforderungen gerecht Inhalt und Layout sind von einander getrennt zur Nutzerführung werden Hilfen angeboten Layout ist skalierbar Schriftgrößen sind variabel Navigationselemente sind in Navigationsleisten zusammengefasst ausschließlich mausgesteuerte Ereignisse werden vermieden Überschriften und Stichwörter schaffen Struktur durchdachte Farbwahl bietet ausreichende Kontraste Christiane Müller, IHK Cottbus Folie: 3

4 Richtlinien und Gesetze 1999: Web Content Accessibility Guidelines (WCAG) Empfehlungen des World Wide Web Consortium (W3C) 14 Richtlinien mit 65 Checkpunkten verteilt auf drei Prioritätsstufen siehe : Barrierefreie Informationstechnik-Verordnung (BITV) barrierefreies Gestalten von Webseiten für öffentliche Institutionen gesetzlich vorgeschrieben siehe Christiane Müller, IHK Cottbus Folie: 4

5 Extensible Hypertext Markup Language (1) XML-Version Zeichensatz Textkörper Dokumentenkörper Dokumenttypdefinition Kopfbereich <?xml version="1.0" encoding="utf-8"?> Wurzelelement <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de" xml:lang="de"> <head>... </head> <body>... </body> </html> XML-Namensraum Dokumentensprache Christiane Müller, IHK Cottbus Folie: 5

6 Extensible Hypertext Markup Language (2) Elemente für alle Inhalte des Textkörpers korrekte Verschachtelungen von Elementen Kleinbuchstaben für Elemente, Attribute und Attributwerte Attributwerte immer in Anführungszeichen Elemente, die kein Abschlusselement beinhalten, durch einen Schrägstrich / beenden <p>das ist ein <strong>verschachtelter Absatz</strong>.</p> <p>und jetzt folgt ein Bild:<br /> <img src="..." height="..." width="..." /></p> Christiane Müller, IHK Cottbus Folie: 6

7 Cascading Style Sheets (1) Formatierung und Layout Extrahieren aller Präsentations- Informationen aus dem Inhalt Zeichenabstände Textausrichtung Objektpositionen Schriftcharakteristiken Farbeigenschaften unterschiedliche Layouts für unterschiedliche Ausgabemedien Christiane Müller, IHK Cottbus Folie: 7

8 Cascading Style Sheets (2) <p class="banner"> <img src="it.gif" width="114" height="46" alt="it-infothek-logo" /> Bachelor-Thesis<br /> Testseite Formatvorlagen<br /> Christiane Müller </p> <h1>barrierefreie Gestaltung von Internetseiten</h1> <h2>einleitung</h2> <h3>barrierefreiheit</h3> <p>textabsatz.</p> <h3>zielstellung</h3> <p>textabsatz.</p> p.banner {display: none;} Christiane Müller, IHK Cottbus Folie: 8

9 Angaben im Dokumentenkopf Dokumentenkopf <head>-element Informationen zur inhaltlichen Analyse Angaben für Suchdienst-Systeme Dokumentenkörper <body>-element alle im Browser sichtbaren Inhalte Christiane Müller, IHK Cottbus Folie: 9

10 Dokumentenkopf: Seitentitel Beschreibung des Dokumenteninhaltes 40 bis 100 Zeichen, etwa vier bis zehn Worte je mehr Worte, desto weniger Bedeutung hat jedes einzelne lesefreundlich gestalten (Groß-/Kleinschreibung, Bindestrich, Doppelpunkt) Schlüsselwörter benutzen Positiv: Negativ: <title>barrierefreiheit: Elemente einer XHTML-Datei</title> <title>barrierefreiheit elemente xhtml datei</title> Christiane Müller, IHK Cottbus Folie: 10

11 Dokumentenkopf: Metatags (1) beschreiben ein Dokument genauer Dokumenten-Anweisung: Dateityp und Zeichensatz Seitenbeschreibung: 150 bis 250 Zeichen bzw. 20 bis 30 Worte Schlüsselwort-Anweisung: Wichtige Worte des Inhalts Webcrawler-Anweisung: Indizierung seitens Suchmaschinen Sprachanweisung: Sprache des Dokumentes Verfasser, Erstellungsdatum, Herausgeber, urheberrechtlicher Hinweis, Wiederbesuchszeit <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="description" content="elemente einer XHTML-Datei." /> <meta name="keywords" content="xhtml, Elemente" /> <meta name="robots" content="noindex,nofollow" /> <meta name="content-language" content="de" /> <meta name="author" content="itib - Christiane Müller" /> Christiane Müller, IHK Cottbus Folie: 11

12 Dokumentenkopf: Metatags (2) Firefox: Extras Seiteninformationen zu vermeidende Metadaten: Ablaufdatum Weiterleitung <meta http-equiv="expires" content="0" /> <meta http-equiv="refresh" content="0; URL= /> Christiane Müller, IHK Cottbus Folie: 12

13 Dokumentenkopf: Navigation (1) Abbilden von Dokumenten-Relationen <link>-element mit rel-attribut Startseite, übergeordnete Ebene, inhaltlich vorangegangene oder nachfolgende Dokumente, Inhaltsverzeichnis, Kapitel, Index, Hilfe, Suche oder Autor <link rel="start" href="index.html" title="startseite" /> <link rel="up" href="kapitel.html" title="eine Ebene hoch" /> <link rel="prev" href="unterkapitel-1-01.html" title="unterkapitel 1.1" /> <link rel="next" href="unterkapitel-1-03.html" title="unterkapitel 1.3" /> <link rel="contents" href="sitemap.html" title="inhaltsverzeichnis" /> <link rel="chapter" href="kapitel-1.html" title="ausgewählt: Kapitel 1" /> <link rel="chapter" href="kapitel-2.html" title="kapitel 2" /> <link rel="index" href="stichwort.html" title="stichwortverzeichnis" /> Christiane Müller, IHK Cottbus Folie: 13

14 Dokumentenkopf: Navigation (2) Anzeige im Browser Mozilla: Site-Navigationsleiste (engl. Personal Toolbar) Opera: Navigationsleiste (engl. Navigation Bar) Text-Browser: am Anfang des Dokumentes Weitere Metainformationen Newsfeed-Dateien (RSS) <link rel="alternate" type="application/rss+xml" href=" title="news als RSS-Feed" /> Christiane Müller, IHK Cottbus Folie: 14

15 Angaben im Dokumentenkörper der im Browser sichtbare Inhalt <body>-element Elemente, die z.b. Überschriften, Absätze, Listen, Tabellen und Grafiken kennzeichnen beschreiben die Inhalte bringen Struktur in die Webseite ermöglichen eine gute visuelle Darstellung kommen der Suchmaschinen-Dokumentenanalyse entgegen Christiane Müller, IHK Cottbus Folie: 15

16 Dokumentenkörper: Frames (1) segmentieren das Browserfenster Grenzen der Gebrauchstauglichkeit: dynamische Veränderung der Inhalte in mehreren Frames gleichzeitig <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html...> <head>...</head> <frameset cols="100,*"> <frame name="navigation" title="zur Navigation" src="menu.html" /> <frame name="inhalt" title="zum aktuellen Inhalt" src="inhalt.html" /> <noframes>... </noframes> </frameset> </html> Christiane Müller, IHK Cottbus Folie: 16

17 Dokumentenkörper: Frames (2) Probleme Setzen von Lesezeichen fehlerhafte Interpretation Screenreader: Linearisierung wird schnell unübersichtlich Text-Browser: können Frames nicht darstellen <noframes> <body> <ul> <li><a href="menu.html">zur Navigation</a></li> <li><a href="inhalt.html">zum aktuellen Inhalt</a></li> <li><a href="sitemap.html">zum Inhaltsverzeichnis</a></li> </ul> </body> </noframes> Christiane Müller, IHK Cottbus Folie: 17

18 Dokumentenkörper: Container (1) Alternative zum Frame-Aufbau <div>-element Bereiche einer Webseite Text, Grafiken, Tabellen über Style Sheets (CSS) positioniert <body> <div class="navigation">alle Elemente und Inhalte des Menüs.</div> <div class="inhalt">der eigentliche Inhalt.</div> </body> div.navigation { position:absolute; width:20%; } div.inhalt { position:absolute; width:80%; margin-left:20%; } Christiane Müller, IHK Cottbus Folie: 18

19 Dokumentenkörper: Container (2) Christiane Müller, IHK Cottbus Folie: 19

20 Dokumentenkörper: Überschriften strukturieren Text und gliedern den Inhalt optische Merkmale durch logische sicherstellen <h1> bis <h6>-element <h1>barrierefreie Gestaltung von Internetseiten</h1> <h2>einleitung</h2> <h3>barrierefreiheit</h3> <p>textabsatz.</p> <h3>zielstellung</h3> <p>textabsatz.</p> Christiane Müller, IHK Cottbus Folie: 20

21 Dokumentenkörper: Listen (1) Aufzählungslisten, unsortiert <ul>-element nummerierte Listen, sortiert <ol>-element <p>eine einfache (ungeordnete) Liste:</p> <ul> <li>erster Punkt einer einfachen (ungeordneten) Liste</li> <li>zweiter Punkt einer einfachen (ungeordneten) Liste</li> </ul> <p>eine geordnete Liste:</p> <ol> <li>erster Punkt einer geordneten Liste</li> <li>zweiter Punkt einer geordneten Liste</li> </ol> Christiane Müller, IHK Cottbus Folie: 21

22 Dokumentenkörper: Listen (2) eigene Grafik als Listenpunkt über CSS einbinden Alternative angeben, die bei Nichtladen der Grafik zum Einsatz kommt <ul class="eigene_grafik"> <li>listenpunkt 1</li> <li>listenpunkt 2</li> <li>listenpunkt 3</li> </ul> ul.eigene_grafik { list-style:url(blauer_kreis.gif) disc; } Christiane Müller, IHK Cottbus Folie: 22

23 Dokumentenkörper: Tabellen (1) Kennzeichnung tabellarischer Daten <table>-element Elemente: Attribute: Überschrift, Daten- und Kopfzellen Zusammenfassung, Kurzbezeichnung und Beziehungszuordnung Christiane Müller, IHK Cottbus Folie: 23

24 Dokumentenkörper: Tabellen (2) <table summary="behinderte Menschen in verschiedenen Altersstufen, unterteilt in weiblich, männlich und gesamt."> <caption>behinderte Menschen nach dem Ergebnis des Mikrozensus Mai 2003</caption> <tr> <th></th> <th abbr="insgesamt" id="gesamt">behinderte insgesamt</th> <th abbr="männlich" id="mann">behinderte männlichen Geschlechts</th> <th abbr="weiblich" id="frau">behinderte weiblichen Geschlechts</th> </tr> <tr> <th id="arbeiter">25 bis 45 Jahre</th> <td headers="arbeiter gesamt"> </td> <td headers="arbeiter mann"> </td> <td headers="arbeiter frau"> </td> </tr> </table> Christiane Müller, IHK Cottbus Folie: 24

25 Dokumentenkörper: Tabellen (3) Layouttabellen vermeiden Probleme bei Linearisierung Mehrspalten-Layout wie bei Print-Medien komplexe Formulare Christiane Müller, IHK Cottbus Folie: 25

26 Dokumentenkörper: Formulare (1) Eingabefelder an durchschnittlicher Textlänge ausrichten Benutzerunterstützung bzgl. Eingabeformat Beschriftung über CSS links oder oberhalb des Elementes Pflichtfelder durch * oder Pflicht kennzeichnen <fieldset> <legend>persönliche Daten</legend> <label for="vorname">vorname:</label> <input type="text" id="vorname" value="ihr Vorname" /><br /> <label for="nachname">nachname:</label> <input type="text" id="nachname" value="ihr Nachname" /> </fieldset> Christiane Müller, IHK Cottbus Folie: 26

27 Dokumentenkörper: Formulare (2) Buttons mit Beschriftung auf Aktion hinweisen ( Suchen, Weiter, Bestellen ) Erscheinungsbild ist abhängig von Betriebssystem und Browser von links nach rechts: Microsoft Windows XP, MacOS X 10.3, Linux Debian 3.0 von oben nach unten: Opera, Mozilla Firefox, Microsoft Internet Explorer Fehlermeldungen hervorheben, im Zusammenhang ausgeben komplexe Formulare: Übersichtsseite mit Korrekturmöglichkeit Bestätigungsseite mit den versandten Daten ausgeben Christiane Müller, IHK Cottbus Folie: 27

28 Dokumentenkörper: Grafiken (1) Schriftgrafiken häufig für Bedienelemente verwendet (Navigation, Schaltflächen) Problem für Screenreader, Suchmaschinen, Textbrowser können nicht an Benutzeranforderungen angepasst werden Alternativtext: Aussage des Bild-Elementes wiedergeben <a href="kontakt.html"><img src="briefkasten.gif" alt="kontakt" /></a> alt-attribut hinterlegt: Attributwert wird vorgelesen leeres alt-attribut hinterlegt: Bild wird übersprungen kein alt-attribut hinterlegt: Bildname wird vorgelesen Christiane Müller, IHK Cottbus Folie: 28

29 Dokumentenkörper: Grafiken (2) Informative Grafiken unterstützen den Inhalt und das Thema der Webseite Symbol und Logo: Bedeutung wiedergeben Fotos: knapp beschreiben <img src="gebaeude.gif" alt="die höchsten Gebäude der Welt" longdesc="gebaeude.html" /> Informationen nicht ausschließlich über die Farbe vermitteln verschiedenfarbige Linien zusätzlich über Linienart unterscheiden vor wechselndem Hintergrund erkennbar Problematik Transparenz animierte Bilder vermeiden Problematik Aufmerksamkeit Christiane Müller, IHK Cottbus Folie: 29

30 Dokumentenkörper: Grafiken (3) Layoutgrafiken: ausschließlich ausschmückender Charakter zur visuellen Unterstützung <p><img src="pflanze1.gif" alt="eine Pflanze" /> Text über Pflanzen...</p> als Platzhalter ohne Informationsgehalt (auch Farbflächen, Muster) <p><img src="pflanze1.gif" alt="" />Text über Pflanzen, die Natur...</p> <a href="kontakt.html"><img src="briefkasten.gif" alt="" /> Kontakt</a> Christiane Müller, IHK Cottbus Folie: 30

31 Dokumentenkörper: Grafiken (4) Alternativtext contra Bildbeschreibung Alternativtext (alt-attribut) Bildbeschreibung (title-attribut) - kann auch im Kontext erfolgen <p><img src="gebaeude.gif" alt="die höchsten Gebäude der Welt" title="fotocollage der höchsten Gebäude der Welt: Gebäude A, Gebäude B, Gebäude C" /><br /> Bildbeschreibung "Die höchsten Gebäude der Welt": Fotocollage der höchsten Gebäude der Welt. Von links nach rechts: Gebäude A mit xx Meter, [...].</p> Christiane Müller, IHK Cottbus Folie: 31

32 Dokumentenkörper: Verweise (1) Linktext erhält besondere Gewichtung von Suchmaschinen aussagekräftig und außerhalb des Textzusammenhanges eindeutig positiv: negativ: <a href="infos.html">informationen zu barrierefreiem Webdesign</a> <a href="infos.html">hier klicken</a> Link-Beschreibung Verweisziel: intern/extern, PDF <p>wenn Sie mehr über die Sitestruktur wissen möchten, schauen Sie auf unsere <a href="sitemap.html" title="zum Inhaltsverzeichnis: Verweise nach Kategorien geordnet">sitemap</a>.</p> Christiane Müller, IHK Cottbus Folie: 32

33 Dokumentenkörper: Verweise (2) Navigation beschleunigen und vereinfachen Tastatur-Kurzbefehle und Tabulator-Reihenfolge Browser-übergreifend bleiben nur die Ziffern 0 bis 9 Browser erfordern verschiedene Tastenkombinationen Internet Explorer: Alt + Zahl + Enter Firefox: Umschalt + Alt + Zahl Opera: Umschalt + Esc + Zahl <a href="index.html" tabindex="1" accesskey="0" title="zur Startseite">Startseite</a> Christiane Müller, IHK Cottbus Folie: 33

34 Dokumentenkörper: Sprache (1) verständliche Sprache allgemein gebräuchliche, einfache, kurze Wörter und Sätze zumindest auf der Startseite Begriffe Startseite: erste Seite einer Website alternativ: junge Nutzer tendieren zu "Home" Download: Speichern auf der eigenen Festplatte alternativ: Anfänger tendieren zu "Auf Festplatte speichern" Suche(n): Seiten nach einem bestimmten Begriff durchsuchen Online-Shop: online Waren oder Dienstleistungen bestellen Login: Anmelden in einem geschützten Bereich Christiane Müller, IHK Cottbus Folie: 34

35 Dokumentenkörper: Sprache (2) Sprachwechsel Fremdwörter fremdsprachige Zitate Kennzeichnung besonders für Screenreader-Nutzer wichtig <span>-element Inline-Element <p>barrierefreiheit und <span lang="en" xml:lang="en">accessibility</span>...</p> Christiane Müller, IHK Cottbus Folie: 35

36 Dokumentenkörper: Sprache (3) Zitate <q> ist Inline-Element, muss in einen Absatz eingebettet werden <blockquote> erzeugt Absatz, muss einen Absatz enthalten und wird meist eingerückt dargestellt cite-attribut: ausschließlich URL <cite>-element innerhalb <blockquote>-element: Angabe ausführlicher Daten (Name, Titel, Veröffentlichungsort u.a.) <p><q>das ist eine Zeile eingeschlossen in das q-element.</q></p> <blockquote><p>das ist eine Zeile eingeschlossen in das blockquote-element.</p></blockquote> Christiane Müller, IHK Cottbus Folie: 36

37 Dokumentenkörper: Sprache (4) Abkürzungen und Akronyme Hinterlegen der Ausschreibung Browser: durch Unterstreichung visualisieren ergänzendes Hervorheben über stilistische CSS-Mittel wird von älteren Versionen des Microsoft Internet Explorer ignoriert <p>eine Abkürzung: <abbr title="zum Beispiel">z.B.</abbr></p> <p>ein Akronym: <acronym title="bürgerliches Gesetzbuch">BGB</acronym></p> Christiane Müller, IHK Cottbus Folie: 37

38 CSS-Formatzuweisungen: Schrift (1) variable, relative Schriftgrößen ("em", "%") <body>-bereich: % Problematik 100% und 101% bei älteren Opera-/Safari-Versionen Problematik 1em im Microsoft Internet Explorer body.eins { font-size:100.01%; } body.zwei { font-size:100%; } body.drei { font-size:101%; } body.vier { font-size:1em; } Christiane Müller, IHK Cottbus Folie: 38

39 CSS-Formatzuweisungen: Schrift (2) Vererbungsprinzip font-attribut relative Schriftgrößen werden auf innere Elemente vererbt ul { font: arial 0.9em normal; } Texthervorhebungen Schlüsselwörter in Fließtexten markieren und über CSS formatieren <strong>fetter Text</strong> strong { font-weight: bold; } Kommentare  Christiane Müller, IHK Cottbus Folie: 39

40 CSS-Formatzuweisungen: Verweise (1) gegenüber umfließendem Text deutlich hervorheben Pseudoformate :link, :visited, :hover, :active und :focus Hintergrund, Textfarbe, Schriftgewicht, Abstände, Textdekoration Standardfarben: Schwarz (Text), Blau (Verweise), Violett (besuchte Verweise) und Rot (aktive Verweise) /* visited link - Bereits besuchter Verweis */ a:visited { background: #ffffff; /* Hintergrund: weiss */ color: #5d005d; /* Textfarbe: violett */ font-style: italic; /* Schriftstil: kursiv */ font-weight: bolder; /* Schriftgewicht: extrafett */ margin: 0; /* Außenabstand: keiner */ padding: 0; /* Innenabstand: keiner */ text-decoration: none; /* Textdekoration: keine */ } Christiane Müller, IHK Cottbus Folie: 40

41 CSS-Formatzuweisungen: Verweise (2) Navigationsleisten nutzerfreundliche Navigation als Liste aufbauen vom eigentlichen Inhalt der Webseite absetzen horizontal und vertikal aktiven Navigationspunkt als Text realisieren /* Einzelne Listenpunkte in der horizontalen Navigationsleiste */ ol#horizontal li { background: #ffffff; /* Hintergrund: weiss */ color: #000000; /* Textfarbe: schwarz */ float: left; /* Textumfluss: rechts vom Element */ font-size: 1em; /* Schriftgröße: 1em */ letter-spacing: 1px; /* Zeichenabstand: 1px */ margin: 0 4px 0 0; /* Außenabstand: rechts 4px */ padding: 0; /* Innenabstand: keiner */ width: 19%; /* Breite: 19% */ } Christiane Müller, IHK Cottbus Folie: 41

42 Validierung einer Website Gebrauchstauglichkeit-Tests mit potentiellen Nutzern Tests mit verschieden veranlagten Menschen Fachhintergrund, Erfahrung, Denkstruktur, Wahrnehmungsmuster Online/Offline-Tools Kontrastanalyse Positionierung bei Suchmaschinen, Analyse von Schlüsselwörtern Validierung der Technologien Strukturierung und Formatierung mit W3C-Validatoren überprüfen Barrierefreiheit während der Entwicklung mit Browser-Plugins prüfen Christiane Müller, IHK Cottbus Folie: 42

43 Usertests Fokusgruppen-Test Fokusgruppen-Test Testgegenstand: Ideen, Designs Aufgabe: in der Gruppe geäußerte Meinungen diskutieren und Voroder auch Nachteile nennen Usability-Test Testgegenstand: Website, Prototyp, Entwürfe einzelner Seiten Aufgabe: Anliegen der Website herausfinden, die Website mit einer konkreten Aufgabenstellung verwenden Tests auf verschiedenen Endgeräten 5-8 Personen Wünsche, Bedürfnisse und Vorlieben einer Zielgruppe bestimmen Usability-Test 1 Person Gebrauchstauglichkeit prüfen, Verbesserungsmöglichkeiten aufdecken Browser-Versionen, Auflösungen und Schriftgrad-Einstellungen Christiane Müller, IHK Cottbus Folie: 43

44 Kontrastanalyse: Colour Contrast Analyser angenehme Farben gut erkennbare Farben Farb- und Helligkeitskontraste Download: Normalsichtigkeit Rotblindheit Grünblindheit Blaublindheit Christiane Müller, IHK Cottbus Folie: 44

45 Schlüsselwort-Analyse Ranking-Kriterien: Wortnähe, -dichte ranking-check.de : Webseite in Top-Listenpositionen? metager.de/asso.html : erzeugt Synonyme logsta.de : Position-Check, Keyword-Analyse (Keyword-Häufigkeit, -Dichte) Dateigröße, Wortanzahl, Seitentitel, Frames oder Umleitungen Metadaten (Autor, Zeichensatz, Sprache, Beschreibung, Keywords) Anzahl interner und externer Links, Page-Rank Christiane Müller, IHK Cottbus Folie: 45

46 Validierungsservices (1) W3C Markup Validation Service überprüft formale Standards fehlerhafte Stellen mit Zeilen- und Spaltenangaben hervorgehoben Vorschlag zum Vermeiden des Fehlers nur in englischer Sprache verfügbar siehe W3C CSS Validation Service Eingabe eines URL Kopieren des Quelltextes in ein Textfeld Datei-Upload siehe Christiane Müller, IHK Cottbus Folie: 46

47 Validierungsservices (2) Web Design Group: WDG HTML Validator überprüft ebenfalls formale Standards URL angeben und bis zu 100 Webseiten überprüfen: Validate entire site nur in englischer Sprache verfügbar siehe Web Design Group: CSSCheck Eingabe eines URL Kopieren des Quelltextes in ein Textfeld Datei-Upload siehe Christiane Müller, IHK Cottbus Folie: 47

48 Browser-Tests (1) der grafische Browser Opera ( Ansicht Seitendarstellung ) Emulieren eines Text-Browser kontrastreiche Ansicht in schwarz-weiß und weiß-schwarz Linearisierung von Tabellen Anzeigen von strukturierenden Elementen Ein- und Abschalten von Grafiken Alternativtext F12: An- und Abschalten von Pop-Up-Fenstern, Java, Plugins, Javascript, Cookies und akustischen Wiedergaben Alt + P: Darstellung von Frames deaktivieren, das Anzeigen des <noframe>-elementes simulieren Strg + J: Test zur kontextunabhängigen Lesbarkeit von Verweisen Christiane Müller, IHK Cottbus Folie: 48

49 Browser-Tests (2) der nicht-grafische Browser Lynx rein textorientierter Browser keine visuelle (durch Style Sheets formatierte) Gliederung verfügbar Grafiken werden nicht angezeigt Javascript oder Flash-Animationen werden nicht interpretiert logische Reihenfolge von Navigation und Seiteninhalt überprüfen klare Gliederung des ausgegebenen Textes kontrollieren Alternativbereiche (<noframe>, <noscript>, alt) auswerten Christiane Müller, IHK Cottbus Folie: 49

50 Browser-Plugins zur Validierung (1) Internet Explorer Plugin: Web Accessibility Toolbar Test: verschiedene W3C Validatoren und Prüfwerkzeuge Fenster: verschiedenen Bildschirmauflösungen und Plattformen CSS: ein- und ausschalten, eigene Zuweisungen testen, veraltete Elemente anzeigen Bilder: Ansichten mit Grafiken oder mit Alternativtexten Farben: Graustufen-Test, verwendeten Farben, Kontrastanalyse Struktur: Dokumenten-Titel, Überschriften-, Listen-, Formular-, Akronym- und Abkürzungs-Elemente, Attribute zur Tastatursteuerung, Tabellenanalyse und deren Linearisierbarkeit sowie Frame- und Container-Elemente Extras: weitere Prüfprogramme (Simulation Sehbeeinträchtigungen) Seite: Informationen (Titel, Dateigröße, Erstelldatum, Zahl der Bilder, Verweise, Formulare, Skripte), verschiedene Listen (verwendete Frames, Verweise, Metadaten, Download-Zeit des Dokumentes) Texte: Verweise auf Webseiten mit Richtlinien zur Barrierefreiheit (WCAG und BITV), Usability-Quellen und Sprachreferenzen (HTML, XHTML, CSS) Optionen: Bilder, Javascript, CSS ein- und ausschalten, Textgröße ändern Vergrößern: Skalieren des Inhaltes von 25% bis 600% Download für IE und Opera: Christiane Müller, IHK Cottbus Folie: 50

51 Browser-Plugins zur Validierung (2) Mozilla Plugin: Web Developer Toolbar Simulieren verschiedener Bildschirmauflösungen Ausgabe einer Webseite bei abgeschalteten Formatzuweisungen explizite Anzeige bestimmter Elemente (z.b. Überschriften, Listen) Download: Mozilla Plugin: HTML-Validator überprüft Syntax Download: Christiane Müller, IHK Cottbus Folie: 51

52 Chancen... (1) Nutzer schneller geladene Dateien zugänglicher Inhalt unabhängig von Nutzer oder Gerät je nach Bedürfnissen anzupassende Seiten Kunde Seiten leichter zu pflegen, Layout kann unproblematisch geändert druckfreundliche Versionen ohne viel Mehraufwand bessere Suchmaschinen-Platzierung und Zugänglichkeit Webdesigner Seiten sind leichter zu erstellen Anpassungsaufwand bei Relaunch wird geringer Christiane Müller, IHK Cottbus Folie: 52

53 Chancen... - Investitionssicherheit Kosten (X)HTML + CSS Schulung geringer; keine komplexen HTML- Strukturen mehr notwendig Relaunch herkömmliche, auf Barrierefreiheit nachgebesserte Website altes Konzept kann bleiben Integrationsaufwand kommt hinzu nur CSS- Änderung notwendig herkömmliche Website moderne oder universelle Website Konzept HTML + CSS Design, Schulung Umsetzung Betrieb Konzept Design, Schulung Umsetzung Betrieb Zeit Quelle: in Anlehnung an Wolfgang Wiese, S. 30, Christiane Müller, IHK Cottbus Folie: 53

54 ... und Risiken weder Browser- noch Hilfsmittelhersteller halten sich vollständig an die Standards vorerst Mehraufwand wahrscheinlich nötiges Wissen transferieren: Entscheider überzeugen, Mitarbeiter sensibilisieren, schulen und motivieren Tests durchführen Inhalte in einfacher Sprache aufbereiten und zusätzliche Texte für Bilder, Animationen sowie Videos erarbeiten unterschiedliche Formatvorlagen erfordern zusätzliche Designs zur Vermeidung von Javascript müssen Funktionalitäten überprüft und abgewandelt werden Christiane Müller, IHK Cottbus Folie: 54

55 Fazit barrierefreies Webdesign Barrierefreie Webseiten sind bisher keine Selbstverständlichkeit Barrierefreiheit wird erst auf den zweiten Blick deutlich Barrierefreiheit auf Dauer sicherstellen Barrierefreie Webseiten zahlen sich aus Egal welche Plattform, egal welcher Browser, egal welches Endgerät: äquivalente Inhalte für alle Nutzer für Nutzer mit Behinderungen wird der Zugang zum Web geebnet Christiane Müller, IHK Cottbus Folie: 55

56 Projektvorstellung Die barrierefreie Website: Usability, Design und Marketingaspekte Ziel dieser Website ist es, sowohl Unternehmen als auch Webdesigner für das Thema Barrierefreiheit zu sensibilisieren und dabei unterschiedliche Aspekte aufzuzeigen. Barrierefreies Webdesign - von Usability über Design bis hin zum Marketing. Christiane Müller, IHK Cottbus Folie: 56