Exemplarische Vorgehensweise: Erstellen von behindertengerechten Webanwendungen

Artikel
09/03/2008

Aktualisiert: November 2007

Wenn Sie Webseiten behindertengerecht gestalten, können Sie damit so viele Kunden wie möglich erreichen. Nicht nur Personen mit Behinderungen sind auf derart benutzerfreundliche Seiten angewiesen. Auch Benutzer von Browsern, die nur Textanzeige unterstützen, oder Benutzer von Programmen, die Webseiteninhalt interpretieren, können von diesen Optionen profitieren. Automatisierungstools (z. B. Suchmaschinen) können die Informationen auf solchen Seiten besser durchsuchen, indizieren und verändern. Darüber hinaus ist es durchaus denkbar, dass künftige Telekommunikationsgesetze vorschreiben, dass die über das Internet verbreiteten Informationen genau wie konventionelle Software behindertenfreundlich gestaltet sein müssen. Weitere Informationen finden Sie unter Unterstützung von Eingabehilfen in ASP.NET und unter Steuerelemente und Eingabehilfen von ASP.NET.

Im Folgenden sind einige Tipps zum Entwickeln behindertengerechter Websites aufgeführt, die von der Microsoft Accessibility-Website stammen:

Bereitstellen geeigneter Alternativtexte (ALT) zu allen Grafiken
Richtiges Verwenden von Imagemaps
Schreiben hilfreicher Linktexte
Entwickeln guter Tastaturnavigationsmöglichkeiten
Bereitstellen alternativer Seiten, auf denen keine Frames verwendet werden
Ordnungsgemäßes Verwenden von Tabellen und ihrer Alternativen
Unterstützen der Formatierungsoptionen für den Textreader
Setzen Sie nicht den Einsatz von Stylesheets voraus.
Verwenden von Dateiformaten, die der Reader nutzen kann
Vermeiden von Laufschriften.
Bereitstellen von Titeln für die wichtigsten Objekte.

Wenn Sie eine Webseite nicht mit den genannten Eigenschaften versehen können, sollten Sie alternativ Webseiten zur Verfügung stellen, die nur Text enthalten.

Viele der Richtlinien für Eingabehilfen werden von ASP.NET-Steuerelementen unterstützt. Dazu gehört das Bereitstellen des Tastaturfokus und der Bildschirmelemente. Die Eigenschaften der ASP.NET-Steuerelemente können, wie aus der folgenden Tabelle ersichtlich, zur Unterstützung weiterer Richtlinien für Eingabehilfen verwendet werden.

Eigenschaft des Steuerelements	Überlegungen zur behindertengerechten Gestaltung
TabIndex	Damit erstellen Sie über das Formular einen leicht nachvollziehbaren Navigationspfad. Bei Steuerelementen ohne systeminterne Bezeichnung, z. B. Textfeldern, muss die zugeordnete Bezeichnung dem Steuerelement in der Aktivierreihenfolge direkt vorangestellt sein. In Fällen, in denen dies nicht möglich oder wünschenswert ist, können Sie mithilfe der AssociatedControlID-Eigenschaft eines Label-Steuerelements diesem ein Textfeld zuordnen.
Text	Verwenden Sie das u-HTML-Element, um die Tastenkombination für ein Steuerelement anzuzeigen. Durch die Verwendung von Zugriffstasten ermöglichen Sie die Bereitstellung des dokumentierten Tastaturzugriffs auf alle Features. (Mithilfe der AccessKey-Eigenschaft kann für ein Steuerelement eine Tastenkombination aktiviert werden.)
Font Size	Verwenden Sie statt spezieller Größen Überschriftstags.
AlternateText	Geben Sie alternativen Text für alle Bilder ein, die für das Verständnis des Inhalts der Webseite wichtig sind. In einigen Fällen ist das Angeben von alternativem Text nicht sinnvoll, z. B. bei Bildern für die grafische Formatierung. Um die AlternateText-Eigenschaft eines Bilds als leer zu rendern, legen sie die GenerateEmptyAlternateText-Eigenschaft für das Image-Steuerelement auf true fest.
AccessKey	Damit ermöglichen Sie den Tastaturzugriff auf Steuerelemente.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Microsoft Visual Web Developer-Webentwicklungstool
.NET Framework

Erstellen einer Website und einer Webseite

In dieser exemplarischen Vorgehensweise erstellen Sie eine Website für einen Algebrakurs. Die Benutzeroberfläche enthält folgende Steuerelemente:

Ein Image-Steuerelement für das Kurslogo.
Ein Panel-Steuerelement mit HyperLink-Steuerelementen für die Vorlesungen.
Ein GridView-Steuerelement, das eine Tabelle mit dem Kurslehrplan anzeigt.
Ein HyperLink-Steuerelement, das mit einer Seite verknüpft ist, auf der das Kurslehrbuch beschrieben wird.

