23년 04.11 화요일 - Likelion-lucky7/DECO GitHub Wiki

슬비쌤 멘토링

✅명도대비는 개발자 도구에서도 확인할 수 있다.

검사할 페이지 요소를 선택하고 스타일 부분에서 사각형으로 나와있는 해당 컬러를 클릭하면 대비율이 표시된다.

image

대비 확인할 수 있는 페이지

Axe Rules | Deque University | Deque Systems

프로그램?도 있다

Color Contrast Checker - TPGi

✅포커싱 내부와 아웃라인도 명도대비를 신경써야되나요?

아래의 버튼과 포커싱라인

→ 항상 신경써주는 것이 좋다.

image

✅light house - 페이지에 HTML Doctype 있음

image

index.html에는 <!doctype html>이 선언되어 있는데도 불구.. light house 오류일까요

지금은 또 없어진 것 같습니다.

→ <!doctype html>이 실제로 index.html에 있으면 신경안써도 된다. 라이트 하우스 오류인 듯

✅ 회원가입 신청 버튼

모든 정보를 요구하는대로 입력하지 않으면 disabled로 해놨는데 사용자가 알 수 없다.

→ 색상적으로도 구별이 갈 수 있게 회색 등. 금지 기호가 나오는 것도 해주는 게 좋겠다.

요구정보를 입력하면 순차적으로 이동해서 알게된다.

❗ 실시간으로 연동이 안된다.

사진 등록과 모든 인풋 란을 다 입력해야 활성화가 된다.

다시 입력했던 정보들을 지워도 비활성화가 되지 않는다.

사진등록을 누르고 취소하기를 눌렀을 때 미리보기도 지워지지가 않는다.

✅ 최근 업데이트 light house 2019년 Web Developer 2년 전. Web Developer tool을 이용하는게 나을까요?

어차피 보조용 도구이기 때문에 상황에 맞게 이용하면 된다.

최근 업데이트 시기를 감안해서 크로스 체크.

✅ 스크린 리더 등 직접 실행해서 확인해보면 좋을 도구들이 있을까요?

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}>

질문하기 페이지

  • 모든 입력서식에 레이블을 제공하지 않음

openwax

사용하면 아래와 같이 접근성을 테스트해서 항목별로 알려준다.

image

문서화를 잘 할 것

어제 회의 이후로 한 일

진행 중 이슈사항(🚨)

  • 이동경
    👍:
    🚨:
  • 김하연
    👍:
    🚨:
  • 이예솔
    👍:
    🚨:
  • 홍자영
    👍:
    🚨: 가족 선약
  • 박세명
    👍:
    🚨: 개인 사유

다음 회의까지 할 일(계획)

  • 이동경
    📌:
  • 김하연
    📌:
  • 이예솔
    📌:
  • 홍자영
    📌:
  • 박세명
    📌:
⚠️ **GitHub.com Fallback** ⚠️