> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/wcag/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/wcag/1-perceivable/1.3-adaptable.md). # 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](/wcag/1-perceivable/1.4-distinguishable.md)를 참고하세요. {% 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 %}