Mehr von Jürgen Gutsch

Mehr von Jürgen Gutsch

Empfehlungen von Jürgen Gutsch

Blog-Empfehlungen von Jürgen Gutsch

Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe

Jürgen Gutsch

ASP.NET und mehr...
Barrierefreie Webseiten mit ASP.NET 2.0 - Teil 3

Für die Menüs der DemoSite wollte ich die vorhandenen ASP.NET 2.0 Websteuerelemente verwenden, um diese später evtl. auch dynamisch erzeugen zu können.

Folgende drei Menüs wurden eingefügt:

  1. Eine horizontale erste Menüebene
  2. Eine vertikale zweite Menüebene
  3. Und ein horizontales Menü oben rechts, für feststehende Links

Nachdem ich die Menüs eingeaut hatte musste ich feststellen, dass das Menu Control trotz des (in Teil 1 genannten) Eintrags in der „web.config“ zwar sauberes HTML erzeugt, sich allerdings nicht an die aktuellen Standards hält. Leider hatte ich das irgendwie erwartet…

  • Wie von Stephen Walther beschrieben (1), sind die Links nur barrierefrei, wenn eine direkte URL angegeben wird, andernfalls wird per JavaScript ein Postback ausgelöst.
  • Hover Funktionen werden über ein JavaScript ausgelöst:
    onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)"
  • In einem horizontalen Menü befindet sich jeder Link in einer einzelligen Tabelle, welche sich wiederum in einer mehrspaltigen Tabelle befinden. Auf diese Art wird die horizontale Ausrichtung per HTML erzwungen. Entsprechend ist es bei vertikalen Menüs.
  • Menüs werden nicht in Listen erzeugt (was sie ja eigentlich sind), sondern als verschachtelte Tabellen.

Das resultierende HTML sieht in etwa so aus:
<div id="nav">
 </a id="navigation">
 <div id="nav_main">
  <a href="#ctl00_MeinMenu_SkipLink"><img [...] /></a>
  <table id="ctl00_MeinMenu" [...]>
   <tr>
    <td [...] id="ctl00_MeinMenun0">
     <table [...]>
      <tr>
       <td [...>
     <a [...] href="Default.aspx">Home</a>
       </td>
      </tr>
     </table>
    </td>
    </td style="width:3px;">
    <td [...] id="ctl00_MeinMenun1">
     <table [...]>
      [...]
      </table>
     </td>
        [...]
    </tr>
   </table>
  </a id="ctl00_MeinMenu_SkipLink">
 </div>
</div>

Nach dem Einbau der „CSS Friendly Control Adapters“ (2) sieht das Resultat um einiges besser aus:
<div class="AspNet-Menu-Horizontal" id="ctl00_MainMenu">
 <ul class="AspNet-Menu">
  <li class="AspNet-Menu-Leaf">
   <a href="Default.aspx" class="AspNet-Menu-Link">
     Home</a>
  </li>
  <li class="AspNet-Menu-Leaf">
   <a href="Default.aspx" class="AspNet-Menu-Link">
     Produkte</a>
  </li>
  <li class="AspNet-Menu-Leaf">
   <a href="Default.aspx" class="AspNet-Menu-Link">
     Projekte</a>
  </li>
  <li class="AspNet-Menu-Leaf">
   <a href="Default.aspx" class="AspNet-Menu-Link">
     Über uns</a>
  </li>
 </ul>
</div>

Um die „CSS Friendly Control Adapters“ einzubinden habe ich ein neues Website vom Typ „CSS Friendly Web Site“ erstellt. (Das entsprechende Solution Template muss vorher installiert sein). Anschließend habe ich alle nötigen Dateien (unter „App_Browsers“, „App_Code“, „CSS“ und „JavaScript“) in mein „DemoSite“ Projekt geholt.

Besonders zu beachten ist die Datei „CSSFriendlyAdapters.browser“, welche die Adapter auf die entsprechenden Controls lenkt, und dafür sorgt, dass der W3C Validator ebenfalls eine XHTML Seite zu sehen bekommt.
Wenn man die Browser Datei entfernt, kann man die unschöne HTML Tabellenausgabe der Menüs sehen.

Von denen im Beispiel eingebundenen CSS Dateien, habe ich nur die „Menu.css“ (wird in der „Import.css“ eingebunden) in meine Master Page eingebunden:
Die „SimpleMenu.css“ benötige ich nicht, da ich eigene CSS Dateien zu Formatierung der Menüs habe („03-nav01.css“, „04-nav02.css“ und „05-nav03.css“).
Die „IEMenu6.css“ behebt einige CSS Bugs der älteren IE Browser, die allerdings (in diesem Fall) schon von YAML behoben werden.
Ich nutze nur die „Menu.css“, die einige Standardformatierung für die Menüs beinhaltet.

Fazit:
Bis jetzt bin ich soweit zufrieden. Es ist bis jetzt mit gegebenen Mitteln (ASP.NET 2.0, YAML und den „CSS Friendly Control Adapters“) möglich, Webseiten zu erstellen die XHTML 1.0 Strict sind. Ich darf also, nach erfolgreicher Validierung beim W3C (3), die entsprechenden Icons in den Footer einfügen ;-)

DemoSite ansehen
Teil 3 downloaden

(1) http://msdn2.microsoft.com/en-us/library/aa479043.aspx
(2) http://www.asp.net/CSSAdapters/
(3) http://validator.w3.org/

Posted: Dienstag, 17. April 2007 20:26 von Jürgen Gutsch
Abgelegt unter: , , , ,

Kommentare

thomas77 sagte:

Wow! Ich freue mich schon auf den vierten Teil :-) Ich arbeite zwischen durch immer wieder ein bisschen an einer Website, bei der ich ein ähnliches Ziel verfolge. XHTML und weg von Table-Tags. Ohne dem "CSS Friendly Control Adapters" hätte ich wohl damals schon alles wieder verworfen.

Irgendwann will ich (wenn ich Zeit finde) diese Website auch feritg machen können und ich denke, ich werde von dir einige lernen können. z.B. war mir das YAML noch völlig unbekannt. Danke! :-)

# Mai 2, 2007 17:48
Anonyme Kommentare sind nicht zugelassen