징이의 기록장

스크린 리더기란❔ 화면을 볼 수 없는 시각장애인들이 컴퓨터를 사용할 수 있도록 화면에 나타나는 정보를 음성으로 출력해주고 도움을 주는 보조기구이다. 화면의 변화를 자동으로 들려주거나 원하는 곳을 다시 읽어주기도 하며 별도의 정보를 호출에 음성으로 들을 수도 있다. 웹접근성을 염두해 두고 제작된 페이지라면 시각장애인들도 일반 사용자와 동등한 수준으로 웹 서핑을 즐길 수 있다. NVDA(NonVisual Desktop Access) 마이크로소프트 윈도우용 무료 오픈소스 스크린 리더로 54개국어가 지원된다. NVDA는 음성과 점자를 지원하여 시각장애를 가진 사용자가 윈도우 운영체제 및 그 밖의 다양한 응용 프로그램을 사용할 수 있도록 한다. NVDA 사용법 1. 설치하기 NV Access(바로가기)에 접속해 ..

#1에 이어서 스타뚜 8. 검색창에 키워드 입력 후 삭제 버튼 클릭 시 초점이 초기화됨 이슈 검색창에 키워드 입력된 상태에서 삭제 버튼 클릭 시, 초점이 초기화되어 스크린 리더 사용자가 웹페이지를 처음부터 다시 탐색해야 하는 이슈가 있었다. 해결방안 검색어가 삭제되면 검색어 입력란으로 포커스를 보내주었다. var resetSearchText = function() { // . . . $('#txtSearch').val(''); $('.form__input-search').focus(); } 9. 탭키를 눌러 이동시 어떤 라디오 버튼인지 확인할 수 없음 이슈 편집창과 라디오 버튼은 폼 컨트롤이기 때문에 Tab키로 이동하는 경우가 많다. 그런데 현재 운영 사이트는 탭키를 눌렀을 때 라디오 버튼의 레이블은 읽..

웹 접근성 관련 업무를 맡아 작업한 것을 정리해 보았다. 피드백이 오면 업데이트할 예정이다. 시멘틱 마크업하여 해결되면 좋겠지만 프로젝트를 진행하다보면 기획단계와 디자인적인 레이아웃, 어찌할 수 없는 어떤..사정(?)으로 인한 웹 접근성 이슈들이 생긴다. 마크업으로 해결 할 수 없는 부분들은 WAI-ARIA를 잘 사용하여 사용자들이 더 나은 경험을 할 수 있도록 하는게 중요하다. 1. 페이지 타이틀을 직관적으로 변경 이슈 여러 페이지 타이틀의 타이틀이 동일하여 직관적이지 못하였다. 해결방안 태그 안에 들어가는 타이틀은 그 문서를 가장 잘 나타내는 주제로 작성해야 한다. 타이틀은 문서 엔진 최적화(search engine optimization, SEO)에 있어서 가장 큰 비중을 차지하고 있다. 웹 문서를..

팝업이 열리면 팝업 내 첫 번째 요소에 포커스 이동 팝업 내에서만 키보드 사용 esc 팝업 닫기 처음 작업할땐 팝업 오픈 시 팝업 전체에 포커스가 가도록 작업했었다. 이후 여러 블로그를 참고하다 보니 전체가 아닌 팝업 내 첫 번째 요소에 포커스가 가는 것이 팝업에 진입했다는 것을 좀 더 시각적으로 보여줄 수 있고 콘텐츠를 수월하게 조작할 수 있을 것 같아 코드를 수정했다. See the Pen WA - 모달 레이어 포커스 loop by devjiin (@devjiin) on CodePen. nodelist를 array로 변환하는 이유? focusableElements = Array.prototype.slice.call(focusableElements); 위 코드를 작성하지 않아도 포커스 기능이 잘 작동되..