NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


WCAG 2.1 Working Draft 제안된 성공 기준 리뷰.(수정/삭제 가능성 높음)

본문 건너 뛰기

WCAG 2.1 Working Draft 새로운 성공 기준 리뷰. 포스트에 이어 아직 새로운 성공 기준으로 승인하지는 않았지만 제안된(검토중인) 성공 기준 25개(2017년 2월 28일 버전)를 리뷰합니다. 이 항목들은 현재 논의 중인 내용으로써 나중에 크게 달라지거나 삭제할 수 있는 항목들입니다. 이해의 폭을 넓히는 의미에서 재미로 보세요. 제안 내용에 찬성/반대 의견이 있는 경우 github 에서 의견을 제시할 수 있습니다. 제안 항목이 새로운 성공 기준으로 승인되는 경우 WCAG 2.1 Working Draft 새로운 성공 기준 리뷰. 포스트로 내용을 옮길 예정입니다.

제안된 성공 기준(25개)

1.3.4 Support Personalization (minimum)(Level A)

Contextual information and author settable properties of regions, critical features and important information are programmatically determinable so that personalization is available.

Exception: Information does not need to be exposed when there is not a standardized technique of exposing it in the technology or the platform.

1.3.4 개인화 지원(최소)(수준 A)

문맥 정보와 저자가 설정할 수있는 영역의 속성, 중요 기능 및 정보는 프로그래밍 방식으로 결정하여 개인화 한다.

예외 : 기술이나 플랫폼에서 정보를 드러내는 표준화 된 기술이없는 경우 정보를 드러낼 필요가 없다.

// 해설: 표준화된 기술 즉 ‘의미론적 마크업과 WAI-ARIA 기술’을 사용하여 의미와 접근성 정보를 필요로하는 사람에게 제공해야 한다는 맥락으로 이해할 수 있습니다. 시각 장애인이 main 요소에 의해 또는 role=”main” 속성에 의해 콘텐츠의 본문 영역을 인지했다면 개인화 되었다고 간주하는 것입니다. 정적인 페이지에서는 의미론적 마크업을 하는 경우 대부분의 개인화 문제는 해결됩니다. 그러나 RIA(Rich Internet Application) 기술을 사용하는 경우, 예를 들면 실시간으로 내용을 갱신하는 채팅 영역에는 aria-live=”log” 과 같은 속성을 사용해야 할 것입니다.

1.4.10 Linearization(Level A)

A mechanism is available to view content as a single column, except for parts of the content where the spatial layout is essential to the function and understanding of the content.

1.4.10 선형화(수준 A)

기능과 내용을 이해하는 데 공간 레이아웃이 필수적인 콘텐츠 부분을 제외하고 콘텐츠를 단일 열로 볼 수있는 메커니즘을 제공한다.

// 해설: 저시력자는 보통 화면을 확대 상태로 보기 때문에 2열 이상의 레이아웃 페이지를 볼 때 어려움을 격습니다. 웹 개발자는 반응형 웹 또는 가변폭 레이아웃을 적용하여 단일 컬럼 보기 기능을 제공해야 합니다. 화면을 확대하는 경우 가로 스크롤 없이 단일 컬럼으로 레이아웃이 변경된다면 이 요구사항을 만족하는 것으로 이해할 수 있습니다.

1.4.13 Printing(Level AA)

If content can printed, the following are true:

Resized:
Content can be resized up to 200% without loss of content or functionality;

Changes Reflected:
User changes to letter spacing, line spacing, font family, and color are reflected in the printed content.

1.4.13 인쇄(수준 AA)

인쇄할 수 있다면 아래 조건을 만족해야 한다.

크기 변경:
내용은 내용이나 기능 손실 없이 200% 크기 변경할 수 있어야 한다.

변경사항 반영:
문자 간격, 줄 간격, 글꼴 모음 및 색상에 대한 사용자 변경 내용을 인쇄에 반영한다.

// 해설: 이 성공 기준은 대부분의 브라우저에서 이미 지원하고 있습니다. 웹 브라우저는 이미 확대 및 웹 페이지 글꼴 변경 기능을 제공합니다. 이 항목은 유저 에이전트 접근성 지침(UAAG 2.0)에 수록되어야 할 것 같은데요. 한편 이미지 문자는 줄간격이나 색상을 변경할 수 없기 때문에 이 항목을 준수하려면 웹 개발자는 텍스트 콘텐츠를 이미지로 처리하지 않아야 합니다.

1.4.14 User Interface Component Contrast(Minimum)(Level AA)

The visual presentation of essential graphical objects for user interface component(s) or a border line thereof, and the focus and selection indicator(s) of user interface component(s), has a contrast ratio of at least 4.5:1 against the immediate surrounding color(s), except for the situations listed below:

Thicker:
A contrast ratio of 3:1 is required where the minimum width and height are at least 3 CSS pixels, for either the graphical object or (one of) their border line(s).

Inactive:
Disabled or otherwise inactive user interface components are exempt from this requirement. In all other states (including when the page is scrolled) the contrast requirement is applicable.

1.4.14 사용자 인터페이스 구성 요소 명도 대비(최소)(수준 AA)

사용자 인터페이스 구성 요소 또는 그 경계선, 초점, 선택 표시기에 대한 필수 그래픽 객체의 시각적 표현은 인접 색상과 비교하여 명도 대비 비율이 적어도 4.5 : 1입니다. 아래에 나열된 경우 제외:

굵은 :
그래픽 개체 또는 게체의 경계선 너비와 높이가 최소 3 CSS 픽셀 이상인 경우 명도 대비는 3 : 1을 요구합니다.

비활성 :
비활성 사용자 인터페이스 구성 요소는 이 요구 사항에서 제외됩니다. 다른 모든 상태(스크롤 페이지 포함)에는 명도 대비 요구 사항을 적용합니다.

// 해설: 링크와 폼 콘트롤 요소에 대한 명도 대비 가이드라인입니다. 텍스트와 그래픽 개체에 대한 명도 대비와 같은 맥락으로 이해하면 됩니다. 두께가 3px 미만인 시각적 요소에 4.5:1 이상의 명도 대비를 제공하면 됩니다. 예를 들어 인풋 보더의 두께가 1px 이라면 4.5:1 수준의 명도 대비를 제공하거나 또는 인풋의 배경색을 본문 배경색 대비 3:1 수준으로(인풋은 보통 3px을 훌쩍 초과하므로) 제시하면 됩니다.

1.4.15 Adapting Text(Level AA)

No loss of content or functionality on a webpage is caused by overriding:

  1. font family to Verdana, or
  2. foreground and background to white on black, or
  3. line height of all text to 1.5, letter spacing to 0.12 em, and word spacing to 0.16 em.

1.4.15 문자 조정(수준 AA)

웹 페이지의 내용 또는 기능은 아래와 같은 덮어쓰기에 의해 손실이 없어야 한다.

  1. 글꼴을 Verdana로 설정하거나
  2. 흰 문자와 검정 배경색을 적용하거나
  3. 모든 문자의 줄간격을 1.5로, 자간을 0.12em으로, 단어 사이 간격을 0.16em으로 조정했을 때

// 해설: 웹 브라우저가 지원하는 사용자 정의 스타일(CSS 덮어쓰기)을 통해 내용이나 기능에 손실이 발생하면 안 된다는 의미입니다. 저시력자가 웹 브라우저의 사용자 정의 CSS 스타일을 사용할 때 방해하지 않아야 한다는 것을 의미합니다. 예를 들어 body 요소 내부 콘텐츠를 완전히 감싸는 .container 라는 래퍼에 흰색으로 처리된 배경 이미지를 설정했다면 사용자가 body 요소에 검정 배경색을 적용해도 검정 배경색이 드러날 수 없는 상태가 됩니다. 이 상황에서는 문자와 배경색이 모두 흰색이므로 내용을 인지할 수 없습니다. 일반적으로 .container 요소는 사용자가 배경색을 덮어 쓸 수 없거나 덮어쓰기 어려운 요소입니다.

1.4.16 Popup Interference(Level AA)

For informational content that appears on hover or focus, one of the following is true:

Turn Off
The informational content can be turned off

Not obscure
The informational content does not obsure the triggering content

1.4.6 팝업 간섭(수준 AA)

호버 또는 포커스로 표시하는 정보 콘텐츠는 다음 중 하나를 준수해야 한다.

끄기
정보 콘텐츠는 끌 수 있어야 한다.

가리지 않음
정보 콘텐츠는 트리커 콘텐츠를 보기 어렵게 하면 안 된다.

// 해설: 클릭 아닌 호버 또는 포커스로 표시하는 팝업 콘텐츠는 화면 확대 상태에서 사용하기 어렵습니다. 예를 들면 마우스 포인터를 따라 줌 처리된 화면을 이동 시키는 경우 트리거 콘텐츠는 호버 상태에서 벗어나기 때문에 팝업 콘텐츠가 닫히게 됩니다. 또한 팝업 콘텐츠가 트리거에 해당하는 내용을 가리는 경우 트리거와 팝업을 동시에 보면서 맥락 파악하는 것을 방해합니다. 따라서 팝업 콘텐츠를 적어도 끌 수 있도록 하거나 또는 현재 맥락과 관련된 내용을 덮으면 안 된다는 의미입니다. title 속성으로 유저 에이전트가 표시하는 풍선 도움말은 해당하지 않습니다.

