Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[사전 미션 - 워밍업] - 낙타(송재석) 미션 제출합니다. #14

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[사전 미션 - 워밍업] - 낙타(송재석) 미션 제출합니다. #14

wants to merge 5 commits into from

Conversation

Largopie
Copy link

최소한의 마크업으로 최대한의 접근성 확보하기

사용 브라우저: Arc Browser

  • 최소한의 마크업을 사용해 불필요한 요소를 줄이고, HTML의 기본 기능을 최대한 활용합니다.
  • 시맨틱 태그를 사용해 웹 페이지의 구조를 명확히 하고, 의미를 직관적으로 전달합니다.
  • ARIA 속성은 꼭 필요한 경우에만 사용하여 추가적인 정보를 제공합니다.
  • 시각적 표현과 접근성을 모두 만족시키는 방법을 함께 고민합니다.

STEP1: 언어 설정하기

스크린 리더가 문서의 언어를 올바르게 인식할 수 있도록 lang속성 설정하기

키워드

  • lang 속성

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang

*특성의 값이 빈 문자열(lang="")일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.

언어 태그 구문BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.- 언어 하위태그 - : 필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 en이고, 한국어의 언어 태그는 ko입니다*

수정해보기

한글로 작성되어 있기 때문에 한국 언어 태그인 ko로 수정한다.

<!DOCTYPE html>
<html lang="ko"> <!-- en 속성을 ko로 수정 -->
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessibility</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

수정 전과 후 차이 비교하기

  • en속성일 때는 스크린리더가 어떻게 해석하며, ko속성일 때는 어떻게 해석하는지 파악하기

en 속성 ⇒ 항공편 검색 ‘button’, 숫자를 영어로 발음한다.

ko 속성 ⇒ 한글로 말해준다.

STEP2: 시맨틱 태그 사용하기

웹 표준을 준수하며, 시맨틱 태그를 활용하여 UI의 의미를 명확하게 표현하기

키워드

<div className="app">
  <div className="app-main">
    <div className="flight-booking-container">
      <FlightBooking />
    </div>
  </div>
</div>

HTML <main> 요소는 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

앱의 핵심적인 기능을 담고있는 div태그를 main 태그로 수정합니다.

다음으로, flight-booking-container라는 클래스명을 가진 div 태그를 수정해야합니다.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_layout_elements_in_more_detail

문서 내부에 독립적인 컨텐츠에 사용할 때는 대부분 article 태그를 사용하고, 문서의 구역을 나누어서 표현할 때는 section태그를 사용하기 때문에 section 태그를 사용하는 것이 더 적합하다고 생각이 들었습니다. 따라서 해당 태그는 section으로 수정해줍니다.

STEP3: 버튼 접근성 향상시키기

기본적으로 웹 표준을 준수하는 태그를 사용하는 것만으로도 네이티브 HTML이 지원해주는 접근성 기능을 활용할 수 있습니다. 예를 들어, 클릭할 수 있는 버튼 UI이라면 다른 태그를 사용하고 클릭 이벤트를 추가하는 것보다 <button> 태그를 사용하는 것이 명확합니다. 네이티브 HTML의 기본 동작만으로 접근성을 더 개선하기 어려울 때에만 WAI-ARIA 속성을 추가로 활용합니다.

승객 감소/추가 버튼에 의미 있는 레이블을 추가하여, 스크린 리더 사용자도 각 버튼의 기능을 명확히 이해할 수 있도록 레이블을 설정하세요

키워드

수정해보기

  • 승객 감소/추가button에 aria-label 추가
// FlightBooking.tsx

<div className='flight-booking'>
  <h2 className='heading-2-text'>항공권 예매</h2>
  <div className='passenger-count'>
    <span className='body-text'>성인</span>
    <div className='counter'>
      <button aria-label='성인 1명 감소' className='button-text' onClick={decrementCount}>
        -
      </button>
      <span>{adultCount}</span>
      <button aria-label='성인 1명 추가' className='button-text' onClick={incrementCount}>
        +
      </button>
    </div>
  </div>
  <button className='search-button'>항공편 검색</button>
</div>

수정 전과 후 차이 비교하기

[수정 전]

  • -버튼 일 때, “하이픈 버튼”이라고 안내
  • +버튼일 때, “더하기 부호 버튼”이라고 안내

