키보드 접근성을 위한 UX 개선

다른 사용자의 경험에 영향을 주지 않으면서 키보드 전용 및 보조 기술 사용자에게 접근 가능한 사용자 경험을 제공하려면 어떻게 해야 합니까? Deque Systems의 수석 UX 디자이너인 Aaron Pearlman에게 우리 모두가 사용자에게 포괄적이고 접근 가능한 경험을 제공할 수 있도록 몇 가지 실용적인 도구와 기술을 공유해 달라고 요청했습니다.

Smashing Membership의 일환으로 매주 라이브 웨비나인 Smashing TV를 운영합니다. 보잘 것 없습니다. 업계에서 존경받는 실무자가 운영하는 라이브 Q&A가 포함된 실용적이고 실행 가능한 웨비나입니다. 실제로 Smashing TV 일정은 이미 꽤 빡빡해 보이며 Smashing Members에게는 녹음과 함께 무료입니다. 분명히 .

저희처럼 웨비나를 즐기시기 바랍니다!

Aaron Pearlman: 내 화면을 볼 수 있어야 합니다. 좋아, 바로 지금, 내가 그냥... 자, 아주 좋아. 그럼 모두들 안녕히 계세요. 앞서 말했듯이 저는 Deque의 수석 사용자 경험 디자이너인 Aaron Pearlman입니다. 그리고 제 생각에는— 어, 움직이겠습니다— Zoom은 약간의 UI를 방해하는 경향이 있으므로 제가 미친 듯이 움직이는 것처럼 보이고 마우스가 표시되지 않기를 바랍니다. 그래서 오늘은 키보드 전용 및 보조 기술 사용자를 위해 수행할 수 있는 최적화 유형에 대해 이야기하겠습니다. 조금 전에 언급했듯이 이러한 유형의 최적화, 이러한 유형의 것들은 다른 사람이 귀하의… 키보드 전용 사용자 보조 기술이 있는 시스템을 주로 사용하는 사용자에게 더 유리한 경향이 있습니다.

Aaron Pearlman: 이것이 의미하는 바에 익숙하지 않은 사람들을 위해 Keyboard-Only User Assistive Technology는 무엇입니까? 키보드 전용 사용자는 일반적으로 시스템을 탐색하기 위해 키보드를 사용하는 사람일 것입니다. 따라서 그들은 탭과 Shift 탭을 많이 사용하고 화살표 키를 사용하여 시스템을 탐색하므로 초점이 매우 중요합니다. 이 개인은 운동 기술 문제가 있고 시력 결핍도 있을 수 있으며 키보드만 사용하는 사용자이며 보조 기술 사용자도 키보드를 사용하여 시스템을 탐색하고 화면과 같은 다른 보조 기술을 사용할 수 있습니다. VoiceOver나 점자 판독기 같은 미터기.

Aaron Pearlman: 그래서, 그것이 우리가 초점을 맞추고 있는 종류입니다. 장애가 있는 개인의 상당 부분이 이 진영에 속하는 경향이 있기 때문에 그러한 특성의 사용자입니다. 모든 사람을 의미하지는 않습니다. 확실히, 그 사이에는 무수히 많은 다양한 장애와 그라데이션이 있지만, 이를 위해 오늘 우리가 초점을 맞출 것입니다.

Aaron Pearlman: 그래서, 우리가 다룰 내용에 대한 약간의 개요입니다. 우리는 우리가 할 수 있는 운동 유형을 많이 하는 것과 함께 디자인 프로세스에 대해 약간 이야기할 것입니다. 건너뛰기 링크로 이동하기 전에 들어갈 수도 있고 아닐 수도 있습니다. 그런 다음 건너뛰기 링크는 우리가 다룰 기능, 모달을 최적화하는 방법 및 초점을 처리하는 방법 중 하나가 될 것입니다. 따라서 이것들은 우리가 다룰 세 가지 큰 범주가 될 것이며 모든 작업이 끝나면 질문할 시간을 갖습니다.

Aaron Pearlman: 시작하기 위해 UX 디자인 프로세스 개요를 조금 할 수 있다고 생각했습니다. 나는 다른 워크샵과 물건에 있었고, 많은 다른 분야에서 온 무수히 다른 개인이 있다는 것을 알았습니다. 모두가 사용자 경험 디자이너는 아니므로 많은 UX 디자이너가 사용하는 프로세스에 익숙하지 않을 수 있습니다. 그래서 이것을 위해 나는 우리가 그것에 대해 간단히 살펴보고 엄청난 시간을 할애하지 않을 것이라고 생각했습니다. 또한 접근 가능한 디자인과도 연결될 것이기 때문입니다. 그래서 대부분의 UX 디자인은 디스커버리라는 프로세스를 거치는 경향이 있습니다. 항상 디스커버리라고 하는 것은 아닙니다. 때로는 Rapid Ideation, Rapid Iteration이라고 합니다. 많은 사람들이 그것에 대해 다른 이름을 가지고 있지만 요점은 많은 제작이 일어나는 디자인 프로세스의 일부라는 것입니다.

Aaron Pearlman: 다양한 아이디어와 요구 사항을 수집하는 경우가 많습니다. 많은 연구와 조직 목표와 이를 종합하고 모든 정보로 필터링하여 일반적으로 우리가 만들고자 하는 시스템이나 만들 기능을 구축할 수 있게 해주는 인공물. 항상 그런 것은 아니지만 프로토타입과 같은 경향이 있습니다. 때로는 이러한 모델에서 나오는 멘탈 모델도 볼 수 있습니다. 그러나 대상 사용자가 목표를 달성하는 방법을 반영하는 어느 정도 충실도의 프로토타입입니다. TLDR은 설계를 반복하고 사용자와 테스트하고 반복하고 사용자와 테스트하고 반복하고 사용자와 테스트하고 결국 빌드됩니다.

