웹 접근성 4

접근성 table 작성

접근성에 table 요소 작업은 꽤 어렵다. 하나하나 살펴보자. 일단 table의 제목인 caption 이 작성되어야 한다. caption은 table 바로 아래 위치 해야하며 마크업 순서는 table > caption > colgroup > thead > tbody > tfoot 순 이다. 보통 caption을 나타내야하거나 사용한다면 그대로 두고 css로 style 하면 되지만, 사용하지 않고 숨겨야 한다면 마찬가지로 clip를 사용하여 숨기면 된다. 그리고 또 중요한 점은 scope이다. scope는 표의 제목이 어떤 방향을 얼마만큼 가르키고 있는지를 알려준다. 위와 같은 테이블의 제목은 연령별,성별,조회수,비율 그리고 좌측에 전체 , 0-12 , 남, 여 이렇게 th로 작성이 될 것이다. 연령별,..

웹 접근성 2020.08.26

웹접근성 탭 메뉴 소스

http://jsfiddle.net/chunyong/5kd8nkyg/ 웹접근성에 맞는 탭메뉴 - JSFiddle - Code Playground jsfiddle.net 구글에서 검색가능한 위 접근성 메뉴를 참조하여 나름의 해석과 공부한 흔적입니다. 접근성 탭메뉴 제작시 도움이 될까 하여 공유합니다. 위 코드를 기반하여 만들었으며 뺄꺼빼고 넣을꺼 넣고 해석할거 해석하고 ! 해서 수정하였습니다. 감사합니다. JQuery 버전은 3.5.1 을 사용하였습니다. html 공지사항 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 공지사항 더보기 보도자료 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › ..

웹 접근성 2020.08.19

IR 기법 예제

전체코드를 첨부 파일로 넣어 두었다. 백그라운드 이미지를 사용하였으며, 그 이미지의 양이 방대하기 때문에 대체텍스트로는 한계가 있다. 이를 대응하기위해 전체 시멘틱태그에 맞게 html을 작성하고 그에 알맞게 css를 정의 하였다. a링크는 이미지에 대응하여야 되기 때문에 영역을 살려놓았다. * 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.

웹 접근성 2020.08.18

IR 기법에 대한 설명

IR 기법 Imgae Replacement (이미지 리플레이스먼트) 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다. 웹접근성으로 이미지 태그에 alt 속성에는 대체텍스트를 입력 해 주어야 한다. 하지만, 배경 이미지로 처리한 의미 있는 아이콘, 로고 또는 대체 텍스트가 너무 긴 이벤트 페이지는 어떻게 처리해야 할까 ? 일단 작은 이미지를 많이 사용하는 것 보다는 스프라이트 이미지라고 해서 큰 이미지에 여러 버튼들을 정리해 두고, 그 버튼들을 포지션으로 불러오는 경우가 많고 그 때문에 백그라운드 이미지를 사용하는 경우가 많다. 예시 : https://s.pstatic.net/static/www/img/uit/2020/sp_main_b46ce0.png 네이버 기준으로 보면 백그라..

웹 접근성 2020.08.18
728x90