[수정 후]

  • -버튼 일 때, “성인 1명 감소 버튼”이라고 안내
  • +버튼 일 때, “성인 1명 추가 버튼”이라고 안내

💡 스크린 리더를 사용하는 사람은 어떤 버튼인지 정확하게 이해할 수 있다.

Step 4: 변경 사항에 대한 실시간 알림 추가하기

시각 사용자는 버튼을 클릭했을 때 변경된 승객 수를 자연스럽게 눈으로 같이 ‘볼’ 수 있습니다. 스크린 리더 사용자도 버튼을 클릭할 때 승객 수 변경 사항을 모바일 낭독기를 통해 실시간으로 '들을' 수 있게 해주세요.

키워드

  • aria-live 속성

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live

assertive
해당 지역의 업데이트가 가장 높은 우선순위를 가지며 사용자에게 즉시 제공되어야 함을 나타냅니다.

off(기본)
사용자가 현재 해당 지역에 집중하고 있지 않으면 해당 지역의 업데이트가 사용자에게 표시 되지 않음 을 나타냅니다.

polite
현재 문장을 말하는 것이 끝날 때나 사용자가 입력을 멈출 때 등 다음 적절한 기회에 해당 지역의 업데이트를 표시해야 함을 나타냅니다.*

일반적으로 only가 aria-live="polite"사용됩니다. 사용자가 수신해야 하는 중요한 업데이트를 수신하지만 성가실 정도로 빠르지 않은 모든 지역은 이 속성을 수신해야 합니다. 화면 판독기는 사용자가 유휴 상태일 때마다 변경 사항을 말합니다.

aria-live="assertive"사용자의 즉각적인 주의가 절대적으로 필요한 시간에 민감한/중요한 알림에만 사용해야 합니다. 일반적으로, 단언적 라이브 영역을 변경하면 화면 판독기가 현재 하는 모든 공지가 중단됩니다. 따라서 매우 성가시고 방해가 될 수 있으므로 아껴서 사용해야 합니다.

항공권 예매 승객 수 증가/감소 버튼을 누르면 즉시 숫자가 바뀌어야 한다. 하지만, 사용자가 입력을 다 끝낸 것을 확인한 뒤에 하는 것이 더 좋다고 생각이 든다. 왜냐하면 목소리가 나오기 전에 버튼을 잘못 누르면 어떤 버튼이 눌렸는지도 모르게 voiceover에서 하는 말을 멈추고 숫자를 말하게 되기 때문이다. 따라서 polite 로 적용한다.

하지만, 이상하게 polite 속성과 assertive 속성이 동일하게 동작한다. 버튼을 눌렀다는 것을 인지하게 하고 싶은데, 말을 끊고 변경된 숫자에 대해 안내한다. 이유는 아직 찾지 못했다.

Step 5: 최소/최대 값 도달 시 상태 메시지 알림 추가하기

최소/최대 값에 대한 알림도 추가해보겠습니다. 시각 사용자에게는 보이지 않지만, 스크린 리더에서만 필요한 메시지가 있다면 별도로 처리해줄 수 있습니다. 시각적 표현과 접근성을 모두 고려하여, 최소/최대 값 도달 시 시각 사용자와 스크린 리더 사용자 모두에게 적절한 상태 메시지를 전달할 수 있는 방법을 고민해보세요.

키워드

  • css .visually-hidden 클래스
  • role 속성

https://youtu.be/tKj3xsXy9KM?si=3qxshr0gNSrj44sj

FECONF2021에서 발표 시, Case 6: 소리 없는 토스트 섹션을 발표할 때, 어떤 방법으로 스크린리더 사용자에게 토스트를 안내할 수 있을 지 소개합니다. 사용자에게 안내하는 메시지를 전달하는데 사용하는 role='alert'를 사용합니다.링크

해당 요소는 시각 사용자에게는 보이지 않는 상태에서 스크린 리더 사용자에게도 메시지를 안내할 수 있어야합니다. 이 때 시각 사용자에게는 메시지가 보이지 않게 하면서 스크린 리더에 요소를 노출하기 위해서는 visually-hidden(sr-only) css를 적용합니다. 일반적으로 사용하는 visally-hidden은 아래와 같이 구현합니다. 이렇게 구현하게 되면 스크린 리더에는 노출되면서 시각 사용자에게는 노출되지 않도록 구현할 수 있습니다.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
<div className='visually-hidden' role='alert'>
  {toastMessage}
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Largopie