In dieser exemplarischen Vorgehensweise geht es darum, die Benutzeroberfläche (UI) möglichst behindertenfreundlich zu gestalten und dabei die Webserver-Steuerelemente so zu verwenden, dass Eingabehilfen unterstützt werden. Hier werden die für die behindertengerechte Programmierung bestimmten Features einiger häufig verwendeter Steuerelemente veranschaulicht, z. B. der Steuerelemente HyperLink, GridView, Image und Label. Die HyperLink-Steuerelemente navigieren alle zu derselben Webseite, die jedoch leer ist.

In der folgenden Prozedur erstellen Sie die Dateisystem-Website und fügen eine Seite mit dem Namen Lecture.aspx hinzu.

So erstellen Sie eine Dateisystem-Website

Öffnen Sie Visual Web Developer.
Klicken Sie im Menü Datei auf Neue Website.

Das Dialogfeld Neue Website wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

Geben Sie z. B. den Ordnernamen C:\WebSites ein.
Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.
Klicken Sie auf OK.

Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf Web Form.
Geben Sie Lecture.aspx in das Feld Name ein, und klicken Sie dann auf OK.

Erstellen der anzuzeigenden Daten

Die Seite, die Sie erstellen, zeigt Informationen zu Vorlesungen für einen Algebrakurs an. In dieser exemplarischen Vorgehensweise werden die Daten für den Kurs in einer XML-Datei gespeichert.

So erstellen Sie eine XML-Datendatei

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner App_Data, und klicken Sie dann auf Neues Element hinzufügen.

Hinweis:

Achten Sie darauf, dass Sie die XML-Datei dem Ordner App_Data hinzufügen.
Klicken Sie im Dialogfeld Neues Element hinzufügen unter Von Visual Studio installierte Vorlagen auf XML-Datei.
Geben Sie im Feld Name die Zeichenfolge Syllabus ein.
Klicken Sie auf Hinzufügen.

Hinweis:
Achten Sie darauf, dass Sie die XML-Datei dem Ordner App_Data hinzufügen.

Kopieren Sie das folgende XML in die Datei, und überschreiben Sie dabei den Standardinhalt.

<?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

Speichern Sie die XML-Datei, und schließen Sie sie dann.

Einfügen von Steuerelementen in das Formular

Beim Hinzufügen der Steuerelemente zum Formular für diese Anwendung sollten Sie die folgenden Richtlinien für eine behindertengerechte Anwendung beachten:

Jedes Bild, das Benutzerinformationen enthält, sollte beschreibenden alternativen Text aufweisen.
Bei der Verwendung von Tabellen können Sie mit dem Title-Attribut Namen für die Zeilen und Spalten der Tabellen bereitstellen. Darüber hinaus ist es wichtig, dass Tabellen beim Lesen von links nach rechts und von oben nach unten Sinn ergeben.
Verwenden Sie Überschriftstags anstelle von formatiertem Text, um die vom Benutzer ausgewählten Formatierungsoptionen zu unterstützen.
Sorgen Sie für hilfreiche Linktexte. Wenn der Text beispielsweise "Klicken Sie hier, um das Skript der Vorlesung 1 zu erhalten" lautet, ist "Skript der Vorlesung 1" besser als Linktext geeignet als "Klicken Sie hier".
Stellen Sie sicher, dass der Navigationspfad durch die Seite leicht nachzuvollziehen ist. Beachten Sie dabei den normalen Textfluss der jeweiligen Sprache.
Für die meisten Objekte können Sie das Title-Attribut verwenden.

So fügen Sie der Seite behindertenfreundliche Steuerelemente hinzu

Wechseln Sie zur Entwurfsansicht.
Legen Sie im Eigenschaftenfenster die folgenden Eigenschaften für DOCUMENT fest:
- Legen Sie Title auf "Algebra Class" fest.
- Legen Sie BgColor auf Background fest.
Geben Sie am oberen Rand der Seite Algebra Review Class ein.
Markieren Sie den zu formatierenden Text, und klicken Sie dann auf der Symbolleiste Format in der Liste ganz links auf Heading 1.

Fügen Sie in der Toolbox aus der Gruppe Standard die folgenden Steuerelemente hinzu, und legen Sie die Eigenschaften wie angegeben fest.

Hinweis:
Das Layout der Seite ist nicht wichtig.

Steuerelement	Eigenschaft	Wert
Image	AlternateText	Mathematische Gleichungen.
	ImageUrl	Eine URL zu einem Bild.
	TabIndex	0
Panel	ID	Vorlesungen
	TabIndex	0
HyperLink (dem Bereich Vorlesungen hinzufügen)	ID	Lecture1
	Text	Lecture 1 notes
	AccessKey	1
	href	~/Lecture.aspx
	TabIndex	1
