Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성- 과제 웹 표준 & 접근성 개선 2

---

Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성
- 과제 웹 표준 & 접근성 개선 2

 

⭐️ 과제. 웹 표준 & 접근성 개선 - Cmarket Redux 리팩토링

✔️ Bare Minimum Requirement

✅ 과제에는 총 8개의 문제가 있습니다. 문제의 내용과 문제 가이드 내용을 따라 실습을 진행하시면 됩니다.

✅ Cmarket Redux 리팩토링은 Cmarket Redux 레퍼런스 레포지토리를 클론하여 진행합니다. Cmarket Redux 리팩토링도 과제 안에 가이드가 있습니다. 가이드 내용을 따라 진행하시면 됩니다. 

 

과제: What I Learned

Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선

 어제 학습에 이어서 오늘은 지난 유닛에서 학습했던 Cmarket Redux를 웹표준과 접근성에 맞게 리팩토링하는 시간을 가졌다. 당시에 Cmarket에 Redux를 적용할 때는 별 생각없었는데, 시맨틱 태그로 바꾸는 것에서부터 시작해 수정할 사항이 꽤 있었다.

 

Cmarket Redux 리팩토링

✔️ 시맨틱 요소 사용

리팩토링 전과 후 (시맨틱 요소 사용)

 

✔️ input 요소와 label 요소 연결

⬇︎

 

✔️ input 요소와 label 요소 연결

⬇︎

→ 스크린리더 확장 프로그램으로 테스트해보니 수량임을 알려주지 않고 숫자만 읽어서 수량을 입력하는 input 요소에 label 요소를 연결해 수량임을 명확하게 해주었다. (이 때 label은 css로 화면에는 보이지 않지만 스크린리더가 인식은 하도록 처리해 주었다.)

그런데 아직 사용법이 익숙치 않아서 그런가 어떤때는 label이 없어도 수량을 읽어주는 것 같기도 하고..? 사실 정확히는 잘 모르겠다. 😭

→ 또, 이미지 태그의 alt 값이 인접한 요소의 설명과 일치해 alt=”” 로 반복되지 않도록 수정해주었다.

 

✔️ title 추가

→ 오전 라이브 세션에서는 title을 넣는 방법을 알려주었다. title속성을 사용하는 것과 input과 label을 연결하는 것 중 무엇을 선택해야 하는지 헷갈려서 조금 찾아봤더니 아래와 같은 검색 결과가 나왔다.

 

 ✏️ title 속성은 디자인이 label을 수용할 수 없을 때나 label로 식별되는 텍스트가 없을 때, title 만으로 폼 컨트롤을 식별하게 된다. title 속성 사용시 요소에 마우스를 올렸을 때 툴팁을 확인할 수 있다. (참고로 title은 input 태그 뿐만 아니라 다른 태그에도 사용할 수 있다.)

하지만 title 속성 사용시 스크린 리더 등의 보조 기술로 탐색을 하는 사용자에게는 적합하지 않으며, 접근성을 고려한다면 label 요소를 사용하는 것이 권장된다.

 

✔️ 가격 읽기

<div className="cart-item-price">{item.price} 원</div>

// toLocaleString()을 사용하면 1만원이 넘는 단위도 가격으로 읽어줌
<div className="cart-item-price">{Number(item.price).toLocaleString()} 원</div>

→ 정말 처음 알았던 사실인데, 스크린리더가 가격을 읽을 때 1만원이 넘어가는 가격은 숫자를 끊어서 읽는 것을 알게되었다. 이 점을 개선하기 위해서 위와 같은 작업을 하면 1만원이 넘어가는 가격 또한 제대로 읽는 것을 확인할 수 있었다.

 

 

💬 수업시간에 과제 해설을 들으며 생각보다 많은 부분을 신경쓰는 분들이 많아서 조금 놀랐던 것 같다. 대부분의 사람들이 접근성을 고려하지 않을거라고 생각했는데, 의외였다는 생각을 했고, 앞으로 더 관심을 가져야겠다는 생각 또한 들었다.

 

---

🌙  오늘의 회고

 오늘은 지난번에 작업을 했던 Cmarket Redux를 웹 표준과 웹 접근성을 개선하는 과제를 했다. 3일 연속 웹 표준과 접근성에 대한 내용을 보려니 조금 지루하기도 했던 것 같다. 벌써 섹션 3도 끝나가다니.. 좀 더 열심히 달려야지. 너무 피곤해서 그런지 오늘은 딱히 쓰고 싶은 말이 없다. 이렇게 끝~

 (보던 리액트 강의 열심히 봐야지..!)