Dokument

Oprócz struktury istnieje wiele dodatkowych elementów HTML, które warto wziąć pod uwagę w tworzeniu i projektowaniu z myślą o cyfrowych ułatwieniach dostępu. Przez cały czas nauki Omówiliśmy wiele zagadnień związanych z ułatwieniami dostępu.

Ten moduł dotyczy bardzo konkretnych elementów, które nie pasują do żadnego ale są przydatne do zrozumienia.

Tytuł strony

Komponent HTML <title> określa treść strony lub ekranu, do którego ma trafić użytkownik i uzyskiwanie dodatkowych informacji. Znajduje się w Sekcja <head> dokument HTML i jest odpowiednikiem elementu <h1>, czyli głównego tematu strony. jest wyświetlany na karcie przeglądarki i pomaga użytkownikom zrozumieć, którą odwiedza, ale nie jest widoczna w samej witrynie ani aplikacji.

W aplikacji jednostronicowej <title> jest obsługiwany w nieco inny sposób, ponieważ użytkownicy nie poruszają się tak jak w witrynach wielostronicowych. W przypadku aplikacji SPA wartość parametru document.title można dodać ręcznie lub za pomocą pakietu pomocniczego, w zależności od JavaScriptu. Ogłaszamy zaktualizowane tytuły stron użytkownika czytnika ekranu mogą wymagać dodatkowych czynności.

Opisowe tytuły stron są przydatne zarówno dla użytkowników, optymalizacji witryn pod kątem wyszukiwarek (SEO), ale Nie przesadzaj z dodawaniem wielu słów kluczowych. Jako pierwszy jest taki tytuł gdy użytkownik AT odwiedza stronę, musi być dokładny, unikalny i zwięzły.

Przy tworzeniu tytułów stron sprawdzoną metodą jest „wczytywanie z przodu”, wnętrze najpierw stronę lub ważną treść, a dopiero potem dodaj pozostałe strony lub informacje potem. Dzięki temu użytkownicy AT nie muszą przeglądać posiadanych informacji już usłyszałem.

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ęzyka strony (lang) ustawia 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ż będzie on sygnalizować AT, w jakim języku ma być używany.

Zalecamy używanie znaków Kody języków w standardzie ISO większy zasięg AT, ponieważ wiele z nich nie obsługuje rozszerzonych kodów języków.

Jeśli brakuje atrybutu języka, w polu AT domyślnie ustawimy z zaprogramowanego języka użytkownika. Jeśli na przykład w polu AT ustawiono język hiszpański, użytkownik odwiedził anglojęzyczną witrynę lub aplikację, AT próbował odczytać ten język z hiszpańskimi akcentami i częstotliwością. Ta kombinacja powoduje, że dane produktu cyfrowego i sfrustrowanego użytkownika.

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 1 język, nawet jeśli istnieje kilka języki na stronie. Ustaw lang jako główny język strony.

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

Język sekcji

Możesz też użyć atrybutu języka (lang) do zmiany języka w samej 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, a nie w tagu <html>.

Pamiętaj, że język, który dodasz do elementu <html>, jest przesyłany w dół do wszystkich zawarte na niej elementy, dlatego zawsze ustawiaj główny język strony. najpierw atrybut lang najwyższego poziomu.

W przypadku elementów na stronie napisanych w innym języku dodaj atrybut lang do odpowiedniego elementu otoki. Spowoduje to zastąpienie ustawienia języka najwyższego poziomu do momentu 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>) to używane do hostowania innej strony HTML lub zawartości strony trzeciej. it umieszcza w nim inną stronę nadrzędną. Elementy iframe są często używane do wyświetlania reklam, filmów umieszczanych na stronach, analityki internetowej i treści.

Aby ułatwić korzystanie z urządzenia <iframe>, musisz wziąć pod uwagę kilka kwestii. Najpierw każdy element <iframe> z odrębną treścią powinien zawierać element tytułu w tagu nadrzędnym. Ten tytuł dostarcza użytkownikom AT więcej informacji o treściach w <iframe>.

Po drugie, warto ustawić przewijanie na „automatyczne”, lub „tak” w ustawieniach tagu <iframe>. Dzięki temu osoby niedowidzące mogą przewijać w <iframe> treści, których inaczej by nie zobaczyły. W idealnej sytuacji kontener <iframe> miałby również możliwość dostosowania 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 znajdują się różne wersje językowe. Jak najlepiej przekazać technologii wspomagającej osoby z niepełnosprawnością język tekstu?

Nie musisz się tym przejmować – AT jest w stanie automatycznie odczytać każdy język.
Choć niektórzy operatorzy ATT mogą umieć rozpoznawać język, nie można zagwarantować, że AT zgadnie odgadnięcie.
Uwzględnij wszystkie języki w elemencie <html>. 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 elementu <html> i dodatkowe języki dla każdego elementu, który zawiera treści w innym języku.
Podczas odczytywania dokumentu interfejs AT bazuje głównie na atrybucie <html>. Jeśli Twoje teksty są w wielu językach, dodaj atrybut lang do odpowiedniego elementu (np. sekcji lub akapitu) z prawidłowym dwuliterowym kodem ISO.