HyperLink (dem Bereich Vorlesungen hinzufügen)	ID	Lecture2
	Text	Lecture 2 notes
	AccessKey	2
	href	~/Lecture.aspx
	TabIndex	2
HyperLink (dem Bereich Vorlesungen hinzufügen)	ID	Lecture3
	Text	Lecture 3 notes
	AccessKey	3
	href	~/Lecture.aspx
	TabIndex	3
Label	ID	TextbookLabel
	Text	Textbook:
	AssociatedControlID	TextbookLink
Hyperlink	ID	TextbookLink
	Text	Mathematik-Repetitorium, Detlef Schneider
	href	~/Lecture.aspx
	TabIndex	4

Klicken Sie auf das Panel-Steuerelement, und legen Sie dann die GroupingText-Eigenschaft auf Lecture Notes fest.
Wechseln Sie zur Quellansicht.
Klicken Sie in das HTML-Element und anschließend auf Eigenschaften, und legen Sie lang auf en fest, um anzugeben, dass es sich bei der Sprache der Seite um Englisch handelt.

Das Tag sollte jetzt wie folgt lauten:
```
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
```

Hinzufügen eines GridView-Steuerelements

Informationen zu den Vorlesungen werden in einem GridView-Steuerelement angezeigt. Das GridView-Steuerelement ruft Daten aus der XML-Datei ab, die Sie im vorhergehenden Abschnitt erstellt haben.

So fügen Sie ein GridView-Steuerelement hinzu und binden es an die XML-Datei

Wechseln Sie in die Entwurfsansicht.
Ziehen Sie aus der Gruppe Daten der Toolbox ein XmlDataSource-Steuerelement auf die Seite.

Der genaue Ort ist nicht wichtig.

Das XmlDataSource-Steuerelement liest eine XML-Datei und macht die Daten für die Steuerelemente auf der Seite verfügbar.
Klicken Sie mit der rechten Maustaste auf XmlDataSource, klicken Sie auf Smarttag anzeigen, und klicken Sie dann im Menü XmlDataSource-Aufgaben auf Datenquelle konfigurieren.

Das Dialogfeld Datenquelle konfigurieren wird angezeigt.
Geben Sie im Feld Datendatei den Pfad ~/App_Data/Syllabus.xml ein, und klicken Sie dann auf OK.
Fügen Sie der Seite aus der Gruppe Data der Toolbox ein GridView-Steuerelement hinzu.
Legen Sie unter Eigenschaften die Eigenschaften wie in der folgenden Tabelle angegeben fest.

Eigenschaft

Einstellung

ID

SyllabusGrid

DataSourceId

XmlDataSource1

TabIndex

9

Eigenschaft	Einstellung
ID	SyllabusGrid
DataSourceId	XmlDataSource1
TabIndex	9

Hinzufügen von Titeln zu Zellen des GridView-Steuerelements

Eine Voraussetzung für Eingabehilfen ist, dass Spalten und Zellen von HTML-Tabellen Titel aufweisen. Das GridView-Steuerelement gibt zur Laufzeit eine HTML-Tabelle wieder. Deshalb müssen Sie sicherstellen, dass die Spalten, die vom Steuerelement gerendert werden, Titel enthalten. Um diese Aufgabe auszuführen, schreiben Sie Code, der das RowCreated-Ereignis behandelt. Fügen Sie im Ereignishandler Title-Attribute in die Tabellenzellen ein, die vom GridView-Steuerelement erstellt werden.

So fügen Sie den Spalten des GridView-Steuerelements Titel hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Seite (Default.aspx), und klicken Sie dann auf Code anzeigen.

Fügen Sie den folgenden Code hinzu.

Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

Klicken Sie in der Entwurfsansicht auf das GridView-Steuerelement, und legen Sie dann im Fenster Eigenschaften das RowCreated-Ereignis auf "SyllabusGrid_RowCreated" fest.

Dadurch wird das Ereignis mit dem Ereignishandler verbunden.

Testen der Anwendung

Visual Web Developer enthält ein Tool zur Validierung von Eingabehilfen, mit dem die Webseite geprüft und festgestellt wird, ob sie den Richtlinien für Eingabehilfen entspricht. Das Tool überprüft zur Entwurfszeit das HTML auf der Seite. Sie können auch die Ausgabe der Seite überprüfen. Dabei wird geprüft, ob das Markup, das von den ASP.NET-Steuerelementen gerendert wird, den Richtlinien für Eingabehilfen entspricht.

So testen Sie die Anwendung auf behindertengerechte Gestaltung

Stellen Sie sicher, dass die Seite in der Entwurfsansicht angezeigt wird.
Klicken Sie im Menü Extras auf die Option Eingabehilfen überprüfen.

Das Dialogfeld Eingabehilfenvalidierung wird angezeigt.

