Skip to content

Barrierefreiheit im Web Klausuraufgaben

Jump to bottom Edit New page
msenges edited this page Jan 31, 2013 · 40 revisions

freigegeben - Volker Schaefer

##Autoren

Navigation

Alternativ kann auch mit der Tastatur navigieren.

Zur Navigation (1)
Zu den Aufgaben (2)
Zu den Lösungen (3)
Zur Übersicht (4)

Aufgaben

1.) Wofür steht die Abkürzung BITV ? __/1

[] Bundes-Informationstechnikverordnung
[] Barrierefreie Informationstechnikverordnung
[] Barrierefreier Informationstechnikverein
[] barrierfree information television

2.) Welche gesetzliche Regelung wird in der BITV definiert?__/3

..............................................................................................
..............................................................................................
..............................................................................................

3.) Welche internationale Organisation kümmert sich um Richtlinien für barrierefreie Webseiten im Web und wann wurde sie gegründet?__/1

[] W3C
[] WAI
[] WC3
[] WAO

Gründung: ................. __/1

4.) Wofür wurde die WAI gegründet?__/2

..............................................................................................
..............................................................................................

5.) Nennen Sie die vier Säulen des WCAG? __/4

  1. .............................................
  2. .............................................
  3. .............................................
  4. .............................................

6.) Welche browserspezifische Besonderheit muss man bei der Verwendung von Accesskeys beachten?__/2

..............................................................................................
..............................................................................................

7.) Das Unternehmen “Sunflower” möchte eine barrierefreie Webseite und benötigt dazu Ihre Hilfe. Auf der Seite soll das Logo eingebunden werden (logo.png), welches eine Sonnenblume darstellt. Desweiteren sollen Sprunglinks zu den Bereichen “navigation”,”impressum”, und “content” vorhanden sein. Diese sollen auch über die Tasten 1,2 und 3 ansteuerbar sein.

Passen Sie folgende HTML-Seite für das Unternehmen, entsprechend den oben genannten Voraussetzungen an. __/13

<html>
 <head>
  <title> Sunflower </title>
 </head>
 <body>
  ....................................................................................................
  <h1>...........................Navigation........</h1>
  <nav>
   <ul>
    <li>.......................................................Zur Navigation........</li>
    <li>.......................................................Zum Impressum..............</li>
    <li>.......................................................Zum Content..............</li>
   </ul>
  </nav>
  <h1>...........................Impressum........</h1>
   <p>
    <!-- Hier steht das Impressum --!>
   </p>
  <h1>...........................Content........</h1>
  <p>
    <!-- Hier steht der Content --!>
  </p>
 </body>
</html>

8.) Schreiben Sie den Code um folgende Tabelle anzuzeigen. Achten Sie darauf,dass diese möglichst einfach von Screenreadern zu lesen ist. Die Tabelle zeigt, dass im Februar die Ausgaben mit 200 Euro am höchsten waren. __/10

1. Quartal 2013
Monat Ausgaben
Januar 170 Euro
Februar 200 Euro
März 150 Euro

..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................
..............................................................................................

9.) Welche Aspekte müssen von barrierefreien Webseiten beachtet werden?__/5

[] zusätzliche Software
[] alternative Hardware
[] unterschiedliche Auflösung
[] Mausunterstützung
[] Tastaturunterstützung
[] barrierefreie Medieninhalte
[] Zusätzlicher Code für Braille-Zeile
[] Java-Script-Unterstützung
[_] Flash-Unterstützung

10.) Was ist eine Braille-Zeile? __/3

..............................................................................................
..............................................................................................

11.) Welche Dateien sind für den Screenreader besonders wichtig?__/1

[] HTML
[] CSS
[] Flash
[] AJAX
[] PNG
[] AVI

12.) Wer prägte wann den Begriff “barrierefreie Benutzungsschnittstelle” im Web?__/2

..............................................................................................

13) Welche der folgenden Code-Beispiele sind nicht barrierefrei?__/2

[] <a href=”#Content” accesskey="1"> Zum Content </a>
[] <img src=”Katze”>
[] <table><tr><td><img src="blank.gif" alt="blank"></td><br> <td><a href="#Impressum">Zum Impressum</a></td></tr></table>
[] <h1>Barrierefreie Webseiten</h1>
[_] h2{ font-size: 2em;}