Aaron Pearlman: 당신은 그것이 중요하다고 생각합니다. 접근성에 대한 고려 사항은 우리가 디자인 프로세스 전반에 걸쳐 접근성에 대해 생각하고 수행하기를 원한다는 것입니다. 그리고 다양한 수준의 충실도가 장점이 될 수 있으며, 다양한 유형의 사물에 대해 생각하는 것은 실제로 다릅니다. 그것에 대해 많이 다루지는 않겠지만 일반적으로 우리는 이러한 경험적 방법과 방법을 통합하기를 원합니다. 우리는 디자이너가 시간이 지남에 따라 접근성의 힘을 키우고 좋은 사람이 되는 우리의 힘을 키우는 것처럼 시간이 지남에 따라 사용자 경험 디자이너. 처음에는 WCAG 2.1을 읽고 ARIA 사양을 읽고 나면 완료되고 더 이상 실수하지 않을 것이라는 기대가 없습니다. 또는 디자인 및 접근 가능한 디자인과 관련하여 아무 것도 놓치지 않을 것입니다. 그것은 상상력의 확장에 의해 반드시 합리적이지는 않습니다.

Aaron Pearlman: 시간이 지남에 따라 배우게 될 것이라는 점만 알아두십시오. 확실히 나는 접근성과 내가 작업하는 모든 것에서 여전히 실수를 하고 있고 그것은 단지 더 나아지는 것에 관한 것입니다. 그래서 [들리지 않음] 저는 항상 접근이 용이한 디자인을 하고 있기 때문입니다. 오늘 작업할 내용과 관련이 있지만 작은 플러그 하나를 Trane이라고 합니다. Deque에서 완전히 액세스할 수 있는 패턴 라이브러리이며 자체 제품을 구축하는 데 사용합니다. HTML, CSS 및 JavaScript 프론트 엔드 프레임워크이며 부트스트랩과 매우 유사합니다. 자매 라이브러리인 반응 라이브러리도 있습니다. 우리 팀은 반응하여 발전합니다. 하지만 오늘 여기에서 몇 가지 예를 살펴보겠습니다. 그러나 이것은 오픈 소스이며 사용 가능하며 이 덱의 끝부분에 링크가 있으며 모든 사람이 사용할 수 있습니다.

Aaron Pearlman: 그리고 당신이 가지를 사용하거나 얻어서 마음껏 사용하거나 그것에 기여하는 것은 무료입니다. 우리도 그것에 대한 기여를 보고 싶습니다. 따라서 작은 플러그지만 진행하면서 참조하겠습니다. 따라서 가장 먼저 살펴볼 것은 건너뛰기 링크입니다. 그리고 건너뛰기 링크가 무엇인지 잘 모르는 사람들을 위해 건너뛰기 링크는 웹 응용 프로그램이나 웹 사이트에서 맨 처음 탭으로 표시되는 경향이 있는 작은 링크입니다. 그리고 그들이 할 수 있는 것은 웹사이트의 일부를 우회할 수 있도록 하는 것입니다. 왜 그렇게 하시겠습니까?

Aaron Pearlman: 글쎄요, 정말 풍부한 메뉴가 있는 웹사이트가 있다면 그것은 큰 빌보드 메뉴일 수도 있고 단순히 많은 내용을 담고 있는 웹사이트일 수 있습니다. 키보드만 사용하거나 보조 기술을 사용하는 사용자라면 그 웹사이트에 도달했을 때 사이트 및 VoiceOver가 해당 사이트를 읽기 시작하거나 아예 읽지 않을 수도 있습니다. 심지어는 시력이 있는 사용자일 수도 있습니다. 키보드만 사용하면 해당 항목을 모두 탭으로 순환해야 할 수 있습니다. 그곳에서 하고 있는 활동이 무엇이든 시작하려는 콘텐츠 또는 작업 공간으로 이동합니다. 따라서 건너뛰기 링크를 통해 수행할 수 있는 작업은 일반적으로 해당 응용 프로그램의 작업 영역 영역으로 이동하는 탐색을 우회하는 것입니다.

Aaron Pearlman: 때때로 여러 개의 링크가 있을 수 있으며 일반적으로 하나만 표시되지만 몇 가지 예가 있습니다. 여러 건너뛰기 링크도 사용할 수 있는 예를 보여 드리겠습니다. 그래서 나는 우리가 몇 가지 다른 유형의 건너뛰기 링크 또는 몇 가지 다른 유형의 건너뛰기 링크를 볼 수 있다고 생각했습니다. 그런 다음 건너뛰기 링크가 없는 다른 페이지를 살펴보고 어느 위치에 있는지에 대해 조금 이야기하겠습니다. 거기에 유용할 수 있습니다. 우리가 볼 첫 번째 것은 내 화면을 볼 수 있기를 바랍니다. 첫 번째로 살펴볼 것은 deque.com에서 사용하는 건너뛰기 링크이며 페이지를 대체한다는 점에서 내가 변위 요소라고 부르는 것입니다. 여기로 탭하면 건너뛰기 링크가 있고 콘텐츠로 건너뛰라는 메시지가 표시됩니다.

Aaron Pearlman: 그리고 그것을 선택하면 아래의 내용으로 나를 보낼 것입니다. 나는 그것을 변위라고 부릅니다. 왜냐하면 그것이 문자 그대로 자신을 삽입하고 숨기고 거기에 스스로를 삽입하고 변위시키기 때문입니다. 이것은 우리가 콘텐츠에 사용하기로 선택한 건너뛰기 링크이지만 매우 일반적인 것입니다. 웹 사이트 또는 웹 응용 프로그램의 상단에 삽입되는 것을 볼 수 있습니다. 다음으로 살펴보게 될 사이트는 많은 분들이 자주 사용하거나 자주 사용하는 사이트에 대한 것입니다. 아마존입니다. 건너뛰기 링크를 살펴보겠습니다. 거기에 탭할 때 왼쪽 상단 모서리를 보면 오버레이된 것을 볼 수 있습니다. 이것은 오버레이 스타일입니다. 이것은 콘텐츠를 오버레이하는 매우 매우 일반적인 위치이므로 자주 건너뛰게 됩니다. 그 뒤에 있는 주요 콘텐츠로 건너뛰는 것을 보여줍니다.