2.6.1 Device Sensors(Level A)

All functionality of the content can be operated without requiring specific device sensor information unless the device sensor is essential for the function and not using it would invalidate the activity.

2.6.1 장치 센서(수준 A)

장치 센서가 기능에 필수적이거나 또는 사용하지 않는 것이 활동을 무효로 만들지 않는 한 특정 장치 센서 정보를 요구하지 않고도 컨텐츠의 모든 기능을 작동할 수 있어야 한다.

// 해설: 장치 센서란 장치의 기울기, 방향, 근접(예를 들면 Near Field Communication)과 같은 추가적인 입력을 의미합니다. 이런 장치 센서를 이용하는 것이 불가피한 경우를 제외한다면 기본적인 입력장치(예를 들면 마우스, 키보드, 터치) 만으로도 콘텐츠를 이용할 수 있어야 한다는 것을 의미합니다. 예를 들어 장치를 왼쪽 또는 오른쪽으로 살짝 흔드는 동작이 이전 슬라이드와 다음 슬라이드 탐색을 의미한다면 터치(또는 클릭, 방향키) 또는 터치 무브입력(또는 클릭 드래그)으로도 동일한 기능을 수행할 수 있어야 합니다.

2.1.4 Speech Input(Level A)

All functionality of the content does not obstruct a user’s ability to access the commands through speech input.

2.1.4 말하기 입력(수준 A)

콘텐츠의 모든 기능은 사용자의 말하기 입력을 통한 접근 제어를 차단하지 않아야 한다.

// 해설: 이 지침은 음성 입력장치를 사용하는 사람의 편의를 보장합니다. 만약 “전송” 이라고 표시되어 있는 [submit] 버튼에 굳이 필요는 없지만 aria-label=”확인” 이라는 속성을 실수로 달았다면 말하기 입력 장치로 “확인”을 말하는 순간 이 버튼은 초점을 받거나 실행될 수 있습니다. 이런 경우 aria-label은 화면에 드러나지 않기 때문에 사용자는 왜 이런 일이 발생했는지 알 수 없게 됩니다. 웹 개발자는 가능한 숨은 레이블 작성을 최소화하고 숨은 레이블을 제공하는 경우 화면에 표시하는 레이블과 일치하는지 확인해야 합니다.

2.2.6 Timeouts(Level A)

Where content can time out, the content must also conform to all of the below:

Loss of data
The user can easily return to the same point in a task, without data loss, for a period of at least one week as the default, or via a user-settable option available throughout the task. If the data will only be preserved for a limited time, the user is informed of the length of time that data are preserved at the start of the task.

Timing adjustable
The function to turn off, adjust, or extend timing is controlled by a simple action, and is labeled with simple, understandable language.

Aware
The user is informed of timeout limits at the start of the task, including the length of the warning.

2.2.6 시간 제한(수준 A)

콘텐츠에 시간 제약이 있는 경우 아래 항목을 모두 확인해야 한다.

데이터 손실
사용자는 최소한 1주일 동안은 데이터 손실 없이 또는 작업 전반에 걸쳐 사용자가 설정할 수 있는 옵션을 통해 과업의 동일한 지점으로 쉽게 되돌아 올 수 있어야 한다. 데이터가 제한된 시간 동안 만 보존되는 경우 데이터가 보존되는 시간을 과업을 시작할 때 사용자에게 알려야 한다.

시간 조절
시간 제한 끄기, 조절하기 또는 연장하기 기능은 쉽게 제어할 수 있어야 하고 이해할 수 있는 언어로 단순하게 설명해야 한다.

인지
과업을 시작할 때 시간의 길이를 포함한 시간 제한을 사용자에게 알려야 한다.

// 해설: 이 지침은 WCAG 2 가이드라인 “2.2.1 시간 조절: 콘텐츠에 시간 제한이 설정되어 있다면 최소한 다음중 하나를 만족해야 한다: (수준 A)” 항목을 업데이트 하는 제안입니다. 기존 지침과 다른 부분은 최소한 1주일 동안 데이터 손실이 없도록 하거나, 데이터를 보존하는 옵션을 제공하거나, 데이터 보존 시간을 과업 시작할 때 알려야 한다는 점입니다.

2.2.7 Animation from interactions(Level A)

For significant animations triggered by a user action that is not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animations while still performing the same action.

2.2.7 상호작용 애니메이션(수준 A)

비필수적 사용자 액션에 의해 유발되는 의미있는 애니메이션의 경우 사용자가 동일한 액션을 수행하면서 애니메이션을 일시 중지, 중단 또는 숨길 수있는 메커니즘이 있어야 한다.