14.) Ordnen Sie folgende Aspekte (Buchstaben) dem entsprechenden Bereich zu: Kontrast (K), Fallbacks (F), Screenreader (S), Tastaturunterstützung (T), Leichte Sprache (L), Gebärdensprache (G), Auflösung (A) __/7

technische Hindernisse: ......................................................................
Sehschwäche: ......................................................................
Hörschwäche: ......................................................................
kognitive Schwäche: ......................................................................
motorische Schwäche: ......................................................................

15.) Was versteht man unter den Begriff “Leichte Sprache”?__/2

..............................................................................................
..............................................................................................
..............................................................................................

16.) __/4

  1. Die aktuellste Version des WCAG ist ........
  2. Der Begriff Barrierefreiheit kommt aus dem ........................
  3. Die Version 2.0 des BITV gibt es seit ........................ (Monat und Jahr!)

Lösungen

1.)

Barrierefreie Informationstechnikverordnung

2.)

Deutsche, staatliche Webseiten müssen barrierefrei gestaltet sein.

3.)

WAI 1997

4.)

Das WAI wurde gegründet, um Richtlinien für barrierefreie Webseiten zu beschließen.

5.)

Wahrnehmbar, Bedienbar, Verständlich, Robust

6.)

Je nach Browser müssen zusätzlich zur Accesskey-Taste weitere Tasten gedrückt werden.

7.)

<html>
 <head>
  <title> Sunflower </title>
 </head>
 <body>
  <img src="logo.png" alt="Logo des Unternehmens. Zeigt eine Sonnenblume.">
  <h1><a id="navigation">Navigation</a></h1>
  <nav>
   <ul>
    <li><a href="#navigation" accesskey="1">Zur Navigation</a></li>
    <li><a href="#impressum" accesskey="2">Zum Impressum</a></li>
    <li><a href="#content" accesskey="3">Zum Content</a></li>
   </ul>
  </nav>
  <h1><a id="impressum">Impressum</a></h1>
   <p>
    <!-- Hier steht das Impressum --!>
   </p>
  <h1><a id="content">Content</a></h1>
   <p>
    <!-- Hier steht der Content --!>
   </p>
 </body>
</html>

8.)

<table summary="Die Tabelle zeigt, dass im Februar die Ausgaben mit 200 Euro am höchsten waren.">
 <caption>1. Quartal 2013</caption>
 <tr>
  <th>Monat</th>
  <th>Ausgaben</th>
 </tr>
 <tr>
  <td>Januar</td>
  <td>170 Euro</td>
 </tr>
 <tr>
  <td>Februar</td>
  <td>200 Euro</td>
 </tr>
 <tr>
  <td>März</td>
  <td>150 Euro</td>
 </tr>
</table>

9.)

zusätzliche Software, alternative Hardware, unterschiedliche Auflösung, Tastaturunterstützung, barrierefreie Medieninhalte

10.)

Eine Braillezeile ist ein Ausgabegerät, welches ermöglicht, Texte am Computer in Brailleschrift zu lesen. Normalerweise wird sie über einen Screenreader angesteuert.

11.)

HTML

12.)

Dortmunder Zentrum Behinderung und Studium (DoBuS) 1993

13.)

<img src=”Katze”>

<table><tr><td><img src="blank.gif" alt="blank"></td><td><a href="#Impressum">Zum Impressum</a> </td></tr></table>

14.)

technische Hindernisse: Fallbacks (F), Auflösung (A)
Sehschwäche: Kontrast (K), Screenreader (S)
Hörschwäche: Gebärdensprache (G)
kognitive Schwäche: Leichte Sprache (L)
motorische Schwäche: Tastaturunterstützung (T)

15.)

Leichte Sprache verwendet keinen komplizierten Satzbau. Fachbegriffe werden (wenn es geht) vermieden, ansonsten werden sie anschaulich erklärt.

16.)

  1. Die aktuellste Version des WCAG ist 2.0.
  2. Der Begriff Barrierefreiheit kommt aus dem Bauwesen.
  3. Die Version 2.0 des BITV gibt es seit September 2011. (Monat und Jahr!)
Add a custom footer
Add a custom sidebar
Clone this wiki locally