Aaron Pearlman: 변위와 오버레이 사이의 장단점은 무시할 수 있습니다. 콘텐츠가 난독화하고 싶지 않은 내용인 경우 무언가를 삽입하고 사용하고 싶을 수 있습니다. 변위 1을 사용하거나 그 반대도 마찬가지입니다. 문제가 되지 않습니다. 그것도 괜찮습니다. 아랍어 콘텐츠와 같이 오른쪽에서 왼쪽으로 읽는 콘텐츠를 디자인하는 경우 오른쪽 상단 모서리에 건너뛰기 링크를 넣을 수 있습니다. 정말 적절한 것이 나옵니다. 그러나 궁극적으로 그 재량은 팀의 디자이너에게 있습니다. 그래서 이것은 하나의 건너뛰기 링크인 두 개의 건너뛰기 링크의 예이며 건너뛰기 링크 내부에 여러 옵션이 있는 하나를 보여 드리고자 합니다.

Aaron Pearlman: 그 예를 꺼내겠습니다. 이것은 패턴 라이브러리에서 가져온 것입니다. 이제 이 특정 예에서는 실제로 가치가 없기 때문에 여러 건너뛰기 링크가 있는 것을 실제로 디자인하지 않겠습니다. 그래서 왼쪽 상단 모서리에 탭을 하고 여기에서 두 개의 건너뛰기 링크를 표시하는 오버레이를 사용합니다. 그리고 이것들은 여기 안에 있는 탭 정지입니다. 따라서 탭을 다시 누르면 다음 탭으로 이동하고 탭을 제거하면 탭이 사라집니다. 내가 다시 탭하면 그것은 떠나고 거기 상단의 헤더로 갈 것입니다. 탭을 뒤로 이동하고 탭을 뒤로 이동하여 여기 안팎으로 이동할 수 있음을 알 수 있습니다.

Aaron Pearlman: 그리고 나서 여러분이 볼 수 있도록 이 중 하나를 입력하겠습니다. 그리고 이 시점에서 내가 선택하면 작업 공간으로 나를 보내고 실제로 해당 작업 공간 영역에 초점을 맞춥니다. 많은 웹 응용 프로그램에서 볼 수 있는 것은 실제로 초점 자체를 표시하지 않는다는 것입니다. 우리는 우리 응용 프로그램에서 이것이 말하자면 요소의 초점이 아니라는 것을 보여주고 싶었지만 집중하다. 그리고 여기에서 초점을 맞춘 다음 그 안에 있는 모든 요소의 초점인 내부의 다른 항목으로 이동할 수 있습니다. [inaudible 00:12:28] 요소입니다. 따라서 링크 건너뛰기를 수행할 수 있는 몇 가지 다른 방법의 예입니다.

Aaron Pearlman: 내가 말했듯이, 패턴 라이브러리 내부에 예제가 있습니다. 그것을 사용해도 좋습니다. 우리도 그것의 버전을 가지고 있습니다. 여기에 오류가 있다고 생각합니다. 우리는 하나의 건너뛰기 링크 예제도 가지고 있으며 그것을 사용할 수도 있습니다. 그래서 여기에 몇 가지 다른 예가 있습니다. 그러나 이것은 건너뛰기 링크를 사용할 수 있는 일반적인 방법의 예입니다. 그리고 결과적으로 시스템 기술을 사용할 때 키보드만 사용하여 시스템을 탐색하는 개인에게 주로 유용합니다.

Aaron Pearlman: 하지만 때때로 건너뛰기 링크가 잠재적으로 유용할 수 있는 다른 경우가 있을 수 있습니다. 잠재적으로 유익할 수 있음을 보았습니다. 사이트의 큰 작업 공간이 검색 결과의 무리일 수 있고 맨 아래로 스크롤한 다음 더 많은 결과를 로드하고 맨 아래로 스크롤하는 지연 점수를 수행하는 경우를 상상할 수 있습니다. 더 많은 결과를 로드하고 맨 아래로 스크롤하면 더 많은 결과가 로드됩니다.

Aaron Pearlman: 글쎄, 어떻게 바닥글에 도달합니까? 그리고 실제로 전에 검색 엔진에 갔지만 바닥글에 도달할 수 없었던 문제가 있었습니다. 바닥글에서 정보를 찾고 있었기 때문에 실제로 바닥글로 건너뛸 수 있는 건너뛰기 링크가 있으면 좋았을 것입니다. 따라서 링크를 건너뛰는 것이 도움이 될 수 있는 방법이 있습니다. 그 문제를 해결할 수 있는 유일한 방법은 아닙니다. 물론 하드 키나 바로 가기 메뉴도 사용할 수 있습니다. 이러한 목표를 달성하기 위한 다양한 기술이 있지만 링크 건너뛰기가 [inaudible 00:14:13]에 매우 능숙한 경향이 있습니다. 건너뛰기 링크를 디자인할 때 염두에 두어야 할 몇 가지 사항은 일반적으로 웹 사이트 웹 응용 프로그램에서 가장 먼저 탭이 중지된다는 것입니다.

Aaron Pearlman: 그리고 그것은 일반적으로 발견되는 곳입니다. 그래서 제가 소리를 지르거나 키보드 전용 사용자라면 즉시 찾을 수 있습니다. 들어가면 제일 먼저 할 수 있는 일이에요. 그래서 제가 자주 사용하는 웹앱이라면 하고 있는 일을 바로 할 수 있어요. 또한 AI에서 기본적으로 정보에 있어야 하는 위치에 시각적으로 표시되어야 하므로 건너뛰기 링크와 애플리케이션의 다른 부분도 넣을 수 있습니다. 스크롤링 스택 사이트와 저는 그렇게 하고 싶었고, 무언가 안에 건너뛰기 링크를 갖고 싶었습니다. 나는 당신이 이와 같은 다른 것들에 고정할 수 있다고 확신하지만, 애플리케이션 내부에서 그것이 있어야 할 위치에 시각적으로 표현되어야 합니다.

Aaron Pearlman: 일반적으로 그것은 극히 드문 일입니다. 대부분의 건너뛰기 링크는 항상 맨 처음 탭 정지에 있습니다. 일반적으로 그렇게 하지 마십시오. 나는 당신이 기술적으로 할 수 있다고 생각하지만 나는 하지 않는다고 말하고 싶습니다. 그리고 마지막으로 인터랙티브한 요소이고 과거의 색상 대비이므로 이미지나 그 안에 있는 것과 같은 것을 사용하기로 결정했다면 그렇게 하고 싶지만 그렇게 했다면 적절한 액세스 가능한 이름도 함께 지정합니다. 일반적으로 대부분의 사람들은 텍스트와 링크를 사용하므로 링크로 표시됩니다. [inaudible 00:16:07]이 되도록 색상 대비를 통과하는지 확인하십시오. 매우 좋은. 여기까지가 링크 건너뛰기에 대한 모든 것입니다.

