웹 접근성을 위한 글쓰기

원문: Kevin White, Shadi Abou-Zahra, Shawn Lawton Henry, “Writing for Web Accessibility“

요약

이 페이지는 장애가 있는 사용자가 웹 콘텐츠에 더 쉽게 접근할 수 있도록 작성하는 데 필요한 기본적인 고려사항을 다룹니다. 여기에 소개된 팁들은 웹 콘텐츠 접근성 가이드라인(Web Content Accessibility Guidelines 이하 WCAG) 요구사항을 만족시키는 데 유용한 모범 사례입니다. 관련 WCAG 접근성 요구사항, "이해하기(Understanding)" 문서의 상세 배경 정보, 튜토리얼 지침, 유저 스토리 등은 링크를 통해 확인할 수 있습니다.

정보가 풍부하고 고유한 페이지 제목 제공하기

각 웹 페이지에 내용을 명확히 나타내고 다른 페이지와 구분되는 짧은 제목을 사용하세요. 페이지 타이틀(title)은 일반적으로 페이지의 메인 헤딩(main heading)과 동일합니다. 고유하고 가장 중요한 정보를 먼저 배치하세요. 예를 들어, 조직 이름보다 페이지 이름을 앞에 두세요. 또한 여러 단계로 진행되는 프로세스 페이지는 제목에 현재 단계도 함께 명시하세요.

예시: 페이지 타이틀

스페이스 테디 주식회사

최신 소식 · 스페이스 테디 주식회사

곰인형 구매하기 (3단계 중 1단계) · 스페이스 테디 주식회사

더 알고싶다면

• WCAG

  • Page Titled 2.4.2 (Understanding 2.4.2)

정확한 의미와 구조를 전달하는 제목 사용하기

짧은 제목을 사용하여 관련 문단을 그룹화하고 각 섹션을 명확히 설명하세요. 좋은 제목은 콘텐츠의 전체 구조를 한눈에 파악할 수 있게 해 줍니다.

예시: 제목을 사용하여 콘텐츠 구성하기

더 알고싶다면

• WCAG

  • Headings and Labels 2.4.6 (Understanding 2.4.6)

  • Section Headings 2.4.10 (Understanding 2.4.10)

  • Info and Relationships 1.3.1 (Understanding 1.3.1)

• 유저 스토리

  • Ade, reporter with limited use of his arms

  • Ian, data entry clerk with autism

  • Lakshmi, senior accountant who is blind

  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

의미 있는 링크 텍스트 만들기

링크 대상의 내용을 설명할 수 있도록 링크 텍스트를 작성하세요. ‘여기를 클릭하세요’ 또는 ‘더 읽어 보기’ 같은 모호한 링크 텍스트 사용은 피하세요. 문서 유형 및 문서 크기와 같이 링크 대상의 관련 정보를 표시하세요. 예를 들어, ‘제안서 (RTF, 20MB)’와 같이 작성하세요.

예시: 링크 대상 페이지를 설명하는 링크 텍스트 사용하기

기기 독립성에 대한 더 자세한 정보를 알고 싶다면 여기를 클릭하세요.

기기 독립성에 대해 더 알아보세요.

더 알고싶다면

• WCAG

  • Link Purpose (In Context) 2.4.4 (Understanding 2.4.4)

  • Link Purpose (Link Only) 2.4.9 (Understanding 2.4.9)

• 유저 스토리

  • Ade, reporter with limited use of his arms

  • Ian, data entry clerk with autism

  • Lakshmi, senior accountant who is blind

  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

  • Elias, retiree with low vision, hand tremor, and mild short-term memory loss

이미지에 의미 있는 대체 텍스트 작성하기

모든 이미지에 해당 이미지의 정보나 기능을 제공하는 대체 텍스트를 작성하세요. 단순히 장식용으로 사용된 이미지에는 대체 텍스트를 작성할 필요가 없습니다.

예시: 중요한 정보를 전달하는 대체 텍스트 사용하기

휴대폰 충전하기: 제공된 케이블과 전원 어댑터를 사용하여 휴대폰을 전원에 연결하세요.

이미지 대체 텍스트: "휴대폰 충전하기"

휴대폰 충전하기: 제공된 케이블과 전원 어댑터를 사용하여 휴대폰을 전원에 연결하세요.

이미지 대체 텍스트: "휴대폰의 아래 부분에 케이블을 꽂는 모습"

대체 텍스트는 보통 눈에 보이지 않습니다. 이 예시에서는 어떤 텍스트인지 보여주기 위해 포함되었습니다.

더 알고싶다면

• WCAG

  • Non-text Content 1.1.1 (Understanding 1.1.1)

• 튜토리얼

  • Images

• 유저 스토리

  • Lakshmi, senior accountant who is blind

멀티미디어를 위한 대본과 자막 만들기

팟캐스트와 같은 청각 콘텐츠의 경우 대본을 제공하세요. 교육용 비디오와 같은 시청각 콘텐츠의 경우에는 자막도 함께 제공하세요. 대본과 자막에는 콘텐츠를 이해하는 데 중요한 정보와 소리를 포함하세요. 예를 들어, '문이 삐걱거리는 소리' 같이요. 비디오 대본에는 중요한 시각적 콘텐츠에 대한 설명도 포함하세요. 예를 들어, '아탄이 방을 나갑니다' 같이요.

