From c785d6cb62c5232d2928ad36869dfc52b931e140 Mon Sep 17 00:00:00 2001 From: dbshaejin Date: Fri, 18 Oct 2024 16:16:57 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_posts/2024-10-10-about-a11y.md" | 51 +++++++++++++------ 1 file changed, 36 insertions(+), 15 deletions(-) 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" index d2065e3..fe91b32 100644 --- "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" @@ -1,6 +1,6 @@ --- layout: post -title: 웹 접근성을 알아보자! +title: 웹 접근성을 알아보자 author: 윤해진 categories: 기술세미나 banner: @@ -14,7 +14,9 @@ banner: # 들어가는 말 -자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 a11y(웹 접근성)에 대해 알게되었습니다. a11y란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다. +자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 웹 접근성에 대해 알게되었습니다. 웹 접근성이란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다. + +> 웹 접근성을 영어로 표현하면 "Web Accessibility"라고 하고, 이를 짧게 줄여서 a11y라고 표현하기도 합니다
@@ -40,16 +42,14 @@ banner: 이런 개념에서 웹의 정의의 시각에서 본다면 `접근성`이 매우 중요한 요소로 여겨질 수 있습니다. **`접근성`이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 **모바일 장치를 사용하는 사람**들을 포함하여 모든 사용자를 대상합니다. 그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다. +웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. +웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다. +그러나 우리는 웹 접근성이라는 단어에 익숙하지는 않습니다. -웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. - -웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다. 긍정적인 효과뿐인데 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요? - -그 이유는 아마도 `굳이…?` 라는 단어가 따라오기 좋은 주제여서 그럴지도 모르겠습니다. - -코드가 복잡해지고, 개발 기간이 늘어나고, 우리 서비스가 그정도로 잘 될지도 모르겠고… 다양한 이유가 있습니다. +이는 아마도 `굳이…?` 라는 영역에 존재하기 때문일 것입니다. -그러나 UX에 관심이 있는 저로서는 고려를 해서 개발을 해보고 싶었고, 이런 분야도 있다! 라고 공유 드리고 싶었습니다. +복잡해지는 코드, 늘어나는 개발 기간 서비스의 성장 등 다양한 요소로 웹 접근성을 처음부터 챙기며 개발하기는 매우 어려운 것이 사실입니다. +그러나 평소 **"UX에 관심이 많습니다."** 라는 이야기를 하는 사람으로 웹 접근성이라는 것을 공유드리고 싶어 주제로 삼아보았습니다.
@@ -61,7 +61,7 @@ banner: 추가적으로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 **SEO(Search Engine Optimization, 검색 최적화)에도 도움**이 됩니다. -이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 성능을 보일 것입니다. +이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 웹 접근성을 보일 것입니다. 간단한 예시를 살펴보겠습니다. @@ -136,7 +136,7 @@ banner: 이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다. -div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 **유지보수** 측면에서도 큰 이점을 가지고 옵니다. +div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. - 네비게이션 메뉴는 [`