[번역] Invisible Content Just for Screen Reader Users

Introduction

There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Verbose cues or instructions that are only read by screen reader users usually do more harm than good. However, there are a few cases where information or meaning is apparent visually but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but have the content remain invisible to sighted users.

가끔은 시작 장애인을 위해 숨겨진 컨텐츠를 시각적으로 볼 수 있는 사용자에게는 숨겨야 할 때가 있습니다. 대부분의 경우, 시각적으로 이용가능한 컨텐츠는 스크린 리더 사용자들에게 이용 가능해야 하며, 반대의 경우도 마찬가지 입니다. 스크린 리더 사용자만 읽을 수 있는 장황한 힌트나 지시사항은 종종 오히려 해를 끼칠 수 있습니다. 그러나 정보나 의미가 시각적으로는 명백하지만 스크린 리더 사용자들에게는 그렇지 않는 몇몇 경우가 있습니다. 이러한 드문 경우에, 컨텐츠가 스크린 리더에 의해 읽히지만 볼 수 있는 사용자에게 시각적으로 보이지 않도록 할 수 있습니다. 

 

Techniques for hiding content

There are several mechanisms that can be used for hiding content. It's important that a technique be implemented that results in the desired outcome and accessibility.

컨텐츠를 숨기데 사용되는 여러 매커니즘이 있습니다. 원하는 결과와 접근성을 달성할 수 있는 기술을 구현하는 것은 중요합니다.

 

display:none or visibility: hidden

These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you want hidden from all users.

이 스타일들은 모든 사용자로부터 컨텐츠를 숨깁니다. 컨텐츠는 페이지의 시각적 흐름에서 제거되며 스크린 리더에 의해 무시됩니다. 만약 컨텐츠가 스크린 리더에 읽히길 원한다면 이 CSS를 사용하지 마세요. 그러나 모든 사용자로부터 숨기고 싶은 컨텐츠에는 사용하세요.

 

hidden attribute

The HTML hidden attribute is relatively new and not supported on older browsers like IE11. When supported, it functions the same as CSS display:none—elements with this attribute will not be presented to any user.

HTML hidden 속성은 비교적 최신이며, IE11 처럼 오래된 브라우저에서는 지원되지 않습니다. 해당 속성이 지원되는 경우, 이 속성을 가진 요소는 사용자에게 나타나지 않으며 CSS 'display: none'과 동일하게 동작합니다. 

 

width:0px, height:0px or other 0 pixel sizing techniques (not recommended)

An element with no height or width, whether defined in HTML or CSS, is typically removed from the flow of the page, so most screen readers will not read it. Do not size content to 0 pixels if you want the content to be read by a screen reader. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All these techniques may result in search engine penalties as they may be interpreted as malicious.

HTML이나 CSS에서 높이나 너비가 없는 요소는 일반적으로 페이지 흐름에서 제거되어서 대부분의 스크린 리더가 읽지 않습니다. 컨텐츠가 스크린 리더에 의해 읽혀져야 한다면 컨텐츠를 0픽셀 크기로 지정하지 마세요. font-size나 line-height가 0px로 스타일링된 컨텐츠는 동작할 수 있지만, 여전히 요소는 화면의 가로 공간을 차지합니다. 이러한 기술들은 악의적으로 해석되어 검색엔진 패널티를 받을 수 있습니다.

 

text-indent: -10000px;

This approach moves the content to the left 10000 pixels - thus off the visible screen. Screen readers will still read text with this style.

이러한 접근은 컨텐츠를 왼쪽으로 10000px 이동시키므로 보이는 화면에서 벗어납니다. 스크린 리더는 여전히 이 스타일을 가진 텍스트를 읽습니다. 

 

However, if a link, form control, or other focusable element is given this style, the element would be focusable, but not visible on the page—sighted keyboard users would likely be confused. This approach may be a viable option if the element does not contain navigable elements, though better techniques are available.

그러나, 링크, 폼 컨트롤, 또는 다른 포커스 가능한 요소에 이 스타일을 적용하면, 요소는 포커싱 될 수 있지만 페이지에서는 보이지 않습니다. 키보드를 사용하는 비시각장애인은 혼란스러워 할 수 있습니다. 이러한 접근 방식은 요소에 탐색 가능한 요소가 포함되어 있지 않은 경우에만 적합한 옵션일 수 있지만 더 나은 기술이 있습니다. 

 

Absolutely positioning content off-screen

The following are the recommended styles for visually hiding content that will be read by a screen reader.

