[FE Road Map] Accessibility - 접근성

다양성

정보에 대한 접근 → 인권

인터넷은 모든 사람을 위한 것임

청력 → 오디오 스크립트, 비디오 캡션

시각 → TTS, 확대 축소, 대비, 색맹

시멘틱 태그의 사용

• <div/> <span/> 의 경우 우리에게 아무런 정보를 주지 않음
• <form> <table> <article>

Accessibility Landmarks

• 시각 장애인 → 스크린 리더를 사용하여 웹 페이지 섹션 이동 가능

<section> VS <aside>

• section 메인 컨텐츠와 연관 없음 네이버의 경우 광고 탭에 사용
  
• aside 메인 컨텐트와 직결
  

<button> VS <a>

• button 현재 페이지 내에서 작업하는 상호 작용 스크린 리더가 이를 버튼으로 인식할 수 있음
  • 기본 스타일 제공
  • 포커스 가능
  • 클릭 가능
• a 다른 보기로 이동하는 모든 상호 작용

  < a href ="/about/" > 회사 소개 < /a >

Accessibility Role, Name & Value

• Role 프레임워크나 특수 경우에 따라서 의도한 태그를 사용하지 못할 경우 이에 대한 설명을 role 속성으로 대체

  <button role="button"> -> 이미 버튼 role 속성이 내장되어 있음

• Name 사용자 지정 컨트롤에는 이름이 필요함

  < select aria-label ="국가 호출 코드" name ="countryCode" > ... < 선택 >

• value 아코디언 메뉴를 가정할 때 사용할 수 있는 HTML 표준이 없음 이에 대한 경우 → value를 통해 이를 특정화 aria-expanded="false"

  <div role="button" aria-expanded="false">When do I get charged for a ride?</div>

Accessibility Color Contrast

• 사용 이유 : 색맹, 시력 감소, 햇빛 같은 경우 필요

• 명암비란?

  배경색에 대한 텍스트 또는 그래픽 간의 대비를 측정함

  흰색 배경 → 흰색 텍스트 : 명암비 1

  흰색 배경 → 검정색 텍스트 : 명암비 21

  → 완벽한 비율은 존재하지 않고 애플 기준 7이 선호 되지만, 최소 4.5를 위해 노력
  

• 명암비 측정

• 이미지의 텍스트 명암비 측정
  • 배경 이미지 위에 있는 텍스트 대비 측정
    • 이미지의 가장 밝은 부분
    • 가장 어두운 부분
  • 텍스트 밝으면 → 가장 밝은 부분
  • 어두우면 → 가장 어두운 부분

Accessibility Color Alone as Meaning

• 사용 이유 : 색맹, 전화 중독 억제?

• 사용

  • 색상을 유일한 시각적 지표로 사용하지 않기
    • CSS를 사용하여 밑줄을 제거하는 것이 가능 하지만 → 별로?
  • 링크에 대한 밑줄 제거 하지 말기
  • 명암비를 준수하는 색상 선택

Accessibility Meaningful & Decorative Images

• 사용 이유 : 스크린 리더 → 장식 이미지를 무시함

  • 의미 있는 이미지의 의미

• 배경 이미지 지정하기

  1. 빈 alt 속성

     • 이미지를 장식으로 사용 → but 사용자 혼란을 가져옴

  2. background-image 속성

     • Hero Image?
     • css의 background-image 속성을 사용

  3. 글꼴 아이콘

     • 우리의 Navbar 아이콘을 생각
     • 아이콘을 제거해도 → 이해가 가능함 → 장식용 이미지
     • role을 이용하여 img라 인식하고 이를 스크린 리더가 무시하도록

     <i class="navbarIcon" role="img" aria-hidden="true"></i>

• 그럼 의미가 있는 이미지란? alt 속성 → 이미지를 볼 수 없는 경우 대체 텍스트를 제공 고로

  1. 이미지를 설명

  2. 이미지의 의도를 잘 설명

     < img src ="alibaba-logo.svg" alt ="알리바바의 고향" >

Accessibility Descriptive Texts for Images

• 사용 이유 : alt 속성의 값 → 이미지를 설명, 의도를 설명해야 함

• 사용 방법

  친구와 전화 통화를 통해 웹 페이지 설명에 대한 가정
  

