Webdesign

standardkonform und barrierefrei

Diplomandenkolloquium • 7. April 2006

Überblick

1. Standardkonformes Webdesign
2. Semantik
3. Behinderungen
4. Praxisbeispiele
5. Ergebnis

Die Anfänge des Webdesign

• Web als Ort zum Austausch von Informationen für Akademiker

Webdesign in den 90er Jahren

• Tabellen als Layouthilfe

modernes Webdesign

• Layout und Formatierungen mit CSS
• Ziel: Trennung von Gestaltung und Inhalt

Semantik

• Semantik: Bedeutung von Sprache und Zeichen
• Beispiel: Überschriften mit und ohne Semantik

    <div style="font-weight:bold;color:#900;">Überschrift</div>
    
    <h2 style="font-weight:bold;color:#900;">Überschrift</h2>
  

Behinderungen

Behinderungen II

• Sehschwächen, Blindheit
  • Brille, Screenreader, Braillezeile
• motorische Störungen
  • Tastatur
• Gehörlosigkeit
  • Icons, Grafiken, Gebärdensprache
• kognitive Behinderungen
  • einfache Sprache und Navigationsaufbau

Barrieren im Web

• nicht skalierbare Schriftarten
• fehlende Alternativtexte für Bilder
• Untertitel und Alternativtexte bei Multimedia
• veraltete Software

Praxis

• Inhalte zuerst im Quelltext platzieren
• Navigationen aus Listen

    
    <ul>
      <li>Neues</li>
      <li>Info</li>
      [...]
      <li>Impressum</li>
    </ul>
        
  

Praxis II

• Texte strukturieren

    
    <h1>Überschrift</h1>
    <p>In einem Textabsatz werden 
    <strong>wichtige Abschnitte</strong> hervorgehoben</p>
    
  

• Bilder richtig verwenden

• Links sinnvoll definieren

Vorteile

• weniger Code → weniger Traffic
• Trennung von Struktur und Design → leichte Erweiterbarkeit
• semantischer Code → besseres Suchmaschinenranking
• höhere Usability und Accessibility
• mehr potentielle Kunden

Vielen Dank für die Aufmerksamkeit.

Fragen? ☺