Dostępne Metody ukrywania zawartości HTML

Tło

Choć cokolwiek rzadko zdarzają się okazje, kiedy dostępność stawia potrzeby użytkowników urzadzeń czytających w konflikcie z potrzebami urzytkowników przeglądarek graficznych.Ten rodzaj konfliktu zdarza się kiedy projektanci stron umieszczają elementy wewnątrz szablonu tabeli, kiedy chcą użyć obrazków jako nagłówków zamiast tekstu, i inne podobne sytuacje. Dodanie dodatkowego tekstu pomaga użytkownikom urzadzeń czytających, ale może skomplikować projekt graficzny strony, nawet zmniejszając zrozumienie. Jedno rozwiązanie to ukryć za pomocą CSS tekst dla użytkowników przeglądarek graficznych w taki sposób, żeby był nadal dostępny dla urzadzeń czytających. Szczegóły tej techniki są omawiane razem z technicznymi powodami poniżej.

Though somewhat rare, there are occasions when the accessibility needs of screen reader users appear to be at odds with the needs of visual users. This kind of conflict occurs when Web developers put form elements inside of a data table matrix, when they want to use images as headings instead of text, and in other situations. Adding extra text helps screen reader users, but can complicate the visual layout, thus reducing understandability. One solution is to use CSS to hide the text from sighted users in a way that is still accessible to screen readers. The details of this technique are discussed, along with the technical reasoning behind it.

Wprowadzenie

Najwięcej technik tworzenia dostępnej zawartości stron internetowych dla urządzeń czytających polega na ukryciu zawartości jej dla użytkowników przeglądarek graficznych. Alternatywny (alt) tekst, tagi nagłówkowe tabel, atrybut summary, i tagi formularza <label> to przykłady technik, których zastosowanie daje horrendalną różnicę dla użytkowników urządzeń czytających, ale za to małe lub prawie wcale znaczenie na monitorze.

Most of the techniques for making Web content accessible to screen readers are invisible to visual users. Alternative (alt) text, table header tags, table summaries, and form <label> tags are examples of techniques that make a big difference for screen reader users, but which have little or no impact on the visual appearance of the Web content.

Projektanci stron internetowych porównują sytuację, w której dodanie znacznika dostępności ma znaczenie w wyglądzie. W niektórych przypadkach ten widoczny wpływ może obniżyć funkcjonalność zawartości dla sprawnych użytkowników. Z druiej strony, projektanci po prostu chcą zapewnić bardziej przyjemny layout lub wygląd, który będzie kompromisem przez włączenie całego tekstu w poprawnej semantycznie strukturze.

Every once in a while, though, Web designers confront situations in which the addition of accessible markup does have an impact on the visual layout. In some cases, this visual impact can decrease the usability of the content for visual users. In other cases, designers simply want to provide a more pleasing layout or appearance that would be compromised by including all of the text in a semantically correct format.

Ukrywanie tekstu dla sprawnych użytkowników

Na szczęście są sposoby by rozwiązać ten konflikt pomiędzy potrzebami sprawnych użytkowników i tych użytkowników urządzeń czytających. Ten artykuł rozważa kilka sytuacji, w których ukrywanie tekstu dla użytkowników przeglądarek graficznych może przynieść korzyści, i proponuje rozwiązanie, które pozwala ukryć HTML bez kompromisu dostępności lub semantycznej integralności dokumentu, a które działa niezależnie od platformy i przeglądarek.

Fortunately, there are ways of resolving the conflicts between the needs and desires of visual users and those of screen reader users. This paper examines a few circumstances in which hiding text from visual users can be beneficial, and proposes a solution which allows HTML to be hidden without compromising the accessibility or semantic integrity of the document, and which works across browsers and platforms.

