(0) exportieren Drucken
Alle erweitern
Dieser Artikel wurde manuell übersetzt. Bewegen Sie den Mauszeiger über die Sätze im Artikel, um den Originaltext anzuzeigen.
Übersetzung
Original

Barrierefreiheit in Visual Studio und ASP.NET

Barrierefreiheitsstandards ermöglichen das Erstellen von Webseiten, die von Personen mit Behinderungen verwendet werden können. Dieses Thema bietet eine Übersicht über die relevanten Standards und einige Techniken, mit denen ASP.NET-Webserversteuerelemente so konfiguriert werden können, dass sie barrierefreie HTML generieren.

Sofern nicht anders vermerkt, beziehen sich die in diesem Thema behandelten Standards sowohl auf HTML als auch auf XHTML, und Verweise auf HTML gelten für beide Markupsprachen. Details zu XHTML-Standards und Informationen dazu, wie Sie sie in ASP.NET einhalten können, finden Sie unter XHTML-Standards in Visual Studio und ASP.NET. Ausführliche Informationen dazu, wie die für bestimmte ASP.NET-Serversteuerelemente gerenderte HTML die Barrierefreiheitsstandards erfüllt, finden Sie unter Steuerelemente und Barrierefreiheit von ASP.NET.

Dieses Thema enthält folgende Abschnitte:

Einige Personen surfen im Internet, obwohl es für sie schwierig oder sogar unmöglich ist, den Computerbildschirm zu sehen. Einige Personen können nicht mit einer Maus arbeiten. Einigen Personen fällt das Lesen oder Navigieren in einer komplexen Website schwer. Ältere Personen werden z. B. häufig durch mehrere dieser Probleme behindert, müssen aber trotzdem das Internet nutzen.

Einige Behinderungen können nur durch die Verwendung von Hilfstechnologie bewältigt werden. Ein Beispiel für Hilfstechnologie ist Sprachausgabesoftware, die den Text auf einer Seite für sehbehinderte Personen in Sprache konvertiert. Mit vielen Barrierefreiheitsstandards soll sichergestellt werden, dass Hilfstechnologie eine effektive Verwendung von Webseiten ermöglicht.

Andere Barrierefreiheitsstandards dienen dazu, Websites für Personen, die Standardbrowser verwenden, verständlich und einfach zu machen, auch wenn sie keine Hilfstechnologie benötigen. Von der Einhaltung der Barrierefreiheitsstandards profitieren alle Benutzer, nicht nur diejenigen mit Behinderungen.

Die Unterstützung von Personen mit Behinderungen und die Vereinfachung Ihrer Website für alle Benutzer sind lohnende Ziele. Außerdem unterliegen Sie möglicherweise rechtlichen Bestimmungen, die die Einhaltung von Barrierefreiheitsstandards fordern. Zu den Gesetzen, die barrierefreie Websites vorschreiben, gehören die folgenden:

  • Gemäß Abschnitt 508 des Rehabilitation Act (Rehabilitationsgesetz) muss in den USA jede Website, die von einer Bundesbehörde entwickelt wurde, barrierefrei sein, um Personen mit Behinderungen den Zugriff zu ermöglichen. Dieses Gesetz gilt für Bundesbehörden und Unternehmen, die mit ihnen einen Vertrag abschließen. Sie können den vollständigen Text der Richtlinien unter Abschnitt 508 auf der Website Section 508 lesen.

    Andere US-Gesetze, die nicht speziell auf Websites ausgerichtet sind, z. B. das Gesetz zur Durchsetzung der Chancengleichheit Behinderter (Americans with Disabilities Act, ADA), wurden auf Websites angewendet. 2007 wurde ein großer Einzelhändler verklagt, weil auf seiner Website Barrierefreiheitsfunktionen gefehlt haben. Der Einzelhändler willigte ein, seine Website barrierefrei zu machen und Schadenersatz in Höhe von sechs Millionen Dollar an die Kläger zu zahlen. Er fügte sich auch einer kontinuierlichen Überwachung der Barrierefreiheit durch die Kläger.

  • In Kanada erfordern die Treasury Board Common Look and Feel Standards (allgemeine Standards in Bezug auf Aussehen und Verhalten), dass von Regierungsbehörden entwickelte Websites barrierefrei sein müssen.

  • In Australien erfordert der Disability Discrimination Act (Gesetz gegen Behindertendiskriminierung), dass alle auf australischen Servern gehosteten Websites (unabhängig davon, ob es sich um eine Website der Regierung handelt) barrierefrei sein müssen.

  • Die Europäische Union entwickelt derzeit Gesetze, die auf W3C-Standards basieren.

Viele andere Länder haben eine ähnliche Gesetzgebung oder ähnliche gesetzliche Anforderungen. Weitere Informationen zu Gesetzen zur Barrierefreiheit finden Sie im Bereich "Web Accessibility Initiative" auf der Website des World Wide Web Consortium (W3C).

Die am häufigsten verwendeten Richtlinien für Barrierefreiheit sind die Web Content Accessibility Guidelines (WCAG, Richtlinien für Barrierefreiheit bei Webinhalten), die vom World Wide Web Consortium (W3C) entworfen wurden. Version 1.0 des WCAG wurde am 5. Mai 1999 veröffentlicht. Diese Version wurde von der am 11. Dezember 2008 veröffentlichten Version WCAG 2.0 abgelöst. (Die vollständige Beschreibung beider Versionen finden Sie auf der W3C-Website.) Viele Regierungen und Organisationen veröffentlichen auch Richtlinien für die Erstellung barrierefreier Anwendungen, aber die meisten werden von den WCAG abgeleitet.

Die Organisation von WCAG 2.0 erfolgt nach vier Entwurfsprinzipien der Barrierefreiheit im Internet. Jedes Prinzip weist eine oder mehrere Richtlinien auf, und jede Richtlinie verfügt über Erfolgskriterien, die getestet werden können. Anhand der Erfolgskriterien kann festgestellt werden, ob eine Website den WCAG 2.0-Richtlinien entspricht.

Die W3C-Site stellt auch empfohlene Techniken bereit, die Sie dabei unterstützen, die Richtlinien einzuhalten und die Erfolgskriterien zu erfüllen. Diese Techniken sind kein Bestandteil der offiziellen Spezifikation. Sie wurden im Hinblick darauf entworfen, dass sie geändert werden können, wenn Technologien weiterentwickelt werden, während die Richtlinien und Erfolgskriterien im Verlauf der Zeit gleich bleiben.

WCAG-Entwurfsprinzipien

Gemäß den vier Entwurfsprinzipien des WCAG muss Webinhalt die folgenden Eigenschaften aufweisen:

  1. Wahrnehmbar.

    Informationen und Benutzeroberflächenkomponenten müssen den Benutzern in einer von ihnen wahrnehmbaren Weise präsentiert werden. Eine Person, die blind ist, kann z. B. keine Bilder auf dem Bildschirm erkennen, aber von der Sprachausgabesoftware gesprochene Wörter hören. Indem Sie eine Textbeschreibung eines Bilds bereitstellen, können Sie sicherstellen, dass die Informationen auf der Seite wahrgenommen werden können.

  2. Funktionsfähig.

    Die Benutzeroberfläche sollte keine Interaktionen erfordern, die ein Benutzer nicht durchführen kann. Wenn ein Benutzer z. B. keine Maus verwenden kann, muss er in der Lage sein, eine Website über die Tastatur zu navigieren.

  3. Verständlich.

    Die Informationen auf einer Webseite und die Vorgehensweise auf der Benutzeroberfläche müssen verständlich sein. Es ist z. B. einfacher, auf einer Website zu navigieren, bei der die Navigationslinks auf der gesamten Website in derselben Reihenfolge und auf die gleiche Weise angeordnet sind, als auf einer Website ohne einheitliche Anzeige der Navigationslinks.

  4. Robust.

    Der Inhalt einer Webseite muss mit einer Vielzahl von Browsern und Hilfstechnologien kompatibel sein. Der Zugriff auf Webinhalte sollte nicht durch die Weiterentwicklung von Browsern und Hilfstechnologiesoftware beeinträchtigt werden. Selbst wenn z. B. eine nicht standardmäßige HTML-Form in einem bestimmten Browser richtig angezeigt wird, sollten Sie sich nicht darauf verlassen, da das Verhalten in zukünftigen Versionen des Browsers oder anderen Browsern davon abweichen kann.

WCAG-Richtlinien

Folgende Richtlinien stellen sicher, dass dieser Webinhalt wahrnehmbar ist:

  • Stellen Sie Textalternativen für Inhalte bereit, bei denen es sich nicht um Text handelt, z. B. Bilder. (1.1)

  • Stellen Sie Textalternativen für zeitbasierte Medien wie Audio- oder Videoinhalt bereit. (1.2)

  • Strukturieren Sie den Inhalt so, dass er auf unterschiedliche Art und Weise (abweichend von einem standardmäßigen grafischen Browser) ohne Informationsverlust dargestellt werden kann. (1.3)

    Stellen Sie z. B. sicher, dass der HTML-Code eines Web Forms explizit angibt, welche label-Elemente zu welchen input-Elementen gehören, da eine Bildschirmsprachausgabe andernfalls die Reihenfolge durcheinander bringen könnte.

  • Erleichtern Sie es dem Benutzer, Inhalt zu sehen und zu hören. (1.4)

    Stellen Sie z. B. sicher, dass der Kontrast zwischen Vordergrund- und Hintergrundfarben ausreichend ist und dass der Benutzer eine Audiodatei anhalten kann.

Folgende Richtlinien stellen sicher, dass eine Website funktionsfähig ist:

  • Machen Sie alle Funktionen über die Tastatur verfügbar. (2.1)

  • Geben Sie den Benutzern genug Zeit, um den Inhalt zu lesen und zu nutzen. (2.2)

    Wenn eine Seite z. B. nur einige Sekunden lang gezeigt wird, bevor automatisch eine andere Seite geöffnet wird, zeigen Sie ein Popupfenster an, in dem der Benutzer die Weiterleitung verzögern kann.

  • Achten Sie darauf, dass Sie keinen Inhalt entwerfen, von dem bekannt ist, dass er epileptische Anfälle auslösen kann. (2.3)

    Visuelle Elemente, die öfter als dreimal pro Sekunde aufblitzen, können Anfälle auslösen.

  • Stellen Sie Möglichkeiten bereit, die den Benutzer bei der Navigation und Suche von Inhalt unterstützen. (2.4)

Die folgenden Richtlinien stellen sicher, dass eine Website verständlich ist:

  • Stellen Sie Textinhalt lesbar und verständlich dar. (3.1)

  • Achten Sie bei den Webseiten darauf, dass ihr Aussehen und Verhalten vorhersagbar sind. (3.2)

  • Helfen Sie den Benutzern dabei, Fehler zu vermeiden bzw. zu korrigieren. (3.3)

Die einzige Richtlinie zum Sicherstellen, dass eine Website robust ist, ist im Grunde eine Wiederholung des Prinzips:

  • Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzer-Agents. Benutzer-Agents schließen Browser und Hilfstechnologiesoftware ein. (4.1)

    Die beste Methode zur Einhaltung dieser Richtlinie besteht darin, sicherzustellen, dass Webseiten nur gültige HTML enthalten.

WCAG-Erfolgskriterien und -Konformitätsebenen

