"포괄적인 구성 요소"를 만나다: 접근 가능한 방탄 프런트 엔드 패턴

프론트 엔드 접근성은 오늘날 여전히 다소 미스터리입니다. 접근 가능한 버튼과 드롭다운은 어떻게 만들까요? 키보드 친화적인 도구 설명, 탭 및 알림은 어떻습니까? 또는 포괄적인 아코디언, 슬라이더, 데이터 테이블 및 모달 ? 함께 알아봅시다. 완전히 액세스 가능한 디지털 제품을 구축하기 위한 새로운 핸드북 인 Inclusive Components 를 만나보십시오. 무료 샘플 PDF를 다운로드하십시오 (1.1MB).

책 소개

기본적으로 Inclusive Components 는 완전히 액세스 가능한 인터페이스를 구축하기 위한 상세하고 실용적인 핸드북입니다. 이 책은 12가지 공통 인터페이스 패턴( 아코디언, 테이블, 모달 , 알림, 탭, 토글 및 그 사이의 모든 것)을 포함의 렌즈를 통해 조사합니다. 그 결과 우리가 매일 작성하고, 연결하고, 사용하는 액세스 가능하고 강력한 구성 요소 가 있습니다.

수년 동안 접근성에 중점을 둔 노련한 프론트엔드 개발자인 Heydon Pickering은 접근성 솔루션에 대해 글을 써왔습니다. 우리는 Heydon과 협력하여 그가 지난 몇 년 동안 다듬어 온 공통의 과제와 솔루션을 담은 책을 제작했습니다.

각 구성 요소에 대해 심층 탐구가 세심하게 설명되어 있으며 모든 솔루션은 작업에 즉시 적용할 수 있는 방탄 코드 조각 으로 사용할 수 있습니다. 보너스: 하나의 책에서 포괄적인 디자인을 염두에 두고 접근 가능한 고유한 구성 요소를 구축하는 방법을 배우게 됩니다. 목차 바로가기 ↓

332페이지 . 스티치 바인딩 및 리본 페이지 마커가 있는 고급 양장본. eBook은 PDF, ePUB, Amazon Kindle로 제공됩니다. Heydon이 작성하고 디자인했습니다. 샘플 PDF(1.1MB)를 다운로드하십시오 .

목차

각 장은 단일 구성 요소를 다루며, 다르고 취약한 사람들이 구성 요소를 읽고 상호 작용할 수 있는 방법과 더 잘 수용할 수 있는 방법을 다룹니다. 샘플 PDF(1.1MB)를 다운로드하십시오 .

저자 소개

Heydon Pickering(@heydonworks)은 Paciello Group, The BBC, Smashing Magazine 및 Bulb Energy와 함께 디자이너, 엔지니어, 작가, 편집자 및 일러스트레이터로 일했습니다. 그는 Net Awards에서 올해의 디자이너 후보에 올랐습니다.

Heydon은 이전에 10,000부 이상 판매된 Inclusive Design Patterns를 저술했습니다. 이 칭호의 수익금은 ACLU와 The Democratic Socialists Of America에 기부되어 이러한 조직이 파시즘에 맞서 싸우고 보다 포용적인 사회를 만들 수 있도록 지원합니다.

헤이든이 이 책을 쓰기로 결정한 이유를 물었을 때 다음과 같이 말했습니다.

“몇 년 전 저는 웹 디자인에 싫증이 났어요. 그런 다음 반응형 디자인이 등장하여 새로운 도전 과제를 제시했습니다. 그것은 내 삶과 내 직업을 다시 흥미롭게 만들었습니다. 그러다 웹접근성의 세계를 알게 되었고, 나의 열정이 다시 한 번 새로워졌습니다. 어떤 사람들은 내가 도덕적 의무를 느끼기 때문에 웹 접근성을 한다고 생각하거나 그렇지 않으면 죄책감을 느낄 것이라고 생각하는 것 같습니다.

나는 모든 부류의 사람들이 웹에 접근할 수 있어야 한다고 굳게 믿고 있지만, 나는 또한 나를 자극하고 나의 작업에 새로운 깊이를 부여한, 내가 직면하고 이 책에서 다룬 웹 접근성 문제에 대해 감사합니다.

내가 이 책을 쓴 이유는 인터페이스를 보다 쉽게 ​​액세스할 수 있게 하는 것이 얼마나 재미 있는지, 그렇게 했을 때 얼마나 성취감을 느낄 수 있는지 알기를 원하기 때문입니다. 이 책을 읽어주셔서 감사하고, 이 책도 잘 부탁드립니다.”

사용후기

"포함 구성 요소는 실제 사례와 함께 액세스 가능한 구성 요소 개발에 대한 매우 깊고 철저한 설명 입니다. Heydon Pickering은 몇 가지 대안적 접근 방식을 보여주고 각각의 장단점을 설명합니다. 읽는 것도 즐겁습니다!”