// 해설: 이 문장의 앞 부분은 정확히 이해하기 어렵네요. “For significant animations triggered by a user action that is not an essential part of the action” 이 부분을 “비필수적 사용자 액션에 의해 유발되는 의미있는 애니메이션’ 이라고 해석했는데 “비필수적 사용자 액션”의 의미를 잘 모르겠어요. 어쨌든 아래 조건이 모두 참이면 실패라고 합니다. “사용자 액션에 의해 애니메이션이 실행되고, 불필요한 애니메이션이면서, 3초 이상 지속되고, 사용자 액션에 동기화 되어 있으며, 뷰포트의 1/3 이상 차지하며, 애니메이션 없이 웹 페이지를 이용할 수 없으면” 실패. 심플하게 정리해 보면 애니메이션이 제거된 상태에서도 웹 페이지를 이용할 수 있도록 하고 뷰포트의 1/3 면적으로 3초 이상 지속되는 애니메이션을 중단하는 방법을 제공하면 문제가 없을 것 같네요.

2.4.11 Single-key Shortcuts(Level A)

Single-character shortcuts are not the only way activate a control, unless a mechanism is available to turn them off or remap them to shortcuts with two or more characters.

2.4.11 단일 문자 단축키(수준 A)

둘 이상의 문자 키로 다시 매핑 할 수 있도록 하거나 단일 문자 단축키를 끄는 메커니즘이 아닌 한 단일 문자 단축키는 컨트롤을 활성화하는 유일한 방법이 아니어야 한다.

// 해설: 단일 문자 단축키를 사용하는 경우 음성 입력장치 사용자가 의도하지 않은 액션을 실행할 우려가 있습니다. 예를 들어 “s” 키가 현재 페이지 양식을 저장 하도록 맵핑되어 있다면 음성 입력장치 사용자가 실수로 “s” 또는 “stop” 이라고 말했을 때 현재 페이지 양식이 저장될 수 있는 것입니다. HTML이 제공하는 accesskey 속성은 Alt 키와 동시에 눌러야 실행하기 때문에 이 경우는 해당사항이 없고 자바스크립트 기술로 인위적으로 단일 문자 단축키를 맵핑한 경우 이런 문제가 발생할 수 있습니다.

2.5.1 Target Size(Level A)

The size of the target in relation to the visible display at the default viewport size is at least:

  • 44 px by 44 px for pointer inputs with coarse pointing accuracy (such as a touchscreen)
  • 22 px by 22 px for pointer inputs with fine pointing accuracy (such as a mouse, trackpad or stylus)

where px is a CSS pixel when the page is using the device ideal viewport.

Except when a link or control:

  • is not part of the primary purpose or function of the page OR
  • has an alternative link/control whose target does meet the minimum size requirements

2.5.1 타겟 크기(수준 A)

기본 뷰포트 크기에서 보이는 디스플레이와 관련하여 타겟의 크기는 최소한 다음과 같다.

  • 거친 지시 정확도(예: 터치 스크린)가 있는 포인터 입력의 경우 44*44px
  • 마우스, 트랙 패드 또는 스타일러스와 같은 정밀한 포인팅 정확도가있는 포인터 입력의 경우 22*22px

여기서 px은 페이지가 이상적인 뷰포트 장치를 사용할 때 CSS 픽셀이다.

다음 링크 또는 콘트롤 제외:

  • 페이지의 주요 목적 또는 기능 일부가 아니거나
  • 대상이 최소 크기 요구 사항을 충족시키는 대체 링크/컨트롤을 가지고 있을 때.

// 해설: 여기서 타겟이란 링크 또는 폼 콘트롤 요소를 의미합니다. 이 항목의 수치는 iOS 앱 디자인 가이드라인(44px)과 Android 앱 디자인 가이드라인(48px) 으로부터 참조된 것입니다. 한편 본문 텍스트에 포함된 텍스트 링크인 경우 이 지침을 만족하기 어려운 부분이 있어서 많은 논의가 오가고 있습니다. 본문 텍스트 링크는 제외하도록 다듬어져야 하지 않을까 생각합니다.

2.6.2 Orientation(Level AA)

Content is not locked to a specific orientation, and functionality of the content is operable in all orientations, except where orientation is essential for use of the content.

2.6.2 방향(수준 AA)

방향이 콘텐츠 사용에 필수적인 경우를 제외하고 콘텐츠가 특정 방향으로 고정되어 있지 않아야 하고 모든 방향에서 콘텐츠 기능을 사용할 수 있어야 한다.