Hinweis:

Das Tool für die Eingabehilfenvalidierung steht in Microsoft Visual Web Developer Express Edition nicht zur Verfügung.
Aktivieren Sie die Kontrollkästchen für die Eingabehilfenstandards, die überprüft werden sollen, und klicken Sie anschließend auf Überprüfen.

Visual Web Developer überprüft die Seite und zeigt dann einen Bericht der Validierungsfehler an, sofern Fehler aufgetreten sind. Denken Sie daran, dass der Bericht zur Eingabehilfenvalidierung nicht feststellen kann, ob die vom GridView-Steuerelement gerenderte Tabelle den Richtlinien für Eingabehilfen entspricht.
Drücken Sie STRG+F5, um die Seite auszuführen.
Testen Sie die Zugriffstasten.

Bei dieser Anwendung haben Sie für die HyperLink-Steuerelemente die Zugriffstasten ALT+1, ALT+2 sowie ALT+3 festgelegt. Mithilfe der Zugriffstasten gelangen Sie zu den Links. Das Drücken der EINGABETASTE entspricht dem Klicken auf den jeweiligen Link.
Deaktivieren Sie die Anzeige von Grafiken, um zu überprüfen, dass die Seite auch bei Anzeige von alternativem Text verwendbar ist. Gehen Sie dazu wie folgt vor:
1. Klicken Sie in Internet Explorer 6.0 im Menü Extras auf Internetoptionen.
2. Deaktivieren Sie auf der Registerkarte Erweitert unter Multimedia die Grafikoptionen.
Um den alternativen Text anzuzeigen, müssen Sie die Seite zunächst aktualisieren.
Deaktivieren Sie Sounds, um sicherzustellen, dass keine wichtigen Anweisungen verloren gehen. Gehen Sie dazu wie folgt vor:
1. Klicken Sie in Internet Explorer 6.0 im Menü Extras auf Internetoptionen.
2. Deaktivieren Sie auf der Registerkarte Erweitert unter Multimedia die Soundoptionen.
Zeigen Sie die Anwendung in einem Browser an, in dem die Stylesheets deaktiviert werden können, und deaktivieren Sie dann die Stylesheets, um sicherzustellen, dass die Seite noch gelesen werden kann.
1. Klicken Sie in Internet Explorer 6.0 im Menü Extras auf Internetoptionen.
2. Klicken Sie auf der Registerkarte Allgemein auf Eingabehilfen, um Stylesheetoptionen festzulegen.
Verwenden Sie unter Microsoft Windows die Option Hoher Kontrast, um sicherzustellen, dass die Seite immer noch lesbar ist. So testen Sie die Option Hoher Kontrast:
1. Klicken Sie unter Windows auf Start, zeigen Sie auf Systemsteuerung, und klicken Sie dann auf Eingabehilfen.
2. Klicken Sie auf die Registerkarte Anzeige, und aktivieren Sie das Kontrollkästchen Kontrast aktivieren.
3. Überprüfen Sie für die einzelnen Elemente der Benutzeroberfläche, ob die Farben und die Schriftart entsprechend geändert wurden. Darüber hinaus muss die Anzeige von Symbolen und Mustern hinter dem Text unterdrückt sein.
Wählen Sie die größtmögliche Schrift aus (nur verfügbar, wenn das Kontrollkästchen unter Hoher Kontrast aktiviert ist), und überprüfen Sie, ob die Seite noch lesbar ist. Gehen Sie dazu wie folgt vor:
1. Klicken Sie unter Windows auf Start, zeigen Sie auf Systemsteuerung, und klicken Sie dann auf Anzeige.
2. Klicken Sie auf der Registerkarte Darstellung in der Liste Schriftgrad auf Extragroß.
Ändern Sie die Größe des Browserfensters, und überprüfen Sie, ob die Seite noch lesbar ist.
Navigieren Sie mithilfe der Tastatur durch die Webseite, und überprüfen Sie dabei, ob die Navigationsreihenfolge sinnvoll ist, ob mit der TAB-TASTE alle Links erreicht werden können und ob mit STRG+TAB zwischen Fensterbereichen bzw. Abschnitten gewechselt werden kann.
Markieren Sie den gesamten Text, und kopieren Sie ihn in die Zwischenablage. Überprüfen Sie dann, ob der Text sinnvoll ist.

Hinweis:
Das Tool für die Eingabehilfenvalidierung steht in Microsoft Visual Web Developer Express Edition nicht zur Verfügung.

Siehe auch

Konzepte

Unterstützung von Eingabehilfen in ASP.NET

Steuerelemente und Eingabehilfen von ASP.NET

Übersicht über Sicherheitsrisiken bei Webanwendungen

Weitere Ressourcen

Web Content Accessibility Guidelines 1.0 (W3C)