HTML: как указать метку для привязки элемента в контексте доступности

Question

Вот требование: у меня есть элемент привязки, который представляет ссылку.

<a href ="login.html">3</a>

В настоящее время программа чтения с экрана (JAWS) объявляет это как "Ссылка 3" Но я хочучтобы программа чтения с экрана читала его как «Страница входа в Link 3»

Чтобы он работал, я добавил атрибут title к элементу привязки.

<a href ="login.html" title="Login Page">3</a>

Теперь его объявлениекак «Страница входа в Link 3»

Но проблема в том, что: в соответствии с рекомендациями по обеспечению доступности использование атрибута «title» не рекомендуется, так как он не работает в большинстве комбинаций программ чтения с экрана и браузеров.

Вместо этого я использовал «aria-label», тогда в данном случае это только чтение «Страница входа».

<a href ="login.html" aria-label="Login Page">3</a>

Как заставить программу чтения с экрана читать как «Ссылка 3, так и страницу входа»«

Answer 1

Я думаю, что Клемент имеет это прямо здесь без использования CSS - просто добавьте пунктуацию к метке арии.Aria-label = "Ссылка 3. Страница входа" должна это сделать.Удачи!

Answer 2

Что-то вроде этого:

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

<a href ="login.html">3 <span class="screenreader">- Login page</span></a>

Ваша программа чтения с экрана будет читать это как «Ссылка 3 - Страница входа», но ваш пользователь пока только видит «3»