Esencja technik proponowanych w tym artykule to ukrywanie zawartości nad widoczny obszar przeglądarki, a także zmniejszenie zawartości do wysokości i szerokości 1 piksela. Kombinacja przesuwania zawartości i zmniejszenia jej jest tym, co umożliwiają te techniki, by działać na jak największej liczbie platform i przeglądarek.

The essence of the technique proposed in this document is to hide the content above the viewable area of the browser and to also shrink the content to a height and width of 1 pixel. The combination of moving the content and shrinking it is what allows this technique to work across a wide range of browsers and platforms.

Przykład 1

[CSS]

.hidden {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

[HTML]

<div class="hidden">This text is hidden.</div>

Użytkownicy przeglądarek graficznych nie zobaczą ukrytego tekstu w ogóle. Będzie się znajdował poza widocznym obszarem, przesunięty w górę okna przeglądarki. Użytkownicy urządzeń czytających będą mieli dostęp do tekstu, jak tylko nie będzie ukryty całkiem. Urządzenia czytające czytają zawartość normalnie, kompletnie ignorując style używane w tej technice.

Sighted users will not see the hidden content at all. It will be out of their viewing range, hidden above the top of the browser window. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.

Niektóre przeglądarki dobrze reagują na pierwszą połowę tej techniki, która umieszcza element ponad okno przeglądarki. Inne przeglądarki nie radza sobie z tą metodą, więc druga technika, zmniejszanie elementu musi być także użyta. Obie metody są konieczne dla zapewnienia wsparcia dla różnych implementacji przeglądarek. Dystans 500 pikseli ponad widoczny obszar przeglądarki jest losowo wybraną liczbą. Jakakolwiek odległość wystarcza na tyle by umieścić zawartość poza oknem widocznego obszaru przeglądarki. Kierunek umiejscowienia zawartości ponad obszar widoczny jest pożądany albo na lewo albo na prawo obszaru, ponieważ te dwa inne kierunki mogą wyświetlać się nieregularnie w niektórych przeglądarkach. Wysokość i szerokość elementu jest ustawiana na 1 piksel, a nie 0 pikseli, ponieważ urządzenia czytające tekst nie przeczytają zawartości która nie ma ani wysokości ani szerokości. Ustawienie overflow na "hidden" spowoduje błędy w innych przeglądarkach. Sumując, te metody pracują na wielu przeglądarkach, platformach i urzadzeniach czytających.

Some browsers respond well to the first half of this technique, which is to place the element above the browser?s viewport. Other browsers do not respond to this method, so the second technique, of making the element too small to see is also used. Both methods are necessary to account for the variations in browser implementation. The distance of 500 pixels above the viewport is a randomly selected number. Any distance will suffice, as long as it places the content out of the viewing range of sighted users. Placing the content above the viewport is preferable to placing it to the left or right of the viewport because both of these other directions cause display irregularities in some browsers. The height and width of the element are set to 1 pixel, as opposed to 0 pixels, because some screen readers refuse to read content that is has no width or height. Setting the overflow to ?hidden? takes other browser implementation bugs into account. Together, these methods work across a broad range of browsers, platforms, and screen readers.

Grafika użyta jako nagłówki

Projektanci zawsze poszukiwali drogi, by uczynić zawartość stron przyjemną, jak to tylko możliwe. HTML sam w sobie daje mdły wygląd zawartości bez dodatkowej grafiki lub innych elementów nietekstowych. Ulubioną techniką projektantów jest stosowanie grafiki jako nagłówków documentu. Ta technika pozwala projektantom utrzymać większą kontrolę nam wyglądem nagłówków niż robi to zwykły tekst. Niestety dokumenty wygenerowane w ten sposób nie zapewniają semantycznej struktury na poziomie znaczników. Urządzenia czytające nie mogą rozpoznać tych elementów jako nagłówki bez właściwego znacznika (np. <h1>, <h2>, etc.). Tagi nagłówkowe wokół grafiki również nie rozwiązują prosto problemu. W semantycznym znaczeniu nagłówek powinien być tekstem.

Designers have always sought to make Web content as visually pleasing as possible. The markup language of HTML produces rather bland-looking content without the addition of graphics or other media elements. A favorite technique of visual designers is to use graphics as document headings. This technique allows designers to have more control over the look and feel of the headings than simple text does. Unfortunately, this produces documents that do not provide good semantic structure on the level of the markup. Screen readers cannot recognize these elements as headings without the proper markup (i.e. <h1>, <h2>, etc.). Surrounding a graphic with heading tags does not quite solve the problem either. In a semantic sense, headings should be text.

Kilka technik zostało zaprezentowanych by pozwolić deweloperom używać grafik jako nagłówków w dokumentach poprawnych semantycznie. Pierwszą i najbardziej znaną techniką jest Todda Fahrnera technika zamiany obrazka [1]. Po czym eksperci dostępności zauważyli, że technika tworzy zawartość niedostępną dla urządzeń czytających [2]. Nie długo potem, kilku ludzi wprowadziło alternatywną technikę, jak np Bob Eastona off-to-left-technique [3], Mike'a Rundle'a text-indent method [4]. Toma Gildera technika transformacji obrazka[5], i inne. Wszystkie te techniki radzą sobie z ukrywaniem zawartości HTML, niektóre z nich radza sobie z tworzeniem dostępnej zawartości dla urzadzeń czytających, a niektóre z nich działaja na wszystkich większych przeglądarkach i systemach operacyjnych. Ponad to żadna z nich nie radzi sobie w tych trzech obszarach, chociaż niektóre są lepsze od innych.

Several techniques have been presented to allow developers to use graphics as headers within semantically-correct documents. The first, and most widely-known technique is Todd Fahrner?s image replacement technique [1]. Soon after its introduction, accessibility experts noticed that the technique made the content unavailable to screen readers [2]. Not long thereafter, several people introduced alternative techniques, such as Bob Easton?s off-to-left-technique [3], Mike Rundle?s text-indent method [4], Tom Gilder?s image transformation technique [5], and others. All of these techniques succeed in hiding HTML content, some of them succeed in making the content accessible to screen readers, and some of them work across all major browsers and operating systems. However, none of them succeed in all three of these areas, though some are better than others.

Przykład 2

.hidden { 
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden; 
} 
h1 { 
	height:30px; 
	width:60px; 
	background-image:url(h1.jpg); 
} 

<h1><span class="hidden">This heading text is hidden.</span></h1>

Linki "przeskocz nawigację"

Projektanci często wzdragają się na ideę zapewnienia na stronie linku tylko dla uzytkowników urzadzeń czytających by umożliwić im przeskoczenie nawigacji, co jest wymagane przez dokument Sekcja 508..., i polecane przez międzynarodowe WCAG, wersji 1.0. Dodanie linku "przeskocz menu" na stronach narusza oryginalny design i często wymusza na projektancie zmianę layoutu.

Designers often balk at the idea of providing a text link on their page just for screen reader users to allow them to skip past repetitive navigational links as required by Section 508 of the Rehabilitation Act in the United States [6], and as recommended by the international Web Content Accessibility Guidelines (WCAG), version 1.0 [7]. Adding a ?skip navigation? link on a Web page intrudes on the original design, and often forces the designer to alter the layout.

Niektórzy projektanci stosują ukrywanie tekstu wewnątrz obrazków w atrybucie alt, albo używają innych metod, które kompletnie ukrywają linki dla użytkowników przeglądarek graficznych. Największy minus tworzenia tego niewidocznego linku jest taki, że jest niedostępny dla użytkowników przeglądarek graficznych, dla których ten link byłby użyteczny, tak jak ludzie z ruchową niesprawnością, którzy nie mogą używac myszy. Niektórzy użytkownicy z ruchową niesprawnością łatwo się męczą i woleliby skorzystać z linku "pomiń nawigację", niż przechodzić tabem przez wszystkie pozycje menu, do głównej zawartości.

Some designers have responded by hiding the text inside of image alt text, or using some other method that completely hides the link from visual users. The biggest drawback to making this link invisible is that this makes the link unavailable to sighted users who might find such a link useful, such as people with mobility impairments who cannot use a mouse. Some users with mobility impairments become fatigued easily, and would rather use a ?skip navigation? link than tab through all of the menu items and other content that precedes the page?s main content.

Jedyny sposób by pozostać w zgodzie z potrzebami projektantów i tych użytkowników urządzeń czytających i użytkowników z niesprawnościami ruchowymi jest użycie techniki, która ukrywa link "pomiń nawigację, aż do momentu kiedy użytkownik nie użyje klawisza TAB, od tego czasu link jest widoczny dla użytkowników oglądających stronę. To pozwala obu grupom użytkowników niewidomym i sprawnym skorzystać z zalet funkcjonalności linku.

One way to reconcile the desires of visual designers with those of screen reader uses and users with mobility impairments is to use a technique that hides the ?skip navigation? link until the user tabs to it, at which time the link is made visible to sighted users. This would allow both blind and visual users to take advantage of the link?s functionality.

Aby osiągnąć ten cel, link jest standardowo ukryty - korzystając z techniki opisanej w tym artykule - ale jset przesunięty w dół na widoczny obszar kiedy link przechwytuje focus klawisza. Innymi słowy, tworzone są dwa style. Jeden dla tagu <a> i jeden dla pseudo-elementu a:active. Style dla pseudoelementu a:active będą aktywne jedynie kiedy użytkownik użyje tabulatora na tym linku, a link z powrotem otrzyma swoje standardowe style (np. z powrotem znknie), kiedy użytkownik naciśnie tab na tym linku.

In order to accomplish this goal, the link is hidden its default state?using the technique described in this paper?but is moved down to the visible area when the link receives keyboard focus. In other words, two styles are created. One for the tag and one for the a:active psuedo-element. The style for the a:active psuedo-element will only be active when the user tabs to the link, and the link will revert back to its default style (i.e. it will disappear again) when the user tabs away from the link.

Przykład 3

#skip a, #skip a:hover, #skip a:visited  { 
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
} 
#skip a:active { 
	position:static; 
	width:auto; 
	height:auto; 
} 

