[항공사 웹사이트의 컴포넌트 접근성 높이기 - 1단계] 병민(윤병인) 미션 제출합니다. #61

airman5573 · 2022-10-06T08:58:32Z

🔥 결과

직접 구현한 페이지를 작동시켜볼 수 있도록 접근 가능한 페이지 링크를 공유해주세요.

✅ 요구사항 목록

1 Spin Button

최대 인원수는 3명까지만 가능하게 구현합니다.
실제 스크린 리더는 아래와 같이 읽을 수 있어야 합니다. 단, 스크린 리더기 마다 읽는 방법이 다를 수 있으니 참고만 해주세요. 중요한건 스크린 리더기를 활용하여 동작을 할 수 있어야 합니다.
리팩터링 과정에서 불필요하거나 웹 표준에 어긋나는 마크업은 없는지 확인합니다.

성인 탑승자 한명 줄이기 버튼
성인 1 텍스트 숫자만 수정
성인 탑승자 한명 늘리기 버튼
성인 승객 추가 2
성인 탑승자 한명 늘리기 버튼
성인 승객 추가 3

2 Carousel

총 8개의 carousel 중 2개의 목록을 기본으로 보여준다.
실제 스크린 리더는 아래와 같이 읽을 수 있어야 합니다. 단, 스크린 리더기 마다 읽는 방법이 다를 수 있으니 참고만 해주세요. 중요한건 스크린 리더기를 활용하여 동작을 할 수 있어야 합니다.
리팩터링 과정에서 불필요하거나 웹 표준에 어긋나는 마크업은 없는지 확인합니다.

1. 지금 떠나기 좋은 여행
2. 목록 8개 항목 포함 서울/인천 로스앤젤레스 일반석 왕복 1,481,800 대한민국 원 링크 목록 항목
3. 다음 버튼 (사용 중지)
4. 이전 버튼 (사용 중지)

🧐 공유

오랜만에 바닐라 자바스크립트로 개발해서 즐거웠습니다.
놀드가 알려준 방법대로 눈감고 웹을 사용해 봤습니다. 아주 잠깐이었지만 매우 불편했습니다. 핵심 기능들 만이라도 웹접근성에 신경을 써야겠다고 느꼈습니다.
윈도우의 NVDA를 사용해봤는데 잘 작동해서 놀랐습니다. 이런 툴이 있어서 다행이라고 생각했습니다.
기술적으로는 왜 semantic한 markup을 작성해야 하는지 알게되었고, aria-label, role, aria-live 에 대해 알게되었습니다.
모바일에서 오류메세지를 사용자에게 보여줄때 content(text)가 바뀌어야 aria-live가 작동한다는것을 알았습니다!

soyi47

병민 안녕하세요! 리뷰로 만나게 되어 반갑습니다. 🤗

접근성 관련해서는 아직 제가 모르는 부분들이 많아서, 제가 이번에 새로 알게 된 것들, 그리고 스크린 리더기로 사용해봤을 때 느낀 점을 위주로 코멘트 남겨봤습니다.
모든 리뷰 반영해주실 필요는 없고, 필요하다고 생각하는 부분들만 반영해주세요!
코멘트 답변 남기고 다시 리뷰 요청 부탁 드립니다.

그럼 즐거운 주말 보내요~! 👍

soyi47 · 2022-10-08T06:06:37Z

src/main.js

