# 1.3 적응성 ## 1.3.1 정보 및 관계 (A) 표현을 통해 전달되는 정보, 구조 및 관계는 [프로그래밍 방식으로 결정](http://www.w3c.or.kr/Translation/WCAG20/#programmaticallydetermineddef)되거나 텍스트로 제공됩니다. {% embed url="" %} 정보, 관계에 대한 이해 {% endembed %} ## 1.3.2 의미적인 순서 (A) 콘텐츠가 제시되는 순서가 의미에 영향을 줄 때, 올바른 판독 순서가 [프로그래밍 방식으로 결정](http://www.w3c.or.kr/Translation/WCAG20/#programmaticallydetermineddef)될 수 있습니다. {% embed url="" %} 의미있는 시퀀스에 대한 이해 {% endembed %} ## 1.3.3 감각적 특성 (A) 콘텐츠를 이해하고 조작하기 위해 제공된 가이드라인은 모양, 색, 크기, 시각적 위치, 방향 또는 소리와 같은 컴포넌트의 감각적인 특성에 만 의존하지 않습니다. {% hint style="info" %} 색상과 관련된 요구 사항은 [가이드라인 1.4](https://a11y.gitbook.io/wcag/1-perceivable/1.4-distinguishable)를 참고하세요. {% endhint %} {% embed url="" %} 감각적인 특성에 대한 이해 {% endembed %} ## 1.3.4 기기 회전 (AA) 특정 디스플레이 방향이 필수적 이지 않은 한, 콘텐츠는 보기 및 작동을 세로 또는 가로. 한 방향으로 제한 하지 않습니다. #### 해설 이 지침을 준수하면 태블릿, 스마트폰 등을 휠체어에 장착하거나, 운동 능력이 제한되어 있거나, 현재 손이 바쁘기 때문에 휠체어를 돌리는데 어려움이 있는 사용자의 접근성이 개선 될 것입니다. ![태블릿을 휠체어에 장착해 사용하는 사용자](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT-tPq3xgP8-GDjf0uk%2F-LT-wPARIKFSi3zQHpPG%2Fimage.png?alt=media\&token=12b80318-b58b-4d36-b41c-a697f7711889) 휠체어에 장치를 장착하고 헤드 마우스를 사용하여 인터랙션 하는 사람을 고려해, 가능한 경우 애플리케이션의 방향을 회전할 수 있도록 해야 합니다. ![수직 방향의 뷰포트 ⇒ 회전 방향이 고정된 뷰포트 (X) / 회전 방향에 따라 화면에 변경된 뷰포트 (O)](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT0Vfwr4kDTFX8mLoPp%2F-LT0Yb4jDISGkMRfWXIi%2Fimage.png?alt=media\&token=ea79bbde-ba02-4443-b2ac-952cd4408cff) 특정 방향으로 장치를 장착 한 사람들은 애플리케이션이 항상 고정된 방향으로 사용해야 합니다. 기기를 회전시킬 수 있는 사용자는 하나의 방향을 선호 할 수 있으며 선택할 수 있습니다. 예를 들어 시력이 약하거나 인지 장애가 있는 사람은 가로 방향을 선호 할 수 있습니다. 더 큰 텍스트 크기와 긴 행을 허용하여 가독성을 향상 시킬 수 있기 때문입니다. 모든 방향에서 애플리케이션을 사용할 수 있도록 만들면 누구나 혜택을 얻을 수 있습니다. 스웨덴의 국영 게임 회사 Svenska Spel 웹 사이트([svenskaspel.se](https://www.svenskaspel.se/))는 이 지침 성공기준에 어긋납니다. !["장치를 세로 방향으로 되 돌리세요."](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyAAu-PRDWATbi_5BW%2F-LSy5eleoEPiwAIQdOdx%2Fimage.png?alt=media\&token=eb2d90f8-9d2f-4a8a-ab2f-85c9dec35528) ![세로 방향으로 고정된 화면을 제공한 예 - 여권 정보 스캔](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyAAu-PRDWATbi_5BW%2F-LSy2przPzf7qgcEqGqM%2Fimage.png?alt=media\&token=eacc6514-03d5-47d9-b608-2f03b9c4610d) ![세로 방향으로 고정된 화면을 제공한 예 - 카드 스캔 등록](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyAAu-PRDWATbi_5BW%2F-LSy48ydHIgadid0cfCc%2Fimage.png?alt=media\&token=3f17c95f-bb52-490d-87d8-f69fd66f53cb) {% hint style="info" %} 특정 디스플레이 방향이 필수적인 경우는 은행 체크, 피아노 애플리케이션, 프로젝터 또는 TV 용 슬라이드, 바이너리 디스플레이 방향이 적용되지 않는 가상 현실(VR) 컨텐츠 입니다. {% endhint %} 애플리케이션의 방향이 고정되어야 하는 몇 가지 예외 사항이 있습니다. 예를 들어 피아노 연주를 시뮬레이션 하는 애플리케이션이 그러합니다. 이러한 애플리케이션은 가로 방향으로 고정되어야 합니다. ![가로 방향으로 고정된 화면을 제공해야 하는 예 - 피아노 앱](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyAAu-PRDWATbi_5BW%2F-LSy23CRn7hKshia0jad%2Fimage.png?alt=media\&token=dafb83cf-d506-497b-9b87-eb1ff1e11667) 수표 입금을 허용하는 은행 업무 애플리케이션은 수표 인식 및 입력을 위해 가로 방향으로 고정되어야 합니다. ![수표 스캔 인식 은행 애플리케이션](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT0Vfwr4kDTFX8mLoPp%2F-LT0_NoyHQH0wG4VtUPp%2Fimage.png?alt=media\&token=92465cc7-b533-4465-91e9-4ee3972825a6) {% hint style="info" %} 세로 이미지의 캐러셀은 세로 방향으로 더 크게 표시되지만 가로 모드에서도 계속 사용할 수 있습니다. 따라서 개발자는 특정 방향으로 고정해야 할 경우, 납득이 되는 고정 이유를 제시해야 합니다. {% endhint %} {% embed url="" %} 기기 회전에 대한 이해 {% endembed %} ## 1.3.5 입력 목적 식별 (AA) 사용자에 관한 정보를 수집하는 각 입력 필드의 목적은 다음과 같은 경우에 [프로그래밍 방식으로 결정](http://www.w3c.or.kr/Translation/WCAG20/#programmaticallydetermineddef)될 수 있습니다. 이 지침을 준수하면 인지 장애가 있는 사용자가 텍스트를 읽고 입력하는 것이 쉬워져 접근성을 향상 시킵니다. 또한 웹 사이트의 언어를 잘 모르는 사용자 또한 접근성이 향상됩니다. * 입력 필드는 **사용자 인터페이스(UI) 컴포넌트의 입력 용도 섹션에서 식별된 용도로 사용** 되어야 합니다. * 콘텐츠는 **폼 입력 데이터에 대해** **예상되는 의미를 식별 할 수있는 기술을 사용하여 구현** 되어야 합니다. #### 해설 이 지침은 메타 데이터를 첨부 함으로써 사용자가 입력을 더 잘 할 수 있도록 돕는데 있습니다. 이름 및 이메일 주소와 같은 입력을 자동 완성할 수 있도록 구성할 수 있습니다. 자동 완성은 브라우저가 이전 입력에서 저장 한 정보와 양식 필드에서 자동 완성을 허용하는 브라우저 기능의 조합으로 작동합니다. ![Airbnb 웹 서비스의 자동완성 폼 입력 필드](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyJ0WGMVlW1CyCohI2%2F-LSyK-beV4QjAUG4IXJ3%2Fimage.png?alt=media\&token=f86b5ec4-0e8b-4d1a-a9aa-fe98e8b9afb3) HTML5 자동완성 마크업은 아래 코드와 같이 구성됩니다. {% code title="demo-autocomplete.html" %} ```markup