Für jede Richtlinie werden Erfolgskriterien angegeben, die getestet werden können. Ausführliche Informationen über diese Testkriterien finden Sie in der WCAG 2.0-Spezifikation auf der W3C-Website. Die Erfolgskriterien sind in drei Ebenen eingeteilt, die zunehmende Grade der Einhaltung von Barrierefreiheitsrichtlinien angeben:

  • Ebene A.

    Entsprechend der W3C-Empfehlung müssen Sie die Richtlinien befolgen, die eine Voraussetzung dafür sind, dass eine Website diese grundlegenden Erfolgskriterien erfüllt. Andernfalls gibt es eine oder mehrere Benutzergruppen, die auf bestimmte Informationen oder Funktionen auf der Site nicht zugreifen können.

  • Ebene AA.

    Sie sollten auch die Richtlinien befolgen, die eine Voraussetzung dafür sind, dass eine Website diese etwas strengeren Erfolgskriterien erfüllt Andernfalls gibt es eine oder mehrere Benutzergruppen, die nur schwer auf bestimmte Informationen oder Funktionen auf der Site zugreifen können.

  • Ebene AAA.

    Es bleibt Ihnen überlassen, ob Sie die Richtlinien befolgen möchten, durch die eine Website diese besonders strengen Erfolgskriterien erfüllen kann. Diese Ebene wird von sehr wenigen Websites erreicht, und das W3C empfiehlt es nicht als Ziel für die gesamte Website, da AAA-Konformität für einige Inhaltstypen nicht möglich ist.

Wenn Ihre Website den WCAG-Richtlinien entspricht, können Sie ein Logo anzeigen, das die Besucher der Site darüber informiert. Das Logo gibt die von der Site erreichte Konformitätsebene an.

Wenn die Website alle Erfolgskriterien der Ebene A erfüllt, können Sie ein Logo anzeigen, das Konformitätsebene A angibt. Um die Konformitätsebene AA zu erreichen, müssen Sie alle Erfolgskriterien der Ebenen A und AA erfüllen (nicht nur die Kriterien der Ebene AA). Für Ebene AAA müssen Sie neben den Kriterien der Ebene AAA auch die Kriterien der Ebenen A und AA erfüllen. Weitere Informationen finden Sie auf der Seite über WCAG 2.0-Konformitätslogos auf der W3C-Website.

Das W3C erstellt einen neuen Standard, der eine gute Zusammenarbeit zwischen Hilfstechnologie und umfassenden Internetanwendungen (RIAs) sicherstellen soll. Eine RIA ist in diesem Kontext eine Webseite, die clientseitige Steuerelemente (in den W3C-Dokumenten als Widgets bezeichnet) enthält. Diese Widgets bestehen in der Regel aus HTML-Elementen und JavaScript- oder AJAX-Code. Ein Beispiel für ein Widget ist ein Kalendersteuerelement, das einen Kalender anzeigt, aus dem Sie ein Datum auswählen können, das in ein Datumstextfeld eingetragen wird. Das von einigen ASP.NET-Serversteuerelementen generierte clientseitige Markup gilt ebenso wie die Steuerelemente im ASP.NET AJAX Control Toolkit als Widget.

Der ARIA-Standard umfasst hauptsächlich neue Attribute, die den HTML-Elementen hinzugefügt werden können. Hilfstechnologiesoftware kann mithilfe dieser Attribute die Funktion, Eigenschaften und den Zustand von Widgets identifizieren. Die Standards umfassen auch Richtlinien dazu, wie Widgets auf Tastatureingaben reagieren sollen, um sicherzustellen, dass sie den Zugriff über die Tastatur auf einheitliche Weise ermöglichen.

Das wichtigste neue Attribut, das von ARIA eingeführt wird, ist das role-Attribut, das den Typ des Widgets identifiziert, wie im folgenden Beispiel gezeigt wird:

<table role="datepicker">

Dieses Attribut benachrichtigt die Hilfstechnologie über die Funktion des Widgets und teilt ihr dadurch mit, wie das Widget dargestellt und verwendet werden soll. In diesem Beispiel kann eine Bildschirmsprachausgabe ansagen, dass ein Kalender angezeigt wird, in dem der Benutzer ein Datum auswählen kann, anstatt einfach eine Reihe von Tabellenzellen anzusagen.

Eigenschafts- und Zustandsattribute stellen andere Informationen über das Widget bereit, wie im folgenden Beispiel gezeigt:

<button role=slider

  aria-valuemin="0"

aria-valuemax="100"

  aria-valuenow="0">

Diese Attribute stellen nicht nur weitere Informationen über das Widget bereit, sondern ermöglichen der Hilfstechnologie auch die programmgesteuerte Bearbeitung das Widgets. In dem Beispiel kann eine Sprachausgabe ansagen, dass dieses Widget ein Schieberegler-Steuerelement ist, und dass die aktuelle Einstellung des Schiebereglers 0 (null) ist. Die Sprachausgabe kann den Schieberegler programmgesteuert verschieben, indem sie das aria-valuenow-Attribut innerhalb des Bereichs zwischen dem Mindest- und Höchstwert aktualisiert.

Einige ARIA-Attribute sind nicht ausdrücklich für Widgets gedacht. Orientierungsrollen (die durch Verwendung desselben role-Attributs angegeben werden) geben z. B. wie in den folgenden Beispielen die logische Funktion der Regionen einer Webseite an:

<div role="banner">

<div role="navigation">

<div role="main">

<div role="complementary">

Wenn auf einer Seite die Hauptabschnitte mit Orientierungsrollen markiert sind, kann die Sprachausgabesoftware dem Benutzer eine Liste von Abschnittstiteln vorlesen. Der Benutzer kann einen der Abschnitte auswählen, damit die Sprachausgabe an einer bestimmten Stelle der Seite mit dem Vorlesen beginnt. Dies spart Zeit, da Benutzer die Abschnitte überspringen können, für die sie sich nicht interessieren.

Da ARIA relativ neu ist und sich noch in der Entwicklungsphase befindet, werden ARIA-Attribute in Webbrowsern und Hilfstechnologiesoftware nur in begrenztem Umfang unterstützt. Seiten mit ARIA-Attributen bestehen außerdem möglicherweise die W3C-Markupvalidierung nicht. Sie können jedoch ARIA-Attribute in Webseiten einschließen, da die Attribute von Browsern, die sie nicht unterstützen, einfach ignoriert werden.

Weitere Informationen zu ARIA finden Sie in der ARIA-Übersicht auf der W3C-Website. Informationen über ASP.NET-Steuerelemente, die HTML generieren, das ARIA-Standards entspricht, finden Sie unter Steuerelemente und Barrierefreiheit von ASP.NET. Um ARIA-Unterstützung für ASP.NET-Steuerelemente hinzuzufügen, die ARIA nicht grundsätzlich unterstützen, können Sie das JavaScript-Attribut oder Expando-Attribut verwenden.

WCAG 1.0 erfordert, dass Webseiten ohne Clientskript funktionieren. Die Spezifikation enthält folgende Angaben:

Stellen Sie sicher, dass Seiten verwendet werden können, wenn Skripts, Applets oder andere programmgesteuerte Objekte deaktiviert oder nicht unterstützt werden. Wenn dies nicht möglich ist, stellen Sie entsprechende Informationen auf einer alternativen barrierefreien Seite bereit. (6.3)

Diese Anforderung wurde 1999 vom Stand der Technik veranlasst. Inzwischen hat die Hilfstechnologiesoftware Unterstützung für JavaScript hinzugefügt, und WCAG 2.0 erlaubt es Webseiten, sich auf Clientskript zu verlassen.

Wenn Sie jedoch einen älteren Barrierefreiheitsstandard einhalten müssen, unterliegen Sie möglicherweise immer noch dieser Anforderung. In diesem Fall sollten Sie ASP.NET-Steuerelemente vermeiden, die nur mit JavaScript funktionieren. Das LinkButton-Steuerelement und das ImageButton-Steuerelement erfordern z. B. Clientskript zum Ausführen von Postbacks. Eine vollständige Liste aller ASP.NET-Steuerelemente, die Clientskript verwenden, finden Sie unter Verwendung von Clientskript durch ASP.NET-Webserversteuerelemente.

WCAG 2.0 erfordert, dass eine Website über eine Tastatur funktionsfähig ist. Daher kann eine barrierefreie Website JavaScript nicht auf eine Weise verwenden, die den Zugriff auf die Funktionen nur über Mausaktionen ermöglicht. Wenn Sie z. B. JavaScript-Code schreiben, in dem bestimmte Funktionen als Reaktion auf ein mouseover-Ereignis bereitgestellt werden, stellen Sie sicher, dass der Zugriff auf diese Funktionen auch über die Tastatur möglich ist. Alle ASP.NET-Steuerelemente aktivieren den Zugriff über die Tastatur standardmäßig oder können so konfiguriert werden, dass der Zugriff über die Tastatur ermöglicht wird.

ASP.NET-Steuerelemente werden so entworfen, dass sie standardmäßig barrierefrei sind. Dies bedeutet, dass sie, wenn möglich, automatisch barrierefreies HTML rendern oder Eigenschaften angeben, die Sie festlegen können, um die Seiten barrierefrei zu machen. ASP.NET-Steuerelemente stellen z. B. die folgenden Funktionen bereit, die Barrierefreiheit standardmäßig unterstützen:

  • Generieren Sie HTML, das CSS für die visuelle Formatierung verwendet.

  • Verwenden Sie Tabellen, um Daten darzustellen, und nicht um visuelle Elemente auf einer Seite anzuordnen.

  • Stellen Sie Angaben für die Tabellenstruktur bereit, indem Sie Kopf- und Fußzeilen markieren.

  • Ordnen Sie Bezeichnungen den Steuerelementen zu, die sie betreffen.

  • Generieren Sie geräteunabhängiges Clientskript, z. B. Skripts, die sowohl auf Mausklicks als auch auf Tastaturaktionen reagieren.

  • Geben Sie Einstellungen für einen Registerkartenindex für Eingabeelemente an.

  • Sie bieten eine Möglichkeit, für jedes Nicht-Textelement entsprechenden Text anzugeben.

Einige Steuerelemente generieren HTML basierend auf Vorlagen, für die Sie das HTML bereitstellen. In diesen Fällen müssen Sie das Markup in den Vorlagen manuell konfigurieren, damit die generierte HTML den Richtlinien für Barrierefreiheit entspricht.

Es gibt einige Ausnahmesituationen, in denen Steuerelemente HTML generieren, die den Barrierefreiheitsstandards möglicherweise nicht entspricht. ASP.NET 4 enthält viele Erweiterungen, die die meisten der Ausnahmen beseitigen, die in früheren Versionen von ASP.NET vorhanden waren, oder die Alternativen bereitstellen. Weitere Informationen finden Sie unter Neues in ASP.NET 4 und Visual Web Developer.

In den folgenden Abschnitten werden Techniken zum Erstellen von barrierefreien Webseiten beschrieben, die alle WCAG-Richtlinien erfüllen, wenn Visual Studio und ASP.NET verwendet werden. Für einige Richtlinien gibt es keine Aspekte, die für ASP.NET spezifisch sind. Aus diesem Grund werden Abschnitte, in denen es um diese Richtlinien geht, in diesem Teil des Themas weggelassen.

Jedes Bild in einer Webseite sollte ein alt-Attribut umfassen. Das alt-Attribut wird von Hilfstechnologien wie z. B. Sprachausgaben verwendet, um den Inhalt des Bilds einem Benutzer vorzulesen, der das Bild nicht sehen kann. Im folgenden Beispiel wird ein alt-Attribut in einem HTML-img-Element dargestellt:

<img src="Products23.gif" alt="Image of Widgets" />

Um den Inhalt eines alt-Attributs zu bestimmen, müssen Sie feststellen, ob das Bild nur dekorativ ist oder ob es auch Informationen bereitstellt. Wenn es Informationen bereitstellt, müssen Sie außerdem feststellen, ob diese Informationen in einem kurzen Satz zusammengefasst werden können oder ob ein längerer Textblock erforderlich ist.

In diesem Abschnitt wird erklärt, wie Sie sicherstellen können, dass die folgenden Typen von Bildern auf ASP.NET-Websites barrierefrei sind:

  • Dekorative Bilder.

  • Bilder, die Informationen vermitteln.

  • Komplexe Bilder.

  • Bilder, die von ASP.NET-Steuerelementen generiert werden.

