feat: 20241010/about a11y

기술세미나/_posts/2024-10-10-about-a11y.md

@@ -0,0 +1,260 @@
+---
+layout: post
+title: 웹 접근성을 알아보자
+author: 윤해진
+categories: 기술세미나
+banner:
+  image: https://raw.githubusercontent.com/Kernel360/blog-image/main/2024/0223/spring-batch-tutorial.jpeg
+  background: "#000"
+  height: "100vh"
+  min_height: "38vh"
+  heading_style: "font-size: 4.25em; font-weight: bold; text-decoration: underline"
+  tags: [웹 접근성, a11y, 기술세미나]
+---
+
+# 들어가는 말
+
+자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 웹 접근성에 대해 알게되었습니다. 웹 접근성이란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다.
+
+> 웹 접근성을 영어로 표현하면 "Web Accessibility"라고 하고, 이를 짧게 줄여서 a11y라고 표현하기도 합니다
+
+<br/>
+
+# 개발자가 고려할 수 있는 UX
+
+- **성능 최적화**
+  - 이미지 최적화, 지연 로딩(lazy loading), 코드 스필리팅 등으로 사용자가 불편함 없이 빠르게 페이지를 사용할 수 있습니다.
+- 에러 처리 및 예외 상황 관리
+  - **유연한 에러 처리**: 사용자가 오류를 겪을 때 적절한 에러 메시지를 제공하고, 입력 오류가 발생했을 때 이를 명확히 알려줍니다.
+
+등등 다양한 요소를 고려하며 똑같은 디자인 파일을 보고 개발을 진행하여도 더 나은 결과를 만들어 낼 수 있을 것입니다.
+
+그러나 여기서 저는 UX를 더 넓은 의미로 보아야할 필요성이 있다고 느꼈습니다.
+더 나은 성능에 집중하는 것도 매우 필요하지만, 누구든 어떤 환경에서든 해당 서비스를 충분히 이용해야합니다.
+이런 시각에서 개발자고 고려할 수 있는 UX는 어떤 것이 있을까요?
+
+<br/>
+
+# 웹 접근성이란?
+
+웹의 창시자는 웹을 "장애에 구애 없이 **모든 사람들이 손쉽게 정보를 공유할 수 있는 공간**"이라고 이야기했습니다.
+
+이런 개념에서 웹의 정의의 시각에서 본다면 `접근성`이 매우 중요한 요소로 여겨질 수 있습니다. **`접근성`이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 **모바일 장치를 사용하는 사람**들을 포함하여 모든 사용자를 대상합니다.
+
+그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다.
+웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다.
+웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다.
+그러나 우리는 웹 접근성이라는 단어에 익숙하지는 않습니다.
+
+이는 아마도 `굳이…?` 라는 영역에 존재하기 때문일 것입니다.
+
+복잡해지는 코드, 늘어나는 개발 기간 서비스의 성장 등 다양한 요소로 웹 접근성을 처음부터 챙기며 개발하기는 매우 어려운 것이 사실입니다.
+그러나 평소 **"UX에 관심이 많습니다."** 라는 이야기를 하는 사람으로 웹 접근성이라는 것을 공유드리고 싶어 주제로 삼아보았습니다.
+
+<br/>
+
+# 웹 접근성을 높이는 방법(시멘틱 웹)
+
+“상황에 맞는 **적절한 태그**를 사용해야한다!”라는 이야기는 종종 들어보셨을 것입니다.
+
+**시맨틱 태그**를 사용하면 웹의 모든 데이터를 기계가 이해할 수 있는 형태로 제작할 수 있게 되며 이를 **시맨틱 웹**이라고 부릅니다. 시맨틱 웹은 `스크린 리더`, `화면 돋보기`, `음성 인식`, `키보드 오버레이` 등의 다양한 보조 장치들이 문서를 이해하기 쉽게 해주기 때문에 **접근성을 높이는 데 도움**이 됩니다.
+
+어떤 상황에 있던 누구든 사용할 수 있는 웹을 위해서는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 웹 접근성을 보일 것입니다.
+
+간단한 예시를 살펴보겠습니다.
+
+```jsx
+<div>Play video</div>
+```
+
+```jsx
+<button>Play video</button>
+```
+
+동영상 재생을 위한 버튼을 위 두가지 방법으로 개발했다고 가정해봅시다.
+
+기능은 어찌보면 동일하게 구현 할 수 있을 것입니다. 그러나 button태그를 사용한 것에서는
+
+- `Tab` 키를 사용하여 요소를 바꿀 수 있다
+- Space, Return 또는 Enter 키를 사용해 선택된 버튼을 활성화 가능
+
+이 가능합니다.
+
+만약 `div` 태그로 구현하였다면 위 부수적인 요소를 구현하기 위해서는 추가적인 코드가 필요했을 것입니다.
+
+적절한 태그를 활용하면, 접근성을 높힐뿐더러 개발이 더 쉬워진다는 장점도 있습니다.
+
+<br/>
+
+# 좋은 시멘틱-**문자 콘텐츠**
+
+```jsx
+<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<ol>
+  <li>Here is</li>
+  <li>a list for</li>
+  <li>you to read</li>
+</ol>
+
+<h2>My subheading</h2>
+
+<p>
+  This is the first subsection of my document. I'd love people to be able to
+  find this content!
+</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>
+  This is the second subsection of my content, which I think is more interesting
+  than the last one.
+</p>
+
+```
+
+위 예시처럼 적절한 태그를 활용하여 웹 페이지 마크업을 구성하게 된다면 스크린 리더를 활용하여 페이지를 보다 **잘**읽을 수 있습니다.
+
+1. 콘텐츠를 읽어나가는 동안 스크린 리더가 어떤 것이 헤딩이고, 어떤 것이 문단인지를 알려주면서 각각의 헤더를 읽어줍니다.
+2. 사용자가 편안한 속도로 탐색을 진행할 수 있도록 하나의 요소가 끝나면 멈춥니다.
+3. 많은 스크린 리더에서 다음/직전 헤딩으로 이동할 수 있습니다.
+4. 또한 많은 스크린 리더에서 모든 헤딩의 목록을 제공합니다. 특정 정보를 찾기 위한 편리한 목차로써 활용할 수 있습니다.
+
+와 같은 장점을 제공합니다.
+
+<br/>
+
+# 좋은 시멘틱-**페이지 레이아웃**
+
+페이지를 구성하다보면 `Header`, `Footer`, `Main`, `Nav` 등등 다양한 태그를 활용합니다.  
+그러나 `div`를 쌓아가며 개발하는 경우도 있습니다. 위 두 방법 `div를 나열한 레이아웃`과 `적절한 태그를 활용한 레이아웃`의 접근성측면의 차이점은 존재합니다.
+
+이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다.
+
+div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다.
+
+- 네비게이션 메뉴는 [`<nav>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav)
+- 푸터는 [`<footer>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer)
+- 반복되는 콘텐츠 단위는 [`<article>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/article)
+
+등 적절한 섹션 요소를 사용하는 것이 개발하는 것이 접근성과 유지보수에서의 장점을 제공합니다.
+
+<br/>
+
+# 좋은 시멘틱-UI 컨트롤
+
+UI 컨트롤이란, 웹 문서에서 사용자와 상호작용하는 주요 영역들을 의미합니다. 일반적으로 `버튼`, `링크`, `폼 컨트롤` 요소들을 포함합니다. UI 컨트롤 접근성에 대한 핵심적인 측면 중 하나는 브라우저가 기본적으로 키보드로 이들을 조작할 수 있도록 한다는 것입니다.
+
+웹을 개발할때 보통은 마우스 클릭을 기본으로 개발을 하게 됩니다. 키보드는 부수적인 요소라는 인식이 꽤나 크게 느껴지곤 합니다. 그러나 키보드만 쓸 수 있는 상황의 사용자가 있다면, 이는 과연 부수적인 요소일까요?
+
+UI 컨트롤의 예시는 다양한 input이 있는 form에서 탭 키를 눌러보면 탭 포커스가 다른 포커스 가능 요소로 이동하는 것을 볼 수 있습니다.
+
+```jsx
+<h1>Links</h1>
+
+<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>
+  Another link, to the
+  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
+</p>
+
+<h2>Buttons</h2>
+
+<p>
+  <button data-message="This is from the first button">Click me!</button>
+  <button data-message="This is from the second button">Click me too!</button>
+  <button data-message="This is from the third button">And me!</button>
+</p>
+
+<h2>Form</h2>
+
+<form>
+  <div>
+    <label for="name">Fill in your name:</label>
+    <input type="text" id="name" name="name" />
+  </div>
+  <div>
+    <label for="age">Enter your age:</label>
+    <input type="text" id="age" name="age" />
+  </div>
+  <div>
+    <label for="mood">Choose your mood:</label>
+    <select id="mood" name="mood">
+      <option>Happy</option>
+      <option>Sad</option>
+      <option>Angry</option>
+      <option>Worried</option>
+    </select>
+  </div>
+</form>
+
+```
+
+탭을 통해서 각 Input들을 이동할 수 있는 것을 확인할 수 있습니다. 나아가 `enter` 등을 활용하여 적절한 제출 이벤트를 호출할 수도 있습니다.
+UI 컨트롤은 마우스를 못쓰는 상황에서도 적절하게 웹을 사용할 수 있게 합니다.
+
+추가적으로`radix-ui` 등 `Headless-ui`를 적절하게 활용하면 보다 효과적인 키보드 컨트롤을 지원합니다.
+
+아래는 `radix-ui`의 아코디언 컴포넌트 문서의 접근성 파트 중 일부입니다.
+
+<p align="center">
+ <img src="https://raw.githubusercontent.com/Kernel360/blog-image/main/2024/1018/keybordInteraction.png" alt="keyboardInteraction in radix ui" />
+ </p>
+
+아코디언 컴포넌트 내에서 다양한 키보드 컨트롤을 제공하고 있습니다.
+
+몇가지 예시로
+
+- `ESC` 를 통해 모달 등의 페이지 닫기
+- `방향키, Tab`를 통해 드롭다운 요소 focus 이동
+
+등을 컴포넌트에 맞는 키보스 상호작용을 제공합니다.
+
+<br/>
+
+# 접근성이 완벽한 서비스?
+
+**"100% 접근성"** 은 `실현 불가능한 이상`이라고 합니다.  
+어디서나 예외는 존재하고 수 많은 사용자들 중 어떤 사용자는 어떠한 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 그렇지만 할 수 있는 만큼 노력해야 합니다.
+
+<br/>
+
+몇가지 예시를 들어보겠습니다.
+
+### 시각적으로 `화려한 그래픽`을 활용한 웹 서비스
+
+**시각적인 어려움을 겪는 사용자**를 위한 스크린 리더는 이미지를 읽을 수 없습니다. 따라서 해당 사용자들에게는 중요한 정보가 전달되지 않을 수 있습니다.
+
+⇒ 이미지를 설명하는 `alt` 속성을 제공하고, 텍스트로 동일한 정보를 전달하려고 하지만, 복잡한 그래픽이나 비주얼 데이터는 그 자체로 완벽하게 전달하기 어려울 수 있습니다.
+
+<br/>
+
+### `동적인 콘텐츠`나 `복잡한 양식`을 가진 웹 서비스
+
+**드래그 앤 드롭 기능**이 포함된 복잡한 대시보드는 마우스를 사용할 수 없는 사람이나 키보드만 사용하는 사용자들에게 불편할 수 있습니다.
+
+⇒키보드 접근성을 개선하고, 드래그 앤 드롭 대신 키보드로 선택할 수 있는 대안을 제공하지만, 인터페이스의 모든 복잡한 기능을 동일한 수준으로 제공하는 것은 어려울 수 있습니다.
+
+<br/>
+
+모든 사용자를, 모든 접근성을 구축하는 것은 불가능 하겠지만, **할수 있는 만큼의 최대한 노력**을 해하고 생각을 해봐야한다는 것이 매우 중요한 포인트가 될 것입니다.
+
+<br/>
+
+# 마무리 하는 말
+
+UX를 고려하는 개발에 저는 빠른 로딩, 상황에 따라 밀리지 않는 화면 등만을 고려해왔습니다.\
+**웹 접근성**이라는 주제로 테크 블로그를 준비하며 다양한 사람이 서비스를 차별없이 접할 수 있는 것에 대해서 고민해 보았습니다. 단순하게 "적절한 태그를 쓰는 웹이 좋지!"라는 생각에서 **시맨틱 웹**의 장점도 확실하게 알아 볼 수 있었습니다.  
+이 글을 읽는 분들도 프로젝트에 적절한 접근성을 제공하여 다양한 사람들이 다양한 상황에서 웹을 접근할 수 있게 고민해 보는 시도를 해봤으면!이라는 바람과 함께 글을 마치겠습니다.
+
+<br/>
+
+참고:   
+https://developer.mozilla.org/ko/docs/Learn/Accessibility
+
+[스크린 리더의 HTML5 섹션 요소 지원](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)