archive-de.com » DE » D » DIE-BARRIEREFREIE-WEBSITE.DE

Total: 88

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Die barrierefreie Website: News - Zusätzliche kurze Domain (Christiane Müller)
    für das Projekt freigeschaltet www dibawe de Ich hoffe damit die Nutzerzufriedenheit zu erhöhen zumindest das Eingeben des bisher sehr langen URL der Startseite bleibt damit erspart Noch sind die Inhalte über beide Domains getrennt abrufbar Das wird aber demnächst umgestellt so dass eine automatische Weiterleitung der Kurz domain auf die bisherige Haupt domain erfolgen wird Damit wird sog Duplicate Content vermieden das mehrfache Veröffentlichen identischer Seiten unter verschiedenen Domains Würden beide Domains in den Suchmaschinen gelistet werden wäre wertvolles Potential eines guten Page Rank und somit die Chance auf vernünftige Ergebnislisten Positionen verschenkt Ist Ihr Interesse geweckt Dann lesen Sie mehr dazu in den Abschnitten URL Publikation der Domain und Page Rank Link Popularity Seitenanfang Über das Projekt di ba we Ziel des Projektes di ba we ist es sowohl Unternehmen als auch Webdesigner für das Thema Barrierefreiheit zu sensibilisieren und dabei unterschiedliche Aspekte aufzuzeigen von Usability über Design bis hin zum Marketing Seit Anfang 2005 bin ich im Bereich des Webdesign selbstständig mein kleines Unternehmen läuft unter der Bezeichnung ITIB Spezialisiert habe ich mich auf die Entwicklung barrierefreier Webseiten Meine Kunden sind KMU in verschiedenen Branchen z B IT Verwaltung Unternehmensberatung Finanzberatung Bildung Gastronomie und Kunst In diesem

    Original URL path: http://www.die-barrierefreie-website.de/news/zusaetzliche-kurze-domain.html (2016-02-15)
    Open archived version from archive


  • Die barrierefreie Website: News - 'Die barrierefreie Website' bekennt Farbe! (Christiane Müller)
    Hilfsnavigation überarbeitet ein Ausschnitt befindet sich wie gewohnt im Kopfbereich jeder Seite und ergänzend wurde eine umfangreiche Liste in den Fußbereich integriert Alle Unterseiten dieses Service Bereiches so z B auch die momentan aufgerufene Seite sind einheitlich in Grautönen gestaltet Bei bereits besuchten Seiten des di ba we Projektes kann es zu Ansichtsproblemen im Browser kommen da dieser meist lokal die Seiten zwischenspeichert Sollten die Seiten komisch aussehen besonders in den Navigationsbereichen muss jeweils im Browser Strg R bzw F5 gedrückt werden um das wirklich aktuelle Layout zu bekommen Vor allem in den letzten Tagen wurden immer wieder Artikelanpassungen in den Bereichen Grundlagen und Umsetzung vorgenommen einige Artikel wurden inhaltlich überarbeitet andere um weitere Abschnitte ergänzt Navigationshilfen Abschnitt über Navigationspfad erweitert wann ist die Angabe eines sog Brotkrumenpfades notwendig und wo befindet sich ein solcher in diesem Projekt zum überarbeiteten Artikelabschnitt Navigationspfad Container Abschnitt über die Umsetzung dynamischer Container Höhen zur Vermeidung von optischen Überschneidungen bei langen oder skalierten Inhalten eingearbeitet zum ergänzten Artikelabschnitt Hinweise zur Formatierung von Containern Überschriften Inhalt teilweise umformuliert und Abschnitt über die Verwendung von Überschrifter erster Ordnung h1 Element eingearbeitet zum ergänzten Artikelabschnitt Überschrift h1 nur einmal oder beliebig oft pro Seite Listen Abschnitt über Definitionslisten dl Element und deren Einsatzmöglichkeiten z B für Glossar Index Artikelvorschau oder Bild und Bildunterschrift eingearbeitet zum ergänzten Artikelabschnitt Definitionslisten Formulare Hinweis auf Mauszeiger Fokus in Eingabefeldern bei Verwendung des label Elementes und Probleme bei der Schriftvergrößerung sowie entsprechendes Beispiel als Lösungsvorschlag ergänzt zum überarbeiteten Artikelabschnitt Eingabefelder Verweise Abschnitt über Skip Links erweitert nur bei Fokus sichtbare Sprungnavigatoren Notwendigkeit der Sichtbarkeit des Sprungziels zum überarbeiteten Artikelabschnitt Skip Links Sprache Abschnitt über verständliche Sprache Liste einfacher Wörter statt Fremdwörter und Sprachwechsel häufig eingesetzte Wörter die ausgezeichnet werden müssen und Sonderfälle die nicht ausgezeichnet werden brauchen erweitert zu den überarbeiteten Artikelabschnitten

    Original URL path: http://www.die-barrierefreie-website.de/news/neues-layout-und-artikel-erweiterungen.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Umsetzung - Sprache (Christiane Müller)
    Die Angabe xml lang stellt die XHTML konforme Schreibweise dar für ältere Browser ist die Angabe lang ergänzend notwendig Beispiel XHTML Datei Sprachwechsel Ausschnitt p Barrierefreiheit und span lang en xml lang en Accessibility span p Das span Element kann Text hier Accessibility und andere Elemente enthalten hat selbst aber keinerlei Eigenschaften und beeinflusst somit auch nicht das Layout Worte die genauso ausgesprochen wie geschrieben werden z B Web Link Top Enter oder Helpdesk brauchen nicht mit einem Sprachwechsel versehen werden Ebenfalls nicht ausgezeichnet werden brauchen Worte die in den deutschen Sprachgebrauch übergegangen sind wie z B der Begriff E Mail Es ist stets zu Bedenken dass beim Einsatz eines Screenreader bei fremdsprachigen Worten durch den Wechsel des Akzentes eine kurze Sprechpause erzeugt wird Seitenanfang Zitate Zitate sind durch die Elemente q oder blockquote zu kennzeichnen blockquote erzeugt einen Absatz und wird in den meisten Browser Umsetzungen eingerückt dargestellt Zur validen Auszeichnung ist innerhalb dieses Elementes ein Absatz anzulegen p Element q hingegen ist ein Inline Element und muss zusätzlich in einen Absatz eingebettet werden Browser wie Mozilla und Opera setzen den vom q Element umschlossenen Text in Anführungszeichen Bildbeschreibung Zitate im Internet Explorer Im Internet Explorer werden blockquote Zitate eingerückt q Zitate werden jedoch nicht in Anführungszeichen gesetzt Bildbeschreibung Zitate im Mozilla Im Mozilla werden q Zitate in Anführungszeichen gesetzt und blockquote Zitate eingerückt dargestellt Zur Angabe der Quelle wird das cite Attribut eingebunden Erstaunlicherweise wird die Angabe eines Namens Vor und Nachname im cite Attribut von Validatoren als Fehler vermerkt Die anscheinend einzige valide Angabe ist das Hinterlegen eines URL Beispiel XHTML Datei Zitate Ausschnitt p q cite http www domainname de Das ist eine Zeile eingeschlossen in das q Element q p blockquote cite http www domainname de p Das ist eine Zeile eingeschlossen in das blockquote Element p blockquote Alternativ steht noch das cite Element zur Verfügung welches innerhalb des blockquote Elementes die Angabe ausführlicher Daten z B Name Titel Veröffentlichungsort ermöglicht Beispiel XHTML Datei Quellenangabe bei Zitaten Ausschnitt blockquote p Das ist eine Zeile eingeschlossen in das blockquote Element cite Name Titel Veröffentlichungsort cite p blockquote Seitenanfang Abkürzungen und Akronyme Ebenfalls in die Rubrik sprachlicher Besonderheiten fallen Abkürzungen abbr Element und Akronyme acronym Element Abkürzungen werden im täglichen Sprachgebrauch ausgesprochen in der Schriftform jedoch gekürzt Die in Schriftform notierte Abkürzung z B wird gesprochen zu zum Beispiel Akronyme sind Buchstabenkombinationen die im täglichen Sprachgebrauch zu finden sind und aus den Anfangsbuchstaben mehrerer Wörter gebildet werden BGB das Akronym zu Bürgerliches Gesetzbuch bspw wird gesprochen zu be ge be In beiden Fällen ist über das title Attribut das Hinterlegen der Ausschreibung erforderlich Beispiel XHTML Datei Abkürzungen und Akronyme Ausschnitt p Eine Abkürzung abbr title zum Beispiel z B abbr p p Ein Akronym acronym title Bürgerliches Gesetzbuch BGB acronym p Das acronym Element ist in HTML5 nicht mehr vorgesehen Statt dessen wird nur noch das abbr Element genutzt Zum Verbessern der Verständlichkeit kann natürlich innerhalb des Fließtextes die vollständige Schreibweise eines Akronymes noch zusätzlich angegeben werden

    Original URL path: http://www.die-barrierefreie-website.de/umsetzung/sprache.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Umsetzung - Überschriften (Christiane Müller)
    Überschriften in verschiedenen Ordnungen Ausschnitt Überschrift 1 Ordnung h1 Barrierefreie Gestaltung von Internetseiten h1 Überschrift 2 Ordnung h2 Einleitung h2 Überschrift 3 Ordnung h3 Barrierefreiheit h3 Absatz p Textabsatz p Weitere Überschrift 3 Ordnung h3 Zielstellung h3 Absatz p Textabsatz p In HTML5 gibt es neu das hgroup Element welches direkt aufeinander folgende Überschriften unterschiedlicher Ebenen gruppiert Seitenanfang Überschrift h1 nur einmal oder beliebig oft pro Seite Über den richtigen Einsatz von h1 Elementen wird im Web viel diskutiert Die einen sagen eine Überschrift erster Ordnung darf in jedem Dokument nur genau einmal vorkommen die anderen vertreten den Ansatz dass mehrere h1 Elemente pro Seite verwendet werden können Hauptsächlicher Diskussionsbestandteil ist dabei ob sowohl der eigentliche Inhalt als auch die Navigation eine Überschrift erster Ordnung zugesteilt bekommen sollten Objektiv betrachtet ergeben sich daraus folgende Umsetzungsvorschläge nur eine h1 Überschrift wenn ein kleines Webprojekt mit wenigen Links vorliegt die direkt von der Startseite aus erreichbar sind und wenn die Navigation mit etwaigen Unternavigationen Hauptnavigation Bereichsnavigation Hilfsnavigation direkt am Seitenanfang angeordnet ist oder wenn die Navigation über Sprunglinks direkt ansteuerbar ist mehrere h1 Überschriften wenn die Seite mehrere gleichberechtigte Themen beinhaltet die keine Gemeinsamkeit haben und somit unter keiner Hauptüberschrift zusammengefasst werden können wenn Inhalts und Navigationsbereiche gleichgestellt sind komplexe Navigationsbereiche die sich auf jeder Unterseite eines umfangreichen Webprojektes wiederholen und die Navigation nicht direkt am Seitenanfang angeordnet oder über Sprunglinks ansteuerbar ist Mit der Einführung von neuen Strukturierungscontainern in HTML5 article nav footer usw erübrigt sich die Diskussion zur Verwendung der Überschriftenebenen Jeder Bereich wird bei Bedarf durch eine Überschrift erster Ordnung h1 eingeleitet siehe HTML5 zur Strukturierung Weiterführende Literatur Erlhofer Sebastian Suchmaschinen Optimierung Seite 225 226 Galileo Computing Bonn 1 Auflage 2005 Galileo Press ISBN 3898426203 DIAS GmbH BITV Test HTML Strukturelemente für Überschriften http www bitvtest de index php

    Original URL path: http://www.die-barrierefreie-website.de/umsetzung/ueberschriften.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Umsetzung - Container (Christiane Müller)
    des Menüs div Container mit eigentlichem Inhalt div class inhalt Der eigentliche Inhalt div body In HTML5 stehen neue Elemente zur Verfügung die bestehende Container mit Standard Inhalten ablösen z B das nav Element für einen Container mit Navigationselementen siehe HTML5 zur Strukturierung Seitenanfang Reihenfolge der Container Die Reihenfolge der div Elemente im Quelltext ist ausschließlich in Zusammenhang mit der Linearisierung von Bedeutung aber somit für den Nutzer eines Text Browser oder Screenreader entscheidend Container mit für den Nutzer relevanten Inhalten sind immer an den Anfang eines Dokumentes zu stellen sich wiederholende Elemente wie bspw aktuelle Meldungen oder Besucherstatistiken können in Container eingebettet werden die im Quelltext erst zum Ende hin erscheinen Ein die Hauptnavigation enthaltender Container kann bspw nur in der Startseite im Quelltext an erster Stelle stehen in den darauffolgenden Dokumenten dann jedoch an das Ende verlegt werden Beispiel XHTML Datei Container mit Inhalt vor Navigation Ausschnitt body Container mit eigentlichem Inhalt div class inhalt Der eigentliche Inhalt div Container mit Navigation div class navigation Alle Elemente und Inhalte des Menüs div body Durch das Positionieren der Container über CSS werden Nutzer grafischer Ausgabegeräte diese Feinheit nicht weiter bemerken Sowohl das nachfolgende als auch das vorangegangene Bildschirmfoto der optischen Browser Ausgabe sind identisch da sowohl die Navigation als auch der Inhalt in einem entsprechenden Container notiert sind und diese über Style Sheets fest definiert und positioniert werden Bildbeschreibung Ausgabe Container 2 Navigation vor Inhalt Diese und die vorangegangene Ausgabe sind identisch da sowohl die Navigation als auch der Inhalt in einem entsprechenden Container notiert sind und diese über Style Sheets fest definiert und positioniert werden Optisch befindet sich deshalb die Navigation weiterhin vor dem Inhalt auch wenn in diesem Beispiel die Notation im Quellltext genau andersherum ist Hilfreich ist das unterschiedliche Positionieren im Quelltext jedoch für Nutzer eines Text Browser oder Screenreader wie die linearisierte Variante im nachfolgenden Beispiel zeigt Bildbeschreibung Linearisierung Container 1 Navigation vor Inhalt Hier wird der Unterschied zwischen beiden Container Varianten deutlich Der im Quelltext zuerst notierte Bereich wird bei Linearisierung auch zuerst betrachtet In diesem Fall zuerst die Navigation und dann der Inhalt Bildbeschreibung Linearisierung Container 2 Inhalt vor Navigation Hier wird der Unterschied zwischen beiden Container Varianten deutlich Der im Quelltext zuerst notierte Bereich wird bei Linearisierung auch zuerst betrachtet In diesem Fall zuerst der Inhalt und dann die Navigation Seitenanfang Hinweise zur Formatierung von Containern Soll eine bestimmte Container Höhe definiert werden ist das CSS Attribut min height zu verwenden Dann wächst bei umfangreichen Inhalten bzw bei Skalierung der Inhalte auch der Container mit Andernfalls bei Verwendung des Attributes height würden die Inhalte über die Ränder des Containers hinausragen Das kann bei komplexen Formatierungs Maßnahmen der Verwendung mehrerer Container mit unterschiedlichen Formatzuweisungen Hintergrundfarben farbige Container Rahmen zu ungewollten optischen Überlappungen führen Bildbeschreibung Skalierbarkeit von Containern Zwei Container einer mit ungewollten Inhalts Überschneidungen durch Höhenangabe über height links und einer mit dynamischer Anpassung durch Höhenangabe über min height rechts Beispiel CSS Datei Höhenangabe für Container Ausschnitt div rahmen min height 10em dynamische

    Original URL path: http://www.die-barrierefreie-website.de/umsetzung/container.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Umsetzung - XHTML - Angaben im Dokumentenkörper - Formulare (Christiane Müller)
    empfiehlt sich die Beschriftung von Formularelementen über Style Sheets links neben oder über dem zugehörigen Eingabefeld anzuordnen Klickt der Nutzer dann mit der Maus auf die Beschriftung springt der Mauszeiger automatisch in das zugehörige Eingabefeld Pflichtfelder auch Mussfelder sind gesondert zu kennzeichnen i d R wird ein Sternchen verwendet welches der Beschriftung angefügt wird Die sicherste Methode Pflichtfelder zu kennzeichnen ist das Ausschreiben eines Wortes wie Pflicht in der Bezeichnung des betroffenen Formularelementes Formularelemente können über das fieldset Element zu Formularabschnitten zusammengefasst werden Über das legend Element erhält eine durch das fieldset Element umschlossene Einheit einen Titel und der inhaltliche Sinn des jeweiligen Formular Abschnittes wird hervorgehoben Bildbeschreibung Formulare Bildschirmfoto der optischen Browser Ansicht des vorangegangenen Quelltext Beispiels zur Kennzeichnung von Formularen Ziel einer barriere armen Umsetzung von Webseiten ist es alle Inhalte skalierbar zur Verfügung zu stellen Im Internet Explorer 6 gibt es jedoch Probleme bei der Schriftvergrößerung die Schrift in Formularfeldern wächst nicht standardmäßig mit Deshalb ist es notwendig über CSS explizit eine relative Schriftgrößenangabe für die Elemente input einzeiliges Eingabefeld select Auswahlliste und textarea mehrzeiliges Eingabefeld zu hinterlegen Beispiel CSS Datei Eingabefelder Ausschnitt input select textarea font family Verdana Helvetica Arial sans serif font size 1em Seitenanfang Buttons Ein Button ist ein als Verweis realisierter Text der als Schaltfläche dargestellt wird Die Beschriftung von Buttons sollte auf die entsprechende Aktion hinweisen die der Nutzer durch das Anklicken auslöst Suchen neben einem Sucheingabefeld Absenden bei Anfrageformularen Weiter bei Abläufen Bestellen bei einer Bestellung Buttons können über CSS gestaltet werden bei der Verwendung der Standard HTML Buttons werden diese betriebssystemabhängig im jeweiligen Erscheinungsbild engl Look and Feel dargestellt Das nachfolgende Bild zeigt ein und denselben Button in verschiedenen Betriebssystemen von links nach rechts Microsoft Windows XP MacOS X 10 3 Linux Debian 3 0 und Browser Umsetzungen von oben nach unten Opera Mozilla Firefox Microsoft Internet Explorer Bildbeschreibung Buttons Bildschirmfotos verschiedener Layouts eines Button abhängig von Betriebssystem und Browser Seitenanfang Fehlermeldungen Werden Eingaben über mehrere Formularseiten verteilt ist vor dem endgültigen Absenden eine Übersichtsseite mit Korrekturmöglichkeit anzubieten Fehlermeldungen bei Falscheingaben bzw bei fehlenden Angaben sind deutlich hervorzuheben Ebenfalls sollten sie in direktem Zusammenhang mit dem betroffenen Eingabefeld dargestellt werden Dem Nutzer muss erkenntlich sein inwieweit er eine falsche Angabe gemacht hat Nach dem Absenden eines Formulares ist es üblich eine Bestätigungsseite mit den versandten Daten auszugeben Weiterführende Literatur Münz Stefan und Nefzger Wolfgang HTML Web Publishing Handbuch Band 1 Seite 327 Franzis Verlag GmbH Poing 2002 ISBN 3772375162 Hellbusch Jan Eric und Bühler Christian Herausgeber Barrierefreies Webdesign Seite 189 dpunkt Verlag Heidelberg 1 Auflage 2005 ISBN 3898642607 Mintert Stefan Herausgeber XHTML CSS Co Seite 280 Addison Wesley Verlag München 1 Auflage 2003 ISBN 3827318726 Manhartsberger Martina und Musil Sabine Web Usability Das Prinzip des Vertrauens Seite 219 ff sowie Seite 225 ff Galileo Press Bonn 1 Auflage 2002 Galileo Design ISBN 3898421872 Seitenanfang Artikel Übersicht Umsetzung XHTML Angaben im Dokumentenkopf Der Seitentitel Metatags Datei Beziehungen XHTML Angaben im Dokumentenkörper Frames Frames segmentieren das Browser fenster wobei jeder Frame eine

    Original URL path: http://www.die-barrierefreie-website.de/umsetzung/formulare.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Grundlagen - Navigationshilfen (Christiane Müller)
    Trennung zwischen den Hierarchiepunkten hat sich das Zeichen für größer als durchgesetzt Der letzte Punkt der Aufzählung ist der Name der aktuellen Seite Bis auf diesen sind alle anderen Punkte als Verweis auf die entsprechenden Hierarchieebenen zu realisieren so dass sie als Navigationselemente genutzt werden können Beispiel XHTML Datei Navigationspfad Ausschnitt p id breadcrumb Sie befinden sich hier a href index html Startseite a gt a href kapitel html Kapitel a gt a href unterkapitel html Unterkapitel a gt Abschnitt 1 p Der Navigationspfad wird meist in einer kleineren Schriftgröße als der normale Text zur Verfügung gestellt Das unterstreicht die Funktion als ergänzendes Hilfsmittel Beispiel CSS Datei Navigationspfad Ausschnitt Brotkrumen Pfad breadcrumb Schriftgröße 80 des Elternelementes font size 8em Außenabstand keiner margin 0 Innenabstand oben unten keiner rechts links 5em padding 0 5em Auf den Seiten des Projektes di ba we befindet sich der Brotkrumenpfad unterhalb der jeweiligen Artikelüberschrift hier auf dieser Seite bspw unterhalb der Überschrift Navigationshilfen Seitenanfang Die Sitemap Die Sitemap ist eine Übersichtsseite vergleichbar mit einem Inhaltsverzeichnis Sie enthält Verweise auf jede einzelne Webseite der Website und ist durch diese Verlinkung auch besonders für Suchmaschinen von Interesse Bei einer umfangreichen Website wird die Ausgabe aller verfügbaren Webseiten schnell unübersichtlich In solchen Fällen reicht das Ausgeben der Hauptkategorien Empfehlenswert ist es die Struktur auch visuell kenntlich zu machen bspw durch Aufzählungen mit verschiedenen Ebenen Seitenanfang Der Index Sofern es angesichts der Größe der Website sinnvoll ist kann zusätzlich zur Sitemap ein Index angeboten werden Hierbei handelt es sich um alphabetisch aufgelistete Stichworte die als Verweise auf die entsprechenden Webseiten realisiert sind Bei einer Website mit vielen verschiedenen Themengebieten bietet der Index eine gute Orientierungsfunktion Seitenanfang Die Website interne Suche Findet der Nutzer nicht auf Anhieb das Gesuchte auf einer Website ist eine Website interne Suchfunktion hilfreich Das Eingabefeld sollte optisch gut sichtbar positioniert sein und das Suchergebnis ohne Umschweife ausgegeben werden I d R befindet sich das Eingabefeld der Suche rechts oben auf der Webseite oder links direkt unterhalb der vertikalen Navigation Sinnvoll ist eine sortierte gewichtete Ausgabe der Suchergebnisse in Listenform mit jeweils einem als Verweis realisierten Titel sowie einem Textausschnitt der den gesuchten Begriff beinhaltet Seitenanfang Kontextbasierte Hilfen Ein ebenfalls wichtiger Bestandteil jedes Accessibility Konzeptes sind kontextbasierte Hilfeseiten Sie geben dem Nutzer einen Überblick welche assistiven Techniken unterstützt werden Werden Styleswitcher zur Änderung von Seiten layout oder Schriftgröße angeboten können diese in der Hilfe erläutert werden Für den Nutzer kann auf Hilfeseiten zusammengefasst werden welche Aufgabe die Website hat wie sie aufgebaut ist welche Navigationsmechanismen zur Verfügung stehen und wie bei Bedarf ein Kontakt zum Betreiber hergestellt werden kann Generell ist es empfehlenswert allgemeine Orientierungshilfen Hinweise auf besondere Unterstützung oder Bedienungsempfehlungen für Nutzer assistiver Technik und eine Kontaktadresse bspw zum Melden von Barrieren anzubieten Bei längeren Hilfeseiten profitieren Nutzer von einem kurzen seiteninternen Inhaltsverzeichnis sog Sprungmarken die zu den Abschnittsüberschriften führen Es kann auch sinnvoll sein die Inhalte auf mehrere weniger umfangreiche Hilfeseiten aufzuteilen Seitenanfang Frequently Asked Questions Häufig gestellte Fragen sog FAQ sind knapp und

    Original URL path: http://www.die-barrierefreie-website.de/grundlagen/navigationshilfen.html (2016-02-15)
    Open archived version from archive

  • Die barrierefreie Website: Umsetzung - Listen (Christiane Müller)
    Alternative anzugeben die bei Nichtladen der Grafik zum Einsatz kommt siehe zweites nachfolgendes Bild Beispiel CSS Datei Listen Ausschnitt ul eigene grafik list style url blauer kreis gif disc Beispiel XHTML Datei Listen mit eigener Grafik als Listenpunkt Ausschnitt ul class eigene grafik li Listenpunkt 1 li li Listenpunkt 2 li li Listenpunkt 3 li ul Bildbeschreibung Liste bei eingeschalteten Grafiken Bildschirmfoto der optischen Browser Ansicht des vorangegangenen Quelltext Beispiels Listenelemente können eine individuelle Grafik als Aufzählungszeichen zugeordnet bekommen Bildbeschreibung Liste bei ausgeschalteten Grafiken Listenelemente können eine Grafik als Aufzählungszeichen zugeordnet bekommen Werden keine Grafiken angezeigt so tritt das alternativ festgelegte Aufzählungszeichen an diese Stelle Kriterien für ein barrierefreies bzw barrierearmes Webdesign Listen erhöhen die Lesbarkeit und vermitteln schnell sowie übersichtlich Informationen Suchmaschinen erkennen eine Listenformatierung und gewichten die Inhalte der Listeneinträge höher als wenn der Inhalt in einem Fließtext auftreten würde Seitenanfang Definitionslisten Die Hauptanwendungsgebiete einer Definitionsliste sind Glossar Index und FAQ Seiten Definitionslisten eignen sich jedoch auch hervorragend für Übersichtsseiten mit Kombinationen von Artikel Vorschaubild Artikel Teaser und Verweis auf den entsprechenden Artikel oder bspw für die Kombination von Grafiken und ausführlicheren Bildbeschreibungen bzw Bildunterschriften Definitionslisten werden mit dem Element dl angelegt Für die Inhalte stehen das dt Element z B für eine Grafik und das dd Element z B für eine entsprechende Bildunterschrift oder Bildbeschreibung zur Verfügung Das dd Element kann dabei mehrfach genutzt werden Über CSS kann die optische Ausgabe der Definitionslisten individuell festgelegt werden Beispiel XHTML Datei Definitionslisten Ausschnitt dl dt Grafik Element dt dd Bildbeschreibung oder Bildunterschrift dd dl Auch der hier inhaltlich nachfolgende Block Weiterführende Literatur ist als Definitionsliste umgesetzt Weiterführende Literatur Münz Stefan Professionelle Websites Programmierung Design und Administration von Webseiten Seite 92 93 Addison Wesley Verlag München 2 überarbeitete Auflage 2006 IX Buchtipp ISBN 3827323703 Erlhofer Sebastian Suchmaschinen Optimierung Seite 222

    Original URL path: http://www.die-barrierefreie-website.de/umsetzung/listen.html (2016-02-15)
    Open archived version from archive