fix: 피드백 반영

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

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: 웹 접근성을 알아보자!
+title: 웹 접근성을 알아보자
 author: 윤해진
 categories: 기술세미나
 banner:
@@ -14,7 +14,9 @@ banner:
 
 # 들어가는 말
 
-자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 a11y(웹 접근성)에 대해 알게되었습니다. a11y란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다.
+자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 웹 접근성에 대해 알게되었습니다. 웹 접근성이란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다.
+
+> 웹 접근성을 영어로 표현하면 "Web Accessibility"라고 하고, 이를 짧게 줄여서 a11y라고 표현하기도 합니다
 
 <br/>
 
@@ -40,16 +42,14 @@ banner:
 이런 개념에서 웹의 정의의 시각에서 본다면 `접근성`이 매우 중요한 요소로 여겨질 수 있습니다. **`접근성`이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 **모바일 장치를 사용하는 사람**들을 포함하여 모든 사용자를 대상합니다.
 
 그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다.
+웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다.
+웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다.
+그러나 우리는 웹 접근성이라는 단어에 익숙하지는 않습니다.
 
-웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다.
-
-웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다. 긍정적인 효과뿐인데 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요?
-
-그 이유는 아마도 `굳이…?` 라는 단어가 따라오기 좋은 주제여서 그럴지도 모르겠습니다.
-
-코드가 복잡해지고, 개발 기간이 늘어나고, 우리 서비스가 그정도로 잘 될지도 모르겠고… 다양한 이유가 있습니다.
+이는 아마도 `굳이…?` 라는 영역에 존재하기 때문일 것입니다.
 
-그러나 UX에 관심이 있는 저로서는 고려를 해서 개발을 해보고 싶었고, 이런 분야도 있다! 라고 공유 드리고 싶었습니다.
+복잡해지는 코드, 늘어나는 개발 기간 서비스의 성장 등 다양한 요소로 웹 접근성을 처음부터 챙기며 개발하기는 매우 어려운 것이 사실입니다.
+그러나 평소 **"UX에 관심이 많습니다."** 라는 이야기를 하는 사람으로 웹 접근성이라는 것을 공유드리고 싶어 주제로 삼아보았습니다.
 
 <br/>
 
@@ -61,7 +61,7 @@ banner:
 
 추가적으로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 **SEO(Search Engine Optimization, 검색 최적화)에도 도움**이 됩니다.
 
-이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 성능을 보일 것입니다.
+이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 웹 접근성을 보일 것입니다.
 
 간단한 예시를 살펴보겠습니다.
 
@@ -136,7 +136,7 @@ banner:
 
 이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다.
 
-div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 **유지보수** 측면에서도 큰 이점을 가지고 옵니다.
+div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다.
 
 - 네비게이션 메뉴는 [`<nav>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav)
 - 푸터는 [`<footer>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer)
@@ -200,24 +200,45 @@ UI 컨트롤의 예시는 다양한 input이 있는 form에서 탭 키를 눌러
 
 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% 접근성"은 실현 불가능한 이상이라고 합니다.  
+**"100% 접근성"** 은 `실현 불가능한 이상`이라고 합니다.  
 어디서나 예외는 존재하고 수 많은 사용자들 중 어떤 사용자는 어떠한 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 그렇지만 할 수 있는 만큼 노력해야 합니다.
 
 <br/>
 
 몇가지 예시를 들어보겠습니다.
 
-- **시각적으로 화려한 그래픽**을 활용한 웹 서비스
+<br/>
+
+### 시각적으로 `화려한 그래픽`을 활용한 웹 서비스
 
 **시각적인 어려움을 겪는 사용자**를 위한 스크린 리더는 이미지를 읽을 수 없습니다. 따라서 해당 사용자들에게는 중요한 정보가 전달되지 않을 수 있습니다.
 
 ⇒ 이미지를 설명하는 `alt` 속성을 제공하고, 텍스트로 동일한 정보를 전달하려고 하지만, 복잡한 그래픽이나 비주얼 데이터는 그 자체로 완벽하게 전달하기 어려울 수 있습니다.
 
-- **동적인 콘텐츠**나 **복잡한 양식**을 가진 웹 서비스
+<br/>
+
+### `동적인 콘텐츠`나 `복잡한 양식`을 가진 웹 서비스
 
 **드래그 앤 드롭 기능**이 포함된 복잡한 대시보드는 마우스를 사용할 수 없는 사람이나 키보드만 사용하는 사용자들에게 불편할 수 있습니다.