Aaron Pearlman: 이것은 상당히 간결하지만 어디에서나 볼 수 있는 매우 일반적인 패턴이며 공정하게 추가할 수 있는 것입니다. 웹 애플리케이션에 추가하는 것은 상당히 간단하지만 키보드 또는 시스템 기술. 이제 이것을 닫고 모달 최적화로 넘어가겠습니다. 모달은 대부분의 웹 앱에서 매우, 매우, 매우 매우 일반적이고 다양한 포럼에서 모달이 형성되고 생성되는 다양한 방식으로 제공되기 때문에 이 작업을 선택했습니다.

Aaron Pearlman: 하지만 키보드 전용 및 보조 기술 사용자에게 더 나은 경험을 제공하기 위해 몇 가지 최적화를 수행할 때까지 수정할 수 있는 더 많은 항목에 공통적으로 나타나는 몇 가지 사항이 있습니다. 그리고 일반적으로 귀하의 모달이 훨씬 낫다고 생각합니다. 여기서 내가 정말 빨리 보여줄 것이라고 생각한 한 가지는 Modal이 해야 하는 한 가지 중요한 것은 내부에 포커스를 가둘 수 있어야 한다는 것입니다. 저는 ...의 예를 보여주고 싶었습니다. 바로 여기에 있습니다. 그건 그렇고, 나는 드리블을 좋아하기 때문에 이것은 그들에 대한 발굴이 아닙니다. 이것은 아마도 여기에서 작은 실수 일 것입니다. 나는 항상 그것들을 유쾌한 사이트로 사용했고 거기에 멋진 것들을 가지고 있습니다.

Aaron Pearlman: 로그인을 하려면 죄송합니다. 여기에 모달이 있으며 때때로 발생할 수 있습니다. 주의 깊게 보면 탭, 탭, 탭, 탭, 탭을 치고 있습니다. 화면 뒤에서 볼 수 있듯이 보기가 약간 어렵습니다. 포커스가 모달 내부에 갇히지 않은 것을 볼 수 있으며 때때로 이런 일이 발생할 수 있습니다. 따라서 내가 보조 기술이나 키보드 전용을 사용하는 사용자라면 이 상태로 돌아가기가 매우 어려울 것입니다.

Aaron Pearlman: 이것은 매우, 매우, 매우, 매우 일반적으로 일어나는 일이며, Modal에 다른 흥미로운 것들을 삽입할 때 확실히 일어날 수 있습니다. 그래서 우리가 확실히 하고 싶은 것, 그리고 제가 이 문제를 제기하는 이유는 사실 매우, 매우 중요한 이유는 모달이 호출될 때 그것을 불러온 사람에게 스스로를 알릴 필요가 있다는 것입니다. 그들은 기본적으로 방금 열었지만 실제로 올바른 것을 열었습니다.

Aaron Pearlman: 따라서 자체적으로 발표할 수 있는 방법은 모달의 본문에 초점을 맞춰야 하거나 잠재적으로 모달의 헤더에 초점을 맞춰 모달을 불러일으키는 개인에게 알릴 수 있다는 것입니다. 무슨 일이 일어나고 있는지입니다. 따라서 음성이 있는 경우 예를 들어 VoiceOver를 사용하고 있으며 보고 있는 내용을 알려줍니다. 그래서 나는 본문에 초점을 맞출 수 있는 몇 가지 예를 제공하고 모델이 헤더 대신에 어떻게 초점을 맞출 수 있는지에 대한 예를 제공하고 우리가 그것으로 무엇을 할 수 있는지에 대해 생각했습니다.

Aaron Pearlman: 여기에서 정말 빨리 공개하겠습니다. 매우 좋은. 그래서 그들이 이것을 위해 가지고 있는 모달은 바로 여기가 의류 사이트라고 생각합니다. 그리고 일어난 일은 몸에 초점을 맞추었고 가장 잘 보여줄 수 있는 방법은... VoiceOver를 정말 빨리 켤 것입니다. 나는 그것을 끌어올 것이다.

VoiceOver: Chrome의 VoiceOver.] 보노보스, [00:20:10 들리지 않음]-

Aaron Pearlman: 그리고 당신은 그것을 들을 수 없을 것입니다-

VoiceOver: Google 크롬, [email protected]

Aaron Pearlman: 하지만 당신은 그것을 볼 수 있을 것입니다.

VoiceOver: 카드를 닫고 카드가 비어 있고 그룹에 키보드 포커스가 있습니다. 당신은 현재 카드를 여는 그룹에 있고 카드를 닫고 카드가 비어 있는 그룹입니다. 현재 웹 콘텐츠 내 그룹에 있고 VoiceOver가 꺼져 있습니다.

Aaron Pearlman: 제가 초점을 맞추었을 때 바로 거기에 카드가 닫혀 있고 그 시점에서 구매에 집중했기 때문에 카드가 비어 있는 모든 내용이 읽혔습니다. 그리고 그것은 완벽하게 유효합니다. 그것은 모달에 초점을 맞추는 완벽하게 유효한 방법입니다. 전혀 문제가 되지 않습니다. 그런 다음 거기에서 내부에 있는 모든 항목을 탭 순환할 수 있습니다. 모달이 호출되는 또 다른 일반적인 방법은 헤더에 초점을 맞추는 것입니다.