Dekorative Bilder

Wenn ein Bild nur als Designelement dient und keine nützlichen Informationen vermittelt, müssen Sie wie im folgenden Beispiel gezeigt ein alt-Attribut einschließen, aber auf eine leere Zeichenfolge festlegen:

<img src="PageDivider.gif" alt="" />

Wenn Sie das alt-Attribut weglassen, sagen viele Sprachausgaben den Dateinamen an, wodurch die Erfahrung für den Benutzer unnötig unübersichtlich wird.

ASP.NET-Steuerelemente, die Bilder rendern, lassen das alt-Attribut im gerenderten HTML weg, wenn Sie der AlternateText-Eigenschaft eine leere Zeichenfolge zuweisen. Stellen Sie sich z. B. vor, dass Sie das folgende Image-Steuerelement auf einer Seite hinzufügen:

<asp:Image ImageUrl="PageDivider.gif" AlternateText=""

    runat="server" />

In diesem Fall wird der folgende HTML-Code gerendert:

<img src="PageDivider.gif" />

Beachten Sie, dass das alt-Attribut nicht gerendert wurde. Dies ist das Standardverhalten von allen ASP.NET-Steuerelementattributen. Wenn Sie einem Attribut keinen Wert zuweisen, wird das Attribut nicht gerendert. In diesem Fall soll ASP.NET jedoch eine leere Zeichenfolge als alt-Attributwert rendern. Um sicherzustellen, dass die für ein Image-Steuerelement gerenderte HTML alt="" enthält, müssen Sie die GenerateEmptyAlternateText-Eigenschaft wie im folgenden Beispiel gezeigt auf true festlegen:

<asp:Image ImageUrl="PageDivider.gif" GenerateEmptyAlternateText="true"

    runat="server" />

Bilder, die Informationen vermitteln

Bei Bildern, die Informationen vermitteln, sollte das alt-Attribut eine Beschreibung des Bilds oder seiner Funktion auf der Seite enthalten. Wenn auf einer Suchschaltfläche z. B. eine Lupe abgebildet ist, wäre der entsprechende alternative Text nicht "Lupe", sondern "Suchen".

Der alternative Text sollte nicht einfach den Inhalt des Dateinamenattributs wiederholen. Der Zweck des alt-Attributs besteht darin, einer blinden Person, dieselben Informationen zu vermitteln, die das Bild dem nicht sehbehinderten Betrachter vermittelt.

Um einen alt-Attributwert zu verfassen, muss die Bedeutung eines Bilds interpretiert werden. Aus diesem Grund kann der Prozess der Erstellung eines alt-Attributs nicht automatisiert werden.

Das Image-Steuerelement , das ImageButton-Steuerelement und das ImageMap-Steuerelement enthalten eine AlternateText-Eigenschaft, die Sie verwenden können, um das alt-Attribut festzulegen, wie im folgenden Beispiel gezeigt:

<asp:Image ImageUrl="Products23.gif" AlternateText="Image of widgets"

    runat="server" />

Komplexe Bilder

Das alt-Attribut soll eine kurze Beschreibung oder eine Zusammenfassung des Bilds geben. Dies ist möglicherweise nicht ausreichend für komplexe Bilder wie Organigramme. In solchen Fällen können Sie im alt-Attribut eine Zusammenfassung und dann auf einer separaten Webseite ausführliche Informationen bereitstellen. Verknüpfen Sie das Bild mit der beschreibenden Webseite mithilfe des longdesc-Attributs, wie im folgenden Beispiel eines HTML-img-Elements gezeigt.

<img src="OrgChart.gif"

  alt="Company Organization Chart"

  longdesc="OrgChartDescription.aspx" />

Das Image-Steuerelement in ASP.NET schließt eine DescriptionUrl-Eigenschaft ein, die dem HTML-longdesc-Attribut entspricht. Im folgenden Beispiel wird die Verwendung dieser Eigenschaft veranschaulicht.

<asp:Image ImageUrl="OrgChart.gif"

    AlternateText="Company Organization Chart"

    DescriptionUrl="OrgChartDescription.aspx"

    runat="server" />

Bilder, die von ASP.NET-Steuerelementen generiert werden

Einige Steuerelemente rendern Bilder oder Links automatisch als Teil ihres Markups, z. B. das TreeView-Steuerelement, das Menu-Steuerelement und Webparts-Steuerelemente. In diesen Fällen erstellt das Steuerelement alternativen Text für jedes Bild oder jeden Link.

Das TreeView-Steuerelement gibt beispielsweise Bilder für die Schaltflächen Erweitern und Reduzieren jedes einzelnen Knotens wieder. Das TreeView-Steuerelement generiert basierend auf dem Text des Knotens einen Alternativtext für diese Bilder. Der Alternativtext für ein Bild zum Erweitern eines Knotens mit dem Namen Start wird standardmäßig als Expand Start gerendert. Sie können einen benutzerdefinierten Alternativtext angeben, indem Sie die ExpandImageToolTip-Eigenschaft und die CollapseImageToolTip-Eigenschaft für das TreeView-Steuerelement festlegen.

Entsprechend gibt das Menu-Steuerelement Alternativtext für Links wieder, die zum Erweitern und Reduzieren von Menüelementen generiert werden.

Die Schaltflächen auf der Titelleiste eines Webparts-Steuerelements geben ebenfalls einen Alternativtext wieder, der die Funktionen der einzelnen Schaltflächen beschreibt.

Video- und Audioinhalte werden in den WCAG-Richtlinien als zeitbasierte Medien bezeichnet. Mit dem Silverlight-Plug-In können Sie zeitbasierte Medien auf der Webseite bereitstellen. Überlegen Sie sich dann, wie Sie dieselben Informationen für Personen mit einer Seh- oder Hörbehinderung bereitstellen. Die Richtlinien zum Gewährleisten der Barrierefreiheit bei Verwendung des Media Players richten sich danach, ob es sich um Live- oder aufgezeichneten Inhalt handelt bzw. um Video, Audio oder beides. Die Erfolgskriterien der Ebene A sind nur auf aufgezeichneten Inhalt anwendbar (das heißt, sie gelten nicht für Live-Inhalt):

  • Stellen Sie neben einem Audioclip mit Sprache oder Dialogen Text bereit, der dieselben Informationen bietet. Fügen Sie z. B. neben einem Silverlight-Plug-In einen Link zu einer Seite mit einer Aufzeichnung ein.

  • Im Fall eines Videoclips ohne Audio können Sie einen alternativen Text bereitstellen oder einen Soundtrack hinzufügen, in dem der visuelle Inhalt beschrieben wird. Wenn in dem Video z. B. die Ausführung einer Aufgabe gezeigt wird, können Sie neben dem Plug-In einen Link zu einer Seite mit Text einfügen, der die Vorgehensweise Schritt für Schritt beschreibt.

  • Wenn ein Videoclip eine synchronisierte Audiospur umfasst, sollten Sie Beschriftungen für Personen mit Beeinträchtigungen des Gehörs bereitstellen, und Text oder einen Audioclip für Personen mit eingeschränkter Sehfähigkeit.

Diese Richtlinien gelten nur, wenn die zeitbasierten Medien Informationen bereitstellen, die im Text der Webseite nicht enthalten sind. Wenn die Medien nur Informationen wiederholen, die auch im Text enthalten sind, ist es nicht erforderlich, eine zusätzliche Alternative zu bieten.

Silverlight kann auch zum Erstellen von umfassenden Internetanwendungen (RIAs, Rich Internet Applications) verwendet werden. Informationen zur Einhaltung der Richtlinien für Barrierefreiheit in Silverlight-Anwendungen finden Sie in der Dokumentation auf der Silverlight-Website unter Übersicht über Barrierefreiheit.

Ein Hauptprinzip des barrierefreien Webseitenentwurfs besteht darin, dass HTML-Code semantisch richtig sein sollte. Dies bedeutet, dass Sie HTML-Elemente nur entsprechend ihrem beabsichtigten Zweck verwenden sollten.

Überschriftselemente sind (h1, h2, h3) z. B. dazu gedacht, die Hierarchie von Überschriften anzugeben, die den Inhalt über den jeweiligen Abschnitten beschreiben. Im Browser wird jedes Überschriftselement gemäß der standardmäßigen Darstellung angezeigt, die die Funktion des Elements auf der Seite angibt. Ein Entwickler kann für ein Überschriftselement jedoch eine bestimmte Darstellung verwenden oder ein benutzerdefiniertes Format für Überschriften bereitstellen, ohne die h-Elemente zu verwenden.

Wenn eine Webseite nur über h3-Elemente verfügt, da der Entwickler nicht die Standardschriftartgröße des h1-Elements oder h2-Elements verwenden wollte, fragt sich der Benutzer von Sprachausgabesoftware möglicherweise, wo die Abschnitte auf höherer Ebene sind. Wenn auf einer Webseite Überschriften nicht durch h-Elemente gekennzeichnet, sondern fett formatiert sind, kann dies für den Benutzer ebenfalls verwirrend sein, da die Sprachausgabe nicht unterscheiden kann, ob Text zur Betonung oder zur Darstellung als Überschrift fett formatiert wurde.

Die richtige Methode zur Strukturierung von Markup besteht darin, HTML-Elemente ihrem Zweck entsprechend zu verwenden und ihre Darstellung anhand der Cascading Stylesheet-Regeln (CSS) anzugeben. Verwenden Sie z. B. Überschriftselemente (h), um ein Dokument ordnungsgemäß zu strukturieren, und geben Sie den gewünschten Schriftgrad für jede Überschriftsebene mithilfe der CSS-Regeln an.

Dieser Abschnitt enthält die folgenden Unterabschnitte, in denen erklärt wird, wie Sie das Seitenlayout definieren können, ohne Tabellen zu verwenden. Außerdem wird beschrieben, wie Sie sicherstellen können, dass von ASP.NET-Steuerelementen erstellte Tabellen barrierefrei sind:

  • Entwerfen des Seitenlayouts ohne Tabellen.

  • Erstellen von barrierefreien HTML-Tabellen.

  • Zuordnen von Bezeichnungen zu Eingabefeldern.

Entwerfen des Seitenlayouts ohne Tabellen.

Entwickler vermengen beim Webseitenentwurf oft Struktur und Präsentation und verwenden table-Elemente, um das Seitenlayout zu erstellen oder die relative Position der visuellen Elemente auf der Seite festzulegen. Wenn das Layout mithilfe von Tabellen erstellt wird, ergibt sich oft ein komplexes System aus äußeren Tabellen und eingebetteten inneren Tabellen. Solche Strukturen führen mit großer Wahrscheinlichkeit dazu, dass Sprachausgaben Zelleninhalt in einer verwirrenden Reihenfolge ansagen, die in keinem Zusammenhang zur tatsächlichen logischen Struktur der Seite steht.

Es gibt viele Möglichkeiten, CSS mit div-Elementen und anderen HTML-Elementen zu verwenden, um die Darstellung und Position visueller Funktionen auf der Seite zu steuern. Wenn es sich jedoch nicht vermeiden lässt, Tabellen für das Layout zu verwenden, sollten Sie sicherstellen, dass der Inhalt der Tabellen auch in linearisierter Version noch Sinn ergibt (das heißt, in der Reihenfolge der Tabellenzellen gelesen: oberste Zeile zuerst, dann die nächste Zeile usw.).

Weitere Informationen zum Verwenden von Cascading Stylesheets finden Sie unter Übersicht über das Arbeiten mit CSS.

Verwenden von ASP.NET-Steuerelementen, die Tabellen für das Seitenlayout generieren