+      if (target.value < Number(min)) {
+        isProperRange = false;
+        target.value = min;
+        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+      }
+    }
+    if (max !== null) {
+      if (target.value > Number(max)) {
+        isProperRange = false;
+        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+        target.value = max;
+      }


스낵바로 안내하는 것도 좋지만, 안내문이 읽히지는 않아서 버튼을 눌러도 어떤 상황인지 사용자가 알기 어려울 것 같네요. ㅠ.ㅠ
접근성 요소를 사용해서 해당 버튼을 사용할 수 없음을 나타내주면 더 좋을 것 같아요. 대한항공 웹사이트에서는 aria-disabled를 사용하고 있어요!

스낵바로 안내하는 것도 좋지만, 안내문이 읽히지는 않아서 버튼을 눌러도 어떤 상황인지 사용자가 알기 어려울 것 같네요. ㅠ.ㅠ
=> 안내문이 읽히도록 설정했습니다! snackbar의 content가 바뀌어야지만 aria-live가 작동했었네요!

접근성 요소를 사용해서 해당 버튼을 사용할 수 없음을 나타내주면 더 좋을 것 같아요. 대한항공 웹사이트에서는 aria-disabled를 사용하고 있어요!
=> 이런 속성이 있었군요. 알려주셔서 감사합니다.
제가 테스트 해봤는데 말씀하신대로 잘 작동 합니다 :D
다만, 눈을 감고 테스트 해봤을때 이 버튼을 누를 수 있도록 해놓고 -> 눌렀을때 에러메세지를 읽어주는 편이 더 안정감이 느껴졌습니다. aria-disabled를 사용하면, "버튼 사용 불가" 라는 말은 나오는데 왜 못사용하는지는 안나와서 조금 불편하다고 생각했습니다.

소피아는 어떻게 생각하시나요? (수정했으니 확인 가능합니다 :D)

어떤 말씀이신지 알겠어요!
제 생각에는 스크린 리더기의 이용자들은 접근성 속성이 제공하는 표현들에 익숙할 것 같아요. 표준이고 많은 문서들이 이 표준을 기반으로 작성되었을테니까요. aria-disabled를 사용하면서, 원하는 정보를 더 제공할 수 있는 방법은 없는지 알아보고 적용하는 게 좋다고 생각합니다. 👍

soyi47 · 2022-10-08T06:10:58Z

src/index.html

+            <button type="button" class="helptip-trigger" aria-label="성인 기준 상세 안내 열기"><span>?</span></button>
+            <div class="helptip">
+              <span aria-live="polite">국제선 만 12세 이상, 국내선 만 13세 이상</span>
+              <button type="button" class="helptip-closer" aria-label="성인 기준 상세 안내 닫기"><span>x</span></button>


여기 닫기 버튼을 클릭하면 포커스가 전체 웹뷰로 이동하네요. 닫기 버튼을 클릭했을 때 다시 help button으로 포커스가 이동하면 사용자 흐름이 더 자연스러울 것 같아요.

저도 이번 수업 때 온스타한테 배운 건데, aria-expanded라는 요소가 속성이 있대요. 펼쳐지고 닫히는 요소에 적합하다는데 한번 알아봐도 좋겠습니다. 🧐

오 감사합니다.
다만, aria-expaned속성으로 focus가 이동되지는 않아 보입니다 !
포커스 이동하는 방법을 모르겠네요 ㅠ

그러네요. ㅠㅠ 포커스 이동은 태그 구조를 잘 고민해봐야 할 것 같아요..! 저도 좋은 방법을 알게 되면 공유하겠습니다~!

webpack/webpack.common.js

src/HelptipManager.js

soyi47 · 2022-10-08T06:28:10Z

src/style/style.scss

+.aria-hidden {
+  position: absolute;
+  text-indent: -9999px;
+}


aria-hidden 속성과 어떤 부분이 다른가요? 혼란을 주진 않을까요?

동감입니다!

수정했습니다 :D
a91ad96

soyi47

안녕하세요 병민~!
리뷰 잘 확인해주셨네요. 질문 남겨주신 코멘트에는 제 생각들 정리해서 답변 남겨뒀습니다.
다음 미션에서 웹 접근성을 준수하는 방법 더 알아가보도록 해요! 머지하겠습니다! 👍😄

soyi47 · 2022-10-11T11:18:14Z

src/main.js

+      if (target.value < Number(min)) {
+        isProperRange = false;
+        target.value = min;
+        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+      }
+    }
+    if (max !== null) {
+      if (target.value > Number(max)) {
+        isProperRange = false;
+        snackbarManager.show('인원수는 0명에서 3명까지만 가능합니다');
+        target.value = max;
+      }


어떤 말씀이신지 알겠어요!
제 생각에는 스크린 리더기의 이용자들은 접근성 속성이 제공하는 표현들에 익숙할 것 같아요. 표준이고 많은 문서들이 이 표준을 기반으로 작성되었을테니까요. aria-disabled를 사용하면서, 원하는 정보를 더 제공할 수 있는 방법은 없는지 알아보고 적용하는 게 좋다고 생각합니다. 👍

soyi47 · 2022-10-11T11:19:32Z

src/index.html

+            <button type="button" class="helptip-trigger" aria-label="성인 기준 상세 안내 열기"><span>?</span></button>
+            <div class="helptip">
+              <span aria-live="polite">국제선 만 12세 이상, 국내선 만 13세 이상</span>
+              <button type="button" class="helptip-closer" aria-label="성인 기준 상세 안내 닫기"><span>x</span></button>


그러네요. ㅠㅠ 포커스 이동은 태그 구조를 잘 고민해봐야 할 것 같아요..! 저도 좋은 방법을 알게 되면 공유하겠습니다~!

airman5573 added 20 commits October 6, 2022 12:45

chore: 환경설정

630230d

feat: normalize css 적용

9472204

chore: sass 사용

f753ff0

feat: 기본적인 HTML 골격을 잡는다

e64176d

chore: MiniCssExtractPlugin 추가

9780c9f

feat: 기본 디자인 적용

08b7573

feat: HelptipManager 추가

909e001

feat: SnackbarManager 추가

3708c12

refactor: $를 유틸로 분리

57b1022

feat: helptip 스타일 추가

feff9e2

feat: snackbar style 추가

4f8a6d0

feat: 변경사항 적용

5fc1dc2

feat: snackbar에 aria-live 적용

0370a4a

fix: helptip style 수정

e300515

fix: 이미 버튼으로 읽히기 때문에 버튼을 삭제한다

7e8703d

feat: helptip 닫기 버튼 추가

8e0f1ac

feat: helptip message에 aria-live 적용

7ad7992

fix: HelptipManager 기본 selector 수정

4d262c9

fix: HelptipManager 맴버 선언

ffccc13

fix: h1이 안읽히는 문제 해결

d89d7b4

airman5573 requested a review from soyi47 October 6, 2022 09:12

fix: 레이아웃 오류 수정

aec709f

airman5573 force-pushed the airman5573 branch from 0b61aca to aec709f Compare October 6, 2022 09:20

feat: 숫자가 바뀔때 스크린 리더가 숫자를 읽도록 설정

16fde3a

airman5573 force-pushed the airman5573 branch from a56a553 to 16fde3a Compare October 6, 2022 09:53

fix: 키보드로 인원 변경할때 오류 해결

a4e6f5d

airman5573 force-pushed the airman5573 branch from 8b87324 to a4e6f5d Compare October 6, 2022 10:10

airman5573 added 3 commits October 7, 2022 11:25

fix: aria-live off -> polite

b7b0b67

fix: polite -> off

679bcdc

feat: cache buster 적용

1b5baf0

airman5573 force-pushed the airman5573 branch from c5b3358 to da2e9d0 Compare October 7, 2022 02:59

fix: aria-live 속성을 동적으로 바꾸지 않음

5cbc1ec

airman5573 force-pushed the airman5573 branch from da2e9d0 to 5cbc1ec Compare October 7, 2022 03:01

soyi47 suggested changes Oct 8, 2022

View reviewed changes

airman5573 force-pushed the airman5573 branch 2 times, most recently from 0c190f0 to 2a63588 Compare October 10, 2022 06:16

fix: 스크린 리더가 snackbar를 읽도록 한다

3d5be27

airman5573 force-pushed the airman5573 branch from 2a63588 to 3d5be27 Compare October 10, 2022 06:19

airman5573 added 6 commits October 10, 2022 15:22

fix: snackbar 위치 수정

aa804f7

fix: typo

6c37559

refactor: typo 사용하지 않는 주석 제거

d7a5847

feat: helptip이 화면에 나왔을떄 스크린 리더가 바로 읽도록 한다

b5f17fc

test

55d1a96

feat: aria-live를 통일한다

e7ed7d3

airman5573 force-pushed the airman5573 branch from 54a0b1e to e7ed7d3 Compare October 10, 2022 07:18

airman5573 added 2 commits October 10, 2022 16:22

fix: helptip-content에 aria-hidden을 적용한다

0ec4999

refactor: 명시적인 class를 사용한다

a91ad96

soyi47 approved these changes Oct 11, 2022

View reviewed changes

soyi47 merged commit bec4d5a into woowacourse:airman5573 Oct 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[항공사 웹사이트의 컴포넌트 접근성 높이기 - 1단계] 병민(윤병인) 미션 제출합니다. #61

[항공사 웹사이트의 컴포넌트 접근성 높이기 - 1단계] 병민(윤병인) 미션 제출합니다. #61

airman5573 commented Oct 6, 2022 •

edited

Loading

soyi47 left a comment

soyi47 Oct 8, 2022

airman5573 Oct 10, 2022 •

edited

Loading

soyi47 Oct 11, 2022

soyi47 Oct 8, 2022

airman5573 Oct 11, 2022 •

edited

Loading

soyi47 Oct 11, 2022

soyi47 Oct 8, 2022

airman5573 Oct 11, 2022

soyi47 left a comment

soyi47 Oct 11, 2022

soyi47 Oct 11, 2022

[항공사 웹사이트의 컴포넌트 접근성 높이기 - 1단계] 병민(윤병인) 미션 제출합니다. #61

[항공사 웹사이트의 컴포넌트 접근성 높이기 - 1단계] 병민(윤병인) 미션 제출합니다. #61

Conversation

airman5573 commented Oct 6, 2022 • edited Loading

🔥 결과

✅ 요구사항 목록

🧐 공유

soyi47 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

airman5573 Oct 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

airman5573 Oct 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soyi47 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

airman5573 commented Oct 6, 2022 •

edited

Loading

airman5573 Oct 10, 2022 •

edited

Loading

airman5573 Oct 11, 2022 •

edited

Loading