From 967504d5efb94e8516fa05cad3f4ae35d82f786f Mon Sep 17 00:00:00 2001 From: dbshaejin Date: Thu, 10 Oct 2024 19:09:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=202024-10-10=20=EB=B8=94=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_posts/2024-10-10-about-a11y.md" | 225 ++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 "\352\270\260\354\210\240\354\204\270\353\257\270\353\202\230/_posts/2024-10-10-about-a11y.md" diff --git "a/\352\270\260\354\210\240\354\204\270\353\257\270\353\202\230/_posts/2024-10-10-about-a11y.md" "b/\352\270\260\354\210\240\354\204\270\353\257\270\353\202\230/_posts/2024-10-10-about-a11y.md" new file mode 100644 index 0000000..f25d457 --- /dev/null +++ "b/\352\270\260\354\210\240\354\204\270\353\257\270\353\202\230/_posts/2024-10-10-about-a11y.md" @@ -0,0 +1,225 @@ +--- +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 측면에 신경을 많이 쓰는 것 같다.”라고 이야기 합니다. 그러나 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민해보고 a11y에 대해 설명하려고 합니다. + +# 개발자가 고려할 수 있는 UX + +- **성능 최적화** + - 이미지 최적화, 지연 로딩(lazy loading), 코드 스플리팅 등으로 사용자가 불편함 없이 빠르게 페이지를 사용할 수 있습니다. +- 에러 처리 및 예외 상황 관리 + - **유연한 에러 처리**: 사용자가 오류를 겪을 때 적절한 에러 메시지를 제공하고, 입력 오류가 발생했을 때 이를 명확히 알려줍니다. + +등등 다양한 요소를 고려하며 똑같은 디자인 파일을 보고 개발을 진행하여도 더 나은 결과를 만들어 낼 수 있을 것입니다. + +그러나 여기서 저는 UX를 더 넓은 의미로 보아야할 필요성이 있다고 느꼈습니다. + +더 나은 성능에 집중하는 것도 매우 필요하지만, 누구든 어떤 환경에서든 해당 서비스를 충분히 이용해야합니다. + +그런 시각에서 개발자고 고려할 수 있는 UX는 어떤 것이 있을까요? + +# 웹 접근성이란? + +웹의 창시자는 웹을 "장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간"이라고 이야기했습니다. + +이런 개념에서 웹의 정의의 시각에서 본다면 접근성이 매우 중요한 요소로 여겨질 수 있습니다. **접근성이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하여 모든 사용자를 대상합니다. + +그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다. + +웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. + +웹 접근성 너무 나도 좋은 취지이고 기업의 이미지에도 긍정적인 영향을 줄 수 있습니다. 따라서 필수적인 요소는 아니지만 필수여도 나쁘지 않은 요소라고 생각이 됩니다. + +그러나 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요? + +그 이유는 아마도 `굳이…?` 라는 단어가 따라오기 좋은 주제여서 그럴지도 모르겠습니다. + +코드가 복잡해지고, 개발 기간이 늘어나고, 우리 서비스가 그정도로 잘 될지도 모르겠고… 다양한 이유가 있습니다. + +그러나 UX에 관심이 있는 저로서는 고려를 해서 개발을 해보고 싶었고, 이런 분야도 있다! 라고 공유 드리고 싶었습니다. + +# 웹 접근성을 높이는 방법(시멘틱 웹) + +“상황에 맞는 적절한 태그를 사용해야한다!”라는 이야기는 종종 들어보셨을 것입니다. + +시맨틱 태그를 사용하면 웹의 모든 데이터를 기계가 이해할 수 있는 형태로 제작할 수 있게 되며 이를 시맨틱 웹이라고 부릅니다. 시맨틱 웹은 `스크린 리더`, `화면 돋보기`, `음성 인식`, `키보드 오버레이` 등의 다양한 보조 장치들이 문서를 이해하기 쉽게 해주기 때문에 **접근성을 높이는 데 도움**이 됩니다. + +추가적으로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 **SEO(Search Engine Optimization, 검색 최적화)에도 도움**이 됩니다. + +이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것 보다 더 나은 성능을 보일 것입니다. + +간단한 예시를 살펴보겠습니다. + +```jsx +
Play video
+``` + +```jsx + +``` + +동영상 재생을 위한 버튼을 위 두가지 방법으로 개발했다고 가정해봅시다. + +기능은 어찌보면 동일하게 구현 할 수 있을 것입니다. 그러나 button태그를 사용한 것에서는 + +- `Tab` 키를 사용하여 요소를 바꿀 수 있다 +- Space, Return 또는 Enter 키를 사용해 선택된 버튼을 활성화 가능 + +이 가능합니다. + +만약 `div` 태그로 구현하였다면 위 부수적인 요소를 구현하기 위해서는 추가적인 코드가 필요했을 것입니다. + +적절한 태그를 활용하면, 접근성을 높힐뿐더러 검색 최적화와 개발이 더 쉬워진다는 장점도 있습니다. + +# 좋은 시멘틱-**문자 콘텐츠** + +```jsx +

My heading

+ +

This is the first section of my document.

+ +

I'll add another paragraph here too.

+ +
    +
  1. Here is
    2. +
  2. a list for
    3. +
  3. you to read
    4. +
+ +

My subheading

+ +

+ This is the first subsection of my document. I'd love people to be able to + find this content! +

+ +

My 2nd subheading

+ +

+ This is the second subsection of my content, which I think is more interesting + than the last one. +

+ +``` + +위 예시처럼 적절한 태그를 활용하여 웹 페이지 마크업을 구성하게 된다면 스크린 리더를 활용하여 페이지를 보다 **“잘”**읽을 수 있습니다. + +1. 콘텐츠를 읽어나가는 동안 스크린 리더가 어떤 것이 헤딩이고, 어떤 것이 문단인지를 알려주면서 각각의 헤더를 읽어줍니다. +2. 사용자가 편안한 속도로 탐색을 진행할 수 있도록 하나의 요소가 끝나면 멈춥니다. +3. 많은 스크린 리더에서 다음/직전 헤딩으로 이동할 수 있습니다. +4. 또한 많은 스크린 리더에서 모든 헤딩의 목록을 제공합니다. 특정 정보를 찾기 위한 편리한 목차로써 활용할 수 있습니다. + +와 같은 장점을 제공합니다. + +# 좋은 시멘틱-**페이지 레이아웃** + +페이지를 구성하다보면 우리는 `Header`, `Footer`, `Main`, `Nav` 등등 다양한 태그를 쓰곤 합니다. 그러나 쓰지 않는 경우도 있죠. 그렇다면 div를 나열한 레이아웃과 적절한 태그를 활용한 레이아웃이 무엇이 다를까요? + +이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다. + +div혹은 table을 통해 만든 레이아웃은 컨텐츠를 스크린 리더로 읽을 때 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 유지보수 측면에서도 큰 이점을 가지고 옵니다. + +- 네비게이션 메뉴는 [`