728x90 300x250 Front-end/HTML78 [웹접근성] 본문 바로가기 만들기 skip-navigation 웹접근성 준수를 위한 본문 바로가기가 필요한 이유? 일반적으로 보통은 링크가 많이 포함된 컨텐츠라도 원하는 내용을 바로 찾아 보는데 문제가 없겠지만 스크린 리더 사용자나 키보드를 이용한 사용자 같은 경우 여러 링크가 있을 경우 원하는 콘텐츠까지 도달하기 매우 부담이 될 수 있습니다. 이런 불편한 부분을 해소 하기 위해 본문 바로가기 [skip-navigation]이 필요 합니다. 즉, 탭키를 누르면 '본문 바로가기'가 나오고 바로 본문으로 포커스를 이동할 수 있게 되는것입니다. 웹접근성을 위한 '본문 바로가기' 만들기 html 메인 메뉴 바로가기 본문 영역 바로가기 하단 영역 바로가기 css #skip-navi {position:relative; z-index:3000} #skip-navi a {posi.. 2022. 2. 23. 웹접근성 이란? 웹 접근성이란? 웹 접근성은 어떤 신체적 장애가 있는 사람이라도 남녀노소 어떤 환경에 있더라도 가능한 많은 사용자가 불편 없이 사용할 수 있도록 서비스를 제공하는 것을 말합니다. 한국형 웹 콘텐츠의 지침의 경우에는 대부분 시각장애인에 초점이 맞춰져 있습니다. 한국형 웹 접근성은 국제표준화기구 W3C에서 만든 WCAG를 기반으로 해서 KWAG를 제정해서 만들어졌습니다. KWAG는 웹 접근성 제고를 위한 4가지 원칙과 각 원칙을 준수하기 위한 13개의 지침, 해당 지침의 준수 여부를 확인하기 위한 24개의 검사 항목이 있습니다. 이렇게 24개의 항목을 모두 통과해야 합니다. 아래 링크에 가면 지침 가이드를 다운로드하여 볼 수 있습니다. https://www.wah.or.kr:444/Participation/.. 2022. 2. 20. input type text 숫자만 입력 정규식 input영역에 숫자만 입력 받는 방법은 이렇게 input type을 number로 지정해 주면 되는 일이지만 input에 up down 버튼이 생겨버린다. 그래서 input type="text"로 하면서 숫자만 입력 받기 위해서는 oninput 이벤트와 정규식을 사용해서 가능하다. oninput 이벤트는 input 값이 바뀌면 발생하는 이벤트 이며 이 이벤트가 발생할 때 숫자만 입력받는 정규식이 적용되고 숫자가 아닌 값이 입력되면 replace 함수로 대체하게 된다. 참고사이트 https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input/28838789#28838789 https://stackoverflow.com.. 2022. 1. 3. wai-aria란? wai-aria란? Web Accessibillty Initiative-Accessible Rich Internet Applications의 약자 이며 W3C에서 출판한 장애가 있는 사람들이 액세스 할 수 있는 대화형 웹 사이트 콘텐츠를 구축하는데 가장 일반적으로 사용되는 기술사양이다. 특히 동적인 콘텐츠와 Ajax, JS, VUE, REACT 등과 같은 페이지를 새로고침 하지 않고 갱신했을때 스크린 리더기를 사용하는 전맹 시각장애인들이 정보를 제대로 제공받지 못하는 상황을 방지 하기 위해 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가해서 접근성을 높여주는 방식이다. 만약 의미가 있는 시맨틱 태그가 아닌 일반 div를 사용할 경우 예를들면 네비게이션 네비게이션 nav로 만들든 div로 만들든 같.. 2021. 12. 17. 이전 1 2 3 4 5 6 7 ··· 20 다음 728x90 반응형