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

---

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

 

⭐️ 과제. 웹 표준 & 접근성 개선

✔️ Bare Minimum Requirement

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

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

 

과제: What I Learned

1. Semantic 요소 사용: 📌 시맨틱 요소를 사용한 마크업이 중요

 

2. styled-components도 html과 css 관심사 분리가 되어 있기 때문에 웹표준을 지킨 구조가 된다.

import styled from 'styled-components';

const FontStyledComponent = styled.li`
    font-size: ${ (props) => props.fontSize || "16px" };
    color: ${ (props) => (props.color || "black") }; 
    font-weight: bold;
`;

<ul>
    <FontStyledComponent fontSize="1.5rem">글씨 크기를 조절하고 싶을 땐</FontStyledComponent>
    <FontStyledComponent color="blue">요소 종류를 사용하는 것이 아니라</FontStyledComponent>
    <FontStyledComponent>CSS를 이용해주세요.</FontStyledComponent>
    <FontStyledComponent>요소의 의미와 맞지 않습니다.</FontStyledComponent>
</ul>

 

3. 대체 텍스트 작성: 이미지 요소의 대체 텍스트(alt) 작성

<!-- alt 속성에 아무것도 없으면 스크린리더는 요소를 인식하지 않는다.
이미지를 충분히 설명해주는 인접 요소가 있으면 대체 텍스트는 빈 문자열로 작성한다. (중복되는 경우 작성 X)
대체 텍스트는 지나치게 자세한 설명을 작성하지 않는다. 
필요한 정보만 효율적으로 작성한다. -->
<img src="" alt="윙크하는 고양이" />
<img src="" alt="" />

 

4. 콘텐츠 선형 구조: 콘텐츠는 논리적인 순서와 구조로 마크업 되어야 한다.

<!-- example 1 -->
<div class="tabContainer">
  <div className="tabList">
    <div>tab title 1</div>
    <div>tab title 2</div>
    <div>tab title 3</div>
  </div>
  <div>tab content 1</div>
  <div>tab content 2</div>
  <div>tab content 3</div>
</div>

<!-- example 2 -->
<div class="tabContainer">
  <div className="tabList">
    <div>
      <div>tab title 1</div>
      <div>tab content 1</div>
    </div>
    <div>
      <div>tab title 2</div>
      <div>tab content 2</div>
    </div>
    <div>
      <div>tab title 3</div>
      <div>tab content 3</div>
    </div>
  </div>
</div>

→ 스크린 리더는 마크업 순서대로 내용을 읽어준다. 콘텐츠는 논리적인 순서로 제공해야 하고, 글은 제목 - 내용 순으로 제공되는 것이 논리적이다.

 

5. 시맨틱 요소만으로 의미를 충분히 부여할 수 없다면, WAI-ARIA를 사용

<div className="iconButtonContainer">
    <button className="iconButton" aria-label="home 버튼"><img src={home} /></button>
    <button className="iconButton" aria-label="web 버튼"><img src={web} /></button>
    <button className="iconButton" aria-label="mail 버튼"><img src={mail}/></button>
</div>

→ 위 버튼은 이미지의 역할보다는 버튼의 역할이기 때문에 버튼에 img 요소에 alt 값을 넣는 것보다는 WAI-ARIA를 사용하는게 더 적합한 것으로 보인다.

 

6. 웹 접근성을 고려한 테이블 마크업: scope 또는 id headers 속성 사용

 

7. input 요소에 label 제공

<div className="inputContainer">
    <label for="아이디">아이디</label>
    <input id="아이디" type="text" />
    <label for="비밀번호">비밀번호</label>
    <input id="비밀번호" type="text" />
</div>

 

---

🌙  오늘의 회고

 어제 웹 표준과 웹 접근성을 살펴봤고, 오늘은 웹 표준과 웹 접근성 개선에 관한 과제를 했다. 기존에 알던 내용들이 많아서 금방 풀이를 했지만 웹 접근성 자체에 대한 궁금한 부분이 있어서 Q&A 시간에 질문을 했었는데, 의미있는 답을 듣지는 못했던 것 같다. (심지어 Q&A 시간인데, 질문에 대한 답변은 시간이 남으면 하고 본인이 준비한 강의가 있으니 그걸 하시겠다고 하셔서… 그분께는 올라온 질문들에 대한 어떠한 답변도 듣지 못했다. 모바일로 Q&A 답변을 해주시던 다른 강사님 세션에 참가를 해서 답을 들었는데 기대했던 내용은 아니어서 조금 아쉬웠다.)

 개인적인 생각이지만, 지금까지 공부한 내용들과 현업 개발자들의 의견을 들어봤을 때 다수가 웹 접근성에 대해서는 크게 신경을 쓰지 않는 것 같다는 생각이 들었다. 웹 표준 또한 퍼블리셔가 있는 기업에서는 퍼블리셔가 이미 작업한 HTML을 넘겨받을테니 프론트엔드 개발자 입장에서는 알고는 있어야 하지만 크게 신경쓰지 않는다는 느낌을 받았다. 물론 웹개발을 공부하는 시점에서 나 또한 접근성에는 너무 큰 비중을 둘 생각이 당장은 없지만, 누구나 차별없이 정보를 얻을 수 있어야 한다는 것에는 크게 공감했고, 웹표준과 접근성에 대해 더 공부하고 싶다는 생각이 들었다. 🔥