나는 정렬되지 않은 목록에 포함 된 링크가 있습니다. 가능하고, 어떤 속성으로, 실제 링크 텍스트를 변경하지 않고 그것을 변경할 수 있습니까?링크 텍스트 대신 속성을 사용하도록 화면 판독기에 알리는 방법은 무엇입니까?</p> <pre><code><li class="savelink"> <a href="/save"><span>Save</span></a> </li> </code></pre> <p>는 일반적으로 화면 판독기는 "저장"을 읽어 다음과 같이
비즈니스 요구 사항은 아이콘 스타일의 링크가 있어야합니다. 아이콘은 링크 텍스트를 보완합니다. 예 :
나는 아리아 레이블을 사용했지만 성공하지 못했습니다.
목적지가 다른 작업을 수행하는 경우 실제 링크 텍스트를 변경하지 않으려는 이유를 이해할 수 없습니다. 또는 실제 이미지를 아이콘으로 사용하십시오 (순수한 장식이 아닌 의미를 전달함) alt 텍스트를 사용하십시오.
나는 같은 질문을했지만 명령을 따랐다. –
오래된 질문이지만, 우리의 유스 케이스는 페이지 매김이다. 우리는 스크린 리더가 "페이지 1, 페이지 2, 페이지 3"을 읽길 원하지만 사용자는 링크 텍스트 만 볼 수 있습니다 : 1 2 3 (두 위치가 숫자를 나타내는 것은 우연의 일치입니다.) 질문은 유효한 것이고 사소하고 화면 판독기가 내부 래퍼 '
아이콘은 의미를 전달하므로 img을 사용하여 아이콘을 포함해야합니다. 그에 따라 alt 속성을 사용하십시오. 몇 가지 구절을 다시 써야 할 수도 있습니다. '추가'를 나타내는 아이콘이있는 '메뉴 항목 추가'를 표현해야하는 경우 '메뉴'대신 '메뉴 항목'을 사용해야합니다. 그것은 단지 스크린 리더 사용자 (또는 CSS를 비활성화하는 사용자)에게 책을 읽어되도록
<a href="/add"><img src="add-icon.png" alt="Add"> menu item</a>
img를 사용하는 대안은 전체 링크 텍스트를 숨길 . 여기에서
clip method을 사용할 수 있습니다.
<a href="/add"><span class="visually-hide">Add</span> menu item</a>
시도
< A HREF = "/" 아리아 라벨 = " POOT을 저장 " > < 범위 아리아 - 숨겨진 = " 사실 " > 저장 </스팬 > </A >
NVDA는 아리아를 무시하는 것처럼 보입니다 -hidden ... 따라서 항상 링크 텍스트에서 우선권을 갖습니다. –
여기에 유스 케이스는 무엇입니까? 왜 이렇게하려고하는지 알면 몇 가지 해결책을 제안 할 수 있습니다. – steveax
은 본문 본문에 대한 추가 정보를 제공합니다. 기본적으로 우리는 동일한 텍스트를 가진 일련의 링크를 가지고 있지만 아이콘은 동작을 구분합니다. 예 : "new menu" "delete menu"(아이콘 : new, delete, 링크 텍스트 : menu) –
NVDA는 특히 적극적으로 의도적으로 링크 텍스트를 우선합니다. @Steve Faulkner의 솔루션을 사용하면 화면 판독기가 해당 내용을 무시하도록 명시 적으로 지시합니다. – ckundo