김무훈 @iamuhun@hackers.pub
Public

오 안녕하세요, 웹 몇 개월 전에 직접 운영하고 계신 접근성 사이트맵을 접한 프런트엔드 프로그래머입니다.

개인 블로그에 올릴 웹 접근성이 UI 설계에 중요한 이유 - 웹 접근성의 의의와 의미론적인 CSS 규칙을 설계하는 방법 초안 작성을 마치고 퇴고 작업을 거치는 중입니다. 레퍼런스 검증 등 객관성이 중요한 분야이다 보니, 작업 중간에 몇몇 전문가 분의 의견을 받고 싶어 커뮤니티 가입을 신청했습니다.

그리고 글 맨 하단 섹션에 글을 기획하며 찾은 외부 자료에 대해 목록을 추렸어서 참고 문서 추가에 도움이 되지 않을까 싶습니다.

서문 W3C 홈페이지의 내비게이션 항목 중 사명(Mission) 페이지를 가보면 설계 철학 중 첫 번째가 접근성으로 “모든 사람이 웹을 사용할 수 있게 해야 한다"라고 정의되어 있습니다. 웹 표준 명세는 그런 설계 철학을 지키고자 항상 접근성을 같이 고려하여 만들어지고 있습니다. 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람의 접근은 필수적인 측면입니다. – Tim Berners-Lee, Accessibility | Our mission | W3C HTML은 마크업의 구조적 의미를 충분히 고려해서 웹 콘텐츠를 만든다면, 특별한 대응을 하지 않고 접근성을 담보되는 특징이 있습니다. Switch UI 같이 프런트엔드 프로그래머가 직접 구현이 필요해서 생기는 접근성의 한계에 대해서는1 WAI-ARIA를 통해 직접 접근성을 보조할 수 있습니다. 그리고 aria-busy, aria-current, aria-expanded, aria-pressed와 같은 WAI-ARIA 상태를 제대로 활용하면 명시적으로 UI 상태를 관리하기 용이한 개발자 경험(DX)을 갖고 있습니다. 해당 경험을 실무에서 적용한 사례 두가지를 소개하고자 합니다. 의미론적인 CSS 작성법 그간 CSS에서 픽셀을 움직이는건 꽤 빡셌지! 하지만 이제 논시멘틱(non-semantic) 한 클래스 이름과 HTML안에 쓰는 인라인 CSS, 거기다 자바스크립트 안에 작성하는 CSS 스타일을 쓰는게 진짜로 오지고 지리고 렛잇고인 방법인 것이다! 패밀리 가이 CSS GIF를 여기다 넣어라! 이렇게 ㅋ (번역) 구닥다리 공룡을 위한 오늘날의 CSS — Steemit 원본 이미지 출처 - Dinosaur Comics 의미론적인 CSS 작성법이란 HTML의 의미성과 WAI-ARIA 접근성 요소를 기반으로 하는 CSS Rules 설계 방법입니다. 이 글에서 무엇을 다룰지 영상으로 이해하고 싶으신 분은 “How to write Semantic CSS - YouTube“를 먼저 보시길 바랍니다. 클래스 선택자는 CSS 특이도(Specificity)2 중에 중간 정도의 우선순위를 갖고 있어 범용도가 높은 특징을 갖고 있습니다. 이러한 특징으로 인해 모든 CSS 규칙(Rules)을 클래스 이름으로 정의하는 것이 흔한 사용 패턴이 되었습니다. 그러나 아래 문단에 인용한 W3C CSS 명세에 따르면 클래스 이름 위주의 CSS 규칙 정의는 웹 표준 측면에서 HTML이 가진 논리적 구조와 CSS 가상 클래스(Pseudo-classes)로 참조할 수 있는 빌트인 상태인 :checked, :default, :disabled, :invalid, :required 등이 충분히 있음에도 무시하는 것은 HTML의 구조적 의미를 약화하는 좋지 않은 관행이라고 합니다. CSS는 클래스 어트리뷰트에 강력한 기능을 부여하여, 고유한 역할이 거의 없는 엘리먼트(예: HTML의 <div> 및 <span>)를 기반으로 나만의 “문서 언어"를 설계하고 “class” 어트리뷰트를 통해 스타일을 지정할 수 있습니다. 하지만 문서 언어의 구조적 요소는 일반적으로 정해진 의미가 있지만, 사용자가 임의로 정의한 클래스는 그렇지 않을 수 있습니다. 따라서 이러한 관행을 피하는 것이 좋습니다. — “Class Selectors” Selectors Level 3 | W3C *원문에서 “Authors (작성자)” 키워드를 직역해 보니 어색해서 생략하거나 “사용자"로 대치했습니다. 또한 이 문제는 WAI-ARIA 상태를 활용해서 더욱 깊어질 수 있습니다. 서문의 마지막 문단에서 언급한 aria-busy(로딩 중), aria-current(현재 위치한 탭), aria-expanded(열림 닫힘 상태), aria-pressed(버튼 눌림 상태) 어트리뷰트 등으로 UI 상태를 의미상으로 관리할 수 있기 때문입니다.참고하면 좋은 자료 접근성 기반 UI 컴포넌트 설계 자료 직접 실습으로 익히는 것을 권하고자 바로 행동으로 옮겨 실천할 수 있는 자료를 중심으로 골랐습니다. 논리적 설계와 HTML5 아웃라인 알고리즘: 웹의 근본인 HTML의 논리적 설계를 바탕으로 React 컴포넌트 디자인에 대해서 고민해 보고 아웃라인 알고리즘에 대해서 간단하게 알아보는 글입니다. 접근성이 이끄는 웹 프런트엔드 테스트 자동화 : Wonderwall Tech: 여러 웹 표준 접근성 요소를 바탕으로 컴포넌트 마크업과 제어 상태를 설계하여, 이를 종단 테스트 수트의 시멘틱 플래그(Semantic Flag)로 활용할 수 있다고 소개한 글입니다. PandaCSS와 함께 CSS-in-JS의 미래로 : Wonderwall Tech: 바로 위 항목의 동 저자이신 김태희님의 의미론적 CSS 작성법에 대해 최근의 CSS-in-JS 도구 사용 측면으로 다룬 글입니다. Open UI: W3C 커뮤니티 그룹 중 하나로, 기본 HTML 사양에는 없어 별도 구현이 필요한 UI 컴포넌트에 대한 모범 사례를 정리하여 연구하는 커뮤니티입니다. Inclusive Components: 포괄적인(Inclusive) 여러 웹 인터페이스 설계 패턴이 수록된 블로그입니다. 블로그 배너에 전자책 발간이 소개되어 있는데, 이미 국내에서 『인클루시브 디자인 패턴』이라는 제목으로 웹액츄얼리코리아를 통해 번역 출간되었습니다. 웹 접근성 학습 자료 AOA11Y 접근성 오픈 아카데미 - YouTube: 정보접근성 인식 개선 및 확산을 목표로 NIA이 운영하는 YouTube 채널입니다. 해당 기관에서 만든 항공사 접근성 사례집 또한 유용합니다. 웹 애플리케이션 엔지니어를 위한 웹 접근성의 기초 - azukiazusa.dev (일본어) 웹 프런트엔드 구현에서 원본 기능을 손상시키지 마십시오 - azukiazusa.dev (일본어) WAI-ARIA를 배울 때 정리해 두고 싶은 것 - Hirao Yusuke (일본어) [명세 읽는 법] HTML의 요소를 어떻게 배울 것인가 (일본어) 표준 명세를 통해 어떤 HTML 엘리먼트에 대한 콘텐츠 모델과 어트리뷰트, 접근성 고려 사항 등의 규칙을 파악하는 법을 소개합니다. 웹 표준 명세를 읽는 걸 낮설어 하시는 분에게 추천드립니다. 제 경우 MDN 문서만으로 어떤 엘리먼트의 기술 사양을 파악하기에 애매하거나 누락된 부분에 대해 WHATWG 명세를 직접 참고하고 있습니다.6 웹 접근성 참고 자료 레진 WAI-ARIA 가이드라인 How to Meet WCAG (Quick Reference) | W3C, GitBook 형태의 WCAG 2.1 한국어 가이드 https://a11ykr.github.io: KWCAG 및 W3C 한국어 초벌 번역 모음 사이트맵입니다.
0
1
0
洪 民憙 (Hong Minhee)

洪 民憙 (Hong Minhee)

@hongminhee@hackers.pub

Hi, I'm who's behind Fedify, Hollo, BotKit, and this website, Hackers' Pub!

Fedify, Hollo, BotKit, 그리고 보고 계신 이 사이트 Hackers' Pub을 만들고 있습니다.

Fedify、Hollo、BotKit、そしてこのサイト、Hackers' Pubを作っています。

嗨，我是 Fedify、Hollo、BotKit 以及這個網站 Hackers' Pub 的開發者！