Einige ASP.NET-Steuerelemente generieren HTML-Tabellen für das Seitenlayout automatisch – abhängig von der Konfiguration. In der folgenden Tabelle sind diese Steuerelemente aufgeführt, und es wird erklärt, wie Sie bei der Konfiguration sicherstellen, dass Sie keine Tabellen generieren, die nicht den Richtlinien für Barrierefreiheit entsprechen.

HinweisHinweis

Diese Steuerelemente generieren semantisch korrekte HTML und können CSS anstelle von Tabellen zur Formatierung verwenden, wenn die Control.RenderingCompatibility-Eigenschaft auf 4.0 oder höher festgelegt ist.

Steuerelemente

Kommentare

Standardmäßig rendern diese Steuerelemente von einem table-Element, dessen Zweck darin besteht, Inlineformate auf das gesamte Steuerelement anzuwenden, umschlossene HTML. (Sie wenden Inlineformate an, indem Sie Eigenschaften wie BackColor oder CssClass festlegen.) Es ist nicht erforderlich, Inlinestile zu verwenden, wenn Sie mithilfe von Vorlagen angeben, wie HTML-Code für diese Steuerelemente gerendert wird. In dem Fall können Sie die RenderOuterTable-Eigenschaft auf false festlegen, um zu verhindern, dass die äußere Tabelle gerendert wird.

Standardmäßig rendern diese Steuerelemente Listen als table-Elemente. Je nachdem, wie Sie die RepeatLayout-Eigenschaft festlegen, können Sie jedoch auch ul-Elemente (ungeordnete Liste), ol-Elemente (geordnete Liste) oder span-Elemente rendern. Um semantisch richtiges Markup zu rendern, legen Sie die RepeatLayout-Eigenschaft auf UnorderedList oder OrderedList fest.

Für die Formatierung gelten die folgenden Einschränkungen, wenn Sie eine geordnete oder ungeordnete Liste verwenden:

  • Die Layoutrichtung muss vertikal sein.

  • Sie können nicht mehrere Spalten angeben.

  • Kopfzeilen, Fußzeilen und Trennzeichen werden nicht unterstützt.

Standardmäßig generiert dieses Steuerelement HTML, die den Richtlinien für Barrierefreiheit in folgender Hinsicht entspricht:

  • Die generierte HTML wird als ungeordnete Liste (ul-Element) strukturiert.

  • CSS wird für die visuelle Formatierung verwendet.

  • Das Menü verhält sich in Übereinstimmung mit ARIA-Standards für Tastaturzugriff.

  • Dem generierten HTML-Code werden ARIA-Rollen- und Eigenschaftsattribute hinzugefügt.

Das Steuerelement stellt jedoch die RenderingMode-Eigenschaft für die Abwärtskompatibilität bereit. Wenn Sie diese Eigenschaft auf Table festlegen, generiert das Steuerelement HTML-Code, der Tabellenelemente für die Formatierung verwendet – wie in ASP.NET 3.5 und früheren Versionen.

Erstellen von barrierefreien HTML-Tabellen

Auch wenn Sie HTML-Tabellen nicht für das Seitenlayout, sondern für die Darstellung von Tabellendaten verwenden, können Probleme für die Barrierefreiheit entstehen. Wenn der Inhalt einer Tabelle vorgelesen wird, ist es schwierig für den Zuhörer, den Überblick über die aktuelle Position in der Tabelle zu behalten und sich zu erinnern, zu welcher Überschrift eine bestimmte Zelle gehört. Es gibt jedoch Funktionen, die Tabellen übersichtlicher machen.

Die Elemente "thead" und "th"

Um sicherzustellen, dass Sprachausgabesoftware Tabellenzellen eindeutig mit ihren zugeordneten Überschriften verknüpfen kann, sollten wie im folgenden Beispiel gezeigt Tabellenüberschriften immer in einem th-Element und die Kopfzeile in einem thead-Element eingeschlossen sein:


<table>
  <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Milk</td>
        <td>$2.33</td>
    </tr>
    <tr>
        <td>Cereal</td>
        <td>$5.61</td>
    </tr>  
  </tbody>
</table>


Tabelle mit thead- und th-Element

Einige Entwickler verwenden th-Elemente nicht gerne, da ihnen das standardmäßige Erscheinungsbild dieser Elemente nicht gefällt. Es sollte jedoch nicht vom standardmäßigen Erscheinungsbild eines HTML-Elements abhängen, ob es für einen bestimmten Zweck verwendet wird. Wenn die Spaltenüberschriften wie normale Tabellenzellen aussehen sollen, können Sie eine Stilregel wie die folgende hinzufügen:

<style type="text/css">

  th {text-align:left;font-weight:normal}

</style>

Die Attribute "scope", "headers" und "axis"

Um eine barrierefreie Tabelle zu erstellen, geben Sie die Überschrift oder Überschriften an, die jeder Zelle zugeordnet sind. Es gibt mehrere Attribute, die Sie zu diesem Zweck verwenden können: scope, headers und axis.

Das scope-Attribut kann verwendet werden, um anzugeben, ob ein th-Element eine Spaltenüberschrift oder eine Zeilenüberschrift ist. Die folgende Tabelle enthält z. B. sowohl Spalten- als auch Zeilenüberschriften, die mit th-Tags markiert sind, die das scope-Attribut verwenden:


<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">First Train</th>
      <th scope="col">Last Train</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <th scope="row">Alewife</th>
      <td>5:24am</td>
      <td>12:15am</td>
  </tr>
  <tr>
      <th scope="row">Braintree</th>
      <td>5:15am</td>
      <td>12:18am</td>
  </tr>  
  </tbody>      
</table>


Tabelle mit Bereichsattributen

Diese Beispieltabelle enthält den Fahrplan für eine U-Bahn-Linie in Boston, Massachusetts. Beachten Sie, dass jede Spaltenüberschrift ein scope="col"-Attribut und jede Zeilenüberschrift ein scope="row"-Attribut enthält.

Das scope-Attribut eignet sich gut für einfache Tabellen. Bei komplexeren Tabellen ist es besser, das headers-Attribut zu verwenden. Eine geschachtelte Tabelle kann z. B. drei oder mehr Überschriften haben, die einer einzelnen Zelle zugeordnet sind. In der folgenden Beispieltabelle Red Line Schedule gehört die Zelle, in der 5:24am angegeben ist, zu den drei Überschriften: First Train, Weekday und Alewife:

Tabelle mit Headern und Achsenattributen

Das headers-Attribut ermöglicht es Ihnen, eindeutig zu bestimmen, welche Überschriften zu welcher Zelle gehören. Sie können mehrere Überschriften als eine durch Leerzeichen getrennte Liste angeben.

Das axis-Attribut ermöglicht es Ihnen, Überschriften zu kategorisieren. In der Tabelle Red Line Schedule können Sie Alewife und Braintree als location-Überschriften, Weekday und Saturday als day-Überschriften und First Train und Last Train als train-Überschriften identifizieren. Wenn eine einzelne Überschrift zu mehreren Kategorien gehört, können Sie für das axis-Attribut eine durch Trennzeichen getrennte Liste angeben.

Die folgende ASPX-Seite rendert die Tabelle Red Line Schedule mithilfe dem headers-Attribut und axis-Attribut.


<%@ Page %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head id="Head1" runat="server">
  <title>Red Line Subway Schedule</title>
  <style type="text/css">
    caption {color:white;background-color:red;font-size:xx-large}
    table {width:500px;border-collapse:collapse}
    td,th {padding:5px}
    td {border:1px solid black}
    tbody th {text-align:right}
    .headerRow th {font-size:x-large;text-align:left}    
  </style>
</head>

<body>
  <form id="form1" runat="server">
  <div>

  <table summary="This table contains the schedule of train 
                  departures for the Red Line">
    <caption>Red Line Schedule</caption>
    <thead>
      <tr>
        <th></th>
        <th id="hdrFirstTrain" axis="train">First Train</th>
        <th id="hdrLastTrain" axis="train">Last Train</th>
      </tr>
    </thead>
    <tbody>
      <tr class="headerRow">
          <th id="hdrWeekday" axis="day" colspan="3">Weekday</th>
      </tr>
      <tr>
        <th id="hdrAlewife1" axis="location">Alewife</th>
        <td headers="hdrAlwife1 hdrWeekday hdrFirstTrain">5:24am</td>
        <td headers="hdrAlwife1 hdrWeekday hdrLastTrain">12:15am</td>
      </tr>
      <tr>
        <th id="hdrBraintree1" axis="location">Braintree</th>
        <td headers="hdrBraintree1 hdrWeekday hdrFirstTrain">
          5:15am
        </td>
        <td headers="hdrBraintree1 hdrWeekday hdrLastTrain">
          12:18am
        </td>
      </tr>  
      <tr class="headerRow">
        <th id="hdrSaturday" axis="day" colspan="3">Saturday</th>
      </tr>
      <tr>
        <th id="hdrAlewife2" axis="location">Alewife</th>
        <td headers="hdrAlewife2 hdrSaturday hdrFirstTrain">8:24am</td>
        <td headers="hdrAlewife2 hdrSaturday hdrLastTrain">11:15pm</td>
      </tr>
      <tr>
        <th id="hdrBraintree2" axis="location">Braintree</th>
        <td headers="hdrBraintree2 hdrSaturday hdrFirstTrain">
          7:16am
        </td>
        <td headers="hdrBraintree2 hdrSaturday hdrLastTrain">
          10:18pm
        </td>
      </tr>  
    </tbody>      
  </table>

  </div>
  </form>
</body>
</html>


Jede Überschrift ist ein th-Element, das über einen eindeutigen id-Wert verfügt, und jede Tabellenzelle ist ein td-Element, das über ein headers-Attribut verfügt. Jedes headers-Attribut enthält eine Liste mit id-Werten der Überschrift, die zu dieser Zelle gehören. Jedes th-Element verfügt auch über ein axis-Attribut, das die Kategorie identifiziert, die der Überschrift zugeordnet ist.

HinweisHinweis

Das hier gezeigte HTML-Markup für eine komplexe Tabelle stellt eine von zwei alternativen Ansätzen dar. Anstelle von headers-Attributen können Sie Zeilen in tbody-Elementen gruppieren und mit einem scope="rowgroup"-Attribut einen Gruppenheader identifizieren. Weitere Informationen finden Sie auf der W3C-Website in den Empfehlungen des W3C hinsichtlich HTML-Tabellen, insbesondere im Abschnitt zum Rendern von Tabellen für nicht visuelle Benutzer-Agents.

Die Elemente "caption" und "summary"

Um den Titel einer HTML-Tabelle auf semantisch richtige Weise bereitzustellen, verwenden Sie ein caption-Element. Browser rendern den Inhalt des caption-Elements standardmäßig als Titel der Tabelle. Der Titel der im vorherigen Abschnitt gezeigten Tabelle Red Line Schedule ist ein caption-Element, das mit rotem Hintergrund und weißem Vordergrund mithilfe von CSS formatiert wurde.

Mit dem summary-Attribut können Sie auch eine längere Beschreibung der Tabelle angeben. Das summary-Attribut wird vom Browser nicht gerendert, sondern kann von einer Sprachausgabe angesagt werden, vergleichbar mit der Verwendung des alt-Attributs für ein Bild. Die ASPX-Seite im vorhergehenden Beispiel definiert auch ein summary-Attribut für die Tabelle Red Line Schedule.

Verwenden des Table-Steuerelements

Wenn Sie das Table-Steuerelement in ASP.NET verwenden, um eine Tabelle zu erstellen, können Sie das caption-Attribut festlegen, indem Sie die Caption-Eigenschaft festlegen. Sie können Tabellenüberschriften erstellen, indem Sie Instanzen der TableHeaderRow-Klasse erstellen und die TableSection-Eigenschaft auf den TableRowSection.TableHeader-Enumerationswert festlegen. Dies bewirkt, dass die Tabelle die thead- und tbody-Elemente rendert. Wenn Sie mithilfe des TableCell-Steuerelements eine Zelle erstellen, können Sie die AssociatedHeaderCellID-Eigenschaft auf die ID einer Tabellenkopfzelle festlegen. Dadurch gibt die Zelle ein header-Attribut wieder, das die Zelle der entsprechenden Spaltenüberschrift zuordnet.

