Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.
Czy tworzymy stronę dla milionów użytkowników, czy dla setek musimy mieć świadomość różnych odbiorców. Mówiąc różnych w dzisiejszym artykule mam na myśli użytkowników np. z niestandardowymi urządzeniami wejściowymi, potrzebującymi większej czcionki itp. Bo trzeba mieć świadomość, że wielu użytkowników nie korzysta z tradycyjnych myszek a i nie każdy użytkownik wyświetla stronę internetową na zwykłym monitorze.
Jak kontrolki ASP.NET wspierają dostępność
Kontrolki w ASP.NET są zaprojektowane tak aby w domyśle być “dostępnymi”. Dla przykładu takie kontrolki jak Login, ChangePassword, PasswordRecovery, i CreateUserWizard używają pól tekstowych w powiązaniu z etykietami które mają pomóc użytkownikom korzystająca z jakiś czytników ekranu czy nie używających myszki.
Innym sposobem umożliwienia większej dostępności są tkz. SkipLinkText. Zazwyczaj mając duży monitor możemy sobie w wygodny sposób czytać powiedzmy jakiś artykuł. SkipLinkText pozwala przeskoczyć do danego miejsca w artykule które odpowiednio oznaczymy. Kontrolki CreateUserWizard, Menu, SiteMapPath, TreeView, czy Wizard mocno to wspierają. Warto zauważyć, że linki te nie będą dostępne dla użytkowników korzystających ze standardowych przeglądarek. Na przykład, następujący kod źródłowy HTML (który został nieco uproszczony) jest domyślnie generowany podczas dodawania Menu do strony sieci Web:
1: <a href="#Menu1_SkipLink">
2: <img alt="Skip Navigation Links" src="/WebResource.axd?d=_9Q2Lm" width="0" height="0"/></a>
3: … menu links …
4: <a id="Menu1_SkipLink"></a>
Poprawa wizualnej dostępności
Kilka przydatnych uwag:
- Zawsze opisuj obrazek we właściwości AlternateText. Jest to ważne ponieważ musimy założyć, że użytkownik może mieć wyłączone wczytywanie obrazków bądź z innego powodu nie może ich wyświetlić. Również użytkownikiem może być osoba niewidoma, wtedy syntezator mowy może odczytać “alt” z naszego obrazka. Jeśli obraz w ogóle nie jest ważny (powiedzmy stanowi obramowanie naszej strony) możemy ustawić właściwość GenerateEmpty-AlternateText na True co spowoduje zignorowanie go przez czytnik ekranu.
- Stosuj jednolite kolory tła i kontrastujące z nim kolory tekstu. Tutaj chyba nie trzeba tłumacz, że każdy z nas lubi dobrze dobraną kolorystykę, kontrast aby móc komfortowo czytać tekst.
- Stwórz elastyczny layout który skaluje się odpowiednio wraz ze wzrostem czcionki. Przeglądarki oferują nam zwiększenie rozmiaru czcionki dla użytkowników którzy tego potrzebują dlatego musimy o tym pamiętać.
- Ustaw właściwość Table.Caption do opisu w tabeli. W tej właściwości powinien znaleźć się opis danych zawartych w tabeli. Pozwoli to określić użytkownikowi czy chce je zobaczyć czy przejść dalej.
- Unikaj szczegółowego określania czcionek. Do rozmiarów czcionek używaj tagów np. (<H1> lub <H3>).
- Nie wymagaj używania skryptów klienckich. Używaj skryptów tylko do niezbędnych czynności tak aby Twoja storna była funkcjonalna również bez nich.
Zwiększenie dostępności dla form do wprowadzania danych
Wielu użytkowników najchętniej posługiwało by się samo klawiaturą. Myszkę używają w krytycznych momentach. Warto i o nich pomyśleć tworząc naszą witrynę. W Windows Forms popularne są skróty klawiaturowe, tutaj może być ciężej ;)
- Umieść właściwość DefaultFocus w formularzu aby umieść kursor w miejscu logicznym od którego zaczyna się wprowadzanie danych.
- Definiuj “tab order” w logiczny sposób aby użytkownik mógł przechodzić w logiczny sposób po formularzu wypełniając dane bez użycia myszki.
- Określ przez właściwość DefaultButton domyślne przyciski dla formularza. Jest on dostępny po wciśnięciu klawisza Enter. Jest to wygodne i przyśpiesza znacząco czas.
- Określ właściwości AccessKey. Po wciśnięciu alt + określonych znaków będzie można uzyskać dostęp do kontrolki.
- Określ istotne komunikaty o błędach w tekście i właściwości ErrorMessage z walidatora
kontroli.
- Używaj etykiet do definiowania AccessKey dla pól tekstowych. TextBox nie ma właściwości która by go opisywała i byłaby łatwo dostępna dla czytników ekranu. Dlatego należy je powiązać z etykietami co realizuje poniższy kod:
1: <asp:Label
2: AccessKey="N"
3: AssociatedControlID="TextBox1"
4: ID="Label1"
5: runat="server"
6: Text="<u>N</u>ame:">
7: </asp:Label>
8:
9: <asp:TextBox ID="TextBox1" runat="server" />
To tyle na dzisiaj. Miłego i słonecznego weekendu życzę ;)
