웹접근성 OJT 교육 3~4 211214 입사 2주차 OJT 교육 중에 새롭게 알게된 부분들을 간단하게 정리해 보았다. 다양한 환경(주변 소음까지...)을 보장할 수 있어야 하지만, html/css/js로 보장 가능한 접근성은 시각 장애 환경이라고 볼 수 있다. iOS = VoiceOver, Android = Talkback을 설정하여 시각 장애 환경을 테스트 할 수 있다. WAI-ARIA속성을 활용하면 더욱 유연한 대... 모바일마크업웹접근성모바일마크업 focus시 테두리 제거 회사에서 운영하고 있는 서비스 중에 웹 접근성 이슈로 모바일 메뉴 버튼에 강제로 .focus()를 준 부분이 있다. talkback 기능을 이용해서 해당 메뉴 버튼을 누른 후 다시 메뉴를 닫았을 때 메뉴 버튼에 초점이 유지되도록 하기 위함인데 한 가지 문제가 발생했다. talkback을 사용하지 않는 일반 사용자들이 해당 메뉴를 열고 닫았을 때 메뉴 버튼에 주황색 테두리가 생기는 이슈다.. ... 웹접근성웹접근성 기본 네비게이션 만들기 HTML css Javascript... CSShtmljquery웹접근성CSS [웹 접근성] 레이어(모달)팝업 포커스 이동 및 유지 (1) 웹 접근성과 포커스 사용자는 키보드만 사용하여 모든 페이지 요소를 이동할 수 있어야 함. 영구마비 장애인부터 손목을 삐어 불편한 환자까지, 영구적 또는 일시적 운동 장애가 있는 사용자가 키보드나 스위치 기기에 의존해 웹 페이지를 탐색하는 경우도 많습니다. 따라서 이런 사용자까지 배려한 사용 환경을 제공하도록 적절한 포커스 전략을 적용하는 것이 중요. 포커스 이동순서 DOM에서의 위치를 기준으... 웹접근성 모달팝업 포커스모달팝업 포커스웹접근성 모달팝업웹접근성 레이어팝업웹접근성레이어팝업 포커스웹접근성 레이어팝업 포커스레이어팝업 포커스 웹접근성 공부중 메모 대체 텍스트를 따로 제공하는 경우 .blind와 같은 ir기법으로 해당 마크업이 보이지 않게 처리 케이스1) 이미지와 텍스트를 각각의 링크로 구현하는 경우 케이스2) 이미지와 텍스트를 함께 링크로 묶는 경우 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류입니다. '*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나, 키보드... 웹접근성웹접근성
OJT 교육 3~4 211214 입사 2주차 OJT 교육 중에 새롭게 알게된 부분들을 간단하게 정리해 보았다. 다양한 환경(주변 소음까지...)을 보장할 수 있어야 하지만, html/css/js로 보장 가능한 접근성은 시각 장애 환경이라고 볼 수 있다. iOS = VoiceOver, Android = Talkback을 설정하여 시각 장애 환경을 테스트 할 수 있다. WAI-ARIA속성을 활용하면 더욱 유연한 대... 모바일마크업웹접근성모바일마크업 focus시 테두리 제거 회사에서 운영하고 있는 서비스 중에 웹 접근성 이슈로 모바일 메뉴 버튼에 강제로 .focus()를 준 부분이 있다. talkback 기능을 이용해서 해당 메뉴 버튼을 누른 후 다시 메뉴를 닫았을 때 메뉴 버튼에 초점이 유지되도록 하기 위함인데 한 가지 문제가 발생했다. talkback을 사용하지 않는 일반 사용자들이 해당 메뉴를 열고 닫았을 때 메뉴 버튼에 주황색 테두리가 생기는 이슈다.. ... 웹접근성웹접근성 기본 네비게이션 만들기 HTML css Javascript... CSShtmljquery웹접근성CSS [웹 접근성] 레이어(모달)팝업 포커스 이동 및 유지 (1) 웹 접근성과 포커스 사용자는 키보드만 사용하여 모든 페이지 요소를 이동할 수 있어야 함. 영구마비 장애인부터 손목을 삐어 불편한 환자까지, 영구적 또는 일시적 운동 장애가 있는 사용자가 키보드나 스위치 기기에 의존해 웹 페이지를 탐색하는 경우도 많습니다. 따라서 이런 사용자까지 배려한 사용 환경을 제공하도록 적절한 포커스 전략을 적용하는 것이 중요. 포커스 이동순서 DOM에서의 위치를 기준으... 웹접근성 모달팝업 포커스모달팝업 포커스웹접근성 모달팝업웹접근성 레이어팝업웹접근성레이어팝업 포커스웹접근성 레이어팝업 포커스레이어팝업 포커스 웹접근성 공부중 메모 대체 텍스트를 따로 제공하는 경우 .blind와 같은 ir기법으로 해당 마크업이 보이지 않게 처리 케이스1) 이미지와 텍스트를 각각의 링크로 구현하는 경우 케이스2) 이미지와 텍스트를 함께 링크로 묶는 경우 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류입니다. '*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나, 키보드... 웹접근성웹접근성