<div id="skip"><a href="#content">Skip to Main Content</a></div>

Jeden minus tego pomysłu, na poziomie konceptualnym, jest taki że nagle pojawia się link, który był wcześniej niewidoczny i nie jest spodziewany w tym miejscu, i przez to mógłby rozkojarzyć użytkowników oglądających stronę. Dla użytkowników używających urządzeń czytających nie sprawi problemu, ponieważ nie mogą zobaczyć ekranu, by zauważyć nagle ukazujący się link. Z ich perpektywy link był zawsze na swoim miejscu, ponieważ w ogóle był. Był po prostu niewodoczny dla oczu. Użytkownicy używający myszy nigdy nie zobaczę tego linku w ogóle, więc ta kwestia ich nie dotyczy.

The one drawback to this idea, on a conceptual level, is that the sudden appearance of a link that was previously invisible will be unexpected, and could confuse the sighted keyboard user. This will not be a problem for screen reader users, because they cannot see the screen to realize that the link suddenly appears visually. From their perspective, the link was always there, because, in fact, it was. It was just not visible to the eyes. Mouse users will never see the link at all, so this is not an issue for them.

Formularz bez danych tabelarycznych

Dla użytkowników przeglądarek graficznych komórki nagłówkowe tabeli mogą pełnić podwójną funkcję organizacji zawartości tabeli a także dostarczają etykiet dla elementów formularza bez tabeli, jak to widać na obrazku formularza bez danych tabelarycznych.

