“모두를 위한 웹 접근성” 발표 준비하기

개요

지난 8월, 저는 국내 대표 프런트엔드 콘퍼런스 FEConf 2025에서 “모두를 위한 웹 접근성은 무엇이고, 어떻게 하나요? 👀 💬 🔉“라는 주제로 발표했습니다. 이 발표에서는 프런트엔드 개발자를 대상으로 웹 접근성의 기본 개념과 누구나 쉽게 실천할 수 있는 방법론을 소개했습니다.

• 효과적인 슬라이드 전달: 방대하고 복잡한 접근성 표준 지침을 압축해서 전달하는 것이 꽤 도전적이었습니다.
• 슬라이드의 신뢰성: 웹 접근성 표준 명세와 지침 같은 정확한 출처를 의식하며 자료를 조사했습니다.
  • W3C의 웹 콘텐츠 접근성 지침(WCAG)과 WAI-ARIA 명세를 1차 자료로 우선 참조했습니다.
  • 2차 자료를 인용할 때는 항상 원본과 비교해 내용의 신뢰성을 검토했습니다.

왜(발단) → 무엇(준비) → 어떻게(실행: 리허설/발표) 순서로 준비 과정을 되돌아보겠습니다.

발단

지난 4월에 제 개인 블로그에 “웹 접근성이 UI 설계에 중요한 이유“라는 제목으로 WAI-ARIA를 바탕으로 한 시멘틱 CSS 규칙을 설계하는 접근성 실천 방법론을 발행했습니다.

접근성은 검증된 규칙과 정확한 정보 출처를 철저히 확인해야 하는 까다로운 분야입니다. 이런 이유로 초안 기획부터 완성까지 전문가 자문을 병행하며 3개월이 걸렸습니다.

아래는 국내 접근성 온라인 모임 A11YKR과 자문 과정을 담은 대화 기록입니다.

여러 차례 자문·내용 검수를 거치며, 용어 통일과 실천 방법론을 다듬었습니다.

현장에서 바로 적용할 수 있는 실천 방법론에 관해 심도 있는 의견을 나눴습니다. 접근성 기술 및 사례에 대한 실용적이고 구체적인 정보를 얻을 수 있었습니다.

발표 제안

해당 접근성 포스팅을 4월 중순에 공개했습니다. 글 발행 후 바로 트윗을 올렸고, 답글로 FEConf 공식 트위터 계정으로부터 발표 제안을 받았습니다.

콘퍼런스에서 발표하면 접근성의 가치를 더 많은 사람에게 공유할 좋은 기회라 판단해, 제안을 수락해 신청했습니다. 한 달 뒤쯤에 발표자 확정 안내 메일을 받았습니다. 이후 일정은 아래와 같이 진행되었습니다.

1. 발표 시나리오 작성: 6월 1일 - 6월 15일
2. 발표 시나리오 검수: 주최 측 검수, 6월 15일 - 6월 말
3. 발표 슬라이드 초안 제작: 7월 1일 - 8월 1일
4. 발표 슬라이드 서면 검수: 8월 1일 - 8월 7일

발표 시나리오 작성

주최 측 요청으로 발표의 개괄적인 구조와 초안을 담은 ‘발표 시나리오’ 문서를 6월 15일까지 제출했습니다.

시나리오는 정확성(표준·근거)과 실용성(바로 적용 가능한 방법)에 초점을 맞췄습니다. WCAG·WAI‑ARIA 개요, 시맨틱 HTML, 키보드 접근성·초점 관리, 그리고 실무 사례를 자세히 다루었습니다.

발표 슬라이드 초안 제작

접근성은 앞서 말했듯이 객관적 근거와 정확한 참조가 중요한 분야입니다. 이에 대해 객관성, 출처 명시, 실천 가능성을 핵심 기준으로 삼아 철저한 교차 검증 작업을 진행했습니다.

• 신뢰할 수 있는 1차 저작물로 W3C 저작 웹 콘텐츠 접근성 지침(WCAG)과 WAI-ARIA 명세를 우선 참조했습니다. 2차 자료를 인용할 때는 항상 원본과 비교해 신뢰성을 유지했습니다.
• “웹 접근성이 UI 설계에 중요한 이유” 검수 방식과 마찬가지로, A11YKR 내부에 여러 차례 피드백을 주고받았습니다.

이 두 가지 기준을 통해 슬라이드를 체계적으로 정리했고, 접근성을 더 깊이 이해할 수 있었습니다.

발표 리허설

행사 20여 일 전에 발표 리허설을 A11YKR 커뮤니티를 통해 진행했습니다. 리허설 결과는 기대와 달리 냉정했고, 아래와 같은 개선 의견을 받았습니다. 예상과 달라 부담이 컸습니다.

