23년 04.11 화요일
검사할 페이지 요소를 선택하고 스타일 부분에서 사각형으로 나와있는 해당 컬러를 클릭하면 대비율이 표시된다.
대비 확인할 수 있는 페이지
Axe Rules | Deque University | Deque Systems
프로그램?도 있다
아래의 버튼과 포커싱라인
→ 항상 신경써주는 것이 좋다.
index.html에는 <!doctype html>이 선언되어 있는데도 불구.. light house 오류일까요
지금은 또 없어진 것 같습니다.
→ <!doctype html>이 실제로 index.html에 있으면 신경안써도 된다. 라이트 하우스 오류인 듯
모든 정보를 요구하는대로 입력하지 않으면 disabled로 해놨는데 사용자가 알 수 없다.
→ 색상적으로도 구별이 갈 수 있게 회색 등. 금지 기호가 나오는 것도 해주는 게 좋겠다.
요구정보를 입력하면 순차적으로 이동해서 알게된다.
❗ 실시간으로 연동이 안된다.사진 등록과 모든 인풋 란을 다 입력해야 활성화가 된다.
다시 입력했던 정보들을 지워도 비활성화가 되지 않는다.
사진등록을 누르고 취소하기를 눌렀을 때 미리보기도 지워지지가 않는다.
어차피 보조용 도구이기 때문에 상황에 맞게 이용하면 된다.
최근 업데이트 시기를 감안해서 크로스 체크.
mac - voice over
윈도우 - nvaccess
[Download NVDA](https://www.nvaccess.org/download/)
유튜브 aoa11y 채널에 설명영상이 있다.
모바일 환경 테스트도 중요
autocomplete
슬비쌤이 알아보신다고 하심
→ alt=””공란으로 처리
<div className={styles.user}>
{user?.image == "" ? (
<Profile className={styles.profile} />
) : (
<img alt="" width={20} src={user?.image} />
)}
<p>{user?.nickname}</p>
</div>
<div className={styles.like}>
- 모든 입력서식에 레이블을 제공하지 않음
사용하면 아래와 같이 접근성을 테스트해서 항목별로 알려준다.
진행 중 이슈사항(🚨)
- 이동경
👍:
🚨: - 김하연
👍:
🚨: - 이예솔
👍:
🚨: - 홍자영
👍:
🚨: 가족 선약 - 박세명
👍:
🚨: 개인 사유
- 이동경
📌: - 김하연
📌: - 이예솔
📌: - 홍자영
📌: - 박세명
📌: