본문 바로가기

UX 개발/접근성 (A11Y)

[접근성] 이미지 대체텍스트(Alt Text) 노가다 없이 자동 입력하기 접근성 대응을 위한 웹 개발 중에는 대체텍스트 기입의 필요로 인한 시간 소요가 많아질 때가 있습니다. 크롬의 '구글 렌즈'를 통해 해당 업무를 부분적으로 자동화할 수 있는 방법을 소개합니다. 구글 렌즈는 모바일 앱으로 이용되는 경우가 많은데, 데스크톱 환경에서도 크롬을 활용해서 해당 기능의 이용이 가능합니다. 사용법은 웹상의 이미지를 '오른쪽 버튼 클릭'하여 '컨텍스트 메뉴'를 활성화한 후, 'Search Image with Google(구글 이미지 검색)' 기능을 실행하면 됩니다. 크롬 버전에 따라 해당 기능이 비활성화되어 있을 수 있는데 2023년 10월 기준 최신 버전 크롬에서는 정상적으로 작동하는 것을 확인했습니다. 그럼 아래와 같이 크롬 우측에 구글렌즈 패널이 추가된 것을 확인할 수 있습니다. ..
웹페이지에서 focus(포커스)가 어디에 있는지 확인하기 tabindex 를 활용하거나, 포커스의 이동 경로를 설정하는 등의 스크립트를 실행한 경우, 현재 포커스가 어디에 가 있는지 확인하기가 어려울 때가 있습니다. 이럴 때에 브라우저 콘솔창을 통해 간단하게 현재 포커스가 어디 있는지 확인할 수 있습니다. 크롬 또는 개발자 도구를 지원하는 브라우저를 실행한 후 개발자 도구에 들어가 콘솔창에 다음과 커맨드를 통해 현재 포커스의 위치 확인이 가능합니다. console.log(document.activeElement); 포커스의 위치 확인 용도 뿐 아니라 필요한 경우 DOM 또는 스타일을 제어하는 자바스크립트 코드 생성 시에도 활용이 될 수 있을 것으로 보입니다.
tabindex를 ‘0’과 ‘1’만 사용해야 하는 이유와 관련 이슈 탭인덱스는 포커서블하지 않은 요소에 포커스가 갈 수 있도록 해 주거나, 포커서블한 요소에 포커스가 가지 않도록 하는 역할을 합니다. 다만 해당 요소는 스크린리딩을 하는 시스템에 따라 잘못된 순서의 탭 포커싱을 유발할 수 있으므로, 가급적 사용을 지양하는 것이 좋습니다. 또한 사용을 하더라도 ‘0’, ‘1’만 사용되는 것이 권장됨을 MDN 문서를 통해 확인할 수 있습니다. tabIndex 순서 변경의 이슈의 경우, 첫번째 포커스를 받도록 하는 요소가 아닌 요소를 대상으로 첫번째 포커스를 tabIndex를 통해 할당할 경우 정상적으로 포커스가 할당되지 않는 이슈가 있습니다. 해당 상황은 하단 코드 예제를 통해 확인할 수 있습니다. 스펙상으로는 1 이상의 숫자를 순차적으로 할당하여 포커스가 이동하는 순서를 정..
외주/과외 문의

티스토리툴바