— Artem Sapegin, 프론트 엔드 개발자, Wayfair

“Inclusive Components는 접근 가능한 UI 구축에 대한 실용적이고 포괄적인 조언으로 가득 차 있습니다. 공식 WCAG 및 ARIA 문서 다음으로 이동하는 리소스입니다. 디자인 시스템을 구축할 때 매우 유용하다는 것을 알았습니다!”

— Sarah Federman, 수석 프론트 엔드 개발자

“Heydon이 Inclusive Components에 대한 작업으로 달성한 것은 접근 가능한 구성 요소뿐만 아니라 더 나은 웹사이트와 웹 앱을 구축하는 데 도움이 될 탄력 있고 진보적인 시작점을 생성하는 데 도움이 되는 실용적이고 친근하며 접근하기 쉬운 가이드 세트입니다. 일반. 나는 종종 이 작업을 바로 이러한 이유로 중요한 학습 자료로 설명합니다.”

— Andy Bell, 독립 디자이너 및 개발자

이 책이 당신을 위한 이유

악마는 세부 사항에 있으며 종종 선의로 하는 일이 무의식적으로 접근성 장벽을 부과할 수 있습니다. 포함 구성 요소 는 작업에서 잠재적인 접근성 문제를 감지하고 해결하는 방법을 배우려는 모든 프론트 엔드 개발자 를 위한 것입니다. 이 책은 다음을 가르쳐 줄 것입니다.

1. <button> 요소를 사용하는 방법, 토글 버튼 에 스타일을 적용하는 방법, 레이블을 지정하는 방법.
2. 포괄적인 방식으로 사용자가 콘텐츠를 만들고 삭제할 수 있는 관리 목록을 만드는 방법.
3. 탐색 메뉴 및 하위 메뉴(일명 "드롭다운")의 접근성 문제를 해결하고 해결하는 방법.
4. 접근 가능하고 키보드 친화적인 툴팁 과 토글팁을 만드는 방법.
5. 접근 가능하고 장기적으로 유지 관리할 수 있는 "다크 모드" 테마를 만드는 방법.
6. 움직임에 민감한 사람들의 피해를 방지하기 위해 접근 가능한 콘텐츠 슬라이더 를 구축하는 방법.
7. 시각적 및 청각적 채널을 통해 동시에 사용자와 통신하기 위해 라이브 영역으로 포괄적인 알림 을 만드는 방법.
8. 의미상 정확하고 반응이 빠르며 정렬 가능한 데이터 테이블 을 만드는 방법.
9. 성능과 포괄적인 디자인을 염두에 두고 접근 가능한 대화 상자와 모달 대화 상자 를 만드는 방법.
10. 포함 카드 를 만들고 그룹화하는 방법(예: 티저용).

기술적 세부 사항

• ISBN: 978-3-945749-82-1 (인쇄물)
• 고급 양장본, 스티치 바인딩, 리본 페이지 마커.
• eBook 은 Heydon 사이트에서 PDF, ePUB 및 Amazon Kindle로 제공됩니다.
• 독일에서 무료 전 세계 항공 우편 배송. (배송 시간을 확인하세요.)
• eBook 및 인쇄 + eBook으로 제공됩니다.

커뮤니티 문제 ️

Inclusive Components 를 통해 우리는 접근 가능하고 포괄적인 인터페이스를 만들기 위한 적용 가능하고 오래 지속되는 솔루션 과 전략이 포함된 매우 집중된 핸드북을 만들려고 노력했습니다.

우리의 희망은 Heydon의 책을 사용하여 인터페이스를 구축할 때 더 나은 디자인 및 코딩 결정 을 내릴 수 있다는 것입니다. 아마도 이러한 공통 UI 구성 요소 중 하나를 구축해야 할 때마다 접하게 될 참고서 중 하나가 될 것입니다.

책을 제작하는 데는 상당한 시간이 걸리며 훌륭한 커뮤니티 의 지원 없이는 완성할 수 없습니다. 우리의 모험에 대한 지속적인 지원에 대해 Smashing Member에게 큰 박수를 보냅니다. 결과적으로 eBook은 Smashing Members 에게 항상 무료입니다. 또한 회원은 인쇄본을 구매할 때 우호적인 할인을 받습니다.

스매싱을 유지하고 지속적인 지원에 감사드립니다. 모두!

더 많은 스매싱 북

모범 사례를 홍보하고 일상적인 코딩 및 디자인 문제를 마스터하기 위한 실용적인 팁을 제공하는 것은 Smashing에서 하는 모든 일의 핵심이었습니다 . 지난 몇 년 동안 우리는 웹 커뮤니티의 재능 있고 돌보는 사람들과 함께 작업하여 그들의 풍부한 경험을 시간의 시험을 견디는 책으로 출판할 수 있었던 것은 매우 운이 좋았습니다. Alla, Adam 및 Andy가 이러한 사람들 중 일부입니다. 이미 그들의 책을 확인하셨습니까?