Record

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

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

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