// 해설: 가로 모드 또는 세로 모드에서 모두 사용할 수 있어야 한다는 것을 의미합니다. 휠체어 장치에 휴대폰을 세로로 고정한 사람은 가로 모드에서만 동작하는 콘텐츠를 이용할 수 없습니다. 화면 상단에 헤더 콘텐츠를 고정(CSS position:fixed)하는 경우 가로 모드에서 온스크린 키보드가 열리면 본문 콘텐츠를 볼 수 없게 됩니다. 넓은 고정폭 콘텐츠는 좁은 세로 화면에서 가로 스크롤을 유발하기 때문에 불편하게 됩니다. 웹 개발자는 가로 모드에서 고정 헤더를 제거해야 하고 다양한 크기의 작은 단말에 대응하는 가변폭 레이아웃을 사용해야 합니다.

2.5.2 Pointer inputs with additional sensors(Level A)

All pointer functionality can be operated using screen coordinate information, without requiring additional pointer sensor information.

2.5.2 추가 센서를 동반한 포인터 인풋(수준 A)

모든 포인터 기능은 추가 포인터 센서 정보없이 화면 좌표 정보를 사용하여 조작 할 수 있어야 한다.

// 해설: 추가 포인터 센서란 ‘압력, 기울기, 비틀기’와 같은 입력 센서를 의미합니다.

2.5.3 Touch with Assistive Technology(Level A)

All functions available by touch are still available by touch after platform assistive technology that remaps touch gestures is turned on.

2.5.3 보조 기술을 동반한 터치(수준 A)

터치 제스처를 다시 매핑하는 플랫폼 보조 기술이 켜진 후에도 터치로 사용 가능한 모든 기능을 터치하여 계속 사용할 수 있어야 한다.

// 해설: 터치 제스처를 다시 매핑하는 플랫폼 보조 기술이란 예를 들어 아이폰의 보이스 오버와 같은 화면 낭독기 장치를 예로 들 수 있습니다. 아이폰에서 웹 페이지를 볼 때 링크 콘트롤을 탭하면 페이지 이동이지만, 보이스 오버를 켠 경우 좌/우로 쓸어 넘기는 동작으로 이전/이후 링크를 탐색(포커싱)하고 더블 탭으로 링크 이동하도록 다시 매핑되어 있습니다. “보조 기술 없이 사용할 수 있는 모든 터치 기능은 보조 기술을 켰을 때에도 사용할 수 있어야 한다” 정도로 정리할 수 있습니다. 보조 기술을 켜거나 껐을 때 동일한 터치 액션으로 이용할 수 있어야 한다는 의미는 아닙니다.

2.5.4 Pointer Gestures(Level A)

Functionality requiring complex or timed pointer gestures or multi-pointer gestures can also be operated with simple pointer gestures.

2.5.4 포인터 제스처(수준 A)

복잡하거나 시간 제한이 있는 포인터 제스처 또는 다중 포인터 제스처가 필요한 기능은 간단한 포인터 제스처로도 조작 할 수 있어야 한다.

// 해설: 다중 포인터란 두 손가락으로 핀치 줌 인/아웃 하는 것을 의미합니다. 웹 콘텐츠에 적용되는 지침으로 유저 에이전트 또는 보조 기술을 조작하는데 필요한 제스처를 의미하지 않습니다. 화면을 쓸어 넘기거나 두 손가락으로 줌 인/아웃 하는 것은 복잡한 포인터 제스처에 해당합니다. 복잡하거나 시간 제약이 있는 제스처를 포함한 경우 ‘기울임, 압력, 각도’와 같은 추가 센서를 요구하지 않은 상태로 탭 또는 클릭 함으로써 사용 가능해야 합니다.

3.1.7 Plain Language (Minimum)(Level A)

Provide clear and simple language in instructions, labels, navigational elements, and error messages which require a response to continue, so that all of the following are true:

Simple tense
Use present tense and active voice.

Simple, clear, and common words
Use the most common 1500 words or phrases or, provide words, phrases or abbreviations that are the most-common form to refer to the concept in the identified context.

Double negatives
Double negatives are not used.

Concrete language
Non-literal language is not used, or can be automatically replaced, via an easy-to-set user setting. All meaning must be retained when non-literal text is replaced.

Instructions
Each step in instructions is identified.

Exceptions:

  • When a passive voice or a tense (other than present tense) is clearer. Other voices or tenses may be used when it has been shown to be easier to understand, friendlier, or appropriate.
  • In languages where present tense and active voice do not exist, or are not clearer in the language of the content, use the tense and the voice that are clearest for the content.
  • When describing or discussing past or future events, the present tense is not required.
  • If the writing style is an essential part of the main function of the site, such as a game, a literary work, or teaching new terms.
  • Where less common words are easier to understand for the audience.
  • The content will be penalized for not conforming to a given writing style (such as a CV, dissertation, or Ph.D. proposal).
  • If there are no tools available in the language of the content that identify uncommon words, instructions that are longer then 400 words are exempt unless they directly relate to a critical service.

