VINYL C

• - 탭 메뉴를 그룹핑 하는 요소에 tablist role 부여

• - 각각의 탭 메뉴 요소에 tab role 부여

• - 각 탭이 컨트롤 하는 탭 섹션의 id 값을 aria-controls 속성 값으로 설정

• - 각 탭 섹션에 tabpanel role 부여

• - 선택된 탭 메뉴에 aria-selected 속성의 값을 true로 설정

• - 나머지 탭 메뉴들은 aria-selected 속성의 값을 false로 설정하거나 aria-selected 속성을 제거

- 버튼 역할을 하는 요소에 role=“button” 을 지정하면 스크린리더는 해당 요소를 버튼으로 인식하여 읽는다. 또한 토글 버튼의 경우 현재 상태를 알려주어야 하는데 aria-pressed 속성을 사용하면 현재 상태가 눌려져 있는지(true), 눌려져 있지 않은 상태인지 (false)를 스크린리더가 인지하여 읽을 수 있다.

- input 요소에 combobox 역할(Role)을 추가하고 자동완성 기능이 목록 형태로 지원 됨을 알 수있도록 aria-autocomplete 속성(Property)을 list로 설정한다.추천 검색어 목록이 하위 메뉴 형태로 존재함을 인식할 수 있도록 aria-haspopup 속성(Property)을 true로 둔다.

- input요소를 사용하면 당연히 label 요소를 사용해야 하는 것이 원칙이지만, 여기에서는 제목 역할을 label요소 대신 aria-label 속성으로 사용한다. 입력 포맷에 맞지 않아 에러가 발생했을 때는 input요소에 aria-describedby 속성에 추가로 에러메시지의 id와 연결해 주고 에러메시지 발생을 알리기 위해 aria-invalid=“true”를 추가하고 포커스를 input요소로 보내면 에러 발생 상황과 명확한 오류 발생 원인을 스크린리더 사용자에게 알려줄 수 있다.

- 그룹이라는 정보를 제공하기 위해 해당 컨트롤들을 감싸는 요소에 role=“group”을 사용하고, 이 요소에 그룹의 레이블을 설정하기 위해 aria-labelledby 속성으로 레이블 정보를 가지는 요소의 id 값을 연결해주면 스크린리더는 해당 요소로부터 특정한 이름을 가진 그룹으로 정보를 제공할 수 있다.

- 라디오버튼 그룹을 마크업할 때는 스크린리더에서 전체의 목록 개수를 읽어줄 수 있도록 ul, li 요소로 제작하는 것을 권장한다. 전체를 감싸고 있는 컨테이너인 ul 요소에 role=“radiogroup”을 지정하고, 각 li 요소에는 각각 role=“radio”를 삽입 하여 라디오 버튼의 역할을 정의한다. 단, role=“radiogroup”은 하위 요소가 role=“radio” 일 경우에 사용하며, 라디오 그룹으로 묶을 경우는 role=“group”을 사용한다.

- 체크박스의 전체 그룹을 ul 요소로 마크업하고 바로 상위에 헤딩 요소를 사용한다. ul 요소에 role=“group”을 사용하여 그룹화하고, 상위 헤딩 요소에 삽입된 id 값과 aria-labelledby 속 성을 연결하여 그룹의 제목을 지정해 준다.

- 에러가 발생하기 전에는 기본 마크업으로만 되어 있고, 에러가 발생했을 때는 동적으로 aria-invalid 속성이 true가 되고 aria-describedby 속성이 id와 연결되어 생성된다. 그리고 에러가 발생되지 않으면 aria-invalid 속성이 false가 되거나 삭제되어야 하고 에러메시지와 연결된 aria-describedby 속성도 삭제되어야 한다. 그렇지 않으면 계속 에러가 발생한 것으로 오해할 수 있다.

- 툴팁 UI 컴포넌트는 크게 툴팁을 띄우는 요소와 툴팁 요소로 나뉜다. 툴팁을 띄우는 요소에 연결된 툴팁 이 어떤 요소인지를 명시해주고, 툴팁 요소에는 툴팁 역할과 툴팁으로서 식별 가능한 id 속성을 설정해 주면 툴팁 UI 컴포넌트의 접근성을 향상시킬 수 있다.

- 필수 항목으로 설정할 요소(Element)에 aria-required=“true”를 설정하기만 하면 된다.

- aria-labelledby 속성을 사용하면 label 요소에 명시되어 있는 ‘성명’을 무시하므로 주의해야 한다.