더 알고싶다면

Making Audio and Video Media Accessible

• WCAG

  • Captions (Prerecorded) 1.2.2 (Understanding 1.2.2)

  • Audio Description or Media Alternative (Prerecorded) 1.2.3 (Understanding 1.2.3)

• 유저 스토리

  • Dhruv, older adult student who is deaf

  • Marta, marketing assistant who is deaf and blind

명확한 지침 제공하기

지침, 안내문, 오류 메세지는 명확하고 이해하기 쉽게 작성해야 하며, 불필요하게 기술적인 용어 사용을 피하세요. 날짜 형식과 같은 입력 요구사항을 설명하세요.

예시: 사용자가 제공해야 할 정보를 알려주는 지침

비밀번호는 최소 6자 이상이어야 하며, 하나 이상의 숫자(0-9)를 포함해야 합니다.

예시: 무엇이 문제인지, 그리고 해결이 가능하다면 어떻게 해결할 수 있는지 표시해 주는 오류

1. ⚠️ ‘superbear’는 이미 사용중인 사용자 이름입니다.

2. ⚠️ 비밀번호는 하나 이상의 숫자가 포함되어야 합니다.

더 알고싶다면

• WCAG

  • Labels or Instructions 3.3.2 (Understanding 3.3.2)

• 유저 스토리

  • Ian, data entry clerk with autism

  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

  • Elias, retiree with low vision, hand tremor, and mild short-term memory loss

콘텐츠를 명확하고 간결하게 유지하기

문맥에 맞게 쉬운 언어와 형식을 사용하세요.

• 짧고 명확한 문장과 단락으로 작성하세요.

• 불필요하게 복잡한 단어와 어구 사용을 피하세요.

• 약어는 처음 사용할 때 풀어서 설명하세요. 예를 들어, 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)과 같이요.

• 독자가 모를 수 있는 용어에 대해서는 용어집 제공을 고려하세요.

• 적절하게 목록 형식을 사용하세요.

• 의미를 명확히 하기 위해 이미지, 일러스트, 비디오, 오디오, 기호 등의 사용을 고려하세요.

예시: 콘텐츠를 읽기 쉽고 이해하기 쉽게 만들기

CPP: 차량 충돌 사고가 발생할 경우, 회사에서 지정한 담당자가 관련된 모든 당사자들의 재산 피해 정도와 원인을 확인하기 위해 조사할 것입니다. 담당자가 인과관계를 이해할 수 있는 정보를 얻게 되면, 당사는 적절한 금전적 보상을 지급할 수도 있고, 지급하지 않을 수도 있습니다. 이에 따른 결과는 다음 중 하나로 결저오딜 수 있습니다. 청구가 승인되지 않고 거부 상태로 지정되는 경우, 청구 상태가 불분명하여 추가 처리 전에 더 많은 정보가 필요한 경우, 청구가 부분적으로 승인되어 지급금이 할당 및 지급되는 경우, 또는 청구가 완전히 승인되어 전체 청구 금액이 할당 및 지급되는 경우.

청구 처리 절차(CPP): 차량 사고가 발생하면 담당자가 조사할 것입니다. 조사 결과에 따라 청구금 지급 여부가 결정됩니다. 결과는 다음 중 하나일 수 있습니다.

• 승인 - 전액 지급

• 부분 승인 - 감액 지급

• 미확정 - 추가 정보 필요

• 거부 - 지급 없음

더 알고싶다면

• WCAG

  • Reading Level 3.1.5 (Understanding 3.1.5)

  • Unusual Words 3.1.3 (Understanding 3.1.3)

  • Abbreviations 3.1.4 (Understanding 3.1.4)

• 유저 스토리

  • Ian, data entry clerk with autism

  • Sophie, basketball fan with Down syndrome

  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

접근성을 더 학습해 보세요

이 팁들은 웹 접근성을 위해 고려해야 할 사항 중 일부에 불과합니다. 인지 및 학습 장애가 있는 사람들의 접근성 요구를 충족하는 글쓰기에 대한 추가 지침은 '명확하고 이해하기 쉬운 콘텐츠 사용하기'에서 확인할 수 있습니다.

다음 리소스는 접근성이 왜 중요한지, 그리고 장애가 있는 사람들에게 더 접근하기 쉬운 웹을 만들기 위한 지침에 대해 배우는 데 도움이 됩니다.

• 접근성 소개(Accessibility Introduction) — 접근성의 개요와 다양한 유용한 자료에 대한 링크를 제공합니다.

• 접근성 원칙(Accessibility Principles) — WCAG 요구사항을 소개합니다.

• 장애가 있는 사람들의 웹 사용 방식(How people with disabilities use the web) — 실제 사례를 통해 웹 접근성의 중요성을 보여줍니다.

• WCAG 충족 방법(How to Meet WCAG, Quick Reference) — WCAG의 모든 요구사항과 기술을 맞춤형으로 볼 수 있는 참조 자료입니다.