3.1.7 명료한 언어(최소한)(수준 A)

지침, 설명, 탐색 요소 및 계속해서 응답해야하는 오류 메시지에 명확하고 간단한 언어를 제공하여 다음 사항이 모두 참 이어야한다.

단순한 시제
현제 시제와 능동태를 사용한다.

단순, 명료 그리고 일반적인 단어
가장 일반적으로 사용하는 1,500 단어 또는 문구를 사용하거나 식별된 문맥의 개념을 나타내는 가장 일반적인 단어, 구 또는 약어를 제공한다.

이중 부정
이중 부정을 사용하지 않는다.

구체적인 언어
비 문자 언어를 사용하지 않거나 또는 사용자 설정을 통해 쉽게 자동으로 대체할 수 있어야 한다. 비 문자 텍스트를 대체했을 때 모든 의미를 유지해야 한다.

지침
각 지침의 단계를 식별할 수 있다.

예외

  • 수동태 또는 시제(현재 시제는 제외)가 명확 할 때. 동태나 시제는 이해하기 쉽고, 친근하며, 적절하면 사용할 수 있다.
  • 현재 시제와 능동태가 존재하지 않거나 내용의 언어가 명확하지 않으면 내용에 가장 근접한 시제와 동태를 사용한다.
  • 과거 또는 미래 사건을 설명하거나 토론 할 때, 현재 시제는 요구하지 않는다.
  • 작문 스타일이 게임, 문학 작품 또는 새로운 용어를 가르치는 것과 같이 사이트의 주요 기능의 필수적인 부분 인 경우.
  • 덜 일반적인 단어가 독자의 이해를 더 쉽게 만드는 경우.
  • 주어진 작문 스타일(이력서, 논문, 박사 학위)을 따르지 않으면 벌칙을 받는 경우.
  • 흔치 않은 단어를 식별하는 내용의 언어에 적용 가능한 수단이 없으면 중요한 서비스와 직접 관련이 없는 한 400 단어 이상의 지침은 예외.

// 해설: 인지 장애 또는 지적 장애가 있는 사용자를 고려하여 단순, 명료하고 일반적인 어휘를 사용해서 식별 가능성을 높이는 것이 이 지침의 목적입니다.

3.1.8 Manageable Blocks(Level AA)

Statements which instruct a user to make a choice or take an action:

  • have only one instruction per sentence, except when two things have to be done simultaneously;
  • use sentences of no more than 15 words;
  • should have no more than one relative pronoun per sentence.

3.1.8 감당할 수 있는 블럭(수준 AA)

사용자가 선택하거나 행위를 취하도록 지시하는 명령문.

  • 동시에 두 가지 일을해야하는 경우를 제외하고 하나의 문장에 하나의 지시사항만 포함한다.
  • 15 단어 이하의 문장을 사용한다.
  • 하나의 문장에 관계 대명사는 한 번만 포함한다.

// 해설: 학습 장애, 뇌 손상, 난독증, 기억력이 부족한 사람을 지원하기 위한 지침입니다. 하나의 지시문에 하나의 요점만 간결하게 작성하고 멀티미디어는 주제별로 설명을 달아서 6분 이내로 끊어 제공해야 한다고 합니다.

3.1.9 Extra Symbols(Level AA)

A mechanism is available such that controls that are used to reach, or are part of, a critical service, and each instruction that contains important information that directly relates to a critical service, is preceded by a symbol or picture, which relates to the topic of the control or instruction.

3.1.9 심볼 추가(수준 AA)

중요한 서비스에 도달하거나 그 서비스 제어와 직접적으로 관련이 있는 지시문 앞에는 주제에 관련된 기호나 그림이 표시되는 메커니즘을 사용할 수 있다.

// 해설: 언어 상실증(실어증)이 있는 사람을 지원하는 지침입니다. 언어 상실증은 다양한 유형이 있으나 그 중 글을 이해하지 못하는 현상을 읽기언어 상실증(실독증)이라고 합니다. 이런 유형의 사람들에게는 문자 대신 이미지를 통해 정보를 전달하는 것이 효과적입니다. 3.1 콘텐츠는 읽고 이해할 수 있어야 한다. 의 하위 지침입니다.

3.2.6 Accidental Activation(Level A)

For single-pointer activation, at least one of the following is true:

  • Activation is on the up event, either explicitly or implicitly as a platform’s generic activation/click event;
  • A mechanism is available that allows the user to choose the up-event as an option;
  • Confirmation is provided, which can dismiss activation;
  • Activation is reversible;
  • Timing of activation is essential and waiting for the up-event would invalidate the activity.

