Oprócz struktury podczas tworzenia i projektowania z myślą o dostępności cyfrowej należy wziąć pod uwagę wiele pomocniczych elementów HTML. W trakcie kursu „Dostępność” omawiamy wiele elementów.
Ten moduł skupia się na bardzo konkretnych elementach, które nie pasują do żadnego z pozostałych modułów, ale warto je poznać.
Tytuł strony
Element HTML <title> określa treść strony lub ekranu, z którym użytkownik ma się zapoznać. Znajduje się w
<head> sekcji
dokumentu HTML i jest odpowiednikiem elementu <h1> lub głównego tematu strony. Treść tytułu jest wyświetlana na karcie przeglądarki i pomaga użytkownikom zrozumieć, którą stronę odwiedzają, ale nie jest wyświetlana w samej witrynie ani aplikacji.
W aplikacji jednostronicowej (SPA),
element <title> jest obsługiwany nieco inaczej, ponieważ użytkownicy nie przechodzą
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. Ogłoszenie
zaktualizowanych tytułów stron
użytkownikowi czytnika ekranu może wymagać dodatkowej pracy.
Opisowe tytuły stron są korzystne zarówno dla użytkowników, jak i dla optymalizacji pod kątem wyszukiwarek (SEO), ale nie przesadzaj z dodawaniem wielu słów kluczowych. Ponieważ tytuł jest pierwszą rzeczą, którą słyszy użytkownik technologii wspomagającej, gdy odwiedza stronę, musi być dokładny, unikalny i opisowy, ale też zwięzły.
Podczas pisania tytułów stron zalecamy też, aby najpierw „załadować” stronę wewnętrzną lub ważne treści, a potem dodać poprzedzające strony lub informacje. Dzięki temu użytkownicy technologii wspomagających nie muszą słuchać informacji, które już słyszeli.
<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ęzyka, ponieważ informuje on technologię wspomagającą, jakiego języka powinna używać.
Zalecamy używanie 2-znakowych kodów języka ISO aby zapewnić większy zasięg technologii wspomagających, ponieważ wiele z nich nie obsługuje rozszerzonych kodów języka.
Gdy atrybut języka jest całkowicie pominięty, technologia wspomagająca domyślnie używa języka zaprogramowanego przez użytkownika. Jeśli np. technologia wspomagająca jest ustawiona na język hiszpański, ale użytkownik odwiedza witrynę lub aplikację w języku angielskim, technologia wspomagająca będzie próbować odczytać tekst w języku angielskim z hiszpańskim akcentem i intonacją. Takie połączenie powoduje, że produkt cyfrowy jest bezużyteczny, a użytkownik sfrustrowany.
<html>...</html>
<html lang="en">...</html>
Atrybut lang może mieć przypisany tylko jeden język. Oznacza to,
że atrybut <html> może mieć tylko jeden język, nawet jeśli na stronie jest wiele
języków. Ustaw lang na język główny strony.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Język sekcji
Możesz też użyć atrybutu języka (lang) do przełączania języka w samej treści. Obowiązują te same podstawowe reguły co w przypadku atrybutu języka całej strony, z tym że dodajesz go do odpowiedniego elementu na stronie, a nie do tagu <html>.
Pamiętaj, że język dodany do elementu <html> jest dziedziczony przez wszystkie
zawarte w nim elementy, więc zawsze najpierw ustaw język główny strony
w atrybucie lang najwyższego poziomu.
W przypadku wszystkich elementów na stronie napisanych w innym języku dodaj ten atrybut lang do odpowiedniego elementu opakowującego. Spowoduje to zastąpienie ustawienia języka najwyższego poziomu do momentu zamknięcia tego elementu.
<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 na stronie innej strony HTML lub treści innej firmy. Zasadniczo umieszcza on inną stronę internetową na stronie nadrzędnej. Elementy iframe są powszechnie używane w reklamach, osadzonych filmach, analityce internetowej i treściach interaktywnych.
Aby element <iframe> był dostępny, należy wziąć pod uwagę kilka aspektów. Po pierwsze, każdy <iframe> z odrębną treścią powinien zawierać element title w tagu nadrzędnym. Ten tytuł dostarcza użytkownikom technologii wspomagających więcej informacji o treści w elemencie <iframe>.
Po drugie, zalecamy ustawienie przewijania na „auto” lub „yes” w ustawieniach tagu <iframe>. Dzięki temu osoby słabowidzące mogą przewijać treści w elemencie <iframe>, których w innym przypadku nie mogłyby zobaczyć. Idealnie byłoby, gdyby kontener <iframe> miał też elastyczną 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>