다음은 스크린 리더에 의해 읽히지만 컨텐츠를 시각적으로 숨기는데 권장되는 스타일입니다.

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

 

The .sr-only CSS class ("sr-only" meaning "screen reader only", though the class name does not really matter) should then be referenced from within the tag of the element being hidden, as shown:

.sr-only CSS 클래스('sr-only는 'screen reader only'를 의미 하지만 클래스 이름은 중요하지 않습니다)는 숨겨진 요소의 태그 내에서 참조되어야 합니다. 

 

<div class="sr-only">This text is hidden.</div>

Sighted users will not see the hidden content at all—it will be hidden well to the left of the visible browser window. Because it is still part of the page content, screen readers will read it.

비시각장애인 사용자들은 숨겨진 컨텐츠를 전혀 보지 못할 것입니다. 숨겨진 컨텐츠는 보이는 브라우저 윈도우의 왼쪽에 잘 숨겨질 것 입니다.

 

Let's analyze the styles in detail. position:absolute; tells the browser to remove the element from the page flow and to begin positioning it. left:-10000px; moves the content 10000 pixels to the left. top:auto; tells the browser to position the content vertically at the same location it was originally. width:1px;, height:1px; and overflow:hidden; tell the browser to make the element one pixel in size and to visually hide everything that does not fit into that pixel—this is useful in instances where positioning may be end-user disabled, but all other styles remain enabled.

스타일들을 상세하게 분석해봅시다. 'position: absolute'는 브라우저에게 요소를 페이지 흐름에서 제거하고 위치를 조정하도록 지시합니다. 'left: -10000px'은 컨텐츠를 왼쪽으로 10000px 이동시킵니다. 'top: auto'는 브라우저에게 컨텐츠를 수직으로 원래 위치에 배치하도록 지시합니다. 'width:1px'과 height: 1px', 그리고 'overflow: hidden'은 브라우저가 요소를 1px 크기로 만들고 해당 px에 맞지 않는 모든 내용을 시각적으로 숨기도록 합니다. 이는 위치를 지정하는 것이 사용자에게 비활성화 되었지만, 다른 모든 스타일은 활성화 된 경우에 유용합니다.

 

Note
Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.

링크, 폼 컨트롤과 같은 탐색가능한 요소는 화면 밖에 숨기면 안됩니다. 해당 요소들은 여전히 키보드를 사용하는 비시각장애인들이 탐색할 수 있지만 해당 요소들이 키보드 포커스를 받으면 시각적으로 보여지도록 스타일이 지정되지 않는다면 보이지는 않습니다. 

 

 

CSS clip

{
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

이 비교적 현대적인 기술은 1px의 가시적 영역에 맞지 않는 컨텐츠를 숨기거나 자릅니다. 스크린 밖의 컨텐츠 처럼 시각적으로는 숨겨지지만 현대 스크린 리더로는 여전히 읽을 수 있습니다.

 

Examples

Below are examples where off-screen or clipped content might be used to improve accessibility.

아래는 스크린 밖에 있거나 잘린 컨텐츠가 접근성을 향상시키기 위해 사용되는 예시입니다.

 

Important

Use these techniques judiciously! Keep in mind that many screen reader users have some vision—what they see and what they hear should typically be in harmony. In general, screen reader-only content should be reserved for information is apparent visually but not apparent to blind screen reader users.

이러한  기술들을 신중하게 사용하세요! 많은 스크린 리더 사용자들이 어느정도 시력을 가지고 있기 때문에 그들이 보고 듣는 것은 보통 조화를 이뤄야합니다. 보통, 스크린 리더 전용 컨텐츠는 시각적으로는 명확하지만 스크린 리더 사용자에게는 명확하지 않기에 필요합니다.

 

 

Instructional cues and indicators

One fairly common use case for screen reader-only content is a search text input that is readily identified visually as a search field due to its position on a page and adjacent search button, but for which adjacent text is not provided. A hidden, associated <label> element with "Search terms" (or similar) text would ensure that the field is properly identified to screen reader users.

screen reader-only 컨텐츠의 일반적인 사용 사례 중 하나는 시각적으로 검색 필드로 인식되는 검색 텍스트 입력 상자입니다. 이는 페이지에서의 위치와 검색 버튼과의 인접성 때문에 시각적으로 쉽게 확인할 수 있지만 인접한 문자는 제공되지 않습니다. '검색어' 또는 이와 유사한 문자가 숨겨진 관련 label 요소는 필드가 스크린 리더 사용자들이 해당 필드를 올바르게 인식할 수 있도록 보장합니다. 

 

Another use case might be page breadcrumbs (such as the "Home > Articles > CSS in Action..." text near the top of this page). These are a common convention due to their visual location and presentation. Because a screen reader accesses the breadcrumb links and content linearly, it may not be readily apparent to them that it is breadcrumbs. As such, hidden text of "You are here:" has been added just prior to the breadcrumbs to provide a cue/indicator to screen reader users about what follows.

또 다른 사용사례는 페이지의 경로표시(페에지의 상단에 있는 "Home > Articles > CSS in Action..."와 같은 문자)입니다. 이들은 시각적 위치와 표시 방식 때문에 흔한 규칙입니다. 스크린리더는 경로 표시 링크와 컨텐츠를 선형적으로 접근하기 때문에 스크린 리더 사용자들에게 이들이 경로 표시임을 명확히 알리는 것은 쉽지 않을 수 있습니다. 따라서 '당신은 여기 있다: '라는 숨겨진 문자가 경로 표시 바로 앞에 추가하여 스크린 리더 사용자들에게 다음에 오는 것이 무엇인지에 관해 알려줍니다.

 

"Skip" links

"Skip to main content" or "Skip navigation" links are one of the few places where accessibility has a potentially negative impact on visual design and usability for some users. To be useful, the "skip" link should be one of the first on the page. Designers may balk at the idea of providing such a prominent link—particularly when that link will not be used by most site visitors. However, hiding the "skip" link visually using a technique above makes it much less usable to sighted keyboard users—a user group that can greatly benefit from this link.

'메인 컨텐츠로 건너뛰기'나 '탐색 건너뛰기' 링크는 접근성이 시각적 디자인과 일부 사용자의 사용성에 부정적인 영향을 미칠 수 있는 소수의 경우 중 하나입니다. '건너뛰기' 링크가 유용하려면 페이지의 상단에 위치해야합니다. 디자이너들은, 특히 대부분의 사이트 방문자가 링크를 사용하지 않을 때, 이런 눈에 띄는 링크를 제공해야 한다는 생각에 반감을 가질 수 있습니다. 그러나,  위에 설명한 기술을 사용해 '건너뛰기' 링크를 시각적으로 숨기면 이 링크로 수혜를 받는 키보드를 사용하는 비시각장애인에게 훨씬 더 사용하기 어렵게 만듭니다. 

 

One way to reconcile this conflict is to visually hide the link until the user tabs to it at which point it becomes visible to sighted users.

이러한 문제를 해결하는 한 가지 방법은 사용자가 해당 링크로 탭을 이동할 때까지 시각적으로 링크를 숨기고, 그 시점에 비시각장애인에게 보이도록 하는 것입니다. 

 

This technique uses two style definitions—one to visually hide the link, and another using the a:focus pseudo-class to visually reveal the link while it has focus.

이 기술은 시각적으로 링크를 숨기고 링크가 포커스 되었을 때, 시각적으로 나타내기 위해 가상 클래스인 'a:focus'를 사용하는 두 가지 정의를 사용합니다. 

 

#skip a {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
 
#skip a:focus {
	position:static;
	width:auto;
	height:auto;
}

 

These styles should then be applied to the "skip" link:

이 스타일들은 'skip'링크에 적용됩니다.

 

<div id="skip">
	<a href="#content">Skip to Main Content</a>
</div>

 

One possible drawback to this approach is that the sudden appearance of a link that was previously invisible will be unexpected and could potentially confuse the sighted keyboard user. The WebAIM.org site address this by implementing CSS transitions to animate the focused "skip" link from above the top of the page (as opposed to off-screen left) to the top left corner of the page, then back above the page when focus is lost. This ensures that the link is highly visible on screen for a longer period of time. You can see this in action by pressing the "Tab" key with focus at the top of this page.

이러한 접근 방식의 한 가지 단점은 이전에 보이지 않았던 링크가 갑자기 나타나면 키보드를 사용하는 비시각장애인들을 혼란스럽게 할 수 있다는 점입니다. WebAIM.org 사이트는 CSS 전환을 사용해 포커스된 '건너뛰기' 링크에 (화면 왼쪽이 아닌) 페이지 상단에서 페이지 왼쪽 코너 상단으로 애니메이션화 하고 포커스를 잃으면 다시 페이지 위로 이동하도록 구현해 이를 해결합니다. 이는 링크가 오랬동안 스크린에서 잘 보이도록 합니다. 이 페이지의 상단에서 tab 키를 눌러 이 기능을 확인할 수 있습니다.

 

 

reference)

WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users