3.2.6 우발적 실행(수준 A)

단일 포인터 실행은 적어도 다음중 하나가 참이어야 한다.

  • 플랫폼의 일반적인 실행/클릭 이벤트로써 명시적 또는 암시적으로 업 이벤트에 실행한다.
  • 사용자가 업 이벤트를 선택할 수 있는 메카니즘이 있다.
  • 실행을 취소할 수 있는 확인 절차를 제공.
  • 실행을 되돌릴 수 있다.
  • 실행의 시간 제약은 필수적이고 업 이벤트를 기다리면 실행을 취소한다.

// 해설: 시각 장애, 인지 장애, 운동 장애 사용자가 우발적으로 포인트를 눌러(mousedown, touchstart) 실수로 기능을 실행할 수 있기 때문에 ‘릴리즈, 터치 엔드, 마우스 업’ 이벤트를 통해 기능을 실행해야 합니다. 만약 mousedown, touchstart 이벤트로 실행하는 경우 실행을 취소할 수 있는 확인 기능을 제공하거나, 실행 결과를 되돌릴 수 있어야 합니다. 사용자가 mousedown, touchstart 상태로 일정 시간 이상 기다린다면 실행을 취소해야 합니다.

3.2.7 Familiar Design (Minimum)(Level A)

Help, navigation to help and search forms are easily identifiable and available to the user in one or more of the following ways:

Platform specific
A platform specific user interface design.

Adaptive interface
An adaptive user interface design that can be personalized.

User interface from a prior version
A user interface design that was used successfully by users in a prior version of the application.

Exception: The style is an essential part of the main function of the site, such as for a game

3.2.7 친숙한 디자인(최소한)(수준 A)

도움말과 도움말 탐색 그리고 검색 폼은 다음과 같은 하나 또는 그 이상의 방식으로 사용자가 쉽게 식별하고 사용할 수 있어야 한다.

플랫폼 고유의
플랫폼 고유의 사용자 인터페이스 디자인.

적응형 인터페이스
개인화 가능한 적응형 사용자 인터페이스 디자인.

이전 버전의 사용자 인터페이스
애플리케이션 이전 버전에서 사용자가 성공적으로 사용했던 인터페이스 디자인.

// 해설: 가벼운 인식 손상이 있거나 치매인 사람은 디자인 은유를 쉽게 배우지 못하기 때문에 상호작용할 항목을 찾지 못하거나 상호작용이 무엇을 의미하는지 알지 못합니다. 익숙한 디자인을 제공함으로써 요소의 위치와 상징을 이해할 수 있습니다. 도움말과 검색 폼은 플랫폼에서 일관성있게 사용하는 디자인이어야 하고 마크업은 특정 장애를 가진 사용자에게 의미가 있어야 합니다. 그렇지 않은 경우 이전 버전에서 성공적으로 사용했던 디자인으로 변경할 수 있어야 합니다. 플랫폼의 특징과 완전히 다르지만 검증을 통해 사용하기 쉽다는 것이 입증되면 예외입니다.

3.2.8 Change of Content(Level AA)

Programmatic notification is provided for each change of content that indicates an action was taken or that conveys information, unless one or more of the following is true:

  • There is an accessibility supported relationship between the new content and the control that triggers it.
  • he user has been advised of the behavior before using the component.
  • There are more than 5 notifications per minute.
  • The change of content is not a result of a user action AND not related to the the primary purpose of the page.

3.2.8 내용 변경(수준 AA)

다음 중 하나 이상의 경우에 해당하지 않으면 액션을 실행했거나 정보를 전달했음을 나타내는 각각의 내용 변화에는 프로그램 방식의 알림을 제공해야 한다.

  • 새로운 내용과 이것을 유발하는 콘트롤이 접근성을 지원하는 관계에 있는 경우.
  • 사용자가 구성 요소를 사용하기 전에 이미 그 동작에 대해 알고 있는 경우.
  • 1분에 5개 이상의 알림이 있는 경우.
  • 내용 변경이 사용자 실행의 결과가 아니면서 동시에 페이지의 주된 목적과 관계가 없는 경우.

// 해설: 내용 변경은 웹 브라우저가 최초 내용을 표시한 이후 변경된 것을 의미합니다.(사용자가 시작했는지 여부는 무관) 전맹 시각 장애인은 비동기 방식으로 처리된 내용을 인지하기 어렵기 때문에 이에 대한 알림을 제공해야 한다는 내용입니다. aria-controls 속성과 aria-live 속성을 사용하면 화면 낭독기 사용자에게 동적으로 변경된 내용을 알릴 수 있습니다. 흔히 “폼을 성공적으로 전송했습니다.” 또는 “5개의 검색 결과가 있습니다.” 또는 “폼에 3개의 오류가 있습니다.” 또는 “내용을 로딩 중입니다.” 등 페이지 새로고침 없이 내용을 변경하는 영역에 사용할 수 있습니다. 알림이 너무 빈번한 경우(분당 5개 이상)는 예외입니다.

