[FE Road Map] Accessibility - 접근성

장동현·2022년 5월 20일
0

FE Roadmap

목록 보기
1/3
post-thumbnail

다양성

정보에 대한 접근 → 인권

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

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

시각 → 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. 로고 → 로고의 의도
  • 사용 이유 : 사용자가 링크와 상호 작용

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

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

    1. 밑줄

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

      2. 대비와 초점

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

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

    • outline-color, outline-offset

      3. 호버

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

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

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

  • 사용법

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

    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

profile
FE 개발자 장동현 입니다 😃

0개의 댓글