``` {% endcode %} {% hint style="warning" %} autocomplete 속성에 설정된 값들은 사용자가 임의로 설정한 것이 아닙니다. {% endhint %} | 필드 이름 | 의미 |

정규
포멧

| 예시 | 컨트롤 그룹 | | ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------- | | `email` | 이메일 주소 |

유효한
이메일

| | [E-mail](https://www.w3.org/TR/html52/sec-forms.html#element-statedef-input-e-mail) | | `current-password` |

사용자 이름 필드에 의해 식별된
계정의 현재 암호(예: 로그인 시)

|

개행하지 않는
텍스트

| qwerty | [Password](https://www.w3.org/TR/html52/sec-forms.html#element-statedef-input-password) | 자동완성 `autocomplete` 속성에 사용가능한 값은 [W3C HTML 5.2 Autofill](https://www.w3.org/TR/html52/sec-forms.html#sec-autofill) 속성 표를 참고하세요. ![W3C HTML 5.2 - 4.11 Interactive elements \_ 4.10.18.7. Autofill](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyKP5ps3O8xx70wHSu%2F-LSyRT_CtiMmiyIIl59M%2Fimage.png?alt=media\&token=b499da3b-012b-4960-9fad-cb185d4b73b6) #### 자동 완성 콤보박스 패턴 앞서 다룬 HTML5 자동완성 대신, WAI-ARIA를 사용해 직접 구현한 자동완성 콤보박스 컴포넌트를 활용할 수 있습니다. {% embed url="" %} {% embed url="" %} 입력 목적 명확화에 대한 이해 {% endembed %} ## 1.3.6 목적 식별 (AAA) HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 사용자 인터페이스(UI) 컴포넌트, 아이콘 및 영역(regions)의 목적을 [프로그래밍 방식으로 결정](http://www.w3c.or.kr/Translation/WCAG20/#programmaticallydetermineddef)할 수 있습니다. #### 해설 이 지침을 준수하면 스크린리더와 같은 보조기술 사용자의 접근성이 향상됩니다. 스크린리더와 같은 보조기술로 다음과 같은 작업을 수행할 수 있도록 HTML을 올바르게 작성해야 합니다. * 의미를 가진 아이콘 콘텐츠의 경우, 사용자에게 이상하게 읽히지 않도록 적절한 대체 텍스트를 제공해야 합니다. * 사용자가 쉽게 탐색할 수 있도록 헤더, 내비게이션, 메인 콘텐츠 영역을 명확히 구분할 수 있도록 해야 합니다. * 사용자가 원하는 콘텐츠를 빨리 찾을 수 있도록 `h2`, `h3`, `h4`와 같은 소제목을 활용합니다. 예를 들어 버튼을 "버튼"이 아닌, "버튼의 용도"가 무엇인지를 사용자가 이해할 수 있도록 만들어야 합니다. `aria-label` 속성을 사용해 'X 버튼'이 아닌, '닫기 버튼'으로 읽히도록 만들어 버튼의 용도를 보다 쉽게 인식할 수 있도록 구조화 할 수 있습니다. ```markup ``` 다음은 [Lainey Feingold 법률 사무소](http://www.lflegal.com/)의 웹 페이지 입니다 . 점선 된 자주색 테두리는 페이지 머리글, 탐색 영역, 메인 영역 및 보조 영역을 표시합니다. 머리글이 맨 위에 있습니다. 네비게이션은 헤더 아래에 있으며 페이지를 가로 질러 흐릅니다. 메인 영역은 페이지의 왼쪽에 있습니다. 레이니의 책에 대한 보조 영역은 오른쪽에 배치해 있습니다. ![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT-cGKpdlqTaZYqQNjV%2F-LT-jRLG0K37CevIPDxd%2Fimage.png?alt=media\&token=5dd108f7-4977-4d81-a5a6-315ad224150c) 개발자는 코드 내에서 WAI-ARIA를 사용하여 페이지의 각 섹션(영역)을 식별할 수 있도록 구성 했습니다. 이렇게 구성하면 사용자의 혼란을 줄이고 사용자가 콘텐츠에 집중할 수 있게 됩니다. | **영역** | **랜드마크 역할** | | ------ | ---------------------- | | 헤더 | `role="banner"` | | 내비게이션 | `role="navigation"` | | 메인 | `role="main"` | | 보조 | `role="complementary"` | | 푸터 | `role="contentinfo"` | | 섹션 | `role="region"` | | 폼 | `role="form"` | | 검색 | `role="search"` | [W3C ARIA 랜드마크 예제](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html)는 개발자가 문서 구조의 각 섹션을 어떻게 구성해야할지 명확한 가이드를 제공합니다. ![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT-cGKpdlqTaZYqQNjV%2F-LT-lSbLIptyU3idQC3V%2Fimage.png?alt=media\&token=07939de3-1cd2-4fc8-8263-a8ec52541979) {% embed url="" %} 목적 식별에 대한 이해 {% endembed %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://a11y.gitbook.io/wcag/1-perceivable/1.3-adaptable.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.