Вы здесь: Главная > HTML > Доступные ссылки

Доступные ссылки

Опубликовано автором Просмотры: 21

Существует несколько способов сделать ссылки — абсолютно фундаментально важнейший интерактивный элемент сайтов — более доступными для людей с ограниченными возможностями.

Табуляция

Пользователи, которые не используют или не могут использовать указывающие устройства, могут переходить по ссылкам, и, как таковые, ссылки должны располагаться в логическом порядке вкладок.

Атрибут tabindex позволяет вам определить этот порядок, хотя, если HTML является линейным, как и должно быть, логический порядок табуляции должен автоматически встать на своё место.

<ul>
    <li><a href="here.html" tabindex="1">Здесь</a></li>
    <li><a href="there.html" tabindex="3">Там</a></li>
    <li><a href="limbo.html" tabindex="2">Вон там</a></li>
</ul>

В этом примере (который используется исключительно в качестве демонстрации — с практической точки зрения это было бы довольно глупо) табуляция будет переходить от “Здесь” к ”Там“ и «Вон там”.

Хороший совет по обеспечению доступности ссылок ─ писать хороший текст ссылки. Пусть слова, обтекаемые тегами a, объясняют, куда ссылка приведёт пользователя.

Если кто-то использует программу чтения с экрана, ссылки которой зачитываются ему при переходе между ними, пользователь будет знать, для чего он открывает доступ, если выберет ссылку. “Нажмите здесь”. Случайные слова не особенно полезны.

Названия ссылок

Если у вас есть ссылка, которая не является самоописательной, или назначение ссылки может быть полезно объяснить более подробно, вы можете добавить информацию к ссылке, используя атрибут title.

<p>Я действительно плохо описываю ссылки. <a href="inept.html" title="Почему я не умею писать текст ссылки: объяснение и извинения."> Нажмите здесь,</a> чтобы узнать больше.</p>

Ключи доступа

Клавиши доступа упрощают навигацию, назначая ссылке сочетание клавиш, которое обычно фокусируется, когда пользователь нажимает “Alt” или “Ctrl” + клавиша доступа.

<a href="somepage.html" accesskey="s"> Какая-то страница </a>

Для пользователей, которые не используют указывающие устройства, это может быть быстрым способом навигации. Проблема в том, что там пользователь может не знать, что это такое, если это явно не указано на сайте. Хотя не которые программы замечают это и напоминают.

Пропуск HTML

Для облегчения перехода на вкладки вы можете добавлять ссылки, которые позволяют пользователям переходить по фрагментам вашей веб-страницы. Возможно, вы захотите разрешить кому-либо переходить по множеству навигационных ссылок, например, чтобы они могли просто читать основное содержимое страницы, а не перебирать все ссылки:

<header>
    <h1>Заголовок</h1>
    <a href="#content">Перейти к содержимому</a>
</header> 
<nav>
    <!--loads of navigation stuff -->
</nav>
<section id="content">
    <!--lovely content -->
</section>

Вы, вероятно, не захотите, чтобы эта ссылка отображалась визуально — это особая ссылка для просмотра пользователями с ограниченными возможностями, и пользователям программы чтения с экрана не нужно её видеть (она будет зачитана).

Таким образом, вы можете использовать CSS, чтобы сделать его невидимым, но это также может быть полезно для людей с ограниченными двигательными возможностями, поэтому вы также можете рассмотреть возможность сделать его видимым, когда он переключается с табуляции на использование псевдокласса CSS focus.

Страницы в тему:

Добавить комментарий