킹바구니 🦜

한번 정리하는게 좋겠다싶어서 만든 페이지. 센스리더가 각 태그에서 어떻게 읽는지, 태그별 사용가능한 role과 aria는 뭔지 정리해봄. 기왕 만든김에 다른것도 왕창 몰아넣을까 생각중. 아직 완전히 정리된건 아니고 추가적으로 계속 업데이트할 예정 https://peamexx.github.io/test-screen-reader/ Document Testing for Accessibility with the Sense reader 최근 업데이트: 2022-06-22 - img태그 테스트 결과 추가 이곳은 대한민국에서 주로 쓰이는 스크린리더인 센스리더를 이용한 태그별 읽기방법 정리페이지입니다. peamexx.github.io

접근성 기능 빠르게 켰다끄기 단축키는 이곳에서 확인 가능 [https://peamexx.tistory.com/134] ----------------------------------------------------- 귀로만 듣다보면 문장을 잘못 듣거나, 단어가 헷갈리는 경우가 있음. 이럴때 자막 패널을 켜두면 텍스트로 확인하기 용이함. 안드로이드 (voice assistant) 1. 설정 - 접근성 - 스크린 리더 - 설정 - 개발자 옵션 - TTS출력 표시 아이 편해 !! 안드로이드 (talkback) 1. 설정 - 접근성 - 설치된 서비스 - talkback - 설정 - 고급 설정 - 개발자 설정 - 음성 출력 표시 생긴거는 위에 voice assistant의 자막패널과 똑같이 생김. 아이폰 1. 설정..

접근성 테스트를 하려면 빨리 켜고 빨리 꺼야하는데 매번 설정에 들어가서 켜서 다시 빠져나오는게 너무 불편했었음. 그러다가 빠른실행 방법을 알게되서 정리함. ----------------------------------------- 참고로 talkback과 voice assistant 차이점도 정리해봄. talkback은 안드로이드 기존 스크린리더이며, voice assistant는 삼성에서 만든 스크린리더로 갤럭시 s6부터 이용 가능함. 둘다 기본적으로 안드로이드에 설치되어있음 [https://nuli.navercorp.com/community/article/1132808]. ※ 그런데 안드로이드 11, One UI 3.0이후 업데이트로 talkback과 voice assistant을 통합하여 새로운 (..

부트스트랩 모달을 쓰고 있었기때문에 기본적으로 role='dialog', aria-modal='true'이런게 다 기본적으로 되어있는데도 안드로이드에서만 스와이프하다보면 뒷배경에 focus가 가능했었음. 위 스크린샷처럼 떠있는 'save changes'가 focus된 상태에서 오른쪽으로 스와이프하면 뒷 background에 있는 다른 요소에 focus가 가버림 개빡 방법 $('header, footer').attr('aria-hidden', 'true'); 다행히도 aria-hidden을 뒷 요소들한테 다 주면 된다. modal이 켜졌을땐 true, 꺼졌을땐 false로 해주면 뒤에 안잡음. display none이나 visibility hidden이런것도 해봤는데 얘네는 자칫하면 화면이 밀려버리는 경우..

접근성이라는게 aria~류만 잘 써주면 되는줄 알았더니, 실제로 스크린리더 기기별로 지원하는 aria가 달랐고, 또 원래대로라면 예를들어 '목록 버튼, 랜드마크'라고 정상적으로 읽어주는 것을, 업체측 사정에 따라 알아듣기 쉽게 '목록'이라고만 읽어줘야할 때도 있었는데, 그러다보니 작업하기가 참 까다로웠음. 처음에는 그렇게 바꾸다보니 이게 접근성이 맞나 싶다가도 오히려 또 굳이 저렇게 다 길게 읽어주는걸 보니 실제 쓰려면 그래도 간결한게 맞긴맞네라는 생각도 들었음(긴거는 진짜 '텍스트 필드, 글자를 입력하려면 이중탭 하세요, 맞춤법 로터를 이용한 사용' 뭐 이런식으로 textarea하나를 저렇게 읽어댐.. 물론 이건 iOS긴 하다만) 아무튼 그와중에 select box를 태그말고 커스텀으로 만들어야하는 상..

https://youtu.be/D9JrOBiy0bc 1. 안에 여러 요소를 선택해버림(초점분리현상) 쉬슬러 고농축 세제 3.05L 4개 19,900 원 저 코드를 아이폰으로 읽어보면, 빨간색 영역과 같이 3번을 나눠서 읽어버림. 안에 block요소가 들어가는 경우 발생하는 이슈임. 이해가 안되는건 아니지만 스와이프를 여러번 해야하기때문에 불편함. 방법1(추천) 대신 과 같은 inline요소로 작성 방법2 에 role="text'를 넣어줌 https://youtu.be/FVSBHQmMzIQ 2. 실제 영역을 잡지 못함 뿐이 아닌 다른 요소에서도 일어나는 문제임. 방법1(추천) 안에 요소를 등으로 감싸고, 거기에 aria-hidden줘서 못읽게 하기 (이렇게하면 자식을 잡을 수 없어서 부모요소를 잡게 됨) ..

정말 필요한 기능이지만 정말 어려운 작업이 접근성인 것 같음. 그나마 A11Y 유튜브 채널이 있긴하지만, 구글에 자료 자체도 많이 없는데다 pc, 아이폰, 안드로이드마다 읽는 방식이 다르고 이슈들도 넘쳐나서 통일화 시키기도 어려울뿐더러, 물어볼 사람도 없고 심지어 스크린리더 기기마다 읽는 방식이 다 달라서 정말..................................................... 어찌되었든 나중에 또 이런 작업을 할지 모르니 조금이라도 기록해두는 것이 좋을 것 같아 카테고리 하나 파서 만들어두는 것임. (주기적으로 업데이트됨) - IOS voiceover에서 발생하는 이슈 - input, button 등에 쓰이는 속성

접근성 관련해서 작업을 하는데 여건 까다로운게 아님. 난 그냥 단순하게 숨겨진 텍스트 같은걸로 표시해주면 되는줄 알았는데, 정작 스크린리더로 읽을 때를 적용하다보니 포커스 작업이 굉장히 중요하다는걸 알게됨. 게다가 pc랑 mobile에서 작업할 때도 다른게, pc는 tab키를 눌러서 움직이고, 태그는 포커스가 안가고, 포커스 없는 태그한테 포커스를 주려면 tabindex="0"을 적용하면 되는데, mobile은 스와이프로 움직이고, 태그는 읽고, tabindex는 통하지 않음ㅜ 1. 읽는 기준 (아이폰 기준) 봄 여름 가을 숨겨진 텍스트겨울 숨겨진 텍스트겨울 숨겨진 텍스트기상청 날씨가 나쁘다 결론은 제일 마지막 방법인 role과 aria-label을 활용하는 것이 제일 좋은 듯 하다. 실제로 개발하면 1..