아래 두 내용의 경계가 명확히 설정하여 슬라이드가 구성되면 좋겠어요.

1. 웹 접근성에 대한 이해를 돕기
2. 또는 개인 사례를 자세히 보여주기

발표 제한 시간을 20분을 넘어 슬라이드를 줄여야 되어 보여요.

마치 희망으로 가는 결과를 기대했지만, 물줄기만 흐르는 구조물을 마주한 듯했습니다.¹

피드백의 요지가 너무나 명확해서, 행사 20여 일 전에 발견한 것이 오히려 다행이었다고 생각했습니다.

먼저 슬라이드를 4개 하위 섹션으로 나누고, Y축으로 주제별 내용을 정리했습니다. 그리고 발표의 전체 흐름을 ‘이유’–‘무엇을’–‘어떻게’ 라는 구조로 개선했습니다.

슬라이드 줄이기

리허설 결과로 “핵심만 전달하라”는 공통 의견이 있었습니다. 이에 따라 슬라이드에서 핵심 메시지만 남기는 퇴고를 진행했습니다. 아래는 슬라이드 축약 전후 비교입니다.

접근성 소개 섹션을 다시 정리하는 작업이 가장 어려웠고 상당한 시간이 걸렸습니다. 접근성 개념을 쉽고 명확한 언어로 설명하면서도 전문성을 유지해야 했기 때문입니다.

인터랙티브 데모 준비하기

아래와 같은 접근성 의사(pseudo) 마크업만으로는 청중의 이해를 돕기에 부족하다고 생각했습니다.

<h2 id="brand-label">신발 브랜드</h2>

<div
  role="combobox"
  aria-expanded="true"
  aria-labelledby="brand-label"
  aria-controls="brand-list"
>
  <input
    type="search"
    value="나이*"
    aria-activedescendant="opt-nik*"
    aria-autocomplete="list"
  />
  <ul role="listbox" id="brand-list">
    <li role="option" id="opt-nik*" tabindex="0" aria-selected="true">나이*</li>
    <li role="option" id="opt-newbalanc*" tabindex="-1" aria-selected="false">
      뉴발란*
    </li>
    <li role="option" id="opt-skecher*" tabindex="-1" aria-selected="false">
      스케처*
    </li>
  </ul>
</div>

따라서, 수도 마크업과 함께 데모를 제공했습니다. 아래에는 시연 영상과 녹화 환경을 첨부했습니다.

데모를 통해 스크린 리더와 키보드로 콘텐츠를 탐색하는 초점 이동 과정을 구체적으로 보여줬습니다.

결과

• 발표 시간 준수: 매번 리허설에서 약 7분씩 초과하여 걱정했습니다. 즉흥적인 말을 줄이고 발표 스크립트를 충실히 따라, 본 발표에서는 약 3분을 남기고 마쳤습니다.
• 긍정적인 반응
  • 현장과 온라인에서 대체로 ‘접근성에 대한 막연한 인식’을 해소하는 데 도움이 됐고, 발표에서 소개한 방법론을 통해 ‘충분히 접근성을 적용해볼 만하다’는 피드백을 받았습니다.

    

    

마치며

• 30분 발표 퇴고하기: 첫 리허설 의견을 반영해 텍스트를 대폭 줄였습니다. 핵심 메시지, 도식, 코드 예제를 선별하는 데 집중했습니다. 행사 며칠 전 A11YKR에 검수를 요청했고, 슬라이드가 명료해졌다는 의견을 받았습니다.
  • 꾸준한 소통으로 가능했던 일: A11YKR 커뮤니티와 꾸준한 교류를 통해 얻은 통찰이 슬라이드 구성에 큰 도움이 되었습니다. 이번 경험은 혼자만의 성과가 아니라고 생각합니다.
  • 서사 구조화하기: 슬라이드 짜임을 ‘이유’ - ‘무엇을’ - ‘어떻게’ 라는 논리적 순서로 바꾸니 하위 주제 간 경계를 관리하기 훨씬 쉬워졌습니다.
• 아쉬웠던 발표 전달력: 준비한 자료에 비해 현장에서 발표 전달력이 다소 불안정했습니다. (발표 유튜브 영상 참고)
  • 평소 긴장을 자주 느끼는 편이라, 이번 발표를 무사히 마친 것에 의의를 둬야 해서 아쉬웠습니다.
  • 오래전부터 개선 노력을 이어오고 있습니다. 부족한 제 전달력에 양해를 드립니다.

글쓴이의 다른 접근성 글

• 디지털 접근성 포용하기 - A11YKR
• 소리치는 인터페이스
• 웹 접근성이 UI 설계에 중요한 이유
• 웹 접근성은 사용자 경험의 부분집합