Barrierefreie Webseiten mit ASP.NET 2.0 - Teil 6
Im folgenden Beitrag möchte ich mit ASP.NET 2.0 Controls ein einfaches Kontaktformular erstellen, das alle Kriterien der Accessibility erfüllt.
Hier ein kleiner Ausschnitt des Formulars:
<asp:Panel ID="Panel1" runat="server"
GroupingText="Hier können Sie mir eine Nachricht zukommen
Lassen"
CssClass="siteform">
<div class="clearfix">
<asp:Label AccessKey="N" ID="lblName" runat="server"
AssociatedControlID="txtName">Name</asp:Label>
<asp:TextBox ID="txtName" runat="server" />
<asp:Label AccessKey="V" ID="lblFirstname" runat="server"
AssociatedControlID="txtFirstname">Vorname</asp:Label>
<asp:TextBox ID="txtFirstname" runat="server" />
[...]
<asp:Label AccessKey="N" ID="lblMessage" runat="server"
AssociatedControlID="txtMessage">Nachricht</asp:Label>
<asp:TextBox ID="txtMessage" runat="server"
TextMode="MultiLine" />
</div>
<div class="clearfix">
<input accesskey="B" type="reset" id="btnReset"
value="Abbrechen" class="width80" />
<asp:Button AccessKey="S" ID="btnSend" runat="server"
Text="Senden" OnClick="btmSend_Click"
CssClass="width80" />
</div>
</asp:Panel>
Alle Formular-Controls werden von einem Panel mit dem Attribut GroupingText (1) umfasst. Dieses Attribut hat zwei Funktionen:
- Wenn es gesetzt ist rendert das Panel nicht wie gewohnt ein DIV Tag, sondern ein FIELDSET.
- Zum anderen wird der Wert dieses Attributes zu dem Inhalt des zugehörigen LEGEND Tags, das innerhalb des FIELDSETS gerendert wird.
Innerhalb des Panels befinden sich Labels die allesamt eine AssociatedControlID (2) übergeben bekommen. Auch dieses Attribut hat zwei Funktionen:
- Wenn es gesetzt ist rendert das Label nicht wie gewohnt ein SPAN Tag, sondern ein LABEL Tag.
- Zum anderen wird die ID des zugeordneten Controls zum Wert des „for“ Attributes des LABEL Tags
Die Eigenschaft AccessKey sorgt dafür, dass die Felder per Tastenkombination angesprungen werden können. Laut SELFHTML (3) sind das:
- IE: [Alt]+[Key];
- FF: [Alt]+[Shift]+[Key];
- Opera: [Shift]+[Esc] -> [Key];
- Safari: [Ctrl]+[Key]
Zusätzlich könnte noch das Attribut TabIndex gesetzt werden, aber da hier die Felder eh in einer Reihe liegen, ist das nicht nötig.
Die DIVs mit der CSS Klasse "clearfix" stammen aus dem YAML Framework (4) und verhindern einfach nur einen unkontrolliertes Floating der Formularbuttons. (Diese würden ohne diese DIVs, links neben dem Nachricht Feld floaten.)
Das Resultat sieht dann in etwa so aus:
<div id="ctl00_MeinContentPlaceHolder_Panel1" class="siteform">
<fieldset>
<legend>Hier können Sie mir eine Nachricht zukommen
lassen</legend>
<div class="clearfix">
<label for="txtName" id="lblName" accesskey="N">
Name</label>
<input name="txtName" type="text" id="txtName" />
<label for="txtFirstname" id="lblFirstname"
accesskey="V">Vorname</label>
<input name="txtFirstname" type="text"
id="txtFirstname" />
[...]
<label for="txtMessage" id="lblMessage"
accesskey="N">Nachricht</label>
<textarea name="txtMessage" rows="2" cols="20"
id="txtMessage">
</textarea>
</div>
<div class="clearfix">
<input accesskey="B" type="reset" id="btnReset"
value="Cancel" class="width80" />
<input type="submit" name="btnSend" value="Senden"
id="btnSend" accesskey="S" class="width80" />
</div>
</fieldset>
</div>
(Die generierten IDs und Namen habe ich etwas gekürzt, damit der Code besser lesbar ist.)
Das CSS für dieses Formular ist ebenfalls denkbar einfach (und befindet sich in der content.css des YAML Frameworks (4) ):
.siteform fieldset label
{
display:block;
width:24%;
text-align:right;
float:left;
}
.siteform fieldset input
{
width:74%;
float:right;
}
.siteform fieldset textarea
{
width:74%;
height:100px;
float:right;
}
Zuerst einmal wird das LABEL zu einem Blockelement gemacht, damit diesem eine Breite und ggf. eine Höhe gegeben werden kann. Außerdem wird es im Textfluss nach links ausgerichtet. Die INPUT Felder werden nach rechts ausgerichtet.
Für die Breiten habe ich deswegen 24% und 74% Prozent gewählt, damit eventuelle Fehler keine Auswirkungen haben. Z. B. könnte ein Wort in einem LABEL zu breit werden, so bleiben 2% Puffer um einen unerwünschten Umbruch zu vermeiden.
DemoSite ansehen
Teil 6 downloaden
Anmerkung:
Im projekt wird jetzt eine Access Datenbank verwendet, Gästebucheinträge funktionieren jetzt problemlos.
(1) http://msdn2.microsoft.com/de-de/library/system.web.ui.webcontrols.panel.groupingtext(VS.80).aspx
(2) http://msdn2.microsoft.com/de-de/library/system.web.ui.webcontrols.label.associatedcontrolid(VS.80).aspx
(3) http://de.selfhtml.org/html/formulare/tastatur.htm#kuerzel
(4) http://www.yaml.de/