To a visual user, table header cells can perform the dual function of organizing table content and also providing labels for the form elements within that table, as seen in the screenshot of a form within a data table below.

Rysunek 1. Dane tabelu używane do zapewnienia "etykiet" dla pól formularza

Dla użytkownika urządzenia czytającego nagłówki wierszy tabeli i kolumn są użyteczne w zakresie zrozumienia layoutu tabeli, ale nagłówki nie działają tak jak etykiety formularza. Kiedy użytkownicy urządzeń czytających przechodzą tabem z jednego formularza do drugiego, nie usłyszą czytanych nagłówków tabel. W ogóle nie usłyszą żadnej etykiety. Urządzenia czytające wymagają etykiet tekstowych. Te etykiety powinny znajdować się w tagu <label>l;, jak zaleca WCAG 1.0. Dodanie etykiet i grupowanie może być zrealizowane przez zastosowanie tagów <fieldset> i <legend>.

Figure 1. Data table used to provide ?labels? for form elements

To a screen reader user, the table row and column headers are somewhat useful in terms of understanding the layout of the table, but the headers do not act as form labels. When screen reader users tab from one form element to another, they will not hear the table headers read to them. In fact, they will not hear any label at all. Screen readers require text labels. Ideally, these labels should be wrapped in the <label> tag, as recommended by WCAG 1.0. Additional labeling and grouping can be accomplished by using the <fieldset> and <legend> tags.

