WWWEB/Accessibility6 [WAI-ARIA] radio button #작성중.... #기존 코드 문제점 라디오버튼의 디자인 변경을 위해서 요소는 CSS의 opacity 속성으로 화면에서 보이지 않도록 처리한후 배경이미지를 활용하여 원하는 라디오버튼의 디자인을 적용하는 방법이 있고, 또 하나는 요소을 사용하지 않고 이나 요소, 또는 , 요소를 사용하여 마크업하고 이를 CSS로 디자인 하는 경우를 들 수 있다. 이렇게 제작된 코드는 기본 라디오버튼과 동일하게 키보드 인터랙션이 보장되어야 한다. 예를 들면, 라디오 버튼임을 인식할 수 있어야 하고, 선택과 해제된 상태를 구분할 수 있어야 한다. 또한 키보드의 스페이스바로 선택이 가능해야 하지만 이런 부분을 간과하고 제작하는 경우가 많다. role=“radiogroup”은 그룹이므로 그룹의 제목을 함께 제공해야 한다. 주로 제목.. 2020. 7. 21. [WAI-ARIA] button 요소 속성/상태 설명 버튼. 엔터키나 스페이스바로 선택 aria-disabled="true | false" 사용할 수 없는 버튼 상태는 true, 사용할 수 있으면 false aria-pressed="true | false" 버튼이 선택된 상태면 true, 해제되어 있으면 false aria-labelledby="" 그룹의 제목을 제공하기 위한 것으로 제목 요소의 id값과 연결 role=“button”은 해당 요소의 역할을 버튼으로 정의하고, 선택적으로 aria-describedby 속성을 사용하여 버튼에 추가 설명을 삽입할 수 있다. 버튼이 비 활성화 되었거나 더 이상 사용할 수 없을 때 aria-disabled 속성을 사용하여 현재의 상태 정보를 스크린리더에게 알려줄 수 있다. 토글 버튼은 눌려져 있.. 2020. 7. 21. [WAI-ARIA] multi form 기본 컨트롤이 아닌 커스텀 컴포넌트 등을 사용하는 경우와 같이 과 요소를 사용하지 못하는 경우가 발생할 수 있는데, 이러한 경우 WAI-ARIA의 group 역할(role)을 사용하면 과 동등한 의미를 전달할 수 있고, 여기에 aria-labelledby 속성을 사용함으로 요소가 가지는 의미 또한 전달이 가능해진다. 물론 당연히 HTML의 기본 요소 과 를 사용하는 것이 항상 우선이다. WAI-ARIA의 적용은 이것이 불가할 경우에 대한 차선책으로 선택할 수 있는 보조 기술이다. 요소 역할 속성/상태 설명 div group 폼에 공통적인 레이블을 참조할 수 있는 필드의 논리적 집합을 그룹핑 div aria-labelledby 그룹의 레이블에 해당하는 요소의 ID를 설정 DOCTYPE html> multi.. 2020. 7. 20. [WAI-ARIA] id/password input 아이디를 생성하는 입력상자에 어떻게 입력해야 하는지 알 수가 없고, 잘못 입력하고 발생하는 에러 메시지를 통해서만 "5~20자의 영문 소문자, 숫자와 특수기호만 사용가능합니다" 라는 것을 알 수 있게 된다. 또한 비밀번호도 오류가 발생한 후에 입력도움을 알 수 있기 때문에 스크린리더 사용자는 상당한 불편을 겪게 된다. 이렇게 입력 지침을 에러메시지를 통해서만 제공하는 방법을 스크린리더 사용자에게 좋지 않은 경험이 된다. "에러베시지"의 잘못된 예와 같이 스크린리더 사용자는 에러가 발생해도 에러가 발생 된 상황을 전혀 알 수 없기 때문에 "1111"이라고 아이디를 입력했지만, 그것이 입력 기준에 맞지 않는지는 알 수가 없다. 이때 입력 서식인 요소에 aria-label 또는 aria-labelledby와 .. 2020. 7. 17. [WAI-ARIA] auto complete 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf=> 35p https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=ko 요소 역할 속성/상태 설명 combobox 콤보박스 역할을 정의 aria-haspopup 텍스트 필드와 연관된 하위 수준의 메뉴가 있으면 true, 그렇지 않으면 false aira-autocomplete 사용자 입력에 대한 자동완성 지원 여부를 설정 aira-activedescenda.. 2020. 7. 17. [WAI-ARIA] 탭 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf 요소 역할 속성/상태 설명 tablist 탭 집합 presentation 요소의 리스트 의미를 삭제 tab aria-selected="true/false" 요소의 역할을 탭으로 정의하고, 선택되었을 때 true, 선택되지 않았을 때 false aria-controls="{}" tabpanel의 id명 id="{}" aria-labelleddby 속성의 함수명 tabpanel aria-expanded="true/false" 요소의 역할을 tabpanel로 정의하고, tabpanel이 열렸을 때 .. 2020. 7. 17. 이전1 1 다음 728x90 반응형