Im folgenden Beispiel wird gezeigt, wie Sie mit dem Table-Steuerelement eine Tabelle erstellen, die mit der in Abbildung 2 gezeigten Tabelle übereinstimmt. Der HTML-Code, der für diese Tabelle gerendert wird, enthält das thead-Element, tbody-Element und header-Attribute.


<asp:Table ID="Table1" runat="server">
    <asp:TableHeaderRow TableSection="TableHeader">
        <asp:TableHeaderCell ID="productheader">Product</asp:TableHeaderCell>
        <asp:TableHeaderCell ID="priceheader">Price</asp:TableHeaderCell>
    </asp:TableHeaderRow>
    <asp:TableRow>
        <asp:TableCell AssociatedHeaderCellID="productheader">Milk</asp:TableCell>
        <asp:TableCell AssociatedHeaderCellID="priceheader">$2.33</asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell AssociatedHeaderCellID="productheader">Cereal</asp:TableCell>
        <asp:TableCell AssociatedHeaderCellID="priceheader">$5.61</asp:TableCell>
    </asp:TableRow>
</asp:Table>


Verwenden von Datensteuerelementen, die automatisch Tabellen erstellen

Zu den ASP.NET-Steuerelementen, die Daten automatisch in HTML-Tabellen anzeigen, gehören die folgenden:

Die Tabellen, die diese Steuerelemente generieren, enthalten standardmäßig Barrierefreiheitsfunktionen, z. B. th-Elemente mit scope-Attributen. Außerdem können Sie zusätzliche Barrierefreiheitsfunktionen aktivieren, indem Sie bestimmte Eigenschaften festlegen. Das GridView-Steuerelement unterstützt z. B. mehrere Eigenschaften, die für die Barrierefreiheit relevant sind:

  • Caption und CaptionAlign. Verwenden Sie diese Eigenschaften, um eine Beschriftung zu der HTML-Tabelle hinzuzufügen, die vom GridView-Steuerelement generiert wird.

  • RowHeaderColumn . Verwenden Sie diese Eigenschaft, um eine Spalte anzugeben, die als Zeilenkopf verwendet wird. Legen Sie die Eigenschaft für den Namen einer Spalte fest, die von der Datenquelle (z. B. CustomerID) zurückgegeben wurde. Diese Eigenschaft funktioniert nur mit gebundenen Feldern. Sie funktioniert nicht mit Vorlagenfeldern.

  • HeaderRow und FooterRow. Verwenden Sie diese Properties-Eigenschaft, um das thead-Element, tbody-Element und tfoot-Element zu generieren. Legen Sie die TableSection-Eigenschaft der HeaderRow-Eigenschaft auf TableHeader fest, um thead-Elemente zu generieren, und legen Sie die TableSection-Eigenschaft der FooterRow-Eigenschaft auf TableFooter fest, um tfoot-Elemente zu generieren. Wenn das thead-Element oder tfoot-Element generiert wird, werden auch tbody-Elemente generiert.

  • UseAccessibleHeader . Geben Sie mithilfe dieser Eigenschaft an, ob Spaltenüberschriften innerhalb von th-Elementen oder td-Elementen gerendert werden sollen. Diese Eigenschaft ist standardmäßig auf true festgelegt.

Das GridView-Steuerelement verfügt über keine vordefinierte Eigenschaft, die dem summary-Attribut zugeordnet ist. Sie können jedoch das summary-Attribut im Markup als Expando-Attribut deklarieren.

Im folgenden Beispiel wird ein GridView-Steuerelement an ein SqlDataSource-Steuerelement gebunden, das Zeilen der Tabelle "Customer" aus der Datenbank abruft. Wenn die Seite in einem Browser geöffnet wird, werden die Kundeninformationen in einer HTML-Tabelle angezeigt.


<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
      GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Display Customers</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" 
            AutoGenerateColumns="False"
            RowHeaderColumn="CustomerID"
            Caption="Customers"
            summary="This table shows a list of customers."
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CustomerID" 
                    HeaderText="Customer ID" 
                    InsertVisible="False" ReadOnly="True" 
                    SortExpression="CustomerID" />
                <asp:BoundField DataField="FirstName" 
                    HeaderText="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField DataField="MiddleName" 
                    HeaderText="MiddleName" 
                    SortExpression="MiddleName" />
                <asp:BoundField DataField="LastName" 
                    HeaderText="LastName" 
                    SortExpression="LastName" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:AdventureWorksLTConnectionString %>" 
            SelectCommand="SELECT CustomerID, FirstName, MiddleName, 
                LastName FROM SalesLT.Customer">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>


GridView-Tabelle mit Eingabehilfen

In der Quellansicht der gerenderten Seite werden die folgenden Funktionen im generierten HTML-Code angezeigt:

  • th -Elemente, die über scope-Attribute für die Kopfzeile verfügen, werden automatisch generiert.

  • Das thead-Element und tbody-Element werden generiert, weil die HeaderRow-Eigenschaft in der Page_Load-Methode festgelegt ist.

  • Das caption-Element wird generiert, weil die Caption-Eigenschaft im Markup festgelegt ist.

  • th -Elemente mit scope-Attributen werden für die Spalte "Customer ID" generiert, weil die RowHeaderColumn-Eigenschaft im Markup festgelegt ist.

  • Das summary-Attribut wird generiert, weil ein summary-Expando-Attribut im Markup festgelegt ist.

Verwenden von ASP.NET Dynamic Data

In ASP.NET Dynamic Data werden GridView-Steuerelemente zum Anzeigen von Daten verwendet und FormView-Steuerelemente zum Anzeigen Formularen, in denen Sie die Tabellendaten aktualisieren können.

Die von GridView-Steuerelementen angezeigten Tabellen verfügen über keine caption-Attribute, thead-Elemente oder tbody-Elemente. Sie können diese Funktionen jedoch hinzufügen, indem Sie im Ordner "CustomPages" eine Seite für jede Datentabelle erstellen und das Markup und den Seitencode für das GridView-Steuerelement anpassen.

Die von den FormView-Steuerelementen angezeigten Formulare verwenden HTML-Tabellen für das Seitenlayout. Sie entsprechen jedoch den Richtlinien für Barrierefreiheit, weil sie in linearisierter Form Sinn ergeben und Feldbezeichnungen mithilfe von label-Elementen gerendert werden, die über for-Attribute verfügen.

Weitere Informationen über ASP.NET Dynamic Data finden Sie unter Einstieg in ASP.NET Dynamic Data.

Verwenden von Datensteuerelementen, die Vorlagen erfordern

Für einige Datensteuerelemente können Sie Vorlagen verwenden, um die HTML-Elemente, in denen Daten angezeigt werden, explizit zu definieren. Die folgenden ASP.NET-Steuerelemente erfordern die Verwendung von Vorlagen:

Diese Steuerelemente rendern Markup nicht automatisch. Sie definieren die Kopfzeilen-, Text- und Fußzeilenvorlagen für das Steuerelement und geben das Markup für diese Vorlagen an. Wenn diese Steuerelemente eine HTML-Tabelle rendern sollen, müssen Sie das entsprechende Markup einschließen, um die Standards für Barrierefreiheit zu erfüllen.

Die Flexibilität der Vorlagen ermöglicht es, komplexe Tabellen zu generieren. Angenommen, Sie möchten eine Liste Ihrer Kunden und unter jedem Kunden eine Liste der Adressen dieses Kunden anzeigen. (Ein Kunde kann mehrere Adressen haben.) Anders ausgedrückt möchten Sie ein einseitiges Master-/Detailformular erstellen. In diesem Fall müssen Sie das headers-Attribut für jede Tabellenzelle einschließen.

Die ASP.NET-Seite im folgenden Beispiel erstellt ein einseitiges Master-/Detailformular. In diesem Beispiel wird veranschaulicht, wie Sie ein ListView-Steuerelement in einem zweiten ListView-Steuerelement schachteln, um eine komplexe Tabelle zu erstellen, die den Richtlinien für Barrierefreiheit entspricht.