W tym prostym przykładzie jednakże użytkownicy graficznych przeglądarek nie otrzymają żadnych dodatkowych korzyści z zastosowania widocznych etykiet. Dla nich tekst etykiet zostanie zdublowany z nagłowkami tabel, choć już wizualnie te nagłówki zapewniają adekwatne etykiety dla pól formularza. Tutaj przykład jak ta sama tabela mogłaby wyglądać dla urzytkowników graficznych przeglądarek, jeśli standardowy tekst etykiet zostałby dodany, tag <label>, <fieldset> i <legend>.

In this particular instance, however, visual users will not receive any added benefit from the visual text labels. To them, such text labels would be redundant with the table headers, since, in a visual sense, these headers already provide adequate labels for the form elements. Here is how the same table would look to visual users if standard text labels were added, with the <label> tag, <fieldset> tag, and <legend> tag:

Rysunek 2. Formularz z etykietami przy danych w tabeli

Figure 2. Form with labels within a data table.

Choć użytkownicy urządzeń dźwiękowych przeglądarek będą zadowoleni taką wersją tabeli, wielu użytkowników graficznych przeglądarek będzie tym dodatkowym tekstem niepotrzebnie zaabsorbowana. Dla użytkowników graficznych przeglądarek tabela po prostu stanie się bardziej przepełniona, nie czytalna, i trudniejsza do szybkiego zrozumienia. To jest sytuacja, w której dodanie znacznika miało przynieść korzyści użytkownikom urzadzeń czytających, by wpłynąć na dostępność, albo przy najmniej zawartość miała być przyjazna dla użytkowników graficznych przeglądarek.

Though screen reader users will be happy with this version of the table, most sighted users will find the additional text to be a distraction. To visual users, the table has just become more crowded, wordy, and harder to understand at a glance. This is a situation in which the addition of markup intended to benefit screen reader users interferes with the accessibility, or at least the user-friendliness of the content to visual users.

Przykład 4

[CSS]

