팝오버의 바깥을 클릭하여 닫는 경우 클릭 이벤트를 window 객체에 붙입니다. 키보드만 사용가능한 시각이 불편하신분들은 문제가 생깁니다. 탭 이동시에 window 객체가 클릭 이벤트를 받을 수 없기 때문입니다. onFocus, onBlur를 onClick이 일어나는 해당 요소나 부모에 감지해줄 수 있습니다.

이때 aria-haspopup과 aria-expanded속성을 추가할 수 있습니다.

• aria-haspopup=”true” :
  • 용도 : 메뉴 항목이 서브메뉴를 가지거나 메뉴를 열기 위한 버튼에 설정할 수 있습니다.
  • 의미 : 스크린 리더 사용자는 해당 버튼이 팝업 메뉴를 가지는 것을 알려줍니다.
• aria-expanded=”true”
  • 용도 : 메뉴가 확장되었음을 나타낼때 사용합니다.
  • 의미 : 접근성 메뉴가 확장됨을 스크린 리더 사용자에게 알립니다.
• aria-orientation
  • 의미 : 메뉴가 가로 또는 세로 형태로 배치되었는지 여부를 알려줍니다.
  • 값 : horizontal, vertical
  • default : horizontal

WAI-ARIA

WAI-ARIA란?

스크린 리더 사용자들에게 페이지를 새로고침 하지 않고도 페이지 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 원활하게 접근할 수 있게 합니다. 여기서 상태는 상태관리의 state를 의미하지 않습니다.

역할 role : 특정 요소에 역할 정의, 동적변경 불가

• role=”button”

  p, span, div요소와 같이 중립적인 요소에 버튼으로 사용한된다는것을 스크린리더에 인식시킬 수 있습니다.

속성 properties, 상태 states : 요소가 기본적으로 가진 특징 or상황

“aira-”라는 접두어를 가집니다.

상태 : 요소의 상태를 나타내여 실행 중 자주 바뀝니다.

속성 : 상대적으로 바뀌는 정도가 적습니다.

• 속성

  • 필수항목 속성

    aria-required=”true” 해당요소가 필수로 입력되어야함을 전합니다.