웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2 ▶ 2024.03.24 - [Web] - 랜드마크 롤 ▶ 2024.03.27 - [Web] - WAI-aria

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2 ▶ 2024.03.24 - [Web] - 랜드마크 롤 > // ... // ...

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 같이 꼭 사용할 필요 없는 div는 지양한다. 스크린리더가 어떻게 읽을지 예상할 수 없기 때문이다. 태그의 네이티브 기능을 학습하고 이를 구현한다. 지금까진 이런 방법들을 자연스럽게 이해했다. 추가적으로 다음과 같은 방법으로 웹 접근성을 높일 수 있다. outline outline : 0; 디자인을 위해서 우리는 outline을 0으로 처리하는 경우가 있다. 이러한 작업은 웹 접근성에서 좋지 않는 ..

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? 동그란 버튼이 무엇인지 모름 크기 큰 버튼을 누르세요 => 큰 버튼이 무엇인지 모름 위치 왼쪽에 있는 버튼을 누르세요 => 왼쪽이 어딘지 모름 방향 현재로부터 아래에 있는 버튼을 누르세요 => 현재 내가 어디있고 내 아래 어디에 버튼이 있는지 모름 색 파란색 버튼을 누르세요 => 파란색을 확인할 수 없음 소리 ( 동작이 맞거나 틀렸을 때 특정 소리가 나오는 경우 ) => 무슨 소리인지 모름

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 span 태그는 Interactive 태그가 아니므로 키보드 포커스가 가지 않는다. => tabindex = "0"을 통해서 포커스가 가도록 수정 버튼 => span 태그는 스크린리더가 읽을 때 " 버튼 " 이라고 읽지 않는다. => role을 버튼으로 수정 버튼 => role="button"을 지정해도 태그의 네이티브 기능은 변하지 않는다. => 버튼 동작을 위해서 키보드로 "엔터", "스페이스바"를 눌렀을 때 동작하도록 수정 버튼 ※ tabindex 키보드 많으로 웹 전 항목을 접근할 수 있도록 하는 속성이다. 마우스 사용..

웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성

스크린리더 선택 특별한 스크린리더 소프트웨어도 있지만 크롬 내장 스크린리더를 선택하기로 했습니다. 스크린 리더를 선택하기 위해서 검색을 했는데, 내장 스크린리더에 대한 내용이 더 많았고 크롬 내장 소프트웨어라서 사용할 때 더 호환이 잘 될 것이라는 생각으로 선택하였습니다. 결과적으로 크롬 앱스토어에서 설치할 수 있는 Screen Reader 를 사용하기로 하였습니다. 사용 후기 정말 스크린 리더를 의지해서 홈페이지를 사용한다는 생각으로 크롬 홈 화면에서부터 스크린리더를 실행시키로 대한항공 사이트까지 접속해봤습니다. 스크린리더에서 검색화면으로 텝을 이동시키면 펼쳐짐이라고 알려주고 있었다. 과연 화면을 보지 못하는 사용자가 펼쳐짐이라고 나온다면 제대로 이해할 수 있을지 고민이 되었다. 대한항공 홈페이지를 왔..