Podczas tworzenia i projektowania ułatwień dostępu cyfrowych trzeba wziąć pod uwagę nie tylko strukturę, ale też wiele pomocniczych elementów HTML. W tym kursie omawiamy wiele czynników.
Ten moduł koncentruje się na bardzo konkretnych elementach, które nie pasują do żadnego innego modułu, ale są przydatne dla jego zrozumienia.
Tytuł strony
Element HTML <title> określa treść strony lub ekranu, z którego będzie korzystać użytkownik. Znajduje się w sekcji <head> dokumentu HTML i jest odpowiednikiem elementu <h1> lub głównego tematu strony. Tytuły wyświetlane na karcie przeglądarki pomagają użytkownikom zrozumieć, którą stronę odwiedzają, ale nie są widoczne w samej witrynie ani aplikacji.
W aplikacji jednostronicowej (SPA) interfejs <title> jest obsługiwany w nieco inny sposób, ponieważ użytkownicy nie poruszają się między stronami, tak jak w witrynach wielostronicowych. W przypadku aplikacji jednostronicowych wartość właściwości document.title można dodać ręcznie lub za pomocą pakietu pomocniczego w zależności od platformy JavaScript. Informowanie użytkownika czytnika ekranu o zaktualizowanych tytułach stron może wymagać dodatkowej pracy.
Opisowe tytuły stron są przydatne zarówno dla użytkowników, jak i z punktu widzenia optymalizacji witryn pod kątem wyszukiwarek (SEO), ale nie przesadzaj i nie dodawaj wielu słów kluczowych. Tytuł jest pierwszym komunikatem wyświetlanym na stronie przez użytkownika w AT, dlatego musi być dokładny, unikalny i opisowy, ale też zwięzły.
Podczas tworzenia tytułów stron najlepiej jest najpierw wczytać stronę wewnętrzną lub ważną treść z wyprzedzeniem, a później dodać pozostałe strony lub informacje. Dzięki temu użytkownicy AT nie muszą przeglądać informacji, które już znają.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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ęzyk, aby wskazać AT, jakiego języka należy użyć.
Aby zwiększyć zasięg AT, zalecamy używanie dwuznakowych kodów języka ISO, ponieważ wiele z nich nie obsługuje rozszerzonych kodów języków.
Jeśli brakuje atrybutu języka, w polu AT domyślnie używany jest język zaprogramowany użytkownika. Jeśli np. w polu AT jest ustawiony język hiszpański, a użytkownik odwiedził witrynę lub aplikację w języku angielskim, powinien spróbować przeczytać tekst w języku angielskim z hiszpańskim akcentem i z częstotliwością. Takie połączenie powoduje, że produkt cyfrowy jest bezużyteczny, a użytkownik jest zniechęcony.
<html>...</html>
<html lang="en">...</html>
Z atrybutem lang może być powiązany tylko jeden język. Oznacza to, że atrybut <html> może mieć tylko 1 język, nawet jeśli na stronie jest kilka języków. Ustaw lang jako główny język strony.
<html lang="ar,en,fr,pt">...</html>Wiele języków nie jest obsługiwanych.
<html lang="ar">...</html>Ustaw tylko podstawowy język 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 treści. W przypadku atrybutu języka pełnej strony obowiązują te same podstawowe reguły, z tą różnicą, że dodajesz go do odpowiedniego elementu na stronie zamiast do tagu <html>.
Pamiętaj, że język, który dodajesz do elementu <html>, schodzi kaskadowo na wszystkie elementy składowe, dlatego zawsze ustawiaj główny język atrybutu lang najwyższego poziomu na stronie.
W przypadku elementów na stronie napisanych w innym języku dodaj atrybut lang do odpowiedniego elementu kodu. Spowoduje to zastąpienie ustawienia języka najwyższego poziomu do czasu jego zamknięcia.
<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>
<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>
iFrames
Element iFrame (<iframe>) służy do hostowania innej strony HTML lub zawartości strony trzeciej. Zasadniczo umieszcza on inną stronę na stronie nadrzędnej. Elementy iframe są często stosowane do reklam, filmów umieszczanych na stronach, analityki internetowej i treści interaktywnych.
Aby umożliwić dostęp do usługi <iframe>, musisz wziąć pod uwagę kilka aspektów. Po pierwsze, każdy element <iframe> z odrębną treścią powinien zawierać element tytułu w tagu nadrzędnym. Ten tytuł dostarcza użytkownikom AT dodatkowe informacje o zawartości <iframe>.
Po drugie, zgodnie ze sprawdzoną metodą warto ustawić przewijanie na „automatyczne” lub „tak” w ustawieniach tagu <iframe>. Dzięki temu osoby niedowidzące mogą przeglądać w <iframe> treści, których inaczej by nie zobaczyli. Idealnie byłoby, gdyby kontener <iframe> miał odpowiednią wysokość i szerokość.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ułatwieniach dostępu do dokumentów
Twoja witryna to wielojęzyczny podręcznik online, w którym na jednej stronie wyświetla się informacja w wielu językach. Jak najlepiej przekazać technologii wspomagającej informacje o języku tekstu?
<html>. Przykład: <html lang="en,lt,pl,pt">lang może być powiązany tylko 1 język.lang dla elementu <html> oraz dodatkowe języki dla każdego elementu, który zawiera treści w innym języku.<html>. Jeśli masz tekst w wielu językach, dodaj atrybut lang do odpowiedniego elementu (np. sekcji lub akapitu) z prawidłowym 2-literowym kodem ISO.