• 종류

  • 비대화형 이미지

    그대로 이미지에 대한 설명을 작성하면 됨

    1. 에디토리얼 이미지 → 기사 이미지
    2. 제품 사진 → 제품에 대한 설명
    3. 배경 이미지 → 배경 이미지가 의미하는 바

  • 독립 실행형 아이콘

    아이콘이 하는 일을 설명 → 페이스북으로 공유

    1. 배지 → 의미하는 바
    2. 로고 → 로고의 의도

Accessibility Link States

• 사용 이유 : 사용자가 링크와 상호 작용

  • 방문상태 → 어떤 콘텐츠를 읽었나
  • 호버 → 근육 조절?
  • 집중 링크 → 키보드 사용자

• 종류

  1. 방문하지 않은
  2. 방문
  3. 호버
  4. 활동적인
  5. focus

• 적용 방법

  1. 밑줄

  • 링크에는 기본적으로 링크 → 색맹인 사람에게 이를 링크라는 것을 명확히 알려줌

    2. 대비와 초점

  • 모든 상태는 충분한 대비를 가져야 함

  • focus → 오프셋을 주어 이를 설정함

  • outline-color, outline-offset

    3. 호버

  • 사용자가 수행하려는 작업을 명확하게 해줌

  • 마우스가 지금 하려는 일을 명시적으로 알려줄 수 있음

Accessibility Link Text

• 사용 이유 : 시각 장애 → 확대 / 축소 → 녹내장

• 사용법

  • 독자가 링크를 클릭해서 얻을 수 있는 정보를 명확하게 설명

• 좋은 예

  1. HTML 언어에 대해 자세히 알아보기
  2. 건강하게 먹는 방법

• 나쁜 예

  1. 여기를 클릭
  2. 더 읽기

구글 검색 또한 설명 링크를 선호함

Accessibility Headings Introduction

• 제목은 시각적으로 명확한 문구를 사용

• 페이지의 개요를 설정

• 사용

  <h1> <h6>로 구성

  수순에 맞도록 이를 설정하는 것이 중요
  

Accessibility Visual Focus(접근성 시각적 초점)

• 시각적 초점 → 모든 사용자에게 중요

• 사용

  • 링크 상태 → 시각적 초점
  • 키보드 포커스, 탭 포커스

• 포커스 제거 하지 않도록

  outline: 0;

  부모 요소가 너무 작아서 표시할 수 없는 포커스를 표시할 수 없는 경우

  포커스를 숨기는 또 다른 일반적인 방법

  overflow: hidden;

  기본 포커스 스타일 표시를 제거

  모바일 모드의 Chrome은 주황색 윤곽선

  모바일 장치에서는 키보드 포커스가 중요하지
  

• 시각적 초점 사용자 지정
  • 기본 초점에 몇 가지 문제
    1. 기본 스타일은 사이트와 색상 팔레트와 일치하지 않을 수 있음
    2. 기본 스타일은 사이트의 색상 팔레트와 유사합니다.
    3. 기본 스타일은 모든 브라우저에서 충분히 표시되지 않음

Accessibility Skip links(접근성 링크 건너뛰기)

• 사용 이유
  • 키보드, 화면 판독기, 스위치 제어 → 중요한 섹션에 쉽고 빠르게 도달
• HTML

  • <header>
    <a href="#main" class="skip">Skip to main content</a>
    …
    </header>
    …
    <main id="main">

• CSS

  .skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  
  .skip:focus {
    position: static;
    width: auto;
    height: auto;
  }

Accessibility Screen Readers(접근성 스크린 리더)

• 사용 이유

  • 시각 장애인이 웹 브라우저를 이애할 수 있음

• 스크린 리더 - 화면을 읽는 도구

• 사용방법

  언어

  <html> lang 속성을 이용

  <!DOCTYPE html>
  <html lang="en">

  중간에 언어가 바뀌면요?
  - a 태그에 lang 속성을 달아서 페이지를 연결

   <a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>

• 테스트

  VoiceOver 기능을 이용

  aria-label 두 개 이상 있는 경우 사용
  

Accessibility Forms Introduction - 접근성 양식 소개

• <input> <label> <fieldset> : 기본 양식 요소
• <select>

Accessibility Labels(접근성 레이블)

