2013-05-14 5 views
1

У меня есть ссылка внутри неупорядоченного списка следующим образом:Как сказать читателю экрана использовать атрибут вместо текста ссылки?

<li class="savelink"> 
    <a href="/save"><span>Save</span></a> 
</li> 

Обычно для чтения с экрана читать «Сохранить». Возможно ли, и с каким атрибутом, изменить это, не изменяя фактический текст ссылки?

Деловая потребность - иметь ссылку, стилизованную с иконкой. Значок будет дополнять текст ссылки. Например:

  • Значок знака «+» и текстовое меню ссылки, которое равно действию «добавить пункт меню».

Я пробовал арию-лейбл, без успеха.

+1

Какой здесь прецедент? Знание того, почему вы пытаетесь это сделать, может предложить некоторые решения. – steveax

+0

добавил дополнительную информацию в основной вопрос. в основном у нас есть серия ссылок с одним и тем же текстом, но значок отличается от действия. Например, «новое меню» «меню удаления» (значки: новое, удаление, текст ссылки: меню) –

+0

NVDA, в частности, агрессивно и намеренно дает преимущество над текстом ссылки. Попробуйте решение @Steve Faulkner, он явно инструктирует экранное устройство игнорировать этот контент. – ckundo

ответ

2

Я не понимаю, почему вы не хотите изменять фактический текст ссылки, если пункт назначения выполняет разные действия. Или используйте фактическое изображение в качестве значка (поскольку оно передает смысл, а не чисто декоративно), и используйте для этого текст alt.

+0

У меня был тот же вопрос, но я просто следую заказам. –

+1

Старый вопрос, конечно, но наш прецедент предназначен для разбивки на страницы. мы хотим, чтобы считыватели экрана читали «Страница 1, Страница 2, Страница 3», но пользователи видят только текст ссылки: 1 2 3 (это совпадение, что оба места показывают числа. Вопрос верный, должен быть тривиальный и стандартизованный способ чтения с экрана чтения значения из специального атрибута тега вместо значения содержимого самого тега без добавления внутренней оболочки «». – JamesWilson

2

Поскольку значки имеют значение, вы должны включить их, используя img. Затем используйте атрибут alt. Возможно, вам придется переформулировать некоторые фразы, например. когда вам нужно выразить «Добавить элемент меню» значком «добавить», вам нужно будет использовать «пункт меню» (вместо «меню») для ссылки.

<a href="/add"><img src="add-icon.png" alt="Add"> menu item</a> 

Альтернативой использованию img будет использовать CSS для отображения значков и визуально скрыть полный текст ссылки, так что это только для чтения пользователям для чтения с экрана (или тех пользователей, которые дезактивируют CSS) , Здесь вы можете использовать clip method.

<a href="/add"><span class="visually-hide">Add</span> menu item</a> 
6

попробовать

< A HREF = "/сохранить " арии-метку = " Пут " > < пролет арий скрытого = " истинных " > Сохранить </SPAN > </а >

+0

NVDA, похоже, игнорирует арию -hidden ... поэтому всегда дает преимущество в тексте ссылки –