.hidden {
position:absolute; 
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

[HTML]

<label for="amembers" class="hidden">Number of members in team A</label>

Kilka pól formularza - jedną etykietę

Multiple Form Elements that ?Share? a Single Label

Inny przykład wyraźnej rozbieżności pomiędzy potrzebami użytkowników urządzeń czytających a użytkownikami graficznych przeglądarek występuje kiedy projektanci tworza kilka elementów formularza, które powinny należeć do tej samej etykiety. Powszechnie zdarza się taki układ, kiedy dwa lub więcej pól tekstowych jest stosowana na numer telefonu.

Another example of apparent incompatibility between the needs of screen readers users and visual users occurs when developers create multiple form elements that seem as though they ought to belong to the same label. A common example of this is when two, or more text input elements are used for phone numbers.

Rysunek 3. Etykiety formularza, które opisują więcej niż jedno pole formularza

Figure 3. Form labels that apply to more than one form element.

Na powyższym obrazku większość użytkowników graficznych przegladarek w Północnej Ameryce zrozumie, że pojedyńcze pola tekstowe odnoszą się do różnych sekcji standardowych numerów telefonicznych. Użytkownicy urządzeń czytających mogą próbować wpisywać cały numer telefonu w pierwsze pole. Kiedy odkryją, że to pole pozwala na wpisanie tylko 3 znaków to, prawdopodobnie moga się poirytować. Niektórzy użytkownicy będą w stanie wpisać cały numer eksperymentując wcześniej z nim, ale to zajmie trochę czasu i jest niepotrzebne.

In the screenshot above, most visual users in North America will understand that the individual text input areas correspond to the different sections of standard phone numbers. Screen reader users may attempt to enter the entire phone number in the first box. When they discover that the box limits them to only 3 characters, this will likely lead to some confusion. Some users will be able to figure out the entire context after experimenting with it, but this kind of experimentation takes time, and is unnecessary.

Wiele oczywistych rozwiązań tymczasowych dla tego szczególnego problemu mgłoby być takie by połączyć wszystkie te pola tekstowe w jedno pojedyńcze pole, i zapewnić odpowiednią etykietę. To mogłoby być najlepszym rozwiązaniem w wielu sytuacjach. Nie mniej jednak technika CSS może być również do tego użyta.

The most obvious workaround for this particular problem would be to combine all of the text input boxes into a single text input box, and then provide the appropriate label. This may be the best solution in most circumstances in almost every way. Nevertheless, the CSS technique can be applied to this situation also.

Przykład 5

[CSS]

.hidden {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

<form method="post" action="">
    <p>Phone number: 
    (
    <label for="area" class="hidden">Area code</label>
    <input name="area" type="text" size="3" maxlength="3" id="area" />
    )
    <label for="first" class="hidden">first 3 digits</label>
    <input name="first" type="text" size="3" maxlength="3" id="first" />
     -
     <label for="last" class="hidden">last 4 digits</label>
     <input name="last" type="text" size="4" maxlength="4" id="last" />
      
     <label for="ext" class="hidden">extension</label>
     <input name="ext" type="text" size="5" maxlength="5" id="ext" />
     </p>
     <p><input type="submit" name="Submit" value="Submit" /></p>
</form>

Zapewnienie kontekstowych sygnałów dla użytkowników urzadzeń czytających

Ta sama technika CSS może być użyta by zapewnić kontekstowe informacje specjalnie dla użytkowników przeglądarek głosowych, których sprawni użytkownicy nie potrzebują widzieć. Tak długo jak ta technika nie jest za często używana, użytkownicy przeglądarek dźwiękowych korzystają z informacji tekstowych, które wyjaśniają kontekst zawartości strony. Na przykład strony z rozbudowanymi systemami nawigacji mają graficzny interfejs, który organizuje hierarchię menu na widoczne sekcje. Czesto projektuje się taką nawigacje na zakładkach. Prawie zawsze system nawigacji jest tak zaprojektowany by podświetlał pozycję użytkownika na drzewie menu. Wiele z tych informacji jest tracona na przeglądarkach dźwiękowych, ponieważ są przekazywane wizualnie. Można właściwie zastosować ukryte frazy, które pozwolą zorientować się użytkownikom przeglądarek dźwiękowych w strukturze menu. Frazy, które mogą być użyteczne i właściwe do wstawienia w załączona zawartość:

• Początek głównego menu
• Koniec głównego menu
• Początek (i koniec) sekcji menu Produkty
• Jesteś tutaj (następuje za tekstem aktualnej pozycji w hierarchii menu)
• Reklama (umieść to przed banerem, etc.)

Providing Contextual Cues Just for Screen Reader Users

The same CSS technique can be used to provide contextual cues especially for screen reader users that visual users would not need to see. As long as this technique is not over-used, screen reader users can benefit from text messages that explain the context of the Web content to them. For example, sites with complex menu systems are often designed with graphical interfaces that organize the menu hierarchies into visual spaces. Visual "tabs" are frequently used for this purpose. Oftentimes, the menu system is designed so that it highlights the user's position within the menu hierarchy. Most of this information is lost on screen reader users because it is all conveyed visually. It may be appropriate to provide hidden phrases that allow screen reader users to orient themselves within such structures. Phrases that may be useful and appropriate to insert within the content include:

* Begin main menu.
* End main menu.
* Begin [and End] the Products and Services submenu
* You are here [followed by the text of the current menu item within the hierarchy]
* Advertisement [place this before a banner ad, for example]

Uwaga: wszystkie te frazy powinny być zwięzłe, i powinny być użyte rozważnie. Wiele stron nie potrzebuje wsparcia tego typu kontekstową pomocą. Prostszy i czystszy design nie potrzebuje takich technik. Projektanci nie powinni narzucać się użytkownikom dźwiękowych przeglądarek z tekstem, który zapewnia mało lub wcale korzyści dla nich. Ta technika może dostarczyć ważnych kontekstowych informacji, które są jedynie odbierane wizualnie, bowiem użytkownicy dźwiękowych przeglądarek muszą słuchać jakiegoś tekstu na stronie, te informacje powinny być zredukowane do minimum.

A word of caution: all of these phrases should be brief, and should be used sparingly, if at all. Many sites do not need to resort to this kind of contextual help. The simpler and cleaner the design, the less of a need there is for this technique. Designers should not overburden screen reader users with text that provides little or no benefit to them. This technique can provide important contextual cues that are otherwise only visual in nature, but since screen reader users have to listen to whatever text is in the page, these cues should be kept to a minimum.

Przykład 6

[CSS]

.hidden { 
	position:absolute;
	left:0px;
	top:-500px;
	width:1px; 
	height:1px; 
	overflow:hidden; 
} 

<div class="hidden">Begin main menu.</div>
<div class="hidden">End main menu.</div>

Konkluzja

Kiedy technika CSS zaprezentowana tutaj zostanie używata, by ukryć zawartość HTML, użytkownicy graficznych przeglądarek nigdy nie dowiedzą się, że tutaj jest cała zawartość. Z drugiej strony użytkownicy przeglądarek dźwiękowych nigdy nie wiedza zę te informacje są niedostępne dla użytkowników przeglądarek graficznych. Obie grupy użytkowników mogą korzystać z zawartości intuicyjnie, bez potrzeby dostosowywania się do zbyt dużej lub zbyt małej ilosci informacji w znacznikach. To może zapewniać ważne kontekstowe informacje, które są z drugiej strony niemożliwe do zrozumienia dla użytkowników czytników, z uwagi na wizualną stronę tej informacji. To nie jest tylko technika albo metoda rozwiązania problemu, ale to jest jedno z rozwiazań, które programiści mogą dodać do swojej listy możliwych rozwiązań, kiedy potrzeby rosną.

When the CSS technique presented here is used to hide form HTML content, sighted users will never know that the content is there at all. Screen reader users, on the other hand, will never realize that this content is invisible to sighted users. Both kinds of users will be able to use the content intuitively, without having to adjust for either too much or too little information in the markup. This can provide important contextual cues that are otherwise impossible for screen reader users to grasp because of the visual nature of these cues. When used judiciously, this technique can ameliorate some of the tension between the demands of accessibility and the demands of visual design. It is not the only technique or method of solving this problem, but it is one that Web developers can add to their list of possible solutions when the need arises.