Aaron Pearlman: 그리고 그것이 우리가 애플리케이션에 사용하는 모달에서 하는 일은 헤더에 초점을 맞추는 것입니다. 그래서 저는 모달을 불러올 것입니다. 그리고 바로 여기에서 볼 수 있는 것처럼 포커스는 바로 여기에 양식이 있는 모달이라고 되어 있습니다. 포커스는 헤더에 있습니다. 실제로 인덱스처럼 표시하기보다는 프로그래밍 방식으로 초점을 맞춥니다. 그리고 여기를 탭으로 순환할 때 프로그래밍 방식으로 초점을 맞추는 이유는 이제 헤더에서도 닫기 버튼으로 이동한 다음 첫 번째 대화형 요소(필드에서 다음 필드로, 다음 필드로, 다음 필드에서 탭을 다시 누르면 저장이 되고 탭을 다시 누르면 취소가 됩니다.

Aaron Pearlman: 그리고 여기에서 내가 탭을 눌렀을 때, 그 헤더가 탭 정지라면 그곳으로 갈 것이지만 우리는 그렇게 하지 않기로 결정했습니다. 대신, 우리는 마지막으로 가는데 그렇게 하는 이유는 누군가가 보이스 오버를 사용하고 있는 것을 보았을 수 있고 동시에 내 귀에 들리는 내용을 보았을 때 실제로는 아주 조금이었습니다. 그것은 매우 빨리 말하기 때문에 주의를 산만하게 하고, 약간 수다스럽습니다. 그래서 우리가 이 경험을 위해 만들고자 했던 최적화 중 하나는 덜 복잡하게 만드는 것이었습니다. 그래서 예, 우리는 그것을 발표합니다. 우리는 그들이 처음 거기에 도착할 때 형식으로 모달에 프로그래밍 방식으로 초점을 맞추어 그들이 불러낸 모달이 실제로 그들이 현재 집중하고 있는 것임을 알 수 있도록 합니다.

Aaron Pearlman: 하지만 그들이 이 모달을 순환하면서 이 교대조를 순환한다면 우리는 그것을 계속해서 발표할 필요가 없습니다. 따라서 인용된 대부분의 마우스 전용 사용자에게는 완전히 보이지 않을 가능성이 작은 최적화입니다. 그러나 그 작은 최적화, 내가 양식을 자주 작성하기 위해 모달을 많이 사용하고 시간이 지남에 따라 최적화가 추가되는 키보드 전용 또는 보조 기술을 사용하는 사용자였다면 상상할 수 있습니다. 그래서, 우리가 할 수 있는 아주 작은 사용자 경험은 우리가 제공할 수 있는 가장 자주 경험이 되도록 디자인에 쏟을 수 있는 전반적으로 상당한 차이를 만들 수 있습니다.

Aaron Pearlman: 초점 처리에 대해 말하자면, 우리가 마지막으로 다룰 것은 초점 처리 자체입니다. 그리고 우리는 한 가지 예를 보았습니다. 특정 유형의 핸들링에서 초점을 잃을 수 있다면 어떻게 될까요? 그러나 중요한 문제가 될 수 있는 것이 아니라 초점을 처리하는 방식이 개인의 경험을 크게 바꿀 수 있습니다. 특히 집중 처리에 관한 규칙, 특히 지금 바로 살펴보게 될 두 가지 경우, 즉 작업 공간이나 작업 중인 무엇이든 요소를 ​​제거 및 추가하는 것은 ... 누군가가 작업 공간을 어떻게 바꿀 수 있는지 그것과 상호 작용합니다. 그래서 우리는 마우스 전용 사용자 또는 시각 사용자인 마우스 전용 사용자가 가질 수 있을 것으로 예상되는 경험을 따르도록 만들고 싶습니다.

Aaron Pearlman: 이 예에서 우리는 ... 여기서 우리는 ... 을 볼 것입니다. 좋습니다. 끌어다 보겠습니다. 잠깐만요. 임시로 여기에서 꺼내야겠습니다. 우리는 거기에 갈. 따라서 내가 디자인한 모달의 예를 볼 수 없어야 합니다. 실제로는 단일 모달입니다. 두 가지 종류의 이미지가 있고 하나는 실제로 만드는 것이 아니라 접힌 부분 아래에 있는 것을 보여주는 것입니다. , 정말 잘못되었거나 접힌 부분 아래에 무엇이 있는지 볼 수 있도록 분할했습니다. 그리고 오른쪽에 보시면 현재 집중하고 있는 휴지통 아이콘이 있습니다. 따라서 휴지통 아이콘을 클릭하면 "정말 삭제하시겠습니까?"라는 대화 상자가 없다고 가정합니다.

Aaron Pearlman: 그렇지 않다고 가정해 봅시다. 진짜 질문은 다음과 같습니다. 거기에 초점을 맞추면 어떻게 됩니까? 그 휴지통 아이콘을 누르거나 선택하면 바로 여기에 있는 지침이 제거되고 그 자체도 제거되기 때문입니다. 그러면 초점은 어디로 갑니까? 그래서 우리는 디자이너로서 포커스가 갈 곳을 선택하고 싶습니다. 그렇지 않으면 웹 애플리케이션 내부에서 웹 애플리케이션을 만들고 있고 브라우저가 포커스가 갈 곳을 선택하는 것을 원하지 않기 때문입니다. 몸에 물건을 던지는 경향이 있습니다. 따라서 이 경우에 우리가 정말로 초점을 맞추고자 하는 곳은 초점이 다음 초점 가능한 요소로 이동하기를 원하는 것입니다. 대신 우리는 지침 자체에 집중합니다.

Aaron Pearlman: 그리고 우리가 그렇게 하고자 하는 이유는 누군가가 실수로 키보드를 사용하여 키보드를 사용하여 리턴 키를 눌렀다가 다시 리턴 키를 쳤다고 상상할 수 있기 때문입니다. 한 세트가 아닌 두 세트의 명령을 삭제했을 것입니다. 그리고 우리는 말 그대로 물리적으로 멀리 떨어져 있어 마우스 전용 사용자가 이를 방지하고 싶습니다. 그러나 우리는 그것을 방지할 수 있기를 원합니다. 왜냐하면 초점은 이것을 통과하는 데 사용하는 것이기 때문입니다. 그래서 여기 전체 섹션의 마지막 항목을 삭제할 때 우리가 무엇을 하는지에 대한 또 다른 예를 보여주고 싶다고 생각했습니다.

Aaron Pearlman: 이제 요리 지침이 있습니다. 첫 번째 지침의 마지막 지침입니다. 여기서 초점은 어디로 가나요? 이제 이 특정 항목에 대해 이전 항목과 일치하게 될 것입니다. 실제로 다음 초점으로 이동하지만 다시 채워집니다. 이는 우리가 던지고 싶지 않은 것과 같은 이유로 구성 요소 1입니다. 누군가가 다시 선택을 다시 누르거나 다시 리턴을 누르면 우리는 ... 의도하지 않고 원하지 않은 두 가지를 실수로 삭제하기 때문에 휴지통으로 다시 보냅니다.

Aaron Pearlman: 같은 이유로 여기에 있는 이러한 링크 중 하나에 해당 링크를 던지고 싶지는 않을 것입니다. 왜냐하면 실수로 항목을 추가하는 반대 문제도 있기 때문입니다. 그리고 우리는 그것이 몸으로 가는 것을 반드시 원하지는 않습니다. 왜냐하면 우리는 몸으로 가고 당신의 Voice Over 사용자, 당신의 Assistant Technology 사용자는 모달에 대해 다시 수다를 떨기 시작하거나 당신이 계속해서 상호 작용하도록 놔두지 않고 하려고 했던 일을 하십시오.

Aaron Pearlman: 그리고 마지막으로 제가 여기에 있는 마지막 예는 이 경우에 마지막 항목을 제거하려고 할 때 무엇을 하는지입니다. 여기 모달에서는 아무것도 남지 않습니다. 어디로 보낼까요? 그리고 이것은 어디로 가야할지 디자이너의 재량에 달려 있습니다. 아니요, 옷에 보내거나 취소에 초점을 맞추기로 선택하면 액세스 할 수 없습니다. 반드시 액세스할 수 없게 만드는 것은 아닙니다. 단지, 실제로 무엇을 기대할까요? 어떤 정보를 전달하시겠습니까? 해당 사용자에게 어떤 설명을 전달하고 싶고, 헤더로 다시 보내도록 선택하여 사용자가 여전히 모달에 있고, 여전히 거기에 있다는 것을 알릴 때 전송 위치를 선택합니다. 예를 들어 거기에서 닫았습니다.

Aaron Pearlman: 그리고 내가 말했듯이, 그것은 끔찍한 목소리가 아니기 때문에 실제로는 프로그래밍 방식의 변화입니다. 그렇게 끔찍하게 초점을 맞출 수 있는 요소는 아닙니다. 따라서 이 특정 예에서 프로그래밍 방식으로 초점을 이동합니다. 이것은 항목을 제거할 때 초점을 두고 무엇을 해야 하는지에 대한 몇 가지 좋은 예입니다. 그래서 저는 당신이 할 수 있다고 생각했습니다. 아이템을 추가할 때 하는 일의 예를 보여드리겠습니다. 그래서 초점 유지를 위한 아주 빠른 예가 있습니다.

Aaron Pearlman: 그리고 바로 여기, 우리는 이것을 추가할 것입니다 ... 여기에 초점을 맞추고, 다른 성분을 추가하고 초점을 맞춘 다음 이 경우 실제 성분으로 이동할 수 있습니다. 두 가지 이유 때문에 추가한 필드입니다. 가정은 우리가 그것과 상호 작용하기를 원했고 그것이 내가 마우스 전용 사용자라면 예상되는 동작이 될 다음 필드를 추가하는 것입니다. 아마도 실제로 텍스트를 입력하기 시작할 수 있도록 추가했을 것입니다.

Aaron Pearlman: 그리고 다시, 같은 이유로 다른 재료에 계속 초점을 맞추고 싶지는 않을 것입니다. 다시 리턴을 누르면 하나가 아닌 두 개의 재료를 추가하고 싶지 않을 것이기 때문입니다. 앞의 예와 반대 문제여야 합니다. 그리고 제가 보여주고 싶었던 마지막, 마지막 예는 보여드릴 가치가 있다고 생각하기 때문에 ... 실제로 제가 그 예를 가지고 있습니다. 조금 후에 그것을 끌어올릴 수 있습니다. 그러나 나는 그것을 꽤 적절하게 설명할 수 있습니다. 만약 당신이 모달을 불러올 때 당신은 무엇을 합니까? 예를 들어, 무언가를 저장하면 모달이 사라지고 초점은 어디로 가고 우리는 무엇을 하려는 경향이 있지만 그것에 대한 경험적 규칙은 어떤 요소로든 다시 보내고 싶다는 것입니다 [inaudible 00:31:03] 얻는다.

Aaron Pearlman: 따라서 만약 여러분이 약간의 편집 연필이 있고 그것을 선택하고 모달을 열고 해당 모달을 채우고 저장을 누르면 ... 아니면 우리가 할 수 있습니다. 다른 곳으로 보내고 싶은 경우가 있을 수 있습니다. 그것이 마법사이고 그 후 다른 곳으로 간다면 다시 디자이너의 재량에 따라 어디로 가야 하는지 알려주려는 이야기가 무엇인지 알 수 있습니다. 그러나 제가 방금 설명한 … 사례와 같은 경우는 매우 일반적입니다. 모달을 불러오거나 모달로 무언가를 수행하면 그 결과로 무시되고 컨텍스트가 반드시 변경되지는 않습니다.

Aaron Pearlman: 그리고 당신은 그 초점을 원래 있던 곳으로 되돌리고 싶지 않습니다. 그렇게 하는 이유는 키보드 전용 또는 보조 기술 사용자가 현재 위치를 다시 찾을 수 있기 때문입니다. 그들이 그 공간에 있다는 것을 기억하고 그 공간은 그들이 어떻게 횡단하는지, 특히 모든 것을 통과하기 위해 도시를 사용할 때 다소 선형적입니다. 그래서, 제 생각에 우리는 약 40분에 있다고 생각합니다. 우리는 제가 가진 모든 예와 물건에 대해 거의 정시에 있습니다. 그래서 Scott에게 다시 전달하겠습니다.

스콧: 고마워 아론. 그것은 꽤 굉장했습니다. 그리고 우리는 참석자로부터 많은 질문을 받았을 뿐만 아니라 그가 여행 중이어서 오늘 참석하지 못한 몇몇 개인으로부터도 질문을 받았습니다. 그래서 웨비나에 정기적으로 참석하는 Poan은 "항목을 제거할 때 작업을 확인하고 포커스를 해당 위치로 이동하고 다음 요소로 이동해야 하지 않겠습니까?"라고 묻습니다.

Aaron Pearlman: 항목을 제거할 때 ... 축배와 같은 알림처럼 말해야 합니까, 아니면 무슨 일이 일어나고 있는지 알려주는 라이브 영역이 있어야 한다는 말씀이십니까? 예를 들어 해당 특정 인스턴스에서 방금 보여드린 항목과 같이 항목을 제거하기 위해 초점을 이동하는 경우 해당 삭제를 불러오는 것은 실제로 삭제되었음을 알릴 수 있을 만큼 충분해야 합니다.

Aaron Pearlman: 사라져야 합니다. 또한 Voice Over를 사용하는 경우에도 이를 선택합니다. 예를 들어 무언가를 수행한 다음 어딘가에서 일부 측정항목을 변경하는 것처럼 무언가와 상호 작용하고 다른 곳에서 변경을 수행하는 경우, 사용자가 이를 허용하기 위해 공손하게 무언가를 수행하는 라이브 영역을 사용하고 싶을 것입니다. 그런 일이 있었다는 것을 알고 있습니다. 그것은 당신이 구체적으로 일하는 곳의 범위에서 벗어난 것입니다. 귀하의 질문에 답변이 되었기를 바랍니다. 조금 더 기술적인 것에 뛰어들 수도 있습니다. 심층적인 기술 구현에 대해 알아보려면 그 중 일부에 대해 조금 더 후속 조치를 취해야 할 수도 있습니다.

스콧: 완벽합니다.

Aaron Pearlman: 내 개발자, 그래서 그들은 당신이 도착하도록 지시하지 않지만 일반적으로 그런 경향이 있습니다. 내가 보여준 예가 적절해야 합니다. 삭제이기 때문에 원하는 경우 중간 부분에서 경고를 보내고 "정말 그가 이것을 삭제하기를 원하십니까?"라고 말할 수 있습니다. 어떤 경우에 무슨 일이 일어나고 있는지 더 강화하고 있습니다.

스콧: 좋아요. 예, 질문 사용자 경험에 초점을 맞추도록 노력하십시오. 그렇다면 사용자 경험의 관점에서 알림 메시지에 대한 포커스를 어떻게 관리하시겠습니까?

Aaron Pearlman: 알림에 집중하시겠습니까? 보고 싶다면 하나 보여드릴 수 있습니다.

스콧: 물론이죠.

Aaron Pearlman: 알림인 건배가 있기 때문에 무작위로 선택할 수 있습니다. 그래서 저는 여기서 토스트를 열겠습니다. 그래서 이것은 실제로 지금 집중되고 있습니다. 이 축배가 불러일으키고 지금 집중되고 있습니다. 실제로 볼 수 있듯이 여기에서 절을 탭할 수 있습니다. 그래서, 그것은 달려 있습니다. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. 주요 내용으로 건너뜁니다.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. 완전히 무료입니다. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. 정말 멋지네요.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. 그거 하나야 In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: 그래서 우리가 하는 일 중 하나는 디자인에 상당히 많은 주석을 다는 것입니다. 특정 사물의 크기부터 모양과 느낌에 대한 16진수 코드 또는 RGBA 값에 이르기까지 모든 것입니다. 하지만 추가할 수 있는 접근성 주석도 있습니다.

Aaron Pearlman: 그런 다음 의사 소통을 하고 빌드가 진행되는 동안 빌드를 살펴보고 사용자 지정 포커스를 만든 경우 해당 사용자 지정 포커스가 멋지게 보이는지 확인하고 색상 대비를 확인하고 글꼴이 잘 통과하는지 확인합니다. 무게가 더 크고 더 클 때 글꼴이 몇 가지 있습니다. 색상 대비가 4.5일 필요는 없습니다. 실제로는 조금 낮을 수 있지만, 그냥 그런 것들을 주시하고 싶을 뿐입니다. 경험 자료도 주시하는 것처럼. 염두에 두고 디자인에 주석을 추가한 항목을 계속 주시하고 싶을 것입니다.

Scott: 이제 몇 분 남았습니다. 그럼 질문 하나 더 하겠습니다. 어떤 사람들은 접근성이 디자인 프로세스 전반에 걸쳐 창의성을 억제할 수 있다고 생각합니다. 그것은 당신이 본 것입니까? 창의성이 접근 가능한 디자인에 어떻게 들어맞는다고 생각합니까?

아론 펄먼: 물론입니다. 접근하기 쉬운 디자인을 해야 하는 것에 대한 나의 초기 반응 중 하나는 누군가가 기본적으로 수갑을 채우고 "당신이 작업할 수 있어야 하는 훨씬 작은 상자가 있습니다."라고 말하는 것이었습니다. 접근 가능하게 디자인한다는 것은 따라야 하는 규칙이 더 많기 때문에 더 많은 문제가 있을 수 있음을 의미하는 것이 사실입니다. 하지만 결국에는 경험이 더 좋아졌음을 알게 되었고 그렇게 하지 않았습니다. … 그 잘못된 이름을 제거하고 WCAG 2.0 AA에 액세스할 수 있는 액세스 가능한 디자인을 점점 더 많이 하기 시작하면 거의 모든 것을 할 수 있다는 것을 알게 되었습니다. 내가 하고 싶었던 것.

Aaron Pearlman: 저는 가끔 전과 약간 다른 방식으로 문제를 표현하거나 해결해야 합니다. 많은 사람들이 접근 가능한 디자인에 대해 생각할 때 생각합니다. 아주 구체적인 예를 들겠습니다. 그들은 접근성 디자인에 대해 생각할 때 "아, 예를 들어, 저는 이러한 멋진 시각화를 모두 할 수는 없습니다. 액세스할 수 없기 때문에 이러한 모든 작업을 수행할 수는 없습니다. 개인이 볼 수 없다면 그렇게 할 수 없기 때문입니다.”

Aaron Pearlman: 저는 기본적인 시각화를 디자인하고 있었습니다. 일종의 선 그래프이고 그 아래에 선 그래프가 있었습니다. x축에는 시간이고 y축에는 사용법이나 이와 유사한 것이었습니다. 저것. 그리고 그 아래로 내려가는 이 멋진 작은 그라디언트가 있었고 달과 시간을 나타내기 위해 그 뒤에 가는 일종의 빛 선이 있었습니다. 그리고 내 주제 전문가 중 한 사람과 액세스 가능하게 만드는 방법에 대해 이야기했을 때 그는 "아니요"라고 말할 것이라고 확신했습니다. 그러나 그는 실제로 이 멋진 그래프를 액세스할 수 있게 하기 위해 내가 해야 할 일이 몇 가지 있다고 말했습니다. 하나, 맨 위에 있는 선은 실제로 시간 경과에 따른 추세 정보를 전달하는 것이기 때문에 색상 대비를 통과해야 합니다.

Aaron Pearlman: 그 아래에 있는 그라데이션 항목은 장식일 뿐이며 색상 대비와 y 및 x축 선의 통과를 방해하지 않고 결국 괜찮습니다. 그 뒤에 있는 줄은 괜찮았지만 결국 하단에 체크 표시를 추가하여 표시했습니다. 그리고 나서 마우스를 가져가서 초점을 맞추었을 때 가끔 마우스를 가져가면 선 그래프의 일부에 점이 추가되어 점 자체가 색상을 통과하는지 확인합니다. 차이. 나는 당신이 다른 점으로 흰 점을 넣는 일종의 도넛 같은 일을 함으로써 그것을 했습니다.

Aaron Pearlman: 그리고 거기에 약간의 처리를 추가하여 희미해진 선을 다시 앞으로 가져오게 했습니다. 그리고 그것은 모두 색상 대비를 통과하고 결국 괜찮습니다. 통과한 것은 정말 예쁜 비주얼리제이션이었습니다. 이제 나는 모든 접근 가능한 이름을 다루지 않고 그렇게 할 수 있습니다. 많은 라이브러리가 그것에 있습니다. 제 생각에 많은 디자이너들이 고민하는 부분이기 때문에 최소한 우리는 대조라고 부릅니다. 넌 할 수있어.

Aaron Pearlman: 이러한 유형의 일에 대해 정말 염두에 두고, 더 많은 예를 얻고, 다른 것을 시도하고 시도하고, 다른 사람들과 함께 아이디어를 제시하고 앞뒤로 되돌리고 다시 확인하게 하는 것입니다. 그렇게. 나는 그것이 정말로 아무것도 방해한다고 생각하지 않습니다. 그것은 당신이 그것을 어떻게 할 것인지에 대해 좀 더 명확하게 생각해야 하고, 시력이 좋지 않거나 그렇지 않은 경우 개인이 이 일에 어떻게 참여하는지에 대한 렌즈를 통해 보고 있는지 확인해야 합니다. 미디어 응용 프로그램을 빌드하는 경우 전혀 보이지 않거나 들리지 않습니다.

Scott: 질문이 하나 더 있습니다. 하지만 우리가 그것에 대해 언급했어야 한다고 생각합니다. 프로세스의 어느 단계에서 접근성에 대해 생각하기 시작합니까? 나는 전체 과정을 통해 가정 할 것입니다.

Aaron Pearlman: 예, 전체 프로세스에 걸쳐 있습니다. 나는 ...보다 조금 더 할 것입니다. 나는 내가 누구인지 알고 있습니다. 따라서 초기에 저충실도 프로토타이핑과 같은 작업을 수행할 때 탭 순서와 같은 것에 대해 생각하게 될 것입니다. 당신은 아마도 제목과 구조에 대해 생각할 것입니다. 이것들은 당신이 생각하는 접근성 항목의 유형입니다. 나중에 충실도가 높아짐에 따라 선택한 색상과 팔레트, 접근 가능한 이름, 가치가 있는 모든 것에 대한 대체 텍스트, 예를 들어 사용자 지정 초점을 수행하는 경우 그 부분에 대해 생각하기 시작할 것입니다.

Aaron Pearlman: 저충실도를 수행할 때 그것에 대해 생각할 수 없다는 의미는 아닙니다. 일반적으로 의미합니다. 제 프로세스를 진행할 때 그런 것들이 해당 범주에 속하는 경향이 있다는 뜻입니다. 당신은 항상 접근성에 대해 생각하고 있지만 충실도가 낮은 것에 대해 항상 모든 것에 대해 생각하는 것은 아닙니다. 아이디어를 통해 작업하고 접근성에 더 익숙해지면 창의적인 작업이 진행되도록 하면 본질적으로 일종의 방식으로 들어가고 의식적인 부분이 줄어들 것입니다.

스콧: 네. 그럴 수 있지. 글쎄요, 그 점에서 우리는 시간이 부족합니다, Aaron. 시간 내주셔서 대단히 감사합니다.

Aaron Pearlman: 훌륭했습니다. 나는 멋진 시간을 보냈습니다.

Scott: 다음 두 차례 Smashing 컨퍼런스에 참석할 예정입니다.

Aaron Pearlman: 저는 뉴욕에 있을 것입니다. 나는 뉴욕에 있는 한 곳에 있을 것이다.

스콧: 알았어. 그리고 그곳에서 워크샵을 하고 계신가요?

Aaron Pearlman: 네, 그렇습니다.

스콧: 알았어. 엄청난. 시간을 내주셔서 다시 한 번 감사드리며 아직 시청하고 있는 회원들을 볼 수 있도록 다음 주에 두 개의 웹 세미나가 있습니다. 첫 번째는 Kristina Podnar와 함께하는 Power of Digital People입니다. 그리고 나서 Andrew Clarke와 함께 시리즈의 3번째, 영감을 받은 디자인 결정, 3번째는 Ernest Journal에서 영감을 받았습니다. 오늘 참석해 주신 모든 분들께 진심으로 감사드립니다. 그리고 이 녹음은 편집이 완료되면 파견 회원 패널에서 사용할 수 있으며 다음 주에 모두 뵙기를 바랍니다. 다시 한 번 Erin에게 감사드립니다.

랩입니다!

지속적이고 친절한 지원을 아끼지 않으신 Smashing Member께 진심으로 감사드립니다. 앞으로 더 많은 웨비나를 개최할 수 있기를 고대합니다.

다가오는 SmashingConf New York(10월 15-16일)에 Aaron을 환영하게 되어 정말 기쁩니다. 그곳에서도 여러분을 뵙고 싶습니다!

이 일련의 인터뷰가 유용하다고 생각하는지, 인터뷰하기를 원하는 사람, 또는 어떤 주제를 다루기를 원하는지 알려주시면 바로 안내해 드리겠습니다.