Semantyka i poruszanie się po treściach

Rola semantyki w nawigacji po stronie

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Znasz już afordancje, semantykę i wykorzystanie technologii wspomagających osoby z niepełnosprawnością. w drzewie ułatwień dostępu, aby stworzyć alternatywne środowisko dla użytkowników. Jak widać, pisanie ekspresywnego, semantycznego języka HTML przy ułatwieniach dostępu, bo wiele elementów standardowych ma zarówno semantyka i zachowanie wspomagające.

W tym wykładzie omówimy mniej oczywiste zasady semantyczne, które są bardzo ważne. z myślą o użytkownikach czytników ekranu, zwłaszcza jeśli chodzi o nawigację. Na prostej stronie z jest dużo elementów sterujących, ale niewiele treści. Można je łatwo przejrzeć, których potrzebujesz. ale na stronie z dużą ilością treści, takiej jak link w Wikipedii lub wiadomości agregatorem nie jest radzić czytać wszystko od góry do dołu. Ty potrzebują sposobu na sprawne poruszanie się po treściach.

Deweloperzy często sądzą, że czytniki ekranu są uciążliwe i powolne. lub że wszystko, co jest na ekranie, musi być dla niego zaznaczone. w celu jej znalezienia. Często tak nie jest.

Użytkownicy czytników ekranu często korzystają z listy nagłówków, aby znaleźć informacje. Większość czytniki ekranu mają proste sposoby wyodrębniania i skanowania listy nagłówków stron, o nazwie pokrętło. Zobaczmy, jak wykorzystać nagłówki HTML aby obsługiwać tę funkcję.

Efektywne korzystanie z nagłówków

Najpierw przypomnijmy: zamówienie DOM mają znaczenie. w kolejności zaznaczenia, ale z kolejnością za pomocą czytnika ekranu. Eksperymentując z czytnikami ekranu takich jak VoiceOver, NVDA, JAWS lub ChromeVox, zobaczysz listę nagłówków w kolejności DOM, a nie w porządku wizualnym.

Dotyczy to ogólnie czytników ekranu. Ponieważ czytniki ekranu wchodzą w interakcję z drzewa ułatwień dostępu, które jest oparte na drzewie DOM, jest więc rozpoznawane przez czytnik ekranu bezpośrednio na podstawie kolejności DOM. Ten oznacza, że właściwa struktura nagłówków jest ważniejsza niż kiedykolwiek.

Na większości stron o dobrej strukturze poziom nagłówków jest zagnieżdżony w celu wskazania, relacji nadrzędny-podrzędny między blokami treści. Narzędzie WebAIM z listy kontrolnej wielokrotnie się do tego odnosi za pomocą tej metody.

  • 1.3.1 zaznacza: „Znaczniki semantyczne służą do wyznaczania nagłówków”.
  • 2.4.1 wspomina o strukturze nagłówków jako metodę omijania bloków treści
  • 2.4.6 zawiera szczegółowe informacje na temat tworzenia przydatnych nagłówków
  • 2.4.10 „poszczególne sekcje treści są oznaczone za pomocą nagłówków, jeśli jest to wskazane”

Nie wszystkie nagłówki muszą być widoczne na ekranie. Wikipedia wykorzystuje technikę, która polega na celowo umieszcza nagłówki poza ekranem, dostępne wyłącznie dla czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością.

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

W złożonych zastosowaniach może to być dobry sposób na umieszczenie nagłówków grafika nie wymaga widocznego nagłówka i nie ma na niego miejsca.

Inne opcje nawigacji

Chociaż strony z dobrymi nagłówkami ułatwiają nawigację użytkownikom czytników ekranu, innych elementów, których mogą używać do poruszania się po stronie, takich jak linki, formularze opcje kontroli i punkty orientacyjne.

Czytniki mogą korzystać z pokrętła czytnika ekranu (łatwy sposób przejrzeć listę nagłówków stron), aby zobaczyć listę linków na stronie. Czasami na stronie wiki jest wiele linków, więc czytelnik może wyszukać tych haseł. Ogranicza to liczbę działań do linków, które faktycznie zawierają zamiast każdego wystąpienia na stronie danego hasła.

Ta funkcja jest przydatna tylko wtedy, gdy czytnik ekranu może znaleźć linki i link tekst ma znaczenie. Oto kilka typowych wzorców tworzących linki ciężko znaleźć.

  • Tagi kotwicy bez atrybutów href. Często używane na jednej stronie te cele linków powodują problemy z czytnikami ekranu. Dostępne opcje Więcej informacji znajdziesz w tym artykule o aplikacjach jednostronicowych.
  • Przyciski z linkami. Sprawiają, że czytnik ekranu zinterpretuje je jako link, przycisk przestanie działać. Dla: w takich przypadkach zastąp tag kotwicy prawdziwym przyciskiem i określ jego styl w odpowiedni sposób.
  • obrazy użyte jako treść linku; Czasami jest to niezbędne, linki do obrazów mogą być przez czytniki ekranu. Aby zagwarantować, że link jest prawidłowo udostępniany i technologii wspomagającej osoby z niepełnosprawnością, sprawdź, czy zdjęcie zawiera tekst atrybutu alt.

Słaby tekst linku to kolejny problem. klikalny tekst, np. „Więcej informacji”; lub „kliknij tutaj” nie zawiera semantycznych informacji o tym, dokąd prowadzi link. Zamiast tego użyj tekst opisowy, np. „dowiedz się więcej o elastycznym projektowaniu” lub „zobacz ten płótno film instruktażowy" aby czytniki ekranu mogły przekazać im istotne informacje.

Pokrętło może też pobrać listę elementów sterujących formularza. Korzystając z tej listy, czytelnicy mogą wyszukać konkretne produkty i przejść bezpośrednio do nich.

Częstym błędem popełnianym przez czytniki ekranu jest wymowa. Na przykład ekran czytelnik może wymówić „Udacity” jako „oo-dacity”, albo odczytać numer telefonu jako dużą liczbę całkowitą lub czytać tekst pisany wielkimi literami tak, jakby był to akronim. Co ciekawe, użytkownicy czytników ekranu są całkiem przyzwyczajeni do tego osobliwości i rozumieją, do rozważenia zakupu.

Niektórzy deweloperzy próbują rozwiązać ten problem, udostępniając tryb tylko do odczytu tekst zapisany fonetycznie. Oto prosta zasada zapisu fonetycznego: nie rób tego. to tylko pogorszy problem! Jeśli na przykład użytkownik używa atrybutu na monitorze brajlowskim, słowo zostanie napisane nieprawidłowo, co zwiększy zdezorientowanie. Czytniki ekranu umożliwiają pisanie słów na głos, więc zostaw to pole czytelnik może mieć kontrolę nad swoimi wrażeniami i decydować, kiedy jest to konieczne.

Czytelnicy mogą użyć pokrętła, aby wyświetlić listę punktów orientacyjnych. Ta lista pomaga czytelnikom znaleźć główną treść i zestaw punktów nawigacyjnych pochodzących z języka HTML elementów punktów orientacyjnych.

W HTML5 wprowadzono nowe elementy, które pomagają zdefiniować strukturę semantyczną stronę, w tym header, footer, nav, article, section, main i aside Te elementy zawierają wskazówki dotyczące struktury strony bez wymuszania wbudowanych stylów (co i tak należy zrobić przy użyciu CSS).

Semantyczne elementy strukturalne zastępują wiele powtarzających się bloków div oraz pozwalają w bardziej klarowny, opisowy sposób intuicyjnie wyrażać strukturę strony zarówno dla autorów, jak i czytelników.