Gutenberg: 인라인 경계 개선

이 기능이 마음에 들고 입력 위치를 이해하는 데 큰 도움이 될 것 같습니다.

그러나 Safari 10 + VoiceOver로 빠르게 테스트하면 링크 경계가 다음과 같이 읽힙니다.
link zero width no break space
또는 그와 비슷한 것입니다. 영어 원어민이 아니라 죄송합니다 🙂

한 가지 옵션은 Slack 에서 @spocke 가 언급한 것일 수 있습니다.

aria 태그로 범위를 감싸야 할 수도 있습니다.

문자나 단어로 탐색할 때 스크린 리더는 링크를 입력할 때 이미 link 를 표시하지만 링크를 종료할 때 아무 것도 알리지 않으므로 보조 기술에서 zwnbsp 문자를 숨기면 잘 작동합니다.

@afercia 이것에 대한 조사를 했습니다.

캐럿이 내부/외부에 있을 때 앵커로 정규화되지 않도록 하려면 브라우저가 기본 작업을 수행하지 못하도록 하는 무언가를 삽입해야 합니다. 기본적으로 문서의 BOM 서명을 제외하고는 더 이상 사용되지 않는 보이지 않는 문자이기 때문에 너비가 0이 아닌 줄 바꿈 공백을 사용합니다. 이 문자는 Jaws에서 무시되는 것처럼 보이지만 VoiceOver 및 NVDA에서는 사용됩니다.

다양한 방법으로 이 문제를 해결하려고 했습니다.

1. 대부분의 화면 판독기에서 만족스럽게 무시하는 속성 때문에 캐릭터를 aria 역할 및 속성이 있는 스팬으로 변경하면 작동하지 않습니다. 편집기 컨텍스트에 있기 때문에 관련성이 없다고 생각합니다. role="presentation" aria-hidden="true" 및 aria-label="abc"를 시도했지만 Jaws 외에는 아무 일도 일어나지 않았습니다.
2. 예약된 유니코드 범위 \ue000을 시도했습니다. 이것은 아이콘 등을 위해 예약되어 있으며 스크린 리더에서 말해서는 안 됩니다. 이것을 말하지는 않지만 브라우저 선택 정규화 논리에서도 무시되므로 사용할 수 없습니다.
3. aria-live="assertive"로 role="status" 요소를 추가하고 기본적으로 wp.a11y.speak가 하는 일에 텍스트를 푸시하고 VoiceOver에서는 대기열을 취소하지만 NVDA에서는 취소하지 않으며 Jaws에서는 약간 이상해 보입니다. 사양에 따르면 대기열을 취소할 수 있으므로 어떤 일이 일어나는지 무작위라고 생각합니다. 그러나 이것은 캐럿이 링크의 시작, 끝, 전후 또는 우리가 처리하는 위치이기 때문에 캐럿이 어디에 있는지 사용자에게 알려주는 것이 가장 합리적일 것입니다. 그러나 일부 스크린 리더는 여전히 우리가 그것에 대해 많은 것을 할 수 있는지 확신하지 못하는 이상한 문자 코드를 말할 것입니다.

요약하자면 복잡합니다. :)

이 티켓에 나열된 항목을 수정했습니다. 그래서 나는 이것을 닫는다.