feat: 20241010/about a11y #92
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -0,0 +1,243 @@ | |||
| --- | |||
| layout: post | |||
| title: 웹 접근성을 알아보자! | |||
There was a problem hiding this comment.
Suggested change
| title: 웹 접근성을 알아보자! | |
| title: 웹 접근성을 알아보자 |
정제된 글에 느낌표는 없애는게 좋아요. 독자 입장에서 감정적으로 느껴져서 몰입을 방해할 수 있거든요.
|
|
||
| # 들어가는 말 | ||
|
|
||
| 자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 a11y(웹 접근성)에 대해 알게되었습니다. a11y란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다. |
There was a problem hiding this comment.
Suggested change
| 자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 a11y(웹 접근성)에 대해 알게되었습니다. a11y란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다. | |
| 자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 웹 접근성에 대해 알게되었습니다. 웹 접근성이란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다. |
굳이 a11y라는 표현을 쓸 이유가 없어보여요. 만약에 "웹 접근성을 a11y라고도 한다"라는 것을 표현하고 싶으시다면 하단에 Callout으로 아래와 같이 붙이는게 나을거같아요.
웹 접근성을 영어로 표현하면 "Web Accessibility"라고 하고, 이를 짧게 줄여서 a11y라고 표현하기도 합니다
|
|
||
| 그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다. | ||
|
|
||
| 웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. |
There was a problem hiding this comment.
Suggested change
| 웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. | |
| 웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다. |
Comment on lines
46
to
52
| 웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다. 긍정적인 효과뿐인데 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요? | ||
|
|
||
| 그 이유는 아마도 `굳이…?` 라는 단어가 따라오기 좋은 주제여서 그럴지도 모르겠습니다. | ||
|
|
||
| 코드가 복잡해지고, 개발 기간이 늘어나고, 우리 서비스가 그정도로 잘 될지도 모르겠고… 다양한 이유가 있습니다. | ||
|
|
||
| 그러나 UX에 관심이 있는 저로서는 고려를 해서 개발을 해보고 싶었고, 이런 분야도 있다! 라고 공유 드리고 싶었습니다. |
There was a problem hiding this comment.
전반적으로 문어체가 아니라 구어체로 느껴지는 것 같아요. 문어체로 교정해보면 좋을거같아요.
There was a problem hiding this comment.
웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다.
그러나 우리는 웹 접근성이라는 단어에 익숙하지는 않습니다.
이는 아마도 `굳이…?` 라는 영역에 존재하기 때문일 것입니다.
복잡해지는 코드, 늘어나는 개발 기간 서비스의 성장 등 다양한 요소로 웹 접근성을 처음부터 챙기며 개발하기는 매우 어려운 것이 사실입니다.
그러나 평소 **"UX에 관심이 많습니다."** 라는 이야기를 하는 사람으로 웹 접근성이라는 것을 공유드리고 싶어 주제로 삼아보았습니다.
아래 처럼 수정해보았습니다!
|
|
||
| 추가적으로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 **SEO(Search Engine Optimization, 검색 최적화)에도 도움**이 됩니다. | ||
|
|
||
| 이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 성능을 보일 것입니다. |
There was a problem hiding this comment.
Suggested change
| 이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 성능을 보일 것입니다. | |
| 이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 웹 접근성을 보일 것입니다. |
갑자기 성능이라는 단어가 나와서 당황스러웠어요
|
|
||
| 이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다. | ||
|
|
||
| div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 **유지보수** 측면에서도 큰 이점을 가지고 옵니다. |
There was a problem hiding this comment.
Suggested change
| div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 **유지보수** 측면에서도 큰 이점을 가지고 옵니다. | |
| div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. |
처음 이야기를 풀어가실때 유저 경험에 집중하신 만큼 코드 유지보수성 측면의 이야기보다는 유저 경험 차원의 이야기로 집중시키는게 좋을거같아요.
그리고, 적절한 태그를 활용한 레이아웃이 코드 유지보수성을 높인다는 건 조금 비약이 있을 수 있어보여요. 우리가 페이지 마크업을 통으로 본다면 적절한 태그가 도움이 될 수 있지만, 다 잘려진 상태의 리액트 컴포넌트를 기반으로 코드를 보기 때문에 적절한 태그보다는 리액트 컴포넌트를 어떻게 나누냐가 유지보수성에 더 큰 영향을 주기 때문이에요.
|
|
||
| 탭을 통해서 각 Input들을 이동할 수 있는 것을 확인할 수 있습니다. 나아가 `enter` 등을 활용하여 적절한 제출 이벤트를 호출할 수도 있습니다. | ||
|
|
||
| UI 컨트롤은 마우스를 못쓰는 상황에서도 적절하게 웹을 사용할 수 있게 합니다. |
There was a problem hiding this comment.
Keyboard navigation과 관련하여 radix-ui와 같은 Headless UI를 소개해도 좋을거같아요. 모달을 ESC키로 닫는다던지, 드롭다운을 화살표로 위아래로 움직인다던지 하는 것도 접근성에서 중요한 부분이에요.
haejinyun
requested review from
day1companyhaewooklee and
day1chan99k
as code owners
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.