- 레이어 팝업의 가장 바깥쪽 요소에 dialog 역할(Role)을 부여한다. 여기에 레이어 팝업의 제목이 되는 텍스트를 담는 요소의 id 값을 aria-labelledby 속성(Property) 값으로 연결하여 제목 관계를 설정 해 주고, 내용에 해당하는 요소의 id 값을 aria-describedby 속성(Property) 값으로 연결하여 이 요소 에 포커싱 될 때 제목과 내용이 한 번에 읽어질 수 있도록 제공한다.

- 전체를 감싸고 있는 ul 요소에는 role=“menubar”를 설정하고 menubar의 메뉴 아이템인 li 요소에 는 role=“menuitem”을 설정한다. 그리고 role=“menuitem” (아카데미)의 메뉴 아이템을 설정하기 위해서 자식 요소의 ul 요소에 role=“menu”와 li 요소에는 role=“menuitem”을 설정하여 구성한다.하위 메뉴중 아카데미 메뉴 외에 tabindex=“-1”을 적용한 이유는 아카데미 메뉴 이외에 다른 하위 메 뉴에 포커스 진입을 막기 위함이다.

- 가장 먼저 로딩 영역인 div 요소에 role=“alert”을 추가하여 해당 div 요소가 로딩 메시지를 보여주 는 영역이 되도록 한다. 다음으로 이동 링크를 클릭했을 때 role=“alert” 영역에 동적으로 텍스트 내용을 추가하기 위해 자바스 크립트로 구현한다.

- 특수기호는 비 시각장애와 시각장애의 관점에서 두 가지 케이스를 고려해 봐야한다. 의미를 전달하지 않고 단순히 시각적인 효과만을 주는 경우, 특수기호에 aria-hidden="true"를 설정해야 한다. 스크린리더 사용자에게도 마찬가지로 의미를 전달하지 않도록 되어야 한다. 특정한 의미를 전달해야 하는 특수기호의 경우 전달하고자 하는 의미가 명확히 전달 될 수 있도록 aria-label 속성의 값에 상태 정보와 기능 정보를 모두 담아야 한다.

- 요소에 aria-describedby 속성을 추가한 다음, 설명 내용을 담고 있는 span 요소의 id 속성 값과 동일하게 작성하면 된다.

- 내비게이션 역할을 수행 함에도 단순 하게 링크를 div 요소로 그룹화하여 제공하는 것보다 내비게이션(navigation) 역할을 부여하는 것이 보다 의미적이며 유효 적절할 것이다. 뿐만 아니라 현재 탐색 중인 영역이 페이지 내비게이터 UI 컴포넌트 임을 스크린리더 사용자에게 알려 줄 수 있는 레이블(Label)을 제공할 필요가 있다.

- 사용자에게 전달할 검증 결과 피드백을 포함하는 요소에 role="alert"를 추가해 주기만 하면 된다. 참고로, alert 역할(Role)의 경우 이것은 이미 Live Region에 속하는 역할이기 때문에 aria-live 속성 (Property)을 추가로 적용할 필요가 없다. 일부 최대 호환성을 위해 aria-live 속성(Property)을 적용하는 사용자들도 있기는 하지만, iOS의 Voice Over에서 중복하여 읽어주는 이슈가 있다.

- 캐러셀 UI 컴포넌트로 설정할 div 요소에 고유 식별자 id를 설정한 다음, 캐러셀 UI 컴포넌트 레이블을 HTML5 data-* 접두사를 사용하여 식별 가능하도록 설정한다. 여기에 하드 코딩 된 레이블은 자바스크립트에서 aria-label 속성을 설정할 때 참고하게 된다. 이때 data-* 접두사 속성을 사용하지 않고 바로 aria-label 속성을 하드 코딩하는 것도 가능하다. 이어서 각 슬라이드 요소를 설명하는 레이블을 data-* 접두사 속성을 사용하여 작성한다.

- 사용자 정의 컴포넌트에 콤보박스(Combobox) 역할을, 콤보박스 목록에 해당되는 요소에는 리스트박스(Listbox)의 역할을, 그리고 리스트박스의 각 항목에는 옵션(Option) 역할을 부여한다. 기능적으로는 사용자의 선택에 따른 변경 값을 스크린리더에서 바로 읽어줄 수 있도록 할 수 있으며, 리스트박스의 펼침/접힘 상태 또한 안내해줄 수 있다.