Dokument

Oprócz struktury należy wziąć pod uwagę wiele elementów HTML, które ułatwiają dostępność cyfrową. W trakcie kursu dotyczącego dostępności omawiamy wiele elementów.

Ten moduł skupia się na bardzo konkretnych elementach, które nie pasują do żadnego z innych modułów, ale warto je poznać.

Tytuł strony

Element HTML <title>określa zawartość strony lub ekranu, z którego zamierza skorzystać użytkownik. Znajdziesz go w sekcji <head> dokumentu HTML. Jest on odpowiednikiem <h1> lub głównego tematu strony. Treść tytułu jest wyświetlana na karcie przeglądarki i pomaga użytkownikom zrozumieć, na której stronie się znajdują. Nie jest ona jednak wyświetlana w samej witrynie ani aplikacji.

W aplikacji jednostronicowej (SPA) <title> jest obsługiwana nieco inaczej, ponieważ użytkownicy nie przechodzą między stronami tak jak w przypadku witryn wielostronicowych. W przypadku aplikacji SPA wartość właściwości document.title można dodać ręcznie lub za pomocą pakietu pomocniczego, w zależności od frameworka JavaScript. Ogłoszenie zaktualizowanych tytułów stron dla użytkownika czytnika ekranu może wymagać dodatkowej pracy.

Opisywyte tytuły stron są dobre zarówno dla użytkowników, jak i optymalizacji witryn pod kątem wyszukiwarek (SEO), ale nie przesypuj się i nie dodawaj zbyt wielu słów kluczowych. Ponieważ tytuł jest pierwszą rzeczą, którą użytkownik AT słyszy po otwarciu strony, musi być dokładny, unikalny i opisowy, ale też zwięzły.

Podczas pisania tytułów stron warto też najpierw umieścić na początku strony lub ważne treści, a potem dodać pozostałe strony lub informacje. Dzięki temu użytkownicy nie muszą słuchać informacji, które już znają.

Nie
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Tak
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Język

Język strony

Atrybut język strony (lang) określa domyślny język całej strony. Ten atrybut jest dodawany do tagu <html>. Do każdej strony należy dodać prawidłowy atrybut języka, ponieważ sygnalizuje on AT, którego języka ma użyć.

Zalecamy używanie 2-znakowych kodów języka ISO, aby zwiększyć zasięg AT, ponieważ wiele z nich nie obsługuje rozszerzonych kodów języka.

Jeśli atrybut języka jest całkowicie nieobecny, AT przyjmie domyślnie język zaprogramowany przez użytkownika. Jeśli na przykład AT został skonfigurowany pod kątem języka hiszpańskiego, a użytkownik odwiedził stronę lub aplikację w języku angielskim, AT spróbuje odczytać tekst w języku angielskim z hiszpańskimi akcentami i kadencją. Ta kombinacja powoduje, że produkt cyfrowy jest bezużyteczny, a użytkownik staje się sfrustrowany.

Nie
<html>...</html>
Tak
<html lang="en">...</html>

Z atrybutem lang można powiązać tylko jeden język. Oznacza to, że atrybut <html> może mieć tylko jeden język, nawet jeśli na stronie jest ich więcej. Ustaw lang jako język główny strony.

Nie
<html lang="ar,en,fr,pt">...</html>
 Wiele języków nie jest obsługiwanych.
Tak
<html lang="ar">...</html>
 Ustaw tylko język główny strony. W tym przypadku jest to język arabski.

Język sekcji

Możesz też użyć atrybutu języka (lang) do przełączania języków w treści. Obowiązują te same podstawowe reguły co w przypadku atrybutu języka na całej stronie, z tą różnicą, że dodajesz go do odpowiedniego elementu na stronie zamiast do tagu <html>.

Pamiętaj, że język dodany do elementu <html> jest przekazywany kaskadowo do wszystkich elementów, które zawiera, dlatego zawsze najpierw ustaw podstawowy język elementu lang na najwyższym poziomie.

W przypadku elementów na stronie napisanych w innym języku dodaj atrybut lang do odpowiedniego elementu opakowania. Zastąpi to ustawienie języka na najwyższym poziomie do czasu zamknięcia tego elementu.

Nie
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
Tak
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

Elementy iframe

Element iframe (<iframe>) służy do umieszczania na stronie innej strony HTML lub treści pochodzących od osób trzecich. W podstawie umieszcza on inną stronę internetową na stronie nadrzędnej. Elementy iframe są często używane do wyświetlania reklam, osadzonych filmów, usług analitycznych i treści interaktywnych.

Aby zapewnić dostępność w przypadku <iframe>, należy wziąć pod uwagę kilka kwestii. Po pierwsze, każdy element <iframe> z osobnym typem treści powinien zawierać element title w tagu nadrzędnym. Ten tytuł dostarcza użytkownikom AT więcej informacji o treściach w <iframe>.

Po drugie, zalecamy ustawienie przewijania na „auto” lub „tak” w ustawieniach tagu <iframe>. Dzięki temu osoby niedowidzące mogą przewijać treści w <iframe>, które w innym wypadku mogłyby nie dostrzec. W idealnym przypadku kontener <iframe> powinien też umożliwiać zmianę wysokości i szerokości.

Nie
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Tak
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat ułatwień dostępu w dokumentach.

Twoja witryna to wielojęzyczny podręcznik online, w którym na jednej stronie wyświetlane są różne języki. Jak najlepiej określić język tekstu dla technologii wspomagających?

Nie martw się, AT może automatycznie odczytać każdy język.
Chociaż niektóre usługi AT mogą wykrywać język, nie można zagwarantować, że usługa AT zgadnie poprawnie.
Uwzględnij wszystkie języki w elemencie <html>. Na przykład <html lang="en,lt,pl,pt">
Z atrybutem lang może być powiązany tylko jeden język.
Ustaw główny lang dla <html>, a dodatkowe języki dla każdego elementu, który zawiera treści w innym języku.
Aby odczytać dokument, AT będzie polegać głównie na atrybucie języka <html>. Jeśli masz tekst w wielu językach, dodaj do odpowiedniego elementu (np. sekcji lub akapitu) atrybut lang z prawidłowym 2-literowym kodem ISO.