![FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성](https://i.ytimg.com/vi/KkXKh7cm1is/maxresdefault.jpg)
FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
FEConf 2025 B트랙 · YouTube
AI 핵심 요약
웹 접근성을 별도 기능이나 장애 사용자만을 위한 경험으로 취급하면 사용자 중심 설계가 뒤로 밀리고, UI 구현과 검증도 복잡해질 수 있다고 설명합니다. 발표자는 HTML 시맨틱을 우선하고 필요한 경우 WAI-ARIA의 역할·상태·관계 속성으로 UI 의미를 보완하는 원칙과, 단일 마크업 및 ARIA 속성 선택자를 활용한 스타일링 방식을 소개했습니다. 복합 UI의 키보드 초점 흐름에는 Roving tabindex를 적용하고, Headless UI 같은 도구와 Playwright의 역할 기반 쿼리·ARIA 스냅샷을 활용해 구현과 테스트의 반복을 줄일 수 있습니다. 접근성은 나중에 덧붙이는 작업이 아니라 기획과 UI 설계에 함께 반영해야 하며, 잘못된 ARIA는 오히려 사용성을 해칠 수 있다는 점이 핵심입니다.
- 가능하면 기본 HTML 시맨틱과 내장 동작을 먼저 사용하고, ARIA는 부족한 의미나 상태를 보완할 때만 추가하세요.
- 복합 UI에서는 Tab 키로 위젯 사이를 이동하고 방향키로 내부 항목을 탐색하도록 설계할 수 있으며, Roving tabindex가 이를 구현하는 방법입니다.
- 보조 기술용 UI를 따로 만들기보다 하나의 마크업에 접근성 의미를 담고, ARIA 상태를 활용해 스타일을 연결하면 중복 구현을 줄일 수 있습니다.
- Playwright의 getByRole 쿼리와 ARIA 스냅샷은 접근 가능한 이름·역할·구조를 기준으로 UI를 검증하는 데 활용할 수 있습니다.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...
비슷한 학습 자료
컨퍼런스 채널데브톡 2025
[Frontend] UI를 꼭 사람이 짜야 할까요?
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-4 완전한 ZERO COST CSS-IN-JS, Devup-UI 오정민 | ㈜데브파이브 정말 티끌 하나도 코스트가 없는 CSS-in-JS 라이브러리 Devup-UI! 그러면서 반응형, 선택자, 테마까지 많은 기능을 제공하는 Devup-UI는 어떻게 이런 성능과 기능들을 모두 제공할 수 있을까? Next.js 의 서버컴포넌트 도입으로 하락세를 겪고 있는 CSS-in-JS 라이브러리에 대한 완벽한 대안기능 구현에 대한 아이디어부터 Rust와 웹 어셈블리를 통하여 개발하게 된 개발기 그리고 실제 작동까지! 어떤 라이브러리 보다 효율적이고(심지어 Tailwind CSS보다도!) 성능 이슈가 전혀 없는 완벽한 해결법을 향한 여정을 공유드립니다.
웹 개발 프론트엔드
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B4] 음성 인터페이스 개발에서 DX 향상하기: 모델 비교부터 직관적인 인터페이스 설계
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-4 음성 인터페이스 개발에서 DX 향상하기: 모델 비교부터 직관적인 인터페이스 설계 김민수 | DevCra 음성 인식, 합성의 최근 기술 동향을 살펴보고 종합 핵심 키워드를 파악합니다. 음성 인터페이스를 만들기 위한 요구사항 분석 및 기술 검토부터 어떻게 구현할 수 있을지 고민해보고 Web API의 한계, 다양한 클라우드 서비스 모델 중 적합한 모델을 선택하기 위해 디자인 패턴을 활용했던 설계를 소개합니다. 그리고 좋은 사용자 경험을 제공하기 위해 에러 처리, 사용성을 고려한 엔지니어링, 유틸리티 등 경험을 공유합니다.
프론트엔드 UI/UX
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-6 그리드 기반 웹 에디터 / 빌더 구현기 이선협 | 마플코퍼레이션 그리드 기반 에디터는 웹에 최적화된 자유도를 가진 에디터입니다. 이런 장점을 기반으로 노코드 웹사이트 제작, 사용자 정의 대시보드 등 다양한 제품에서 사용할 수 있습니다. 대표적으로 Squarespace, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
여기어때 세션: 주목받지 못한 서비스를 되살리기까지 │인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 주목받지 못한 서비스를 되살리기까지! - 안도영 여기어때에서는 사용자에게 다양한 여행 관련 서비스를 제공하고 있습니다. 이 다양한 기능들은 앱으로 활용이 가능하며 수많은 기능이 추가되고 있습니다. 또한 유저 친화적인 서비스를 위해 많은 노력들을 하고 있습니다. 하지만 웹은 옛날 모습을 간직한 채 아무런 업데이트 없이 산소 호흡기만 달고 유지될 뿐 거의 버려진 서비스였습니다. UX 및 UI, 프로젝트조차 레거시가 돼버린 상태에서 작년 한 해 동안 리뉴얼 작업을 거쳐 새로운 서비스로 탈바꿈하였습니다. 웹 서비스를 재 탄생시키면서 어떠한 부분을 중점적으로 고려하였는지, 프로젝트를 진행함에 있어서 필요한 부분은 무엇인지 그 사이에 얻어진 경험들을 공유하려고 합니다. 여행 서비스에 관심이...
웹 개발 UI/UX