• 사용 이유

  • 사용자가 양식에 엑세스 가능
  • 스크린 리더 사용시 사용자가 입력 요소에 초점을 맞추면 label을 소리내어 읽어줌

• <label> aira-label

• 사용 방법

  <label for="email">
  	Your email address 
  	<span class="mandatory">*</span>
  </label>
  <input id="email" name="email" required aria-required="true" placeholder="Email" required="">

Area label

• 시각적 label이 없는 경우 사용 가능

<input placeholder="Enter search term" aria-label="Enter search term">

legend

그룹에 대한 명시를 알려줌

확인란, 라디오 버튼 같은 예제

<fieldset>
  <legend>Your date of birth</legend>
  <label for="dobDay">Day</label>
  <select id="dobDay">…</select>
  <label for="dobMonth">Month</label>
  <select id="dobMonth">…</select>
  <label for="dobYear">Year</label>
  <input id="dobYear" type="text" placeholder="YYYY">
</fieldset>

Accessibility Autocomplete(접근성 자동 완성)

• 사용 이유 : 사용자를 위한 양식을 더 쉽고 효율적으로 자동완성을 지원

autocomplete 속성을 사용

<input id="email" autocomplete="email" name="email" aria-required="true" placeholder="Email" required>

<select id="dobDay" autocomplete="bday-day" aria-required="true" required>

<select id="dobMonth" autocomplete="bday-month" aria-required="true" required>

<input id="dobYear" autocomplete="bday-year" placeholder="YYYY" aria-required="true" required>

Accessibility Errors(접근성 오류)

• 사용 이유 : 우리는 입력에 실수를 할 수 있음

• 사용 방법

  텍스트로 작성

  • 오류 메시지 : 경고 아이콘, 빨간색 텍스트로 작성

  • 아이콘과 빨간색 테두리만으로는 모두 사용자가 이해할 수 없음

    함께 가까이

  • 떨어져 있는 요소는 별도의 구룹에 속하는 것으로 인식
    - 서로 가까이 있는 디자인 요소는 관련된 것
    - 떨어져 있는 요소는 별도의 그룹에 속하는 것으로 인식

    양식 컨트롤과 연결됨

    <input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?">
    
    <p id="firstName-length-error" role="alert">
    	Your first name must have at least two letters and no unusual characters
    </p>

    aria-describedby 속성 사용

    값은 오류 메시지의 ID임

    <input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error" aria-invalid="true">

    초점 이동

  • 클라이언트 측 유효성 검사와 비교하여 서버 측 유효성 검사에 더 중요

  • 사용자가 양식을 제출하면 포커스가 첫 번째 잘못된 피드로 이동

Accessibility Zoom Introduction(접근성 확대 소개)

• 사용자가 사이트 또는 앱의 콘텐츠를 더 잘 보고 읽도록
• 확대 / 측소 → 다양한 방법

접근성 텍스트 크기

• 사용이유 - 글자를 인식하기 위해서 더 큰 글자

브라우저 설정

• 40 픽셀 → 기본 크기 2.5배

상대 단위

px 대신 rem을 사용

18 px → 1.125rem

• line-heigth의 경우 픽셀 단위로 설정

• 글꼴 크기와 마찬가지로 줄 높이를 설정 시

  • 절대 단위를 설정하면 안됨
  • line-heigth : 1.2;

• 절대 단위? 상대 단위?

  절대 길이 단위

  • 물리적인 측정 거리를 의미함

  • px

    절대 길이 단위 
    
    일반적인 모니터 디스플레이의 1픽셀을 의미함

    상대 길이 단위

  • 이는 다시 글꼴 상대 길이와 뷰포트 백분율 길이로 나뉨

  • em, rem, vh, vw

    • em 글꼴 상대 길이 부모의 요소의 폰트 사이즈를 기준으로 함
      
    • rem 글꼴 상대 길이 루트 요소(일반적으로 <html>) 폰트 사이즈 기준
      
    • vh 뷰포트 백분율 길이 초기 컨테이너 블록 높이의 1% 기준으로 함
      
    • vw 뷰포트의 초기 컨테이너 블록의 너비의 1% 기준으로 함
      

Accessibility Page Zoom(접근성 페이지 확대)

• 사용 이유
  • 저시력자 페이지 사용 콘텐츠 → 확대 축소

참고

WE3 Accesibility Tutorial