3.3.7 Minimize user errors(Level A)

Common input errors are automatically corrected where the corrections can be reliably made.

3.3.7 사용자 오류 최소화(수준  A)

일반적인 입력 오류는 오류의 보정을 신뢰할 수 있고 보정하는 것이 가능한 경우 자동으로 보정해야 한다.

// 해설: 이 항목은 WCAG 2.0 – 3.3.3 오류 의견: 인풋 오류가 자동으로 감지되고 정정하기 위한 의견이 있을 때 콘텐츠의 목적이나 보안을 위태롭게 하지 않는 이상 사용자에게 의견을 제공해야 한다. (수준 AA) 항목을 업데이트하는 내용입니다. 인지 장애가 있는 사용자(언어, 기억, 주의력, 실행, 결정)와 노인 사용자는 너무 많은 오류가 발생하면 작업을 완료할 수 없다고 생각해서 쉽게 포기합니다. 자동으로 교정하는 것이 가능하고 자동 교정을 신뢰할 수 있다면 자동 교정을 제공하여 오류 알림을 최소화 해야 한다는 지침입니다. 너무 많은 오류 알림은 과업을 방해하기 때문입니다. 이 요구사항을 준수하는 방법으로써 특별한 형식(날짜, 전화번호 등)으로 내용을 입력 받아야 하는 경우 가능한 많은 형식을 허용하는 것이 도움이 됩니다. 또한 불필요한 선택 항목을 아예 제공하지 않거나 선택할 수 없도록 하는 방법도 있습니다.

3.3.8 Undo(Level A)

Users are provided with the ability to undo an action and to correct mistakes such that:

  • a user can go back steps in a process via a clearly labeled action; or
  • the user can repair information via a clearly labeled action and get back to the place they were at, via a clearly labeled action, without unwanted loss of data.

3.3.8 실행 취소(수준 A)

사용자에게 실행 취소와 함께 다음과 같은 오류 정정 기회를 제공해야 한다.

  • 사용자는 명시적 설명을 통해 과정의 이전 단계로 돌아갈 수 있어야 한다.
  • 사용자는 명시적 설명을 통해 정보를 수정할 수 있어야 하고 원치 않는 데이터 손실 없이 원래 위치로 뒤돌아 갈 수 있어야 한다.

// 해설: 사용자가 입력 양식을 제출할 때 어떤 단계로든 데이터 손실 없이 되돌아 가서 정정할 수 있어야 한다는 내용입니다.

3.3.9 Provide Support(Level AA)

Content is provided that helps users understand complex information, long documents, numerical information, relative and cardinal directions, forms and non-standard controls.

3.3.9 지원 제공(수준 AA)

복잡한 정보, 긴 문서, 숫자 정보, 상대적 방향 그리고 방위(동서남북), 폼과 비 표준 콘트롤에는 사용자의 이해를 돕는 내용을 제공해야 한다.

// 해설: 인지 장애(언어, 기억, 실행, 결정, 주의)가 있는 사용자를 돕기 위한 지침입니다. 복잡한 정보란 3개 이상의 파트 중 2개 이상의 파트가 여러가지 방식으로 상호작용 하는 정보를 의미합니다. 긴 문서란 300 단어 이상의 내용을 의미합니다. 이 지침의 목적은 상황에 맞는 도움말, 툴팁 및 용어 설명을 제공하여 인지 접근성 욕구를 가진 사람들이 완전히 이해하고 접근할 수 있도록하는 것입니다. 온도를 입력하도록 하는 곳에서 ‘추움, 따뜻함, 뜨거움’과 같은 대안을 선택할 수 있다면 접근성이 높아집니다. 긴 문서는 여러 부분으로 나눈 후 헤딩을 제공하거나 또는 요약 정보를 제공하여 더 쉽게 이해할 수 있습니다. 독서나 언어가 어려운 사람은 차트와 그래프가 도움이 될 수 있습니다. 차트와 그래프를 표시할 때에는 aria-labelledby 속성을 이용하여 설명을 제공할 수 있습니다.

분류: 웹 접근성,웹 표준 | 2017년 4월 13일, 18:00 | 정찬명 | 댓글: 0개 |
트랙백URI - http://naradesign.net/wp/2017/04/13/2265/trackback/

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님