<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  private DataTable AddressesTable = new DataTable();

  protected void Page_Load(object sender, EventArgs e)
  {
    SqlDataAdapter AddressesAdapter = new SqlDataAdapter(
        "SELECT SalesLT.CustomerAddress.CustomerID, " +
        "SalesLT.CustomerAddress.AddressID, " +
        "SalesLT.Address.AddressLine1, " +
        "SalesLT.Address.City, SalesLT.Address.StateProvince, " +
        "SalesLT.Address.PostalCode FROM SalesLT.CustomerAddress " +
        "INNER JOIN SalesLT.Address ON " +
        "SalesLT.CustomerAddress.AddressID = SalesLT.Address.AddressID",
        @"Data Source=.\SQLEXPRESS;" +
        @"AttachDbFilename=|DataDirectory|\AdventureWorksLT_Data.mdf;" +
        @"Integrated Security=True;User Instance=True");
    AddressesAdapter.Fill(AddressesTable);
  }

  protected DataView GetAddresses(object customerID)
  {
    DataView view = AddressesTable.DefaultView;
    view.RowFilter = "CustomerID=" + customerID.ToString();
    return view;
  }

  private string GetCustomerHeaderID(ListViewItem item)
  {
    return "hdrCustomer" + item.DataItemIndex.ToString();
  }

  private string GetAddressHeaderID(ListViewItem item)
  {
    return "hdrAddress" +
        ((DataRowView)item.DataItem)["AddressID"].ToString();
  }

  protected string GetColumnHeaderIDs
      (ListViewDataItem item, string columnHeader)
  {
    string customerHeaderID =
        GetCustomerHeaderID
            ((ListViewItem)item.NamingContainer.NamingContainer);

    string addressHeaderID = GetAddressHeaderID(item);

    return string.Format("{0} {1} {2}",
        customerHeaderID, addressHeaderID, columnHeader);
  }

  protected void CustomersListView_ItemDataBound
      (object sender, ListViewItemEventArgs e)
  {
    ListView addressesListView = new ListView();
    addressesListView = e.Item.FindControl("AddressesListView")
        as ListView;
    DataRowView drv = e.Item.DataItem as DataRowView;
    addressesListView.DataSource = GetAddresses(drv["CustomerID"]);
    addressesListView.DataBind();
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
  <title>Customers and Addresses</title>
  <style type="text/css">
    .customerRow { background-color: yellow; }
    th { text-align: left; }
  </style>
</head>

<body>
  <form id="form1" runat="server">
  <div>
    <asp:SqlDataSource ID="CustomersSqlDataSource" runat="server" 
    ConnectionString="<%$ ConnectionStrings:AdventureWorksLTConnectionString %>"
    SelectCommand="SELECT CustomerID, 
      FirstName, MiddleName, LastName FROM SalesLT.Customer" />
    <asp:ListView ID="CustomersListView" runat="server" 
      DataKeyNames="CustomerID" DataSourceID="CustomersSqlDataSource"
      OnItemDataBound="CustomersListView_ItemDataBound">
      <LayoutTemplate>
        <table summary="A list of customers with one or more addresses for each customer.">
          <caption>Customers and Addresses</caption>
          <thead>
            <tr>
              <th id="hdrID">ID</th>
              <th id="hdrStreet">Street</th>
              <th id="hdrCity">City</th>
              <th id="hdrState">State</th>
            </tr>
          </thead>
          <tbody>
            <tr id="itemPlaceholder" runat="server"></tr>
          </tbody>
        </table>
      </LayoutTemplate>
      <ItemTemplate>
        <tr class="customerRow">
          <th colspan="4" id='<%# GetCustomerHeaderID(Container) %>'>
            <%# Eval("FirstName") %>
            <%# Eval("MiddleName") %>
            <%# Eval("LastName") %>
          </th>
        </tr>
        <asp:ListView ID="AddressesListView" runat="server">
          <LayoutTemplate>
            <tr id="itemPlaceHolder" runat="server"></tr>
          </LayoutTemplate>
          <ItemTemplate>
            <tr>
              <th id='<%# GetAddressHeaderID(Container) %>'>
                <%# Eval("AddressID") %>
              </th>
              <td headers='<%# GetColumnHeaderIDs(Container, "hdrStreet") %>'>
                <%# Eval("AddressLine1") %>
              </td>
              <td headers='<%# GetColumnHeaderIDs(Container, "hdrCity") %>'>
                <%# Eval("City") %>
              </td>
              <td headers='<%# GetColumnHeaderIDs(Container, "hdrState") %>'>
                <%# Eval("StateProvince") %>
              </td>
            </tr>
          </ItemTemplate>
        </asp:ListView>
      </ItemTemplate>
    </asp:ListView>
  </div>
  </form>
</body>
</html>


Komplexe Tabelle mit geschachtelten ListView-Steuerelementen

In diesem Beispiel listet das äußere ListView-Steuerelement die Kundennamen auf und das innere ListView-Steuerelement die entsprechenden Adressen. Die GetCustomerHeaderID- und GetAddressHeaderID-Funktionen generieren id-Werte für die Kundennamen und Adressen. Die GetColumnHeaderIDs-Methode generiert headers-Attributwerte für Tabellenzellen.

Die im vorherigen Beispiel gezeigte ASP.NET-Seite generiert eine HTML-Tabelle, die wie folgt aussieht:

<table>
  <thead>
    <tr>
      <th id="hdrID">ID</th>
      <th id="hdrStreet">Street</th>
      <th id="hdrCity">City</th>
      <th id="hdrState">State</th>
    </tr>
  </thead>
  <tbody>
    <tr class="customerRow">
      <th colspan="4" id='hdrCustomer0'>Orlando N. Gee</th>
    </tr>
    <tr>
      <th id='hdrAddress832'>832</th>
      <td headers='hdrCustomer0 hdrAddress832 hdrStreet'>
         2251 Elliot Avenue
      </td>
      <td headers='hdrCustomer0 hdrAddress832 hdrCity'>
         Seattle
      </td>
      <td headers='hdrCustomer0 hdrAddress832 hdrState'>
         Washington
      </td>
    </tr>
    <tr class="customerRow">
      <th colspan="4" id='hdrCustomer1'>Keith Harris</th>
    </tr>
    <tr>
      <th id='hdrAddress833'>833</th>
      <td headers='hdrCustomer1 hdrAddress833 hdrStreet'>
         3207 S Grady Way
      </td>
      <td headers='hdrCustomer1 hdrAddress833 hdrCity'>
         Renton
      </td>
      <td headers='hdrCustomer1 hdrAddress833 hdrState'>
         Washington
      </td>
    </tr>
    <tr>
      <th id='hdrAddress297'>297</th>
      <td headers='hdrCustomer1 hdrAddress297 hdrStreet'>
         7943 Walnut Ave
      </td>
      <td headers='hdrCustomer1 hdrAddress297 hdrCity'>
         Renton
      </td>
      <td headers='hdrCustomer1 hdrAddress297 hdrState'>
         Washington
      </td>
    </tr>
    [remaining rows of the table]
  </tbody>
<table>

Beachten Sie, dass jedes td-Tag ein entsprechendes headers-Attribut enthält.

Zuordnen von Bezeichnungen zu Eingabefeldern

Wenn Sie auf ein Webseitenformular mithilfe von Sprachausgabesoftware zugreifen, ist es möglicherweise schwierig, die Bezeichnungen den entsprechenden Formularfeldern zuzuordnen. Angenommen, eine Webseite enthält das folgende Formular, das Eingabefelder für den Vor- und Nachnamen einer Person anzeigt:

First Name, Last Name: 
<input name="txtFirstName" />
<input name="txtLastName" /></td>

Der Text und die Elemente werden alle in derselben Zeile angezeigt, und für eine Person, die den Bildschirm sehen kann, wäre es offensichtlich, welches Eingabefeld zu welcher Feldbezeichnung gehört. Da aber der Text "Last Name" neben dem txtFirstName-Textfeld steht, kann es für den Benutzer einer Sprachausgabesoftware schwierig sein, jede Bezeichnung dem richtigen Formularfeld zuzuordnen.

In HTML 4.0 können Sie dieses Problem lösen, indem Sie das label-Element verwenden, um die Bezeichnung eines Formularfelds dem Formularfeld explizit zuzuordnen. Im folgenden Beispiel wird die korrekte Schreibweise für das vorherige Formular mit einem label-Element gezeigt:

<label for="txtFirstName">First Name</label>, 
<label for="txtLastName">Last Name</label>: 
<input name="txtFirstName" id="txtFirstName" />
<input name="txtLastName" id="txtLastName" />

Beachten Sie, dass die Eingabefelder ein id-Attribut einschließen. Der Wert des for-Attributs muss der id-Attributwert eines Eingabefelds sein, nicht der name-Attributwert.

Verwenden von ASP.NET-Label-Steuerelementen

Das Label-Steuerelement in ASP.NET generiert gewöhnlich ein span-Element. Wenn Sie jedoch die AssociatedControlID-Eigenschaft des Steuerelements festlegen, rendert es ein label-Element. Im folgenden Beispiel wird gezeigt, wie Sie mit dem Label-Steuerelement und TextBox-Steuerelement in ASP.NET ein barrierefreies Formular erstellen können.

<asp:Label AssociatedControlID="txtFirstName" 
  runat="server">First Name</asp:Label>, 
<asp:Label AssociatedControlID="txtLastName" 
  runat="server">Last Name</asp:Label>:
<asp:TextBox ID="txtFirstName" runat="server" />
<asp:TextBox ID="txtLastName" runat="server" />

Wenn Sie eine Bezeichnung für ein ASP.NET-Steuerelement bereitstellen, sollten Sie das ASP.NET-Label-Steuerelement statt des HTML-label-Elements verwenden. Das liegt daran, weil ASP.NET standardmäßig einen HTML-id-Attributwert rendert, der sich von der ID unterscheidet, die Sie zuweisen, wenn Sie ein Eingabesteuerelement, z. B. ein TextBox-Steuerelement, deklarieren. Wenn Sie daher ein label-Element verwenden und die deklarierte ID des TextBox-Steuerelements in das for-Attribut des label-Elements gesetzt haben, stimmen das gerenderte id-Attribut und das entsprechende for-Attribute möglicherweise nicht überein. Wenn Sie das Label-Steuerelement in ASP.NET verwenden, stellt ASP.NET automatisch sicher, dass das gerenderte id-Attribut und das entsprechende for-Attribut übereinstimmen.

HinweisHinweis

Eine andere Möglichkeit besteht darin, die ClientIDMode-Eigenschaft des TextBox-Steuerelements auf Static festzulegen. Das bewirkt, dass das in HTML gerenderte id-Attribut mit der deklarierten ID übereinstimmt. Weitere Informationen finden Sie unter Identifikation von ASP.NET-Webserversteuerelementen.

Verwenden des CheckBox-Steuerelements und RadioButton-Steuerelements in ASP.NET

Die folgenden ASP.NET-Steuerelemente rendern label-Elemente automatisch:

Wenn Sie eines dieser Steuerelemente auf einer Seite hinzufügen, verwenden Sie die Text-Eigenschaft, anstatt Text zwischen dem Start- und Endtags im Markup einzuschließen. Sie sollten z. B. Folgendes unterlassen:

<asp:CheckBox runat="Server">Include Gift Wrap</asp:CheckBox>

Erstellen Sie stattdessen Markup wie im folgenden Beispiel:

<asp:CheckBox text="Include Gift Wrap" runat="Server" />

Ein label-Element mit einem for-Attribut wird nur dann für eines dieser Steuerelemente generiert, wenn Sie seine Text-Eigenschaft explizit festlegen.

ASP.NET-Steuerelemente machen mausbasierte Funktionen automatisch über die Tastatur verfügbar. In diesem Abschnitt wird beschrieben, wie Sie die Benutzerfreundlichkeit für Personen, die die Tastatur wie folgt verwenden, verbessern können:

  • Bereitstellen von Zugriffstasten

  • Angeben der logischen Aktivierreihenfolge

Bereitstellen von Zugriffstasten

Eine Möglichkeit, um die Benutzerfreundlichkeit einer Website für Personen zu verbessern, die keine Maus verwenden können, besteht darin, accesskey-Attribute für HTML-Elemente einzuschließen, die den Fokus erhalten können, z. B. input-Elemente oder Links. Wenn die Implementierung der Zugriffstasten (Tastenkombinationen) jedoch nicht sorgfältig geplant wird, können bei der Verwendung die folgenden Probleme auftreten:

  • Nicht alle Browser unterstützen Zugriffstasten.

  • In Browsern, die Zugriffstasten unterstützen, sind die zugewiesenen Zugriffstasten nicht immer leicht erkennbar. Wenn Sie nicht sicherstellen, dass die Zugriffstasten identifzierbar sind, finden einige Benutzer möglicherweise nie heraus, dass sie verfügbar sind.

  • Eine Zugriffstaste, die von einer Webseite definiert wird, kann u. U. eine maskieren, die für einen Browser definiert ist. Ein Benutzer, der gewöhnt ist, die Zugriffstaste des Browsers zu verwenden, findet es möglicherweise schwierig, sich daran zu gewöhnen, wenn die Taste einem Formularfeld oder Link zugeordnet wird.

  • In der Regel wird für Zugriffstasten ein Buchstabe aus der Bezeichnung des mit ihnen verknüpften Elements verwendet, normalerweise der erste Buchstabe. Wenn Sie jedoch Webseiten entwerfen, die in mehreren Sprachen gerendert werden, sind diese Buchstaben möglicherweise in jeder Sprache anders. Sie können dieses Problem minimieren, indem Sie nur Nummerntasten als Zugriffstasten verwenden, aber dies schränkt die Anzahl der Zugriffstasten ein, die zugewiesen werden können.

Es gibt so viele Einschränkungen für Zugriffstasten, dass einige Verfechter der Barrierefreiheit der Meinung sind, dass sie im Allgemeinen mehr Probleme verursachen als sie lösen. Suchen Sie auf der WebAIM-Website nach "access keys" (Zugriffstasten), um weitere Informationen zu erhalten.

Wenn Sie Zugriffstasten definieren, können Sie das accesskey-Attribut für ASP.NET-Steuerelemente mithilfe der AccessKey-Eigenschaft festlegen. Wenn Sie ein Label-Steuerelement einem Eingabesteuerelement, wie z. B. einem TextBox-Steuerelement, zuordnen, legen Sie die AccessKey-Eigenschaft für das Label-Steuerelement fest. Weitere Informationen finden Sie unter Gewusst wie: Verwenden von Label-Webserversteuerelementen als Beschriftungen.

Im folgenden Beispiel wird die Verwendung der accesskey-Attribute veranschaulicht:


<asp:Label ID="Label1" AssociatedControlID="txtFirstName" 
    AccessKey="f" runat="server">
    <u>F</u>irst Name
</asp:Label>
<asp:TextBox ID="txtFirstName" runat="server" />
<br />
<asp:Label ID="Label2" AssociatedControlID="txtLastName" 
    AccessKey="l" runat="server">
    <u>L</u>ast Name
</asp:Label>
<asp:TextBox ID="txtLastName" runat="server" />


Eingabeformular zur Veranschaulichung der Verwendung von Tastenkombinationen

Wenn dieses Markup in Internet Explorer gerendert wird, ist der erste Buchstabe der Bezeichnungen First Name und Last Name unterstrichen. Die unterstrichenen Buchstaben geben dem Benutzer der Website einen visuellen Hinweis zu den Zugriffstasten. Dies ist die Standardmethode zur Kennzeichnung von Zugriffstasten in Microsoft Windows-Anwendungen. Wenn Sie diese Seite in Internet Explorer ausführen, können Sie das Menü Datei des Browsers nicht mehr mit der Zugriffstaste "F" öffnen, da die Zugriffstaste "F" der Seite Vorrang hat.

Angeben der logischen Aktivierreihenfolge

Eine andere Möglichkeit, mit der Tastatur den Fokus zu einem Eingabeelement oder Link zu verschieben, besteht in der Verwendung der TAB-TASTE. Beim Entwerfen der Eingabeformulare sollte darauf geachtet werden, dass die standardmäßige Aktivierreihenfolge einen logischen Pfad durch die Eingabefelder und Links bereitstellt.

Für einige Seitenentwürfe ist die standardmäßige Aktivierreihenfolge nicht gut geeignet. Angenommen, Sie haben eine Seite mit Formularfeldern in drei Spalten. Die logische Reihenfolge wäre z. B., mit der TAB-Taste von einem Feld zum nächsten in der Spalte zu gehen und am Ende einer Spalte zur nächsten Spalte zu wechseln. Aber in der Standardeinstellung des Browsers könnten die Formularfelder horizontal von einer Zeile zur nächsten aktiviert werden. In dem Fall wäre es schwierig für einen Benutzer, der eine Tastatur verwendet, die Felder in der erwarteten Reihenfolge auszufüllen.

In solchen Situationen ist es am besten, die Seite umzugestalten, damit die Standardaktivierreihenfolge mit der logischen Aktivierreihenfolge übereinstimmt. Wenn sich diese Lösung jedoch nicht eignet, kann die Aktivierreihenfolge vom HTML-tabindex-Attribut gesteuert werden. Dieses Attribut kann zu den Elementen für die Benutzereingabe und zu Links hinzugefügt werden. Wenn die Aktivierreihenfolge auf diese Weise angegeben wird, ist das für Benutzer hilfreich, die sehen können und die Tastatur zur Navigation in Formularen verwenden. Der Nachteil ist jedoch, dass der Zugriff für Benutzer erschwert wird, die Sprachausgabesoftware verwenden. Für die Benutzer von Sprachausgabesoftware kann es verwirrend sein, wenn die Aktivierreihenfolge geändert wird, weil die Leserichtung nicht mit der Aktivierreihenfolge übereinstimmt.

In ASP.NET-Steuerelementen können Sie die TabIndex-Eigenschaft verwenden, um das HTML-tabindex-Attribut der generierten HTML-Elemente festzulegen.

Im folgenden Beispiel werden tabindex-Attribute zu dem accesskey-Beispiel hinzugefügt, das weiter oben in diesem Thema gezeigt wurde. Diese Attribute geben an, dass die beiden angezeigten Eingabefelder in der Aktivierreihenfolge auf der Seite das erste und zweite Element sein sollten:

Die ARIA-Standards lassen das tabindex-Attribut für jedes HTML-Element zu, da jedes Element als RIA-Widget definiert werden kann (Informationen zu ARIA finden Sie weiter oben in diesem Thema unter Barrierefreiheit für umfassende Internetanwendungen (Accessibility for Rich Internet Applications, ARIA)). Außerdem geben die ARIA-Standards an, dass Sie tabindex auf den Wert "-1" setzen können, um zu verhindern, dass der Browser einen Tabstopp für ein Element festlegt, für das normalerweise ein Tabstopp festgelegt wird. Diese ARIA-Funktionen werden jedoch nicht von allen Browsern unterstützt, und bei Markup mit diesen Funktionen kann die W3C-Markupvalidierung fehlschlagen.

HinweisHinweis

Sie können den Anfangsfokus beim Laden einer Seite entweder mithilfe von Methoden wie der Page.SetFocus-Methode oder durch Festlegen der DefaultFocus-Eigenschaft für ein Formular festlegen.

Die Navigation in einer Website stellt für die Benutzer von Sprachausgabesoftware eine besondere Herausforderung dar. In diesem Abschnitt werden die folgenden Aufgaben erläutert:

  • Bereitstellen einer Methode zum Überspringen großer Blöcke von Links

  • Bereitstellen von aussagekräftigem Linktext

  • Unterteilen von langen Formularen in Abschnitte

Bereitstellen einer Methode zum Überspringen großer Blöcke von Links

Unabhängig davon, wie lang ein Menü ist, kann ein Benutzer, der eine Webseite betrachtet, das Menü überspringen und den Inhalt einer Seite schnell anzeigen. Wenn ein Benutzer, der Sprachausgabesoftware verwendet, jedoch erst alle Menüoptionen anhören muss, verliert er dadurch viel Zeit.

Um dieses Problem zu lösen, stellen ASP.NET-Steuerelemente automatisch Links zum Überspringen der Navigationsleiste bereit. Ein Link zum Überspringen der Navigationsleiste ist auf der Seite nicht sichtbar. Er kann jedoch von einer Sprachausgabe angesagt werden, damit der Benutzer die Option hat, einen ganzen Block von Links zu überspringen. Die folgenden ASP.NET-Steuerelemente generieren Links zum Überspringen der Navigationsleiste automatisch:

Im folgenden Beispiel wird eine ASP.NET-Webseite mit einem Menu-Steuerelement gezeigt, das verwendet wird, um eine Liste von Links zu anderen Seiten auf der Website anzuzeigen.


<%@ Page %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
  <title>Skip Navigation</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>

  <asp:Menu 
    id="Menu1"
    Runat="server">
    <Items>
      <asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
      <asp:MenuItem Text="Products" NavigateUrl="Products.aspx" />
      <asp:MenuItem Text="Services" NavigateUrl="Services.aspx" />
      <asp:MenuItem Text="About" NavigateUrl="About.aspx" />
    </Items>
  </asp:Menu>

  <hr />

  Here is the main content of the page...

  </div>
  </form>
</body>
</html>


Einfaches Menü zum Anzeigen von "Navigationslinks überspringen"

Das Seitensteuerelement rendert den folgenden HTML-Code, der einen Link an der obersten Position des Menüs einschließt:

<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links"

  src="/WebResource.axd?d=ChXz41GuDxNm-7TcWyCl_w2&amp;t=632495684475122400"

  width="0" height="0" style="border-width:0px;" />

Der Link zum Überspringen der Navigationsleiste wird auf der Seite nicht angezeigt. Das Bild im Link hat die Breite 0 (null) und die Höhe 0 (null). Wenn Sie jedoch mit einer Sprachausgabesoftware auf diese Seite zugreifen, wird der dem Bild zugeordnete, alternative Text vorgelesen. Eine Person, die blind ist, kann alle Navigationslinks überspringen und direkt zum Hauptinhaltsbereich der Website wechseln.

Jedes Steuerelement, das Links zum Überspringen der Navigationsleiste generiert, verfügt über eine SkipLinkText-Eigenschaft, die den Text des Links zum Überspringen der Navigationsleiste bestimmt. In der Standardeinstellung ist diese Eigenschaft auf "Navigationslinks überspringen " festgelegt. Wenn Sie diese Eigenschaft auf eine leere Zeichenfolge festlegen, rendert das Steuerelement keinen Link zum Überspringen der Navigationsleiste.

Suchen Sie auf der WebAIM-Website nach "skip-navigation links" (Navigationslinks überspringen), um weitere Informationen zu erhalten.

Bereitstellen von aussagekräftigem Linktext

Die vollständige und korrekte Angabe von Text für Links stellt eine wichtige Navigationshilfe für Benutzer einer Webseite und eine ebenso wichtige Methode zum Optimieren von Suchmaschinen dar. Diese Vorgehensweise ist jedoch auch für Benutzer von Sprachausgabesoftware wichtig. Eine Sprachausgabesoftware kann die Navigation durch eine Seite vereinfachen, indem alle Links in der richtigen Reihenfolge angesagt werden. Wenn Links ohne den sie umgebenden Text nicht aussagekräftig sind – z. B. Links wie Hier klicken oder Weitere Informationen –, kann eine Person, der alle Links auf einer Seite vorgelesen werden, mit diesen Links nicht anfangen.

Die beiden Absätze in der folgenden Abbildung erfüllen z. B. für eine Person, die den Bildschirm sehen kann, den gleichen Zweck. Der Absatz auf der rechten Seite ist jedoch für den Benutzer einer Sprachausgabe nützlicher.

Beispiel für Alternative zu "Weitere Informationen"-Links

Das ASP.NET-Markup, das diese Seiten generiert, wird im folgenden Beispiel gezeigt:


<%@ Page %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Meaningful Link Text</title>
    <style type="text/css">
        #leftColumn
        {
            float: left;
            width: 45%;
            border: 1px solid black;
            padding: 10px;
        }

        #rightColumn
        {
            float: right;
            width: 45%;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="leftColumn">
        <strong>Providing Skip-Navigation Links</strong><br />
        With a simple modification to a navigation bar, 
        you can dramatically improve the
        accessibility of your Web pages.
        <asp:HyperLink ID="HyperLink1" runat="server" 
            NavigateUrl="~/Default.aspx">
            Read more.
        </asp:HyperLink>
        <br />
        <br />
        <strong>Providing Meaningful Link Text</strong><br />
        Providing complete and accurate text for hyperlinks 
        is an important navigational
        aid for all users of a Web page and is an important 
        search engine optimization technique.
        However, it is also important for users of screen readers.
        <asp:HyperLink ID="HyperLink3" runat="server" 
            NavigateUrl="~/Default.aspx">
            Read more.
        </asp:HyperLink>
    </div>
    <div id="rightColumn">
        <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="~/Default.aspx">
            <strong>Providing Skip-Navigation Links</strong>
        </asp:HyperLink><br />
        With a simple modification to a navigation bar, 
        you can dramatically improve the
        accessibility of your Web pages.
        <br />
        <br />
        <asp:HyperLink ID="HyperLink4" runat="server" 
            NavigateUrl="~/Default.aspx">
            <strong>Providing Meaningful Link Text</strong>
        </asp:HyperLink><br />
        Providing complete and accurate text for hyperlinks 
        is an important navigational
        aid for all users of a Web page and is an important 
        search engine optimization technique.
        However, it is also important for users of screen readers.
    </div>
    </form>
</body>
</html>


Unterteilen von langen Formularen in Abschnitte

Wenn eine Seite ein langes Formular enthält, kann es besonders für Benutzer, die Sprachausgabesoftware verwenden, hilfreich sein, das Formular in Abschnitte zu unterteilen. Mit dem fieldset-Element können Sie ein einzelnes Formular in Abschnitte unterteilen, wie im folgenden Beispiel gezeigt:


<form id="form1" runat="server">
<div>
    <div>
        <fieldset>
            <legend>Contact Information</legend>
            <br />... form fields ...<br /><br />
        </fieldset>
        <fieldset>
            <legend>Payment Information</legend>
            <br />... form fields ...<br /><br />
        </fieldset>
    </div>
</form>


Mit fieldset-Element in Abschnitte unterteiltes Formular

Dieses Formular wird mithilfe von fieldset-Elementen in zwei Unterformulare unterteilt. Das legend-Element wird verwendet, um den Zweck der Unterformulare zu bezeichnen. Die meisten Browser zeigen einen Rahmen an, um diese Bereiche visuell zu trennen. Der Zweck des fieldset-Elements liegt jedoch darin, Unterformulare zu erstellen, und nicht darin, einen Rahmen bereitzustellen. Wenn Ihnen die Standarddarstellung des fieldset-Elements nicht gefällt, können Sie die Darstellung über eine Stylesheetregel ändern oder das Element mit den CSS-Attributen display oder visibility ausblenden.

In ASP.NET können Sie mit dem Panel-Steuerelement Unterformulare erstellen. Wenn Sie die GroupingText-Eigenschaft des Panel-Steuerelements auf eine Zeichenfolge festlegen, gibt das Steuerelement ein div-Element wieder, das ein fieldset-Element für den Inhalt und ein legend-Element mit der Zeichenfolge enthält, die Sie in der GroupingText-Eigenschaft verwendet haben.

Sie können die menschliche Sprache einer Seite bestimmen, indem Sie das lang-Attribut für das html-Element festlegen. Wenn Sie Gestaltungsvorlagen verwenden, können Sie dieses Attribut in einer Gestaltungsvorlage für alle Inhaltsseiten für diese Gestaltungsvorlage festlegen. Im folgenden Beispiel wird ein html-Tag für eine Seite in englischer Sprache (US) gezeigt. Englisch:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">

Wenn das lang-Attribut auf einer Seite weggelassen wird, geht die Sprachausgabesoftware in der Regel davon aus, dass die Seite in der Sprache vorliegt, die der Benutzer für den Browser festgelegt hat. Daher ist es besonders wichtig, dieses Attribut festzulegen, wenn Websites über Inhalt in mehreren Sprachen verfügen (einige Seiten in einer Sprache und einige Seiten in einer anderen Sprache) oder die Websites von Personen verwendet werden, deren Muttersprache sich von der Sprache der Website unterscheidet.

Wenn Sie eine Webseite mit Visual Studio erstellen, erstellen die Vorlagen, die neue Webseiten oder Masterseiten erstellen, das html-Element ohne lang-Element. Das lang-Element muss von Ihnen angegeben werden. Wenn Sie das Element angeben, stellt IntelliSense eine Liste der verfügbaren Sprach- und Kulturcodes bereit.

Wenn das Verhalten einer Webseite nicht vorhersagbar ist, wird dadurch die Verwendung für jeden Benutzer erschwert, aber vor allem für Benutzer von Sprachausgabesoftware. Das grundlegende Prinzip besagt, dass der Benutzer bei jeder Benutzeraktion (z. B. das Verschieben des Fokus oder Klicken auf eine Option), die zu erheblichen Veränderungen einer Webseite führen, über die zu erwartenden Änderungen informiert werden muss.

Bei Fragebögen ist z. B. es möglich, dass in Reaktion auf die Beantwortung einer Frage dynamisch zusätzliche Fragen angezeigt werden. In einigen Webseiten wird das so gehandhabt, dass ein Abschnitt des Formulars dynamisch ein- oder ausgeblendet wird, wenn der Benutzer auf ein Element in der Dropdownliste klickt. Wenn dieses Verhalten auf einer ASP.NET-Webseite mithilfe der AutoPostBack-Eigenschaft implementiert wird, wird u. U. die ganze Webseite aktualisiert. In diesem Fall nimmt eine Person, die einen grafischen Browser verwendet, möglicherweise ein Bildschirmflackern wahr, wenn ein weiterer Abschnitt hinzugefügt wird. Eine Person, die eine Sprachausgabesoftware verwendet, muss sich jedoch möglicherweise das ganze Formular noch einmal anhören. In jedem Fall ist es ein Vorteil für den Benutzer, wenn die Bezeichnung oder Beschreibung der Dropdownliste deutlich angibt, was geschieht, wenn auf sie geklickt wird. Sie können solche Seitenaktualisierungen unauffälliger vornehmen und Clientskript oder AJAX verwenden, sodass der Browser nur einen Teil der Seite aktualisiert. Auf der Seite sollte jedoch trotzdem angegeben sein, welches Verhalten der Benutzer erwarten kann.

Eine typische Methode, um Benutzer auf Pflichtfelder hinzuweisen, besteht darin, neben den Pflichtfeldern ein Sternchen (*) anzuzeigen oder ihre Bezeichnungen in fett formatierter Schrift darzustellen. Wenn Sie diese Konvention verwenden, sollten Sie auf derselben Seite ihre Bedeutung erklären. Vermeiden Sie es, Pflichtfelder oder Felder, in denen ein Fehler aufgetreten ist, durch eine andere Schriftfarbe zu kennzeichnen. Einige Personen können bestimmte Farben, z. B. rot und schwarz, nicht unterscheiden.

Um Benutzern bei der Korrektur von Fehlern zu helfen, stellen Sie Text bereit, der erklärt, welche Art von Eingabe erwartet wird. Wenn Sie ASP.NET-Validierungssteuerelemente verwenden, sollten Sie immer aussagekräftige Fehlermeldungen in den Text- und ErrorMessage-Eigenschaften angeben.

SicherheitshinweisSicherheitshinweis

Stellen Sie sicher, dass Sie in den Fehlermeldungen keine Informationen bereitstellen, die böswillige Benutzer in einem Webangriff verwenden könnten. Weitere Informationen finden Sie unter Grundlegende Sicherheitshinweise für Webanwendungen.

Barrierefreie Webseiten müssen in so vielen Browsern und Browserversionen wie möglich ordnungsgemäß funktionieren. Das WCAG 2.0-Erfolgskriterium 4.1.1 gibt an, dass die Seite aus gültigem HTML-Code bestehen muss, der den folgenden Regeln entspricht:

  • Elemente verfügen über vollständige Start- und Endtags.

  • Elemente werden gemäß ihrer Spezifikation geschachtelt. Eine Struktur wie <h1><h2></h2></h1> ist z. B. akzeptabel, aber <h2></h2> darf nicht alleine ohne das übergeordnete <h1>-Element vorkommen. Es ist auch nicht akzeptabel, eine Hierarchie in falscher Reihenfolge zu erstellen, z. B. <h1><h3><h2><h2/></h3></h1>, oder falsch zugeordnete Endtags, z. B. <h1><h2></h1></h2>, anzugeben.

  • Elemente enthalten keine doppelten Attribute.

  • Element-IDs sind eindeutig.

ASP.NET-Steuerelemente generieren standardmäßig HTML-Code, der diese Regeln einhält. Sie müssen jedoch darauf achten, dass Sie keinen ungültigen HTML-Code erstellen, wenn Sie Steuerelementvorlagen verwenden, um benutzerdefinierten HTML-Code zu erstellen. Wenn Sie die Static-Einstellung der ClientIDMode-Eigenschaft verwenden, vermeiden Sie es, doppelte id-Attribute zu erstellen.

HinweisHinweis

In einigen Fällen generiert ASP.NET selbstschließende Tags anstelle von separaten Start- und Endtags (z. B. <input type="text" /> statt <input type="text"></input>). HTML-Validierungssteuerelemente, die HTML 4.01-Regeln anwenden, markieren solche Elemente ggf. als nicht ordnungsgemäß geschlossen. Selbstschließende Tags werden jedoch von allen Hauptbrowsern unterstützt, sind gemäß XHTML- und HTML 5-Spezifikation gültig und werden ordnungsgemäß von Hilfstechnologiesoftware gehandhabt.

In barrierefreien Webseiten muss sichergestellt sein, dass alle Benutzeroberflächenkomponenten auf einer Seite mit der Hilfstechnologie gut funktionieren. Das WCAG 2.0-Erfolgskriterium 4.1.2 gibt an, dass die Hilfstechnologie in der Lage sein sollte, den Typ, die Eigenschaften und den Zustand der Steuerelemente auf einer Seite zu bestimmen. Definitionsgemäß sind alle Standard-HTML-Elemente barrierefrei. Aber clientseitige Steuerelemente, die HTML-Elemente für einen anderen Zweck verwenden, erfüllen diesen Standard in der Regel nicht. Dieses Problem soll durch ARIA angesprochen werden. Wie bereits weiter oben in diesem Thema erwähnt wird, befindet sich ARIA in der Entwicklungsphase, und dieses Dokument stellt keine ausführliche Anleitung zum Implementieren von ARIA in ASP.NET-Webseiten bereit.

Visual Studio (nicht Visual Web Developer Express) enthält ein Tool für die Barrierefreiheitsprüfung. Wählen Sie zum Ausführen des Tools im Menü Extras die Option Barrierefreiheit überprüfen aus, um das folgende Dialogfeld Barrierefreiheitsvalidierung anzuzeigen:

Dialogfeld "Barrierefreiheitsvalidierung"

Für Websiteprojekte (jedoch nicht für Webanwendungsprojekte) können Sie auch angeben, dass die Barrierefreiheitsprüfung jedes Mal ausgeführt werden soll, wenn Sie die Website erstellen. Über die Kontrollkästchen auf der Registerkarte Erstellen im Dialogfeld Eigenschaftenseiten können Sie festlegen, dass die Barrierefreiheit im Rahmen des Buildprozesses überprüft wird, wie in der folgenden Abbildung gezeigt:

Dialogfeld "Eigenschaftenseiten"

Die Barrierefreiheitsprüfung stellt Optionen zum Überprüfen einer Website in Hinsicht auf die WCAG 1.0-Priorität 1-Prüfpunkte, WCAG 1.0-Priorität 2-Prüfpunkte oder Abschnitt-508-Richtlinien bereit.

Sie können die Ergebnisse der Websiteüberprüfung im Fenster Fehlerliste anzeigen (wählen Sie die Menüoptionen Ansicht, Weitere Fenster, Fehlerliste).

Die Barrierefreiheitsprüfung ermöglicht es Ihnen auch, eine Prüfliste von Barrierefreiheitsproblemen manuell zu erstellen. Wenn Sie diese Option aktivieren, wird im Fenster Fehlerliste jedes Mal eine Standardliste mit möglichen Barrierefreiheitsproblemen angezeigt, wenn Sie eine Website im Hinblick auf Barrierefreiheit überprüfen. Diese Prüfliste enthält Probleme, die im Rahmen der Barrierefreiheitsprüfung nicht automatisch überprüft werden können.

Das Tool zur Barrierefreiheitsprüfung ist nützlich, um Probleme zu finden, die Sie andernfalls möglicherweise übersehen hätten. Sie sollten sich jedoch der Einschränkungen dieser Prüfung bewusst sein. Die Abwesenheit von Fehlermeldungen bedeutet nicht, dass eine Website die Richtlinien für Barrierefreiheit genau einhält, und gemeldete Fehlermeldungen treffen möglicherweise nicht auf Ihre Website zu.

Die Barrierefreiheitsprüfung hat die folgenden Einschränkungen:

  • Viele Richtlinien für Barrierefreiheit erfordern menschliches Urteilsvermögen und können nicht automatisch überprüft werden. Ein automatisiertes Tool kann z. B. überprüfen, ob ein alt-Attribut in einem img-Tag vorhanden ist. Es kann jedoch nicht überprüfen, ob der Text im alt-Attribut für das Bild geeignet ist.

  • Die Barrierefreiheitsprüfung führt die Prüfung anhand der WCAG 1.0-Richtlinien und nicht anhand der WCAG 2.0-Richtlinien aus. WCAG 1.0 ist über 10 Jahre alt, und viele Richtlinien für Barrierefreiheit haben sich geändert. Einige Sites müssen aus Rechtsgründen ältere Richtlinien einhalten. Wenn das auf Sie nicht zutrifft, müssen Sie die neueren Richtlinien beachten und bestimmen können, welche Meldungen der Barrierefreiheitsprüfung die älteren Richtlinien betreffen.

  • Das Dienstprogramm für die Barrierefreiheitsprüfung überprüft nur HTML. ASP.NET-Markup wird nicht überprüft. Es meldet z. B. ein fehlendes alt-Attribut in einem img-Element. Es meldet jedoch keine fehlende AlternateText-Eigenschaft in einem Image-Steuerelement.

Community-Beiträge

HINZUFÜGEN
Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur MSDN-Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die MSDN-Website verlassen.

Möchten Sie an der Umfrage teilnehmen?
Anzeigen:
© 2014 Microsoft