# 가이드
# 퍼블리싱 가이드라인
## 1. 퍼블리싱 포인트
**퍼블리싱 포인트란 eXBuilder6**런타임에서 디자이너 및 퍼블리셔가 **개인화 할 수 있도록 의도된 스타일링 지점**들을 의미합니다.**eXBuilder6**에서는 이러한 스타일링이 의도된 단위들을 **스타일러**라고 부르며,스크립트 및 CSS를 통해 접근하고 수정할 수 있습니다.
### 1.1. 스타일러의 유형퍼블리싱 포인트들은 스크립트로는 **스타일러** 객체 형태로,퍼블리셔 측면으로는 CSS 스타일러**클래스 셀렉터** 형태로 공급되며,크게 두가지 형태로 공급됩니다:
스타일러셀렉터유형
설명
예시
컨트롤 타입 클래스 셀렉터(기본 스타일러셀렉터)
컨트롤의 최외곽DOM 요소를 스타일링 하기 위해 공급됩니다.
`cl-컨트롤 타입명`형태로 제공됩니다.이하 **기본 스타일러**로 지칭합니다.
cl-radiobutton
컨트롤내부 요소 타입클래스 셀렉터(서브 스타일러셀렉터)
컨트롤을 구성하는 내부 DOM 요소를 스타일링 하기 위해 공급됩니다.
`cl-컨트롤타입명-스타일러 이름` 형태로 공급됩니다.이하 **서브 스타일러**로 지칭합니다.
cl-radiobutton-item
### 1.2. 기본 스타일러
**기본 스타일러**및 **기본 스타일러클래스 셀렉터**는 컨트롤 자체의 스타일요소를 퍼블리싱 하기 위해 공급되며아래와 같은 형태로 제공됩니다:
`cl-컨트롤 타입명`
예를 들어 **버튼**의 경우 `cl-button`,**라디오 버튼**의 경우 `cl-radiobutton` 클래스 셀렉터를 통하여 퍼블리싱 할 수 있습니다.
### 1.3. 서브 스타일러일부 컨트롤은 내부 영역별로 컨트롤 자체와는 **별도의 스타일링 규칙**을 가져야 할 필요를 가진 **시각적 요소**들이존재합니다.예를 들어 **라디오 버튼**은 각 **아이템**들에 대해 별도의 스타일링이 필요합니다.이 때,**아이템**처럼,특정 컨트롤 내부에서 존재하는 스타일링 단위를 **서브 스타일러**라고 합니다.각 컨트롤들은 시각적 구조의 복잡도에 따라 여러 **서브 스타일러**를 제공할 수도 있으며,**기본 ****스타일러** 하나만 제공할 수도 있습니다.
> 기본스타일러: 컨트롤 외곽 자체의 스타일링을 담당하는 스타일러. 루트 스타일러로도 언급됩니다.
#### 기본 스타일러 및 서브 스타일러들에 대한 정보 얻기각 컨트롤 별로 사용 가능한 기본 스타일러 및 서브 스타일러의 클래스 명칭들은 스튜디오도움말 > eXBuilder6 > 앱 개발 > 컨트롤 > UI 컨트롤에서 퍼블리싱 하고자 하는 컨트롤을 선택한 뒤, “스타일 구성요소” 항목에서 확인하실 수 있습니다.다음의 예시는 아코디언의 “스타일 구성요소” 입니다:
#### 자바 스크립트로 스타일러 접근자바 스크립트로는 컨트롤의 style속성을 통해 **기본 스타일러**에접근 할 수 있으며,**서브 스타일러**들은**기본 스타일러**의멤버 속성 형태로서 접근 할 수 있습니다:
```javascript
var radioButton = new cpr.controls.RadioButton();
// 기본 스타일러 조작
radioButton.style.css("color", "red");
// item 서브 스타일러 조작
radioButton.style.item.css("color", "red");
```
#### CSS로 스타일러 접근서브 스타일러들은다음과 같은 형식의 클래스 셀렉터를 공급합니다:
` 소속 컨트롤 타입 클래스 셀렉터-스타일러 명칭`
예를 들어 라디오 버튼의 아이템은 다음과 같은 클래스 셀렉터가 제공됩니다:
` cl-radiobutton-item`
예시(myRadio는 커스텀 클래스 명칭으로 가정):
```css
.cl-radiobutton.myRadio {
// 기본 스타일러
color: red;
.cl-radiobutton-item {
// item 서브 스타일러
color: red;
}
}
```
## 2. eXBuilder6 렌더링의 이해
### 2.1. eXBuilder6의 렌더링 구조eXBuilder6의 중요한 임무 중 하나는,높은 추상성을 갖는 비즈니스 컨트롤을 표현하는DOM을 개발자의 요청에 따라 효율적으로 합성하고그 콘텐츠 관리(Manipulate)하는 하는 것입니다.예를 들어 Grid 컨트롤은 개발자가 제공한 데이터를 바탕으로 많은 셀을 만들고 효율적으로 DOM 콘텐츠를 관리합니다.또한 eXBuilder6 플랫폼은 컨트롤들 및 데이터의 상태를 감시하며,변경이 일어날 때마다동적으로 가장 적절한 시점에 DOM을 재합성 합니다.따라서,특정 시점의 DOM의 상태를 관측한 결과를 바탕으로 퍼블리싱을 수행하면 안 됩니다. DOM은 애플리케이션이 실행되는 동안 역동적으로 변경될 수 있기 때문입니다.
> 단, 쉘 컨트롤 및 HTMLSnippet등, 개발자가 직접 DOM 콘텐츠를 통제하는 경우, DOM 형상을 대상으로 하는 퍼블리싱을 수행 할 수 있습니다.eXBuilder6의 런타임이 업데이트되면서,다음의 이유에 따라 컨트롤의 DOM구조는 변경될 수 있습니다:
- 성능 향상
- 기능 추가
- 접근성 향상
### 2.2. 논리적 스타일링 구조이러한 환경 내에서 안전한 퍼블리싱이 이루어지려면DOM을 대상으로 하는셀렉터를 작성하는 대신,**eXBuilder6**가 제공하는**컨트롤** 및 **컨트롤의 논리적 구성요소**들을 대상으로 하는 셀렉터를사용하여야 하며,이들을**기본 스타일러** 및 **서브 스타일러**셀렉터라고 부릅니다.각 **기본 스타일러** 및 **서브 스타일러** 사이의 관계 및 구조는**애플리케이션이 수행되는 동안**이나 혹은 **eXBuilder**의 **버전 업데이트** 등이 이뤄지더라도 변경되지 않습니다.이렇게 **항상성**이 보장되는 **스타일링 단위** 사이의 **관계 구조**를**논리적 스타일링 구조**라고 합니다.
> 항상성: 고객의 요청에 기인한 기능 추가 등에 의해 기존 스타일링에 영향을 주지 않는 논리적 스타일링 구조의 추가가 존재할 수는 있습니다.다음은 API 계약 상 합법적인 라디오 버튼의 DOM 구조 변경의 예시를 나타냅니다:
위의 예시에서 **라디오 버튼**의DOM 구조는 변경되었으나,**라디오 버튼**자체의 스타일은 `.cl-radiobutton`이 결정하며,**아이템**의 스타일은 `.cl-radiobutton-item`이 결정한다는 사실과,이들이 부모 자식 관계라는 사실에는 변동이 없습니다.
## 3. 레이아웃 시스템과의 호환성eXBuilder6는 화면에 표기된 컨트롤들을 렌더링 할 때,부모의 **레이아웃 시스템**과 자식의 **레이아웃 컨스트레인트** 정보를 조합하여,그 위치 및 크기를 스크립트로 결정하고,그 결과물을 표준 HTML/CSS형태로 반영합니다.또한 레이아웃 조건 및 컨트롤들의 상태에 따라 결과물의 양상은 크게 변경될 수 있습니다.예를 들어 TabFolder의 headerPosition값에 따라,탭 폴더의 헤더 위치와 연관된 DOM의 순서등이 변경될 수 있습니다.또다른 예시로는 개발자가 동적으로 레이아웃 시스템을 변경한 경우,전체 DOM의 구조가 변경될 수도 있습니다.
> 레이아웃 및 컨스트레인트: 모든 레이아웃은 해당 체계 내에서 자식을 배치하는 방법을 설명하는 컨스트레인트 모델을 갖습니다. 예를 들어 폼 레이아웃의 경우 컨트롤을 배치할 행 및 열의 정보가 컨스트레인트가 됩니다.따라서 퍼블리셔는**eXBuilder6**가 동적으로 결정하는**레이아웃 시스템**에 영향을 줄 수 있는 레이아웃 속성들에 대해 스타일링을 수행해서는 아니됩니다.이 규칙을 준수하기 위하여 CSS또는 LESS파일은 다음의 속성을 지정하는 구문을 포함해서는 아니됩니다.
> 레이아웃 속성들: 레이아웃 시스템이 상황에 따라 동적으로 합성하여 만들어내는 CSS 속성들.
속성
이유
display
DOM의 레이아웃 규칙 및 가시성에 영향을 미칩니다.예를 들어 display를none으로 강제로 지정한 경우,control.visible = true로 프로그래밍 하여도 화면에 표시되지 않게 됩니다.
position
DOM의 레이아웃 규칙에 영향을 미쳐,내부 좌표계 전체에 왜곡을 가져오게 됩니다.모든 컨트롤들은 부모의 레이아웃 시스템에따라 적절한 position 속성을 부여 받게 됩니다.
left
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
top
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
right
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
bottom
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
width,min-width
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
height,min-height
DOM의 위치및 크기는 eXBuilder6의 레이아웃 시스템 및 개발자가 입력한 레이아웃 컨스트레인트에 의해 결정됩니다.
## 4. UDC의 활용만약 필요로 하는 레이아웃이나 동작을 갖춘 컨트롤이 없는 경우,안전한 퍼블리싱 구조를 갖는 UDC 컨트롤을 작성할 수 있습니다. UDC 컨트롤 작성을 통해원하는 형태대로 레이아웃을 중첩하고,직접 스타일 클래스 명칭을 추가하여,항상성을 보장받는 논리적 스타일링 구조를 확보할 수 있습니다.스튜디오의 **eXBuilder예제 마법사**에서, `“presentation-example”`를 선택하고 예제 프로젝트를 만들어 일부 참고할 만한 예제들을 확인할 수 있습니다:
- examples/custom-radio/CustomRadio.clx우측에 추가 버튼을 갖는 라디오 버튼 예시
- examples/custom-tabfolder-header/CustomTabHeaderExample.clx탭 폴더 헤더를 별도로 만들어 TabFolder와 연동하는 예시
- examples/custom-toggle-button/CustomToggle.clx슬라이더를 이용한 토글 버튼 예시
## 5. 스타일링 지침안전하게**지속가능한 퍼블리싱**을 위하여,퍼블리싱은 다음 지침을 준수하여야 합니다.
> 지속가능한 퍼블리싱: 런타임을 업데이트 하더라도 항상성을 보장받는 안전한 퍼블리싱
번호
규칙
이유
1
CSS의 셀렉터 콤비네이션은**기본 스타일러**,**서브 스타일러**의 클래스 명 및 **사용자 지정 클래스 명**의 조합으로 이루어져야 합니다.
비 API 요소를 통한 셀렉터는 버전 호환성이 보증되지 않습니다.
2
차일드셀렉터컴비네이터(>)를 사용해서는 안됩니다.
2장에서 언급된것처럼,런타임 업데이트가 논리적 스타일링의 구조는 변경하지 않으나, DOM의 직계 자손 구조 및 태그명 등은 변경될 수 있습니다.
3
레이아웃 시스템 및 컨트롤 내부 레이아웃에 영향을 주는 속성을 지정하지 마십시오.
3장에서 언급된것처럼,레이아웃과 관련한 CSS 속성들은 런타임이 자동으로 만들어 내므로,이들과 충돌을 일으킬 수 있습니다.
4
DOM을 관측한 결과를 바탕으로 퍼블리싱을 수행하지 마십시오.
DOM은 애플리케이션이 수행되는 동안 계속해서 바뀌게 됩니다.예를 들어 컨트롤의 특정속성이 변경되면, DOM구조 전체가 완전히 변경될 수도 있습니다.따라서,반드시 논리적인 스타일링 구조에 따라 퍼블리싱을 수행하여 주십시오.
5
eXBuilder6가 제공하는 컨트롤이 원하는 스타일링 요소를 통제하는 속성을 갖고 있다면,그것을 CSS로 지정하지 마십시오.
예를 들어 라디오 버튼의 경우 각 아이템 사이의 간격을 결정하는 itemSpacing속성을 제공합니다.라디오 버튼이 배치되는 규칙이나 부모의 상황에 따라,이 값을 DOM에 반영하는 스타일 형태는 크게 변할 수 있습니다.따라서 특정한 한 유형의 상태에만 의존하여,컨트롤이 제공하는 기능을 우회하여 CSS로 구현하여서는 안됩니다.스타일 요소처럼 보이지만,컨트롤이 관련 속성을 제공하는 경우는,다양한 문맥에서 정상적인 동작을 보증하기 위하여 불가피한 경우에만 제공됩니다.
6
레이아웃 시스템이 여백과 정렬과 관련한 속성들을 제공하는 경우,해당 속성을 이용하고 CSS로 지정하지 마십시오.
레이아웃 시스템은 설정에 따라,동적으로 하위 노드 구조에 많은 변화가 있을 수 있으므로,이를 CSS로 안전하게 통제하기 어렵습니다.
## 6. 예외 사항
### 6.1. 아이콘 스타일러각 컨트롤들이 제공하는 다수의 **서브 스타일러들** 중 그 이름이 “icon”혹은 “expander”등으로 끝나는 **서브 스타일러**들은 아이콘 또는 이미지를 표시하기 위한 **서브 스타일러** 입니다. 이들 **스타일러**는 이미지 및 아이콘의 크기를 변경하기 위하여,width및 height 속성의 변경을 별도로 허용합니다.다음의 예시는 스크립트로 **라디오 버튼**의 아이콘의 크기를 변경하는 방법을 보여줍니다:
```css
radioButton.style.icon.css({
"width" : "20px",
"height" : "20px"
});
```
CSS로 같은 작업을 수행하는 예시입니다(my-radio는 사용자 정의 클래스 명):
```css
.cl-radiobutton.my-radio {
.cl-radiobutton-item {
.cl-radiobutton-icon {
width: 20px;
height: 20px;
}
}
}
```
### 6.2. 커스텀 스크롤 바커스텀 스크롤 바를 사용하거나 사용할 예정인경우,그룹 컨트롤의 `padding` 속성을 사용하지 마십시오.커스텀 스크롤바는 그룹의 `padding`을 이용하여 콘텐트 영역을 축소 시키고 스크롤바를 표시합니다.
## 7. 유틸리티 슈도 클래스eXBuilder6는 논리적인 첫번째행과 마지막 행,그리고 첫번째 열과 마지막 열에 대한 클래스 셀렉터를 공급합니다.
셀렉터
설명
적용 대상
.cl-first-row
특정 레이아웃 내 첫번째 행에 배치된 자식 컨트롤이나,컨트롤 내의 첫번째 행에 배치된 아이템에 적용됩니다.
- 라디오 버튼의 첫번째 행에 배치된 아이템
- 체크 박스 그룹의 첫번째 행에 배치된 아이템
- 버티컬 레이아웃이 적용된 컨테이너에 부착된 첫번째 자식
- 폼 레이아웃이 적용된 컨테이너에 부착된 첫번째 행에 존재하는 자식 컨트롤들
- 폼 레이아웃 내 구분선
.cl-last-row
특정 레이아웃 내 마지막 행에 배치된 자식 컨트롤이나,컨트롤 내의 마지막 행에 배치된 아이템에 적용됩니다.
- 라디오 버튼의 마지막 행에 배치된 아이템
- 체크 박스 그룹의 마지막 행에 배치된 아이템
- 버티컬 레이아웃이 적용된 컨테이너에 부착된 첫번째 자식
- 폼 레이아웃이 적용된 컨테이너에 부착된 첫번째 행에 존재하는 자식 컨트롤들
- 폼 레이아웃 내 구분선
.cl-first-column
특정 레이아웃 내 첫번째 열에 배치된 자식 컨트롤이나,컨트롤 내의 첫번째 열에 배치된 아이템에 적용됩니다.
- 라디오 버튼의 첫번째 열에 배치된 아이템
- 체크 박스 그룹의 첫번째 열에 배치된 아이템
- 폼 레이아웃이 적용된 컨테이너에 부착된 첫번째 열에 존재하는 자식 컨트롤들
- 폼 레이아웃 내 구분선
.cl-last-row
특정 레이아웃 내 마지막 열에 배치된 자식 컨트롤이나,컨트롤 내의 마지막 열에 배치된 아이템에 적용됩니다.
- 라디오 버튼의 마지막 열에 배치된 아이템
- 체크 박스 그룹의 마지막 열에 배치된 아이템
- 폼 레이아웃이 적용된 컨테이너에 부착된 마지막 열에 존재하는 자식 컨트롤들
- 폼 레이아웃 내 구분선
.cl-odd-row.cl-even-row
폼 레이아웃 및 그리드에서 홀수 행 및 짝수 행에 위치하는 컨트롤에 적용됩니다.
- 그리드의 행
- 폼 레이아웃이 배치된 컨트롤
- 폼 레이아웃 내 구분선
.cl-odd-column.cl-even-column
폼 레이아웃에서 홀수 열 및 짝수 열에 위치하는 컨트롤에 적용됩니다.
- 폼 레이아웃에 배치된 컨트롤
- 폼 레이아웃 내 구분선
.cl-nth-of-row-n
폼 레이아웃 내에서 몇 번째 행에 대한 요소인지를 나타냅니다.
- 폼 레이아웃 내 구분선
.cl-nth-of-column-n
폼 레이아웃 내에서 몇 번째 열에 대한 요소인지를 나타냅니다.
- 폼 레이아웃 내 구분선
## 8. 권고 사항
### 8.1. before / after 슈도 클래스 셀렉터 사용 주의`:before` 및 `:after`와 같은 증강 슈도 셀렉터는 실제로 브라우저를 실행하여 DOM을 구성한 후에만 증강 적용이 가능하기 때문에,eXBuilder6 스튜디오는 이들에 대해 디자인 시점의 사전 렌더링을 제공하지 않습니다.단순한 콘텐츠 삽입의 경우,개발자가 큰 혼란을 겪지 않겠지만,레이아웃 변형등을 목적으로 이러한 증강 슈도 셀렉터를 사용하는 경우,개발자들은 화면의 디자인 결과물을 예측하는데 어려움을 겪을 수 있습니다.
### 8.2. 불가피한 레이아웃 수정불가피하게 `position` 혹은 `display` 및 기타 크기 및 위치 관련 속성을 반드시 변경해야 하는 경우,`!important`키워드를 이용하여야 합니다.**eXBuilder6**는 개발자나 퍼블리셔의 실수로 중요한 레이아웃 속성이 변형되는 것을 막기 위하여,관련 속성을 변경하는 API요청을 차단(`자바 스크립트로 스타일러 객체의 css() 메서드를 통해 조작한 경우.`)하며, CSS로 그 값이 덮어씌워지는 것을 방지하기 위하여 인라인 속성으로 렌더링하기 때문입니다.
> !important: 그 속성을 강제로 덮어 써야 한다면, 그것이 API 보증 계약 외의 행위임을 쉽게 인지하기 하기 위하여.이러한 스타일링은 현재 버전의 런타임에서 정상적으로 작동하는 것처럼 보이더라도, 디자인 편집기 등에서의 정상적인 렌더링 및 향후 버전의 런타임에서의 정상 작동이 보증되지 않습니다.
### 8.3. 디자인 편집기와의 불일치일반적으로 디자인 편집기가 의도한 퍼블리싱 결과물을 보여주지 못한다면,API 표준 계약 범위 이외의 요소를 통한 퍼블리싱이 이루어졌을 가능성이 높습니다.단순히 편집기가 미리 보여주지 못하는 문제에 그칠 수도 있으나,그 이상의 문제를 추후에 야기할 수도 있으므로,반드시 전문가의 확인이 필요합니다.
## 9. 확장 퍼블리싱 포인트이 장에서는 표준 퍼블리싱이 제공되지 않아 기획 의도 및 특수한 퍼블리싱 의도를 구현할 수 없는 경우를 대비한**확장 퍼블리싱 포인트**들을 다룹니다.확장 퍼블리싱 포인트들은 런타임 작동성 및 **버전 호환성**이 제공되지만 디자인 편집기에서는 적용 되지않습니다.
> 버전 호환성: 기능 개선등의 목적으로 변경되는 경우, 마이그레이션 가이드라인과 함께 변동이 존재할 수 있습니다.9.1. 레이아웃 시스템 관련
### 9.1. 레이아웃 시스템 관련컨테이너(그룹)내 레이아웃 및 자식 컨트롤들의 레이아웃 특성에 대한 퍼블리싱 방법을 기술합니다.컨테이너는 일반적으로 다음과 같은 구조를 갖습니다:
- .cl-container –그룹 컨트롤
- .cl-layout.cl-scrollbar–레이아웃 루트
- .cl-layout-content–레이아웃 내 컨텐트 팬
- .cl-layout-wrap–자식 컨트롤에 레이아웃 특성을 적용하기 위한 래퍼
- .cl-control –자식 컨트롤
> .cl-scrollbar: 레이아웃이 스크롤 가능하도록 설정된 경우에만 이 클래스가 부여됩니다.
>
> .cl-layout-wrap: 래퍼 노드 없이 레이아웃 특성 적용이 가능한 레이아웃에서 이 노드는 생략됩니다.붉게 표시된 부분은 레이아웃이 설정된 형태에 따라 존재유무가 결정됩니다.
##### 레이아웃과 관련된 클래스 셀렉터 목록
셀렉터
설명
적용 레이아웃
.cl-layout,.cl-scroll
특정 컨테이너의 레이아웃 시스템이 사용하는 루트 팬을 얻습니다.해당 레이아웃이 스크롤을 허용하도록 설정되어 있는 경우,cl-scroll 클래스를 동시에 보유합니다.
모든 레이아웃
.cl-layout-content
레이아웃 시스템 내에서 스크롤 되는 전체 영역을 나타내는 컨텐트 팬을 얻을 수 있습니다.
Vertical, Flow
.cl-layout-wrap
특정 컨트롤이 레이아웃에 포함되기 위해 특수한 노드에 래핑되었다면,이 셀렉터를 통해 얻을 수 있습니다.
특정 레이아웃의 마진 관련 속성으로 공간을 확보하기 위한 노드가 만들어졌다면,이 셀렉터로 선택할 수 있습니다.
Vertical, Flow
.cl-form-placeholder
폼 레이아웃 사용시,픽셀 기반의 자동 높이나 너비가 사용된 구획이 있는 경우,최소 크기를 보장하기 위해 만들어진 노드들을 선택할 수 있습니다.
Form 레이아웃
### 9.2. 차일드셀렉터컴비네이터
`9.1`에서 언급된 것 처럼,레이아웃 마다자식 컨트롤을 렌더링 하기 위해 만들어 내는 노드의 형태가 각기 다를 수 있습니다.그러므로**차일드셀렉터컴비네이터**(>)를 사용할 때 주의가 필요합니다.예를 들어 `.cl-container.group-a > .cl-layout > .cl-control`은 `group-a` 클래스를 가진 컨테이너의 레이아웃이 **XY레이아웃**이거나 **폼레이아웃**으로 구성 되어 있을 때에는 모든 자식 컨트롤의 노드를 선택하게 되지만,**레이아웃 컨텐트 노드**(`.cl-layout-content`)나 **레이아웃 래퍼 노드**(`.cl-layout-wrap`)를 필요로 하는 레이아웃(`버티컬 레이아웃이나 플로우 레이아웃 등`)으로 구성되어 있을 때는 자식 컨트롤 노드를 선택할 수 없게 됩니다.이 문제를 해결하려면,그룹의 **childCombinatorClass** 속성을 사용하십시오:**차일드컴비네이터 클래스**를 지정하면,**직계 자식 컨트롤** 및 직계 해당 컨트롤을 감싸는 의**레이아웃 래퍼 노드**의 **직계 부모 노드**에 지정한 클래스명이 클래스명으로 추가됩니다.위의 예시에서는 “xzone” 이라는 값을 주었고,이제 `.xzone > .cl-control`셀렉터 룰을 이용하여 부모 그룹의 레이아웃 구성이나 설정과 무관하게 항상childCombinatorClass 값이 “xzone”인 그룹들의 직계 자식 컨트롤을 선택할 수 있게 됩니다.차일드컴비네이터 클래스는 직계 자식 컨트롤을 선택하기 위한 셀렉터 사용하기 의도되었기 때문에,해당 클래스 이름만을 대상으로 하는 룰 블록을 작성해서는 안됩니다. 예를 들어 아래와 같이 차일드컴비네티엍 클래스 이름인 "xzone"자체를 대상으로 하는 룰셋을 작성하는 것은 이 가이드라인에 위배 됩니다.
```css
.xzone {
/* 차일드 컴비네이터 클래스 자체를 대상으로
룰 블록을 작성하여서는 아니됩니다. */
color : red;
}
/* 아래와 같이 차일드 컴비네이터 클래스 이름은
반드시 직계 자식을 선택하는
차일드 컴비네이터와 조함하여 사용해야 합니다. */
.xzone > .cl-control {
color: red;
}
```
## 9.3. 기타 확장 퍼블리싱 포인트
셀렉터
설명
.cl-aside
컨테이너(그룹) 내에서 컨트롤을 플롯시키는API를 사용했을 때,플로팅 영역을 담당하는 레이어 노드를 얻을 수 있습니다.
.cl-global-aside
다이얼로그,콤보박스의드랍다운 선택 상자등,전역적으로 플로팅되는 영역을 담당하는 레이어 노드를 얻을 수 있습니다.
## 10. 제한 보증 및 퍼블리싱 포인트 추가 요청
### 10.1. 퍼블리싱 포인트 추가 요청적절한 **퍼블리싱 포인트**(`적합한 서브 스타일러 및 서브 스타일러 셀렉터`) 또는 **컨트롤 개인화 포인트**(`컨트롤의 동작이나 형태를 구체적으로 지시하는 속성`)의 부재로 인해 의도한 퍼블리싱의 구현이 불가능한 경우,이러한 확장점 추가를토마토 시스템에 요청할 수 있습니다.토마토 시스템은 요청된 확장점의 타당성에 따라 **퍼블리싱 포인트**를 추가하거나 개선할 수 있습니다.
### 10.2. 가이드라인 위반 및 귀책 사유불가피하게 스타일링 가이드라인을 위반한 경우,클라이언트는 eXBuilder6를 업데이트 할 때마다 이를 검수하여야 하여야 하며,이로 인한문제들은 클라이언트의 귀책사유로 취급됩니다.
# 웹 접근성 적용 가이드
## 1. 개요
본 가이드는 웹 접근성 평가지표를 준수하는 웹 응용프로그램을 개발하기 위해 eXbuilder6에서 지원하는 기능들을 설명합니다. 웹 접근성 평가지표는 2017 년 정보접근성 지킴이 및 멘토 양성교육의 교재를 근거로 하고 있으며 가이드 내용은 지속적으로 보완 및 수정될 수 있습니다.
## 2. 지표 별 적용가이드
### 2.1. 적절한 대체 텍스트 제공
(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공하고 있다.
준수기준 : 의미 있는 텍스트가 아닌 콘텐츠에 그 의미나 용도를 동등하게 인식할 수 있는 적절한 대체 텍스트를 제공해야 한다.
주의사항 : 컨트롤 속성의 tooltip 으로 표현되는 title 속성은 대체텍스트로 인정되지 않으며 title 속성의 값이 alt 속성과 동일한 내용일 경우 스크린리더에 의해 내용이 중복으로 인식되어 사용자에게 불편을 주게 되므로 alt 와 tooltip 속성은 구분해서 사용해야 한다.
#### 2.1.1. 텍스트 아닌 콘텐츠에 대한 대체 텍스트 제공
**1) 시각적으로 인지가 가능한 이미지 텍스트에 이미지와 동등한 정보를 alt 속성을 통해 제공한다**
- 이미지 컨트롤의 alt 속성을 사용하여 대체 텍스트를 제공한다
<그림 1. 이미지 컨트롤의 alt 속성>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/9ecimage.png)
- alt 속성 사용 시 다음과 같은 결과가 나타난다
<소스 1. alt 속성 사용 결과>
```xml
```
**2) 이미지맵의 img, area 요소에 alt 미정의 오류인 경우**
\[3.6.1.1 이미지맵 처리\] 예제 참조
**3) longdesc 파일이 없는 경우**
- longdesc 속성은 미지원
**4) 의미 있는 이미지가 배경이미지로 제공되었으나 대체 콘텐츠가 제공되지 않은 경우**
- 정보를 담고 있는 의미 있는 이미지에 해당 이미지의 정보를 alt 속성을 통해 설정할 수 있다.
배경 이미지에는 alt 속성이 사용 불가합니다. eXbuilder6에 맞춰 작성이 필요합니다.
\[3.1.1.1 대체 텍스트 처리\] 예제 참조
<그림 2. 의미 있는 이미지>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/1d2image.png)
- 의미 있는 이미지에 대체 텍스트를 제공한 결과를 확인할 수 있다 <소스 2. 기호에 대한 대체 콘텐츠>
```xml
```
**5) 특수문자 또는 기호 등으로 상승/하락, 상한/하한, 더보기 등의 정보를 제공하거나 ASCII 심벌 기호를 이용하여 얼굴 형상을 표현하거나, 한글 자음 또는 모음을 나열하여 감정을 표현하는 문자 이모티콘을 심벌 또는 문자로만 나열하여 제공한 경우**
- alt 속성을 이용하여 순위 정보 또는 주가의 상승 및 하락에 대한 내용을 나타낼 수 있다 Alt 속성은 <img>요소에만 사용 가능합니다. eXbuilder6에 맞춰 변경해야 합니다. 하단 소스는 <img>의 대체텍스트 제공 방법을 나타냅니다.\[3.1.1.1 대체 텍스트 처리\] 예제 참조
<소스 3. alt 에서의 특수기호 사용>
```xml
```
**6) 이미지 요소에 IR 기법 제공시 display:none 또는 visibility:hidden 속성을 사용한 경우 **
- display: none 이나 visibility:hidden 을 사용하지 않고 포지셔닝 기법으로 접근성 있게 대체 텍스트를 제공할 수 있다
- overflow : hidden 과 이미지 요소의 위치를 변경하여 해결이 가능하다
<그림 3. IR 기법 제공을 위한 이미지 컨트롤 배치>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/QfQimage.png)
<그림 4. 이미지 컨트롤 앵커>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/JS1image.png)
<그림 5. 포지셔닝 기법 사용>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/xQZimage.png)
- 앵커와 overflow 속성을 지정하여 화면에서 벗어나 사용자에게 보이지 않지만 다음과 같은 결과를 확인할 수 있다
<소스 4. overflow:hidden 지정 결과>
```xml
```
#### 2.1.2. 텍스트 아닌 콘텐츠에 대한 대체 텍스트를 적절하게 제공
대체텍스트를 제공하는 aria-label 속성이 무분별하게 사용되면 스크린리더 사용시 콘텐츠 탐색에 오류를 야기할 수 있다.
- 의미없이 제공되는 aria-label=”” 과 title=”” 같이 빈 값으로 제공되는 속성은 스크린리더에 혼란을 줄 수 있기 때문에 eXbuilder6는 빈 값으로 설정된 tooltip이나 fieldLabel 속성은 aria-label이나 title속성으로 생성하지 않는다.
**1) 대체텍스트의 정보가 불충분하게 제공된 경우, 대체텍스트가 오타 또는 업데이트가 되지 않은 경우, 조직도, 도식 이미지, 차트 등 복잡한 이미지의 대체 텍스트는 단순 텍스트 제공 이상의 상호 관계, 수식, 흐름 등 충분한 설명을 제공해야 함**
\[3.1.1.1 대체 텍스트 처리\] 예제 참조
**2) 장식 또는 꾸밈의 목적으로 제공된 의미 없는 이미지(또는 배경이미지)에 대체텍스트를 제공한 경우, 이미지맵의 img 요소에 대체텍스트가 빈 값(alt=””) 또는 잘못 제공된 경우**
- 의미없이 제공되는 alt=”” 과 같이 빈 값으로 제공되는 속성은 스크린리더에 혼란을 줄 수 있기 때문에 이미지컨트롤의 alt 속성을 빈 값으로 설정한 경우 이미지컨트롤은 alt 속성을 생성하지 않는다 의미가 없는 이미지는 alt=””로 대체텍스트 속성을 제공해야합니다.
**3) longdesc 연결되지 않는 경우**
- longdesc 속성은 미지원
**4) QR 코드, CCTV 등 실시간 영상 등에 대한 대체 텍스트는 콘텐츠의 용도나 목적을 알 수 있도록 제공**
- QR 코드를 이미지 컨트롤을 통해 나타내고 이미지 컨트롤의 alt, tooltip 속성을 통해 대체 텍스트를 제공할 수 있다
Title 속성으로는 대체텍스트가 인정되지 않습니다.
<그림 6. 이미지에 표시된 QR 코드>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/2Jyimage.png)
- alt 속성에 URL을 입력하여 대체텍스트를 제공할 수 있다
<소스 5. QR 코드의 URL 입력>
```xml
```
- HTML 스니펫 컨트롤을 사용하여 QR 코드 이미지에 사용한 목적이나 용도를 대체 텍스트로 제공하고 이동할 수 있는 링크도 제공할 수 있다
<소스 6. HTML 스니펫으로 대체텍스트 제공>
```xml
```
\[3.6.1.2 <a> 태그 처리\] 예제 참조
**5) 자동 가입 방지 이미지(CAPTCHA)에 대하여 대체 텍스트를 빈 값이나 동등한 텍스트 정보로 제공하지 않은 경우 음성 등의 대체 수단을 제공해야 함**
- 이미지 컨트롤의 src를 CAPTCHA를 제공하는 서버 URL로 설정하면 이미지 컨트롤 내에서 CAPTCHA이미지를 표현할 수 있다.
- 추가로 음성듣기 버튼을 제공하여 대체 수단을 제공할 수 있다.
<그림 7. 자동 가입 방지 이미지 대체텍스트 제공>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/Cjiimage.png)
#### 2.1.3. 사용자가 등록한 텍스트가 아닌 콘텐츠에 대해 관리자가 대체 텍스트 등록을 유도하는 안내 또는 대체 수단 입력 기능을 제공
- 사용자가 업로드한 이미지 파일을 화면에 출력하는 경우 대체 텍스트 값을 업로드하는 파일과 함께 입력 받아 화면에 출력할 때 alt에 값을 바인딩하여 표현할 수 있다
\[3.1.1.2 바인딩\] 예제 참조
#### 2.1.4. 기타
**1) alt 와 title 값을 동일하게 제공한 경우**
- alt 속성에는 대체텍스트를 작성하고, tooltip 속성에는 부가 설명을 작성할 수 있다
(alt 와 tooltip 이 동일한 내용인 경우 리더에서 같은 내용이 두 번 읽히기 때문에 유의해야 한다)
\[3.1.1.1 대체 텍스트 처리\] 예제 참조
**2) 썸네일로 사용되는 단순 이미지가 해당 텍스트와 함께 링크에 포함될 경우 alt 중복설명 제공된 경우, 링크를 포함하며 텍스트 없이 단독으로 제공되는 이미지에 <a title=”설명”>은 제공되고 있으나 이미지의 alt를 빈 값으로 제공한 경우**
\[3.6.1.2 <a> 태그 처리\] 예제 참조
**3) 플래쉬로 제작된 콘텐츠의 대체텍스트**
- 해당 없음
### 2.2. 자막 제공
(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
준수기준 : 영상, 음성 등 멀티미디어 콘텐츠를 동등하게 인식할 수 있는 자막, 원고 또는 수화를 제공해야 한다
#### 2.2.1. 멀티미디어 콘텐츠에 자막, 원고, 수화 중 하나 이상의 대체 수단을 제공
**1) 멀티미디어 콘텐츠에 대한 대체수단을 제공하지 않은 경우**
- 디자인 편집기에 비디오 컨트롤을 이용하여 멀티미디어 콘텐츠를 배치할 수 있다
<그림 8. src 속성 지정>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/hGqimage.png)
위의 속성을 지정하면 다음과 같은 결과가 나타난다.
<소스 7. 비디오의 src 속성 설정>
```xml
```
- 읽을 수 있는 자막은 아웃풋컨트롤과 혼합된 UDC를 개발하여 표시할 수 있다.
- 비디오 컨트롤과 혼합하여 사용하는 아웃풋 컨트롤에 ariaLive 속성을 사용하여 자막을 실시간으로 인식할 수 있다.
- 별도의 버튼(자막 표시/숨김)을 사용하여 자막 표시상태를 수정할 수 있게 한다.
- 자막이 표시되지 않을 경우 아웃풋 컨트롤의 ariaLive속성을 none(default)로 설정한다.(aria-live : 실시간으로 내용을 갱신하여 스크린리더에서 음성 피드백으로 알립니다. 값으로 polite, assertive, off(default)를 설정할 수 있으며 갱신하는 내용의 중요도에 따라 선택합니다.)
<그림 9. 리더로 읽을 수 있는 자막 컨트롤>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/4DBimage.png)
**2) 음성이 없는 동영상(시각적 정보만 제공)에 대체수단이 없는 경우(ppt, 슬라이드쇼, 동영상 등)**
- 비디오컨트롤 또는 HTML 오브젝트를 이용한 UDC를 개발하여 제공할 수 있다
**3) 배경음만 재생되는 단순 동영상에 대체수단이 없는 경우**
- 영상의 설명을 요약하여 아웃풋 컨트롤 또는 HTML 스니펫 컨트롤로 제공할 수 있다
**4) 파일로 제공되는 영상, 음성 콘텐츠에 대체수단이 제공되지 않은 경우**
\[3.6.1.2 <a> 태그 처리\] 예제 참조
#### 2.2.2. 멀티미디어 콘텐츠에 대한 대체 수단의 내용을 적절하게 제공
**1) 멀티미디어 콘텐츠의 내용을 일부 누락하거나 요약하여 제공하여서는 안됨, 멀티미디어 콘텐츠에 대한 대체 수단 제공 방식이 적절하지 않은 경우 오류**
- 영상의 설명을 요약하여 아웃풋 컨트롤 또는 HTML 스니펫 컨트롤로 제공할 수 있다
#### 2.2.3. 사용자가 등록한 멀티미디어 콘텐츠에 대해 관리자가 대체 수단 등록을 유도하는 안내 또는 대체 수단 입력 기능을 제공
**1) 멀티미디어 콘텐츠에 대한 대체 수단 제공 방식이 적절하지 않은 경우 오류**
- 해당 없음
### 2.3. 색에 무관한 콘텐츠 인식
(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
준수기준 : 색을 배제하여도 인식할 수 있는 콘텐츠를 제공해야 한다
- 쉘 컨트롤을 통해 차트를 제공할 때 차트의 표현은 색상에만 의존하지 않고 무늬 등을 통해 구분할 수 있도록 제공되어야 한다
### 2.4. 명확한 지시 사항 제공
(명확한 지시 사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
준수기준 : 지시 사항 정보를 특정 감각에 의존하지 않고 다양한 감각을 통해 용도나 목적을 이해할 수 있도록 제공해야 한다
#### 2.4.1. 색, 크기, 모양, 방향 등 지시사항을 시각정보 외에 별도 안내 내용과 함께 제공
- 아웃풋 컨트롤을 배치하여 value 속성을 통해 지시사항에 대해 상세하게 작성할 수 있다
\[3.3.1 입력 계열 컨트롤의 레이블 활용 가이드\] 참조
#### 2.4.2. 소리 등 지시사항을 청각정보 외에 별도 안내내용과 함께 제공
\[2.4.1 색, 크기, 모양, 뱡향 등 지시사항을 시각정보 외에 별도 안내 내용과 함께 제공\] 참조
### 2.5. 텍스트 콘텐츠의 명도 대비
(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
준수기준 : 내비게이션(메뉴) 및 본문 콘텐츠에서 텍스트의 명도 대비가 4:5:1 이상 이거나, 18pt 또는 굵은 14pt 이상에서 3:1 이상이어야 한다
#### 2.5.1. 일반 텍스트 또는 이미지 텍스트의 명도 대비는 3:1
- 콘텐츠의 명도는 Properties의 ‘스타일’ 탭에서 색상을 수정하여 대비를 만족할 수 있도록 할 수 있다
### 2.6. 자동 재생 금지
(자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
준수기준 : 배경음 사용하지 않았거나 3 초 이내 또는 바로 정지 할 수 있는 배경음 콘텐츠를 사용해야 한다
- 자동으로 재생되는 경우, 비디오 컨트롤의 displayControl 속성을 true 로 설정하면 재생을 멈추거나 소리를 끌 수 있는 기능을 표시할 수 있다
<그림 10. 비디오 컨트롤의 조작 기능 표시>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/aGpimage.png)
### 2.7. 콘텐츠 간의 구분
(콘텐츠 간의 구분) 이웃한 콘텐츠는 구분될 수 있어야 한다.
준수기준 : 이웃한 콘텐츠가 테두리, 구분선, 서로 다른 무늬 등을 이용하여 시각적으로 구분되도록 제공되어야 한다
#### 2.7.1. 이웃한 콘텐츠를 테두리를 이용하여 구분
- 이웃한 콘텐츠를 아래 1 가지 방법 이상으로 구분하지 않은 경우 테두리를 이용하여 구분
1. 1. 컨트롤의 보더 스타일을 이용하여 구분함
2. 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분함
3. 서로 다른 무늬를 이용하여 구분함
4. 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분함
5. 줄 간격 및 글자 간격을 조절하여 구분함
6. 기타 콘텐츠를 시각적으로 구분할 수 있는 방법 등을 이용하여 구분함
**1) 이웃한 콘텐츠는 서로 같은 수준의 콘텐츠로 저 시력 사용자도 구분할 수 있을 정도로 구분해주는 것을 권장, 테두리, 구분 선, 콘텐츠 배경 색 간의 명도 대비, 기타 시각적으로 구분할 때 구분을 위한 색과 배경색의 명도 대비가 4.5:1 이상이 되도록 하는 것을 권장**
- 각 컨트롤의 Properties의 ‘스타일’ 탭에서 ‘border’, ‘background-color’ 등의 속성을 수정하여 구분할 수 있다
- 폼 레이아웃의 구분선을 설정할 경우, Properties의 ‘레이아웃’ 탭에서 설정할 수 있다
<그림 11. 폼레이아웃과 HTML 스니펫 컨트롤의 border 스타일>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/bPlimage.png)
- 폼레이아웃을 선택한 뒤 Properties의 ‘레이아웃’ 탭에서 구분선의 스타일을 설정할 수 있다
- 컨트롤의 border는 ‘스타일’ 탭의 border 속성에서 설정할 수 있다
<그림 12. 폼 레이아웃 구분선 스타일 설정>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/05vimage.png)
### 2.8. 키보드 사용 보장
(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
준수기준 : 모든 기능이 키보드로 접근 및 운용 가능하도록 제공되어야 한다
#### 2.8.1. 마우스로 제어할 수 있는 요소를 키보드로 제어 가능
**1) 마우스 이벤트만 적용된 경우**
- eXbuilder6의 컨트롤은 마우스 이벤트와 대응되는 키보드 이벤트를 제공한다
<표 1. 컨트롤의 마우스, 키보드, 포커스 이벤트>
**컨트롤 **
**이벤트 **
**비고 **
**마우스 **
**키보드 **
**포커스 **
HTML 스니펫
○
○
○
HTML 스니펫은 포커스를 가지지 않으나 내부 태그 요소는 포커스를 가질 수 있음. 단 tabIndex 속성을 통한 임의 포커스 순서 제어는 지원하지 않고 태그의 순서대로만 포커스가 이동함.
HTML 오브젝트
X
X
X
MDI 폴더
○
○
○
헤더영역이 포커스를 가짐
탭 폴더
○
○
○
헤더영역이 포커스를 가짐
그룹
○
○
X
그룹은 포커스를 가지지 못하나 포함한 컨트롤은 포커스를 가질 수 있음
그리드
○
○
○
아웃풋
○
X
X
tabIndex를 지정하면 포커스를 받을 수 있음
인풋박스
○
○
○
buttonFocusable 속성값이 true(기본값 false)인 경우 삭제 버튼도 포커스를 받을 수 있음
넘버에디터
○
○
○
데이트인풋
○
○
○
마스크에디터
○
○
○
텍스트에리어
○
○
○
서치인풋
○
○
○
buttonFocusable 속성값이 true(기본값 false)인 경우 검색, 삭제 버튼도 포커스를 받을 수 있음
리스트박스
○
○
○
링크드리스트박스
○
○
○
콤보박스
○
○
○
링크드콤보박스
○
○
○
체크박스
○
○
○
체크박스그룹
○
○
○
임베디드앱
○
○
X
임베디드앱은 포커스를 가지지 못하나 포함한 컨트롤은 포커스를 가질 수 있음
임베디드페이지
X
X
X
다이얼로그
○
○
○
다이얼로그 타이틀과 닫기 버튼도 포커스를 받을 수 있음
이미지
○
○
○
버튼
○
○
○
라디오버튼
○
○
○
메뉴
○
○
○
트리
○
○
○
네비게이션바
○
○
○
캘린더
○
○
○
쉘
X
X
X
슬라이더
○
○
○
알림
X
X
X
아코디언
○
○
○
아코디언의 헤더영역이 포커스를 가짐
파일업로드
○
○
○
파일인풋
○
○
○
페이지인덱서
○
○
○
프로그레스
○
○
X
- mouseover 이벤트에 자바스크립트를 적용한 경우 대응될 수 있는 키보드 이벤트인 focus를 함께 적용한다
**2) 이미지 또는 초점을 받을 수 없는 요소에 onClick 이벤트가 적용된 경우, 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트만 적용되어서는 안된다**
\[3.2.4 onclick 이벤트 및 onkeydown 이벤트\] 예제 참조
**3) a 요소에 href 속성이 제공되지 않아 키보드 접근 및 초점이 표시되지 않는 경우**
- href 가 포함된 a 요소를 HTML 스니펫 컨트롤 혹은 임베디드 페이지를 통하여 제공할 수 있다
- HTML 스니펫 컨트롤의 value 속성에 a 태그를 작성한 후 tab 키를 통해 초점을 이동할 수 있다
<소스 8. 임베디드 페이지에 표시할 HTML - src>
```xml
토마토시스템토마토시스템
```
<그림 13. 임베디드 페이지로 a 태그 구현>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/VPDimage.png)
<그림 14. 임베디드 페이지 구현 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/AY6image.png)**4) 키보드 포커스가 필요한 플래쉬 콘텐츠의 wmode를 transparent, oqaque 로 제공하는 경우**
- HTML 오브젝트 혹은 임베디드 페이지를 통해 플래쉬를 제공할 수 있다
<그림 15. HTML 오브젝트로 플래쉬 구현>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/WiLimage.png)
이때, 플래쉬 콘텐츠의 wmode 속성을 transparent, oqaque 로 설정하지 않는다
<소스 9. wmode의 transparent, oqaque 오류 예시>
```xml
```
**5) 키보드 포커스가 필요 없는 플래쉬 콘텐츠의 wmode를 window 로 제공하는 경우**
- 플래쉬의 wmode 속성을 window 로 제공하지 않는다
<소스 10. wmode의 window 오류 예시>
```xml
```
**6) 스크롤 되는 콘텐츠는 키보드로도 이용할 수 있어야 함**
- 스크롤이 있는 컨트롤에 포커스가 있는 상태일 때 방향키를 사용하여 스크롤의 위치를 변경할 수 있다
\[3.2.1. 초점 제어\] 예제 참조
<그림 16. vertical-layout 설정>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/SSyimage.png)
<그림 17. vertical-layout 설정 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/GKQimage.png)<그림 18. 그리드 컨트롤의 스크롤>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/1JZimage.png)
- 그리드 컨트롤은 화살표 키를 사용하여 행 이동을 통해 스크롤을 이동할 수 있다 7) select에 onChange를 사용하여 select option 값을 선택하는 것만으로 페이지가 새롭게 변경되는 경우
\[3.2.3 컨트롤의 내부 이동 단축키\] 예제 참조
- 콤보박스의 selection-change 이벤트에 페이지가 새롭게 변경되도록 구현하는 것이 아니라, select에서 값 선택 후 버튼 컨트롤을 통해 이동될 수 있도록 구현한다
- 버튼 컨트롤을 클릭하면 하단의 임베디드 페이지 컨트롤을 통해 페이지가 이동할 수 있다
<그림 19. 페이지 이동을 위한 컨트롤 배치>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/pD3image.png)
<소스 11. 버튼 클릭했을 때 페이지 이동 이벤트>
```javascript
/*
* "이동" 버튼에서 click 이벤트 발생 시 호출.
* 사용자가 컨트롤을 클릭할 때 발생하는 이벤트.
*/
function onBtn1Click( /* cpr.events.CMouseEvent */ e) {
/**
* @type cpr.controls.Button
*/
var btn1 = e.control;
var ep = app.lookup("ep1");
ep.src = "http://www.tomatosystem.co.kr";
}
```
위의 내용을 실행하면 다음과 같은 결과를 확인할 수 있다.
<그림 20. 페이지 이동 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/dFNimage.png)
#### 2.8.2. 기타
**1) 반복영역 건너뛰기 링크에 키보드 접근이 불가능한 경우**
- 디자인 특성상 건너뛰기 링크를 보이지 않도록 구현하는 경우에도 키보드 접근에 의해 초점을 받으면 건너뛰기 링크가 표시되어야 하므로 CSS를 사용하여 구현 가능하다
<소스 12. 건너뛰기 링크 구현 예시>
```xml
토마토시스템
```
\[3.4.1 네비게이션바 컨트롤을 이용한 반복영역 건너뛰기\] 예제 참조
**2) onFocus=”this.blur();” 사용 오류**
- focus 이벤트에 app.lookup(ControlId).blur() API 를 사용하지 않는다
**3) 스크립트 사용으로 인한 키보드 함정에 빠진 경우**
- 메뉴를 제공하는 네비게이션 바는 키보드 방향키로 메뉴 간 이동을 제공하고 탭 키는 다른 컨트롤로 초점을 이동시켜 초점 이동이 메뉴에 갇히는 것을 방지한다
\[3.2.1 초점 제어\] 예제 참조
### 2.9. 초점 이동
(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 준수기준 : 운용 가능한 개체(링크, 버튼, 서식 등)들에 키보드로 접근 시 초점을 인지할 수 있고 논리적 순서로 이동되어야 한다
#### 2.9.1. 초점의 이동 순서를 논리적이고 일관성 있게 제공
**1) 초점의 이동순서(문서구조)가 논리적이지 않으며 일관성이 없는 경우**
- 키보드의 접근 순서를 논리적 순서로 제공해야 하기 때문에 tabindex를 지정할 때 순차적으로 지정할 수 있도록 한다
tabindex는 팔레트 뷰의 도구(Tab Index)를 사용하면 편리하게 지정이 가능하다
- 복합적인 구조를 가진 UI에서 tabIndex의 지정은 자칫 의도치 않게 논리적 모순이 발생할 수 있기 때문에 tabIndex 를 통한 초점 이동 보다는 컨트롤의 생성 순서를 조절하여 자동으로 초점이 이동 될 수 있도록 지정하는 것을 권장한다
UDC 로 구현된 컨트롤 내부의 tabIndex 와 UDC를 포함하는 외부 App의 tabIndex간의 모순
\[2.8.1 마우스로 제어할 수 있는 요소를 키보드로 제어 가능\] 참조
**2) 초점의 이동순서(로그인, 검색 등 기능을 담고 있는 콘텐츠)가 논리적이지 않으며 일관성이 없는 경우**
\[3.2.1 초점 제어\] 예제 참조
**3) 초점의 이동순서(제목과 콘텐츠가 분리됨)가 논리적이지 않으며 일관성이 없는 경우**
- Outline 뷰에서 컨트롤의 생성 순서를 논리적인 초점 이동 순서에 맞게 지정한다
\[3.2.1 초점 제어\] 예제 참조
**4) Tab 컨텐츠에서 제목과 내용이 display:none, block 으로 구분 되었을 때 초점이동이 논리적이지 않은 경우**
- TabFolder, MDIFolder 컨트롤의 TabItem 생성시, TabItem의 순서대로 초점이동이 가능하다
- 탭컨트롤은 좌/우 방향키로 탭버튼 간에 이동되고 선택된 탭아이템에서 탭키를 통해 탭 내부 컨텐츠로 이동한다
- 아코디언은 키보드 탭키를 통해 선형화된 순서로 초점이 이동한다
- 아코디언 타이틀 A -> 아코디언 A 의 내부 컨텐츠 -> 아코디언 타이틀 B -> 아코디언 B 의 내부 컨텐츠
- 아코디언은 상/하 방향키를 통해 아코디언 타이틀 간의 초점이동이 가능하다
\[3.2.3 컨트롤의 내부 이동 단축키\] 예제 참조
<그림 21. TabFolder 컨트롤의 TabItem 초점 이동>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/lBjimage.png)
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/g4pimage.png)
**5) 페이지 로딩 시 제공되는 화면을 가리는 레이어 팝업 또는 모달창**
- app.openDialog()를 통하여 화면 전체를 가리는 다이얼로그(팝업)을 여는 경우 닫기 버튼을 별도로 두어 다이얼로그를 닫을 수 있도록 구현한다
- 다이얼로그를 닫을 수 있도록 1) 다이얼로그 Prop에서 headerClose를 true 로 설정한다. 2) 다이얼로그에서 headerClose 를 false 로 설정하였을 경우에는 다이얼로그를 닫을 수 있는 컨트롤을 추가하고, 다이얼로그를 닫을 수 있도록 app.close() 스크립트를 추가한다
- 다이얼로그를 열었을 때 다이얼로그 내 초점이동이 가능하도록 dialog.focus() 스크립트를 추가한다.
<소스 13. 다이얼로그 닫기 예제(1)>
```javascript
app.openDialog("appURI", { width: 400, height: 300, headerClose: true }, function(dialog) {
dialog.ready(function(dialogApp) {
//필요한 경우, 다이얼로그의 앱이 초기화 된 후, 앱 속성을 전달하십시오.
});
}).then(function(returnValue) {
;
});
```
<소스 14. 다이얼로그 닫기 예제(2)>
```javascript
/*
* "Button" 버튼에서 click 이벤트 발생 시 호출.
* 사용자가 컨트롤을 클릭할 때 발생하는 이벤트.
*/
function onButtonClick( /* cpr.events.CMouseEvent */ e) {
/**
* @type cpr.controls.Button
*/
var button = e.control;
app.close();
}
```
- 다이얼로그 또는 그리드 필터 다이얼로그 열기 시 닫았을 경우, 열기 전 컨트롤에 초점이 이동할 수 있도록 구현한다
<소스 15. 팝업 닫기 후 초점 이동 예제>
```javascript
app.openDialog("appURI", {width : 400, height : 300, headerClose : true}, function(dialog){
dialog.addEventListener("close", function(e){
button.focus();
});
});
```
<소스 16. 그리드 필터 팝업 닫기 후 초점 이동 예제>
```javascript
/*
* 그리드에서 filterdialog-close 이벤트 발생 시 호출.
* 필터팝업을 닫을때 발생하는 이벤트.
*/
function onGrdFilterdialogClose(/* cpr.events.CGridEvent */ e) {
app.lookup("btnOpen").focus();
}
```
\[3.2.2 다이얼로그\] 예제 참조
**6) tabindex 속성을 이용하여 키보드 포커스의 순서를 강제로 변경하여 논리적인 순서가 순차적이지 않을 경우, 스크립트 사용으로 인한 비 논리적 이동 및 함정은 오류**
[3.2.1 초점 제어] 예제 참조
#### 2.9.2. 초점 또는 키보드의 위치를 나타내는 요소를 시각적으로 표시
**1) onFocus=”this.blur();” 사용 오류**
- foucs 이벤트에 blur() API를 사용할 경우 초점이 강제로 사라지기 때문에 해당 스크립트 작성을 하지 않도록 한다
**2) hideFocus 적용 시, outline:0, none 적용 시**
- CSS를 수정하여 초점의 라인을 없애는 것이 아니라 초점이 시각적으로 표시될 수 있도록 한다
- 컨트롤의 초점 점선라인을 없애는 속성을 사용하지 않도록 한다
<소스 17. outline:0, none 오류 예제>
```javascript
.cl-checkbox.cl-focus .cl-checkbox-icon {
outline : none;
}
```
**4) <a> 요소에 포함된 엘리먼트에 float, display, position 등의 속성이 적용된 경우**
- HTML을 작성하여 HTML 스니펫 또는 임베디드 페이지 컨트롤을 이용할 경우에는 <a> 요소에 float, display, position 등의 속성을 적용하지 않는다
#### 2.9.3. 텍스트 등 운용할 수 있는 요소에 초점을 제공
- 이미지 또는 초점을 받을 수 없는 요소에 자바스크립트 이벤트를 사용하여 특정 기능을 수행하도록 제공한 경우 마우스를 사용할 수 없는 환경에서 키보드만으로 해당 요소를 실행하는 것이 불가능하기 때문에 초점을 받을 수 있는 요소 혹은 컨트롤을 사용하여 제공하는 것을 권장한다
[3.2.4 onclick 이벤트 및 onkeydown 이벤트] 예제 참조
#### 2.9.4. 키보드 접근이 가능하여 초점을 제공
**1) 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트만 적용되어 있는 경우**
- 이미지 또는 초점을 받을 수 없는 컨트롤에 마우스 이벤트만 적용했을 경우에는 키보드 접근시에도 동일한 기능을 실행할 수 있도록 제공한다
ex) mouseenter 이벤트 제공 시 focus 이벤트도 함께 제공하거나 mouseleave 이벤트 제공 시 blur 이벤트도 함께 제공한다
\[3.2.4 onclick 이벤트 및 onkeydown 이벤트\] 예제 참조
**2) a 요소에 href 속성이 제공되지 않아 초점이 확인되지 않는 경우**
- HTML 스니펫 혹은 임베디드 페이지 컨트롤을 이용하여 <a> 요소를 사용할 때는 반드시 href 속성을 제공하여 키보드 접근 및 초점이 표시될 수 있도록 한다
### 2.10. 조작 가능
(조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
준수기준 : 웹 페이지에서 제공하는 모든 이웃한 컨트롤들은 개별적으로 선택하고 사용할 수 있도록 대각선 길이가 6.0mm 이상의 크기와 컨트롤의 안쪽 여백이 1 픽셀 이상을 갖도록 제공되어야 한다
#### 2.10.1. 컨트롤의 크기가 대각선으로 6.0mm 이상으로 제공
- 컨트롤의 크기가 대각선으로 6.0mm 미만이 되지 않도록 컨트롤의 크기를 조정한다. 컨트롤 크기 조정은 Properties 뷰의 레이아웃에서 변경할 수 있다
<그림 22. 컨트롤 크기 변경>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/uETimage.png)
- 통상적으로 라디오 버튼 사이즈보다 작은 경우 오류로 분류된다
#### 2.10.2. 링크, 사용자 입력, 기타 컨트롤의 테두리 안쪽으로 1 픽셀 이상의 여백을 제공
- 링크, 사용자 입력, 기타 컨트롤의 테두리 안쪽으로 1 픽셀 이상의 여백을 주어 간섭이 없도록 제공해야 한다
### 2.11. 응답 시간 조절
(응답 시간 조절) 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다. 준수기준 : 시간 제한이 있는 콘텐츠의 응답 시간을 조절할 수 있어야 한다
#### 2.11.1. 시간 제한이 있는 콘텐츠를 제어할 수 있는 수단을 제공
**1) 로그아웃, 인증 요청 등 시간제한이 있는 콘텐츠에 남은 시간을 알려주지 않거나 제어할 수 있는 수단을 제공하지 않은 경우**
- 사용자가 로그인 후 제한 시간 또는 남은 시간을 알려줄 수 있도록 로딩 화면을 제공할 수 있다
<그림 23. 로그인 후 잔여 세션시간>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/GUXimage.png)
**2) 페이지가 전환될 경우 이를 제어할 수 있는 수단을 제공하지 않은 경우**
- 페이지 내에 수동으로 갱신할 수 있는 버튼을 배치하거나 해당 페이지가 일정시간 이후 자동으로 갱신된다는 것을 알려 스스로 자동 갱신을 제어할 수 있도록 정지 또는 연장 수단을 제공한다
**3) 제한 시간이 있는 콘텐츠의 경우 해당 내용을 확인할 수 있는 수단 제공**
- 알림컨트롤은 불특정 하게 시스템이 사용자에게 알림 메시지를 출력할 수 있도록 제공하는 컨트롤이다.
- 알림메시지는 기본(default), 성공(success), 정보(info), 경고(warning), 위험(danger)의 타입을 가지며 정해진 시간(delay) 만큼 보인 후 화면에서 사라진다.
- 일정 시간이 지난 후 사라지는 알림메시지의 경우 사라진 알림 내용을 확인할 수 있는 알림방을 제공하거나 닫기 버튼을 제공하여 사용자가 임의로 메시지를 닫기 전까지 메시지를 화면에 유지시켜야 한다
알림방이란, 지난 알림 내용을 리스트 형태로 확인할 수 있는 영역을 뜻한다
<그림 24. 닫기 버튼을 제공하는 알림컨트롤>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/A0bimage.png)
- 알림컨트롤의 delay 속성을 충분히 설정하고 close 속성을 true 로 설정하면 각 알림메시지에는 닫기 버튼이 보여지고 닫기 버튼을 클릭하기 전까지 메시지를 유지시킬 수 있다
<소스 18. 닫기 버튼을 제공하는 알림컨트롤>
```javascript
/*
* Body에서 init 이벤트 발생 시 호출.
* 앱이 최초 구성될 때 발생하는 이벤트 입니다.
*/
function onBodyInit( /* cpr.events.CEvent */ e) {
var notifier = new cpr.controls.Notifier("noti");
notifier.close = true;
notifier.delay = 9999999999;
notifier.addEventListener("notify", function(e) {
var noti = e.control; // 알림메시지가 출력되었을 때 메시지에 포커스 주기
setTimeout(function() {
noti.focusItem(e.item);
}, 1000);
});
app.getContainer().addChild(notifier, {
"top": "20px",
"right": "20px",
"width": "300px",
"height": "30px"
});
}
```
<그림 25. 알림방제공>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/BWuimage.png)
- 일정시간 후 알림메시지가 자동으로 사라지도록 알림컨트롤을 사용하는 경우 위와 같이 전체 알림메시지를 볼 수 있는 알림방을 제공해야 한다
- 알림방은 알림메시지가 보일 때 메시지 목록을 Array에 저장하고 있다가 알림방 목록 출력 이벤트가 발생했을 때 Array에 있는 내용을 출력하는 방식으로 구현이 가능하다
#### 2.11.2. 제한 시간을 해제 또는 연장하는 방법에 충분한 시간을 제공
- 시간제한에 대한 연장은 연장수단에 도달하기까지 걸리는 부분에 대한 시간의 10 배로 제공해야 한다
- 현행에서는 시간제한에 대한 연장 또는 정지 방법에 대한 안내는 최소 20 초 이상 남아있는 상태에서 제공해야 웹 접근성을 준수한 것으로 본다
### 2.12. 정지 기능 제공
(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 준수기준 : 자동으로 변경되는 콘텐츠를 제어할 수 있도록 제공하여야 한다
#### 2.12.1. 시간에 따라 자동으로 변경되는 콘텐츠에 정지, 이전, 다음 기능을 제공
- 자동으로 갱신되는 정보의 경우 정지 기능을 사용하여 충분한 시간을 보내고 정보를 이해할 수 있도록 제공해야 한다
<그림 26. 자동으로 갱신되는 배너>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/GXuimage.png)
- tab 키를 통해 이동 또는 재생/정지 버튼에 포커스를 맞출 수 있으며, 엔터키를 눌러 동작할 수 있다
<소스 19. 시간에 따라 자동 변경되는 예시>
```javascript
/*
* Body에서 load 이벤트 발생 시 호출.
* 앱이 최초 구성된후 최초 랜더링 직후에 발생하는 이벤트입니다.
*/
function onBodyLoad(e) {
//일정 시간마다 색을 변경할 수 있도록 타이머를 설정한다.
setInterval(function() {
var grp = app.lookup("grp");
//다음 색상이 없으면 처음 색상으로 표시한다.
var ds = app.lookup("ds1");
if (ds.getRowCount() == colorIdx) {
colorIdx = 0;
}
var color = ds.getValue(colorIdx, "color");
grp.style.css({
"background-color": color
});
colorIdx++;
}, 3000);
}
```
<소스 20. 마우스 포인터 진입 시 자동 변경 정지 예시>
```javascript
/*
* 그룹에서 mouseenter 이벤트 발생 시 호출.
* 마우스 포인터가 컨트롤 위에 진입할 때 발생하는 이벤트.
*/
function onGrpMouseenter(e) {
var grp = e.control;
//타이머를 중지한다.
clearInterval(changeColor);
}
```
#### 2.12.2. 시간에 따라 자동으로 변경되는 콘텐츠를 키보드로 제어 가능
[2.12.1 시간에 따라 자동으로 변경되는 콘텐츠에 정지, 이전, 다음 기능을 제공] 참조
### 2.13. 깜빡임과 번쩍임 사용 제한
(깜빡임과 번쩍임 사용 제한) 초당 3~50 회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
준수기준 : 초당 3~50 회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않았거나, 회피할 수 있는 방법을 사전에 알리고 제공하여야 한다
- 깜빡임의 주기와 크기, 변화의 정도에 따라 사용자에게 피로감 혹은 발작이나 졸도 등을 유발할 수 있기 때문에 해당 콘텐츠는 제공하지 않아야 한다
- 깜빡임 혹은 번쩍임을 중단할 수 있는 수단만 제공하는 것뿐만 아니라 이 사항에 대해 미리 알려 중단 또는 회피할 수 있도록 해야 한다
### 2.14. 반복 영역 건너뛰기
(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 준수기준 : 반복되는 영역을 건너뛸 수 있는 링크를 제공하여야 한다
#### 2.14.1. 건너뛰기 링크를 제공
- 페이지마다 반복되는 대메뉴를 건너뛰어 본문의 중요 콘텐츠로 이동할 수 있도록 반복영역 건너뛰기 링크를 제공해야 한다
- 네비게이션 바를 통해 직접 원하는 페이지로 이동하는 화면을 구현할 수 있다
\[3.4.1 네비게이션바 컨트롤을 이용한 반복영역 건너뛰기\] 예제 참조
#### 2.14.2. 건너뛰기 링크의 제공 방법을 적절하게 제공
**1) 키보드 운용 시 화면에 보이지 않게 제공된 경우**
- 디자인 특성상 건너뛰기 링크를 보이지 않도록 구현하더라도 초점을 받으면 건너뛰기 링크가 표시되도록 구현한다
\[2.8.2 기타\] 참조
**2) 건너뛰기 링크에 키보드 접근이 불가능한 경우**
- 건너뛰기는 키보드 접근이 가능하도록 구현해야 한다
- eXbuilder6 에서의 a 태그는 임베디드 페이지, HTML 스니펫 컨트롤로 구현한다
- HTML에서 a 태그의 focus에 스타일을 준다
<소스 21. 초점 스타일 변경 예시>
```css
a:focus{
//포커스 CSS 작성
}
```
**3) 건너뛰기 링크에 키보드 접근이 불가능한 경우(display:none 또는 visibility:hidden; 속성이 사용된 경우)**
- display:none 혹은 visibility : hidden 속성을 사용하면 키보드에 접근이 불가능하기 때문에 포지셔닝 기법을 사용하여 구현한다
\[2.1.1 텍스트 아닌 콘텐츠에 대한 대체 텍스트 제공\] 참조
<그림 27. 포지셔닝 기법 사용 – 컨트롤 위치 변경>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/umMimage.png)
<그림 28. 포지셔닝 기법 사용 – overflow: hidden>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/xAwimage.png)
**4) 건너뛰기 링크를 제공했으나 부적절하게 제공된 경우, 건너뛰기 링크를 제공했으나 href 값 연결 등이 잘못되어 동작하지 않는 경우**
- 링크의 연결 값이 올바르지 않은 경우 해당 기능이 동작하지 않으므로 연결 값을 올바르게 수정한다
**5) 건너뛰기 링크를 제공했으나 건너뛰는(도착) 위치가 부적절하게 지정된 경우**
- 정상적으로 건너뛰기 링크를 이용할 수 있도록 건너뛰기 링크의 목적지를 올바르게 지정한다
<소스 22. 포커스 이동>
```javascript
app.lookup(ControlId).focus();
```
**6) 건너뛰기 링크를 제공하여 화면 스크롤은 되나 실제 키보드 초점은 이동되지 않는 경우**
- 건너뛰기 링크는 화면 뿐만 아니라 초점도 함께 다음 영역의 첫번째 항목으로 지정해야 한다
- eXbuiler6 에서는 포커스가 이동할 경우 자동으로 스크롤도 함께 이동된다
**7) 건너뛰기 링크가 페이지의 상단에 제공되지 않은 경우**
- 건너뛰기 링크는 반복 영역이 있는 모든 페이지의 상단의 일정한 곳에 제공해야 한다
**8) 반복 영역을 건너뛰는 링크 본문 바로가기 등 외에 사용자 운용을 돕기 위한 추가 기능을 제공하였으나 제공 방법이 부적절한 경우**
- 모양, 크기, 위치 방향, 색, 소리 등 시각적인 표시에만 그치지 않고 명시적으로 지시 사항을 제공해야 한다
Ex) →(위치방향)만 표시하는 게 아니라 “우측 메뉴 바로가기”와 같은 명확한 지시 사항도 함께 제공해야 한다
\[2.4.1 색, 크기, 모양, 방향 등 지시사항을 시각정보 외에 별도 안내 내용과 함께 제공\] 참조
### 2.15. 제목 제공
(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 준수기준 : 페이지, 프레임, 콘텐츠 블록에 적절한 제목을 제공하여야 한다
#### 2.15.1. 페이지에 제목을 제공
- 페이지의 제목은 해당 내용을 이해할 수 있도록 적절한 제목을 제공해야 한다
- 페이지의 제목은 App의 title 속성을 변경하여 표시할 수 있다
<그림 29. 페이지에 제목 표시>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/KBlimage.png)
<그림 30. 페이지 제목 표시 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/3Sdimage.png)
#### 2.15.2. 페이지에 제목을 적절하게 제공
**1) 페이지 내용과 다른 제목을 제공한 경우, 분류가 더 가능한데 상위 범주로 제목을 제공한 경우, 동일 페이지 제목이 존재하는 경우**
- 페이지의 제목을 좀 더 상세하게 분류할 수 있다면 상위 범주를 제목으로 하기보다는 내용을 명확하게 이해할 수 있는 제목으로 제공해야 한다
**2) 문서타이틀에 특수문자가 2개 이상 반복된 경우**
- 연속된 특수기호 사용시 스크린리더에서 불필요한 음성을 반복해 출력하므로 시각적으로 장식하기 위한 특수문자는 제공하지 않도록 한다
#### 2.15.3. 프레임 요소에 제목을 제공
- 프레임도 요소의 내용을 이해할 수 있도록 제목을 제공해야 한다
- 내용이 없는 프레임(아이프레임)에도 “빈 프레임”, “내용 없음”과 같이 title을 제공해야 한다
- iframe 이 display: none으로 되어 있는 경우 title 속성을 미제공하면 오류로 인식한다
- 임베디드페이지는 내부적으로 iframe을 사용하기 때문에 임베디드페이지를 사용할 때는 반드시 tooltip 속성을 작성하여야 한다
\[3.3.2 임베디드 페이지 컨트롤의 타이틀 입력\] 참조
#### 2.15.4. 프레임 요소의 제목을 적절하게 제공
- 프레임 요소에 title을 제공할 때는 간결하게 목적이나 용도를 알 수 있도록 해야 한다
Ex) “메인메뉴”, “참고문서” 등으로 설정하는 것은 적절하나 “top 프레임”, “main 프레임” 등은 목적이나 용도를 알 수 없기 때문에 부적절하다
\[3.3.2 임베디드 페이지 컨트롤의 타이틀 입력\] 참조
#### 2.15.5. 콘텐츠 블록에 제목을 제공
**1) 콘텐츠 블록에 h1 ~ h6을 사용하여 제목을 제공하지 않은 경우(콘텐츠 블록의 헤딩이 전혀 제공되지 않는 경우)**
- HTML 스니펫 혹은 임베디드 페이지를 통해 h1 ~ h6 요소를 사용할 수 있다
**2) 콘텐츠 블록 제목에 display: none 또는 visibility: hidden을 적용한 경우**
- 건너뛰기 링크와 동일하게 display: none 또는 visibility: hidden을 사용할 경우 스크린리더에서 접근하지 못하는 문제가 발생하므로 해당 속성을 사용하지 않는다
#### 2.15.6. 콘텐츠 블록에 제목을 적절하게 제공
- HTML 스니펫 혹은 임베디드 페이지를 통해 h1 ~ h6 요소를 사용할 수 있다
**1) 콘텐츠 블록 제목에 잘못된 내용을 제공하고 있는 경우**
- 콘텐츠 블록 제목은 그 내용을 이해할 수 있도록 제공한다
**2) 일관성 있게 <hn>으로 제공되지 않은 경우(<hn>으로 제공된 내용이 중간에 p, span, strong 등 <hn>이 아닌 태그로 제공되는 경우)**
- 콘텐츠 블록 제목은 헤딩 요소(h1 ~ h6)를 사용하여 제공해야 한다
**3) 콘텐츠 블록 제목의 선형화가 맞지 않을 경우**
- 콘텐츠 구조를 이해할 수 있도록 콘텐츠 블록 제목은 논리적인 순서로 선형화가 되어야 한다
Ex) 상위 제목 단계 없이 하위 제목 단계만 있어서는 안 된다
- <hn>의 순서가 잘못된 경우 오류로 볼 수 없어 수정 권장 사항이다
\[3.6.1.3 Heading Tag 의 활용\] 예제 참조
### 2.16. 적절한 링크 텍스트
(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
준수기준 : 링크 텍스트의 용도나 목적을 이해할 수 있도록 제공하여야 한다
#### 2.16.1. 목적이나 용도를 알기 어려운 링크 텍스트를 제공
**1) 빈 링크 제공**
- 스크린리더를 이용하여 웹 페이지를 탐색하는 사용자의 경우 빈 링크 제공 시 해당 링크의 목적이나 용도를 이해하기 어렵기 때문에 빈 링크로 표시하지 않는다
- 빈 링크로 표현되지 않도록 하거나 사용하지 않는 링크인 경우에는 삭제한다
**2) 빈 링크에 title 속성만 제공한 경우**
- 빈 링크 제공과 마찬가지로 빈 링크에 title 속성만 제공할 경우 해당 링크의 목적이나 용도를 이해하기 어렵기 때문에 빈 링크로 표현되지 않도록 하거나 사용하지 않는 링크는 삭제한다.
**3) 의미 있는 이미지를 배경으로 제공하고 링크를 빈 값으로 제공한 경우**
- 의미 있는 배경이미지에는 IR 기법으로 대체텍스트를 제공해서 링크의 목적을 알 수 있도록 해야 한다
**4) 독립적 링크를 포함하는 텍스트 이미지의 alt 가 잘못 제공되었거나 빈 값으로 제공된 경우**
- 링크의 목적이나 용도를 쉽게 이해할 수 있도록 이미지의 alt 값을 올바르게 제공해야 한다.
\[2.1.1 텍스트 아닌 콘텐츠에 대한 대체 텍스트 제공\] 참조
**5) 링크 내 이미지가 의미를 가지고 있으나 대체 텍스트를 제공하지 않은 경우(alt 미제공)**
- 링크의 목적이나 용도를 쉽게 이해할 수 있도록 이미지의 alt 값을 올바르게 제공해야 한다
\[2.1.1 텍스트 아닌 콘텐츠에 대한 대체 텍스트 제공\] 참조
**6) 목적이나 용도를 알기 어려운 링크 텍스트를 제공한 경우**
- 목적이나 용도를 이해하기 어려운 단순 동작의 내용만을 담은 링크 텍스트로 제공하면 직관적으로 해당 파일의 성격이 무엇인지 이해하기 어렵기 때문에 title 속성을 지정하여 마우스 사용자는 툴팁으로, 스크린리더 사용자는 title을 읽어 좀 더 명확하게 파일의 성격을 구분할 수 있도록 제공해야 한다
- title 속성은 eXbuilder6의 각 컨트롤의 tooltip 속성으로 제어가 가능하다
**7) 링크 텍스트를 단순히 URL 경로로만 제공한 경우**
- URL 경로에 링크를 걸지 않고 “메일보내기”와 같은 버튼으로 제공하는 것을 권장한다
**8) 링크의 정보를 이미지의 요소에서 알리는 경우**
- 링크 정보는 이미지 요소에 제공하지 않고 a 요소에 title 로 정보를 제공하는 것을 권장한다
Ex) <a href=”URL”><img src=”url/img.gif” alt=”이미지” title=”새창열림”></a>보다는 <a href=”URL” title=”새창열림”><img src=”url/img.gif” alt=”이미지”></a>
**9) “~를 하려면 여기를 누르세요”와 같이 방향지시로 링크 목적을 안내한 경우**
- 어떠한 기능을 하는 링크인지는 클릭을 해서 해당 링크 페이지로 이동하기 전까지는 알 수 없기 때문에 링크텍스트는 직관적이고 의미 있게 구성해야 한다
- 링크텍스트는 사용자가 링크의 용도나 목적을 명확히 알 수 있도록 수정한다
### 2.17. 기본 언어 표시
(기본 언어 표시) 주로 상아는 언어를 명시해야 한다.
준수기준 : 기본 언어 표시 속성을 사용하여 언어를 명시하여야 한다
#### 2.17.1. 문서 타입에 맞는 기본 언어를 명시
- HTML 문서의 lang 속성을 정의하여 기본 언어의 표현은 eXbuilder6 설정파일을 통해 정의가 가능하다
\[3.5.1 exbuilder.json 의 html-lang 속성을 이용한 기본 언어 설정\] 예제 참조
#### 2.17.2. 문서 타입에 맞는 기본 언어를 적절하게 명시
- 각 컨트롤의 lang 속성은 미지원
### 2.18. 사용자 요구에 따른 실행
(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
준수기준 : 사용자가 의도하지 않은 기능이 실행되지 않도록 해야 한다
#### 2.18.1. 사용자가 실행하지 않은 상황에서 예측하지 않은 새 창이 열리는 경우
- tooltip 속성을 이용하여 새 창이 열릴 것이라고 미리 정보를 제공할 수 있다
<그림 31. tooltip 속성 수정>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/IfMimage.png)
페이지 시작 시, 새 창 또는 화면을 가리는 레이어 팝업을 제공
- 페이지 로딩 시 제공되는 화면을 가리는 레이어 팝업 또는 모달창은 반복 영역 건너뛰기 보다 앞서서 초점이 접근될 수 있도록 구현되어야 한다
\[3.2.2 다이얼로그\] 예제 참조
#### 2.18.3. 사용자가 의도하지 않은 초점 변화나 기능 동작으로 불편을 주는 경우
**1) 초점이 갑자기 사라지지 않도록 지원**
- onfocus = blur(); 기능을 제거함으로써 초점을 잃지 않도록 할 수 있다
<소스 23. blur() 기능 제거필요>
```xml
```
#### 2.23.2. 태그의 중첩 오류
- HTML 오브젝트 또는 HTML 스니펫 컨트롤을 사용하여 시작 태그와 종료 태그의 위치가 다른 태그와 중첩되지 않도록 제공되어야 한다
<소스 25. 태그의 포함관계>
```xml
```
<그림 63. Heading Tag 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/PmWimage.png)
관련 항목 : 2.15. 제목 제공 - 6
```
**2) 이미지맵의 img, area 요소에 alt 미정의 오류인 경우**
\[3.6.1.1 이미지맵 처리\] 예제 참조
**3) longdesc 파일이 없는 경우**
- longdesc 속성은 미지원
**4) 의미 있는 이미지가 배경이미지로 제공되었으나 대체 콘텐츠가 제공되지 않은 경우**
- 정보를 담고 있는 의미 있는 이미지에 해당 이미지의 정보를 alt 속성을 통해 설정할 수 있다.
```
**5) 특수문자 또는 기호 등으로 상승/하락, 상한/하한, 더보기 등의 정보를 제공하거나 ASCII 심벌 기호를 이용하여 얼굴 형상을 표현하거나, 한글 자음 또는 모음을 나열하여 감정을 표현하는 문자 이모티콘을 심벌 또는 문자로만 나열하여 제공한 경우**
- alt 속성을 이용하여 순위 정보 또는 주가의 상승 및 하락에 대한 내용을 나타낼 수 있다 Alt 속성은 <img>요소에만 사용 가능합니다. eXbuilder6에 맞춰 변경해야 합니다. 하단 소스는 <img>의 대체텍스트 제공 방법을 나타냅니다.
\[3.1.1.1 대체 텍스트 처리\] 예제 참조
<소스 3. alt 에서의 특수기호 사용>
```xml
```
**6) 이미지 요소에 IR 기법 제공시 display:none 또는 visibility:hidden 속성을 사용한 경우 **
- display: none 이나 visibility:hidden 을 사용하지 않고 포지셔닝 기법으로 접근성 있게 대체 텍스트를 제공할 수 있다
- overflow : hidden 과 이미지 요소의 위치를 변경하여 해결이 가능하다
<그림 3. IR 기법 제공을 위한 이미지 컨트롤 배치>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/QfQimage.png)
<그림 4. 이미지 컨트롤 앵커>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/JS1image.png)
<그림 5. 포지셔닝 기법 사용>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/xQZimage.png)
- 앵커와 overflow 속성을 지정하여 화면에서 벗어나 사용자에게 보이지 않지만 다음과 같은 결과를 확인할 수 있다
<소스 4. overflow:hidden 지정 결과>
```xml
```
#### 2.1.2. 텍스트 아닌 콘텐츠에 대한 대체 텍스트를 적절하게 제공
```
- HTML 스니펫 컨트롤을 사용하여 QR 코드 이미지에 사용한 목적이나 용도를 대체 텍스트로 제공하고 이동할 수 있는 링크도 제공할 수 있다
<소스 6. HTML 스니펫으로 대체텍스트 제공>
```xml
```
- tooltip 속성으로 제공한 대체텍스트는 브라우저에서 title 속성으로 확인할 수 있다
관련항목: 2.1. 적절한 대체 텍스트 제공 – 1, 2, 4
##### 3.1.1.2. 바인딩
- 사용자가 대체 텍스트 등록을 할 수 있도록 alt 와 tooltip 속성을 바인딩 할 수 있다
- 콤보 박스 컨트롤에서 변경할 속성을 선택한 뒤, 인풋 박스 컨트롤에 텍스트를 입력한다
- 작성한 후, ‘적용’ 버튼을 누르면 스크립트를 통해 대체 텍스트의 내용을 수정할 수 있다
<그림 38. 데이터 바인딩 화면>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/1Lrimage.png)
<소스 27. 사용자가 직접 alt, title 속성 설정>
```javascript
/*
* "적용" 버튼에서 click 이벤트 발생 시 호출.
* 사용자가 컨트롤을 클릭할 때 발생하는 이벤트.
*/
function onBtn1Click( /* cpr.events.CMouseEvent */ e) {
/**
* @type cpr.controls.Button
*/
var btn1 = e.control;
var img = app.lookup("logo");
var val = app.lookup("cmb").value;
var inpt = app.lookup("ipb").value;
if (val == "title") {
img.tooltip = inpt;
} else if (val == "alt") {
img.alt = inpt;
}
app.lookup("ipb1").value = "";
app.lookup("grp1").redraw();
}
```
관련 항목 : 2.1. 적절한 대체 텍스트 제공 – 3
#### 3.1.2. 임베디드페이지
```
<그림 61. 이미지맵 설정 후 결과>
[](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-06/kxuimage.png)
##### 3.6.1.2. <a> 태그 처리
- HTML 스니펫 컨트롤의 value 속성에 a 태그를 작성하여 alt를 설정할 수 있다
<소스 37. img 태그 안에 직접 alt 설정>
```xml
```
<소스 38. alt 를 빈 값으로 제공했을 때 대체 텍스트 설정>
```xml