마크업 & 웹접근성 베이스캠프

 

<우아한테크코스> 레벨4 마크업 및 웹접근성 수업 내용을 간단히 요약해보자.

 

📐 마크업 순서 생각해보기

1. head / body를 나눈다.
2. body를 header / main / footer 로 나눈다.
3. header에는 주로 nav를 넣는다. nav는 ul과 li로 작성한다.
4. main을 여러 section으로 나눈다. section에는 주로 h2를 함께 넣어주고, flex가 적절할지 grid가 적절할지 고민한다.
5. 필요할 경우 h1 / h2 / h3 / … 순으로 헤딩을 넣는다.
6. div가 많아지면 div를 대체할 다른 태그는 없는지 고민한다.
7. input은 label과 엮어주었는지, img에는 alt를 빼먹지 않았는지 등을 점검한다.

 

🧑🏻‍🎨 마크업 잘하는 사람의 특징 

1. 시맨틱 태그를 잘 쓰고 의미없는 요소를 쓰지 않는다.
2. 전체 레이아웃에서 박스 구조를 잘 잡는다. 
3. 웹접근성을 위한 속성을 잘 쓴다.
4. 공통 스타일 분리 및 재사용을 통해 중복을 줄인다.
5. 반응형을 고려한다.
6. 크로스 브라우징을 고려한다.

 

✅ 마크업 체크리스트

- 불필요한 마크업은 없는가?
- 중복을 줄일 수 있는데 남겨둔 것은 없는가?
- 레이아웃 박스 구조는 적절하게 짜여있는가?
- div 가 있다면 대체할만한 태그는 없는가?
- 웹표준에 어긋나는 마크업은 없는가?
- 모바일 화면을 지원하는가?

 

 

🧑🏻‍🎨 웹 접근성 잘하는 사람의 특징 

1. 시맨틱 태그를 잘 활용한다
2. aria- 속성과 role 속성을 언제 어떻게 써야하는지 잘 알고 있다.
3. 아웃라인처럼 놓치기 쉽지만 잘 챙겨야할 요소에 대해 알고있다.
4. 키보드만으로 조작이 가능하도록 구현한다.
5. 스크린 리더로 직접 확인해본다.
6. 자동화 도구를 잘 사용한다. (eslint jsx-a11y plugin 등)
7. 검사 도구를 잘 사용한다. (wave, Lighthouse 등)
8. 타인을 위하는 마음을 갖는다.

✅ 웹 접근성 체크리스트

- 적절한 시맨틱 태그를 사용했는가?
- aria-label 등 aria-* 속성을 적절하게 사용하였는가?
- role 속성으로 태그의 목적을 적절하게 사용하였는가?
- 대체 텍스트를 잘 제공했는가?
- 스크린리더로 실행했을 때 필요한 컨텐츠를 읽을 수 있는가?
- 키보드로만 조작했을 경우, 마우스로 조작하는 것과 동일한 경험을 제공하는가? (키보드로 필요한 요소에 접근 가능한가?)
- Lighthouse 웹 접근성 점수가 90점 이상인가?
- wave로 검사했을 경우 에러가 발생하지 않았는가?