부트캠프 53, 54일차 (웹 접근성)

오늘의 생각

"저는 웹 접근성까지 고려할 수 있는 엔지니어입니다."라는 말이 어떤 의미인지 이해할 수 있는 하루였다.

 

배우게 된 개념들의 양이 많고 예시들이 다양했지만, 결국에는 웹 접근성의 본질적인 개념(어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것)을 관통하고 있다는 것을 깨달았다.

 

웹 콘텐츠 접근성 지침이 무려 24단계나 됐는데, 개발자로서 "접근성"을 고려할 때 알아야 할 기본 사항들이라 이해하는데 큰 어려움은 없었다.

 

이후에 진행된 페어 과제가 다소 난해했는데, 가이드들을 지나치게 의식하고 진행했던 것 같다.

 

먼저 기본적으로 제공되었던 코드들을 시맨틱하게 변경시켜주고, css 스타일링을 전체 구조에 맞게 바꾸는 부분이었는데 무엇을 정확히 어떻게 바꾸는지 이해하지 못했다. 

 

// 바꿔야 할 코드
<div className="article">
    <div className="title1">Semantic하게 만들기</div>
    <div className="p"> 이 div 요소를 바꿉니다.</div>
</div>

// 바꾼 코드
<article>
      <h1>Semantic하게 만들기</h1>
      <p> 이 div 요소를 p 요소로 바꿉니다. </p>
</article>


// css 파일
.title1 {
  font-weight: 700;
  font-size: 1.8rem;
  padding: 0 10px 10px 10px;
  text-align: left;
}

 

해답은 의외로 간단했는데, 간단하게 class를 참고해 바꾸면 됐지만 class만 바꾸는건지 className도 "class 속성"에 포함된 것인지 판단하기가 어려웠다. 결국 눈치껏 작성했는데, 이에 따라 .title 클래스를 h1으로 바꾸지 못했다.

 

이후에도 개별 css 스타일링을 적용해야 했는데, "리펙토링"이라는 단어를 너무 의식했던 것 같다. 스타일을 기존 스타일과 동일하게 구현하고 싶었는데, 약간씩 오차가 발생해 과제가 요구하는 내용과 다르다고 생각했는데...알고보니 그냥 "적당히" 스타일이 비슷하면 됐다. 

 

위키백과에 따르면, 리펙토링이란 "결과의 변경 없이 코드의 구조를 재조정함"이라고 정의한다. 결국 내가 리펙토링을 잘못 이해하고 있었던 것 같다...억울했지만 정확히 알아보지 못했던 점이 컸고, 무엇보다 애매한 부분을 스스로 해결하려고 시간을 과투자했던 것이 가장 아쉽게 남는 점인 것 같다. 

 

애매하고 잘 모르겠으면 물어보는 용기도 필요하다는 생각이 들었다. 열심히 고민해도 생각처럼 명쾌한 답이 안 나오더라...

 

---

오늘의 키워드

웹 접근성, 웹 콘텐츠 접근성 지침,  WAI-ARIA

 

---

오늘의 학습내용

• 웹 접근성의 개념과 웹 접근성을 갖추면 얻을 수 있는 효과
• 웹 콘텐츠 접근성 지침에서 각 지침들의 의미와 충족시키는 방안 (인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성)
• RIA, ARIA, WAI의 정의 및 WAI-ARIA의 필요성, 사용법

 

---

어려웠던 keyword / 활용한 질문

 

Q. 콘텐츠 선형 구조가 어떻게 웹 접근성을 향상시킬 수 있나요?

 

A. 콘텐츠 선형 구조는 콘텐츠를 논리적인 순서로 제공하여 웹 접근성을 향상시킬 수 있습니다. 스크린리더는 마크업 순서대로 내용을 읽어주기 때문에 이를 고려해 제목, 내용 순서로 제공되어야 합니다.