점포 접근성

Jan 12 2023
WCAG 2.1(웹 콘텐츠 접근성 지침)에 따른 웹 접근성에 대한 접근성 딜레마 성공 기준은 교과서 관점에서만 본다면 압도적일 수 있습니다.
예술적 일러스트레이션은 이미지 콜라주를 보여줍니다. 노란색 스카프와 워터마크가 있는 웹 접근성 로고가 있는 검은색 재킷을 입은 여성. 키보드 배경 위에 남성 맹인 사용자. 붕대를 감은 손. 달러 기호는 3개의 이미지를 모두 연결합니다.

접근성 딜레마

WCAG 2.1 (웹 콘텐츠 접근성 지침) 에 따른 웹 접근성의 성공 기준 은 교과서적인 관점에서만 본다면 압도적일 수 있습니다. 제 경험상 개발자와 관리자는 웹 접근성 프로젝트에 대해 거의 만장일치로 불편한 반응을 보였습니다. 예를 들면: 우리는 "모든 것"을 읽어야 합니까, 그것은 단지 "너무 지루합니다", "그냥 유효성 검사기를 실행하십시오" … 요약하자면 귀뚜라미와 회전초입니다.

웹 접근성의 개발자이자 학습자로서 나는 일단 기준을 읽는 "극심한 고통"을 지나고 나면 다른 각도에서 접근할 수 있다는 것을 깨달았습니다. 예를 들어 사용자 경험 각도에서, 그리고 레이어별로. 천천히, 하지만 실제로는 테스트만 하면 됩니다. 개발자가 항상 하는 일. 이제 일반적으로 다음 Q&A로 연결됩니다.

그러나 정확히 "테스트"하려면 무엇이 필요합니까?

우리 가 대부분의 시간 동안 무의식적 으로 하는 것: 사용자 여정 .

어떻게 하죠?

사용자가 가질 수 있는 장애에 대해 의식적으로 공감 함으로써 , 다시 말해 시뮬레이션하거나 모방할 수 있습니다.

유효성 검사기로 내 사이트를 테스트하는 것으로 충분하지 않습니까?

그렇지 않습니다. 검사기는 일부 기준에 따라 대규모 웹사이트를 분석할 때 큰 도움이 됩니다. 그들 중 20 % 만 좋아합니다. 그러나 유효성 검사기가 멋지게 사이트를 통과하는 것을 보았지만 실제로는 직접 접근할 수 없다는 사실을 깨달았습니다.

구체적인 비유를 부탁드립니다.

몇 가지 기준을 준수하기만 하면 웹사이트가 특정 수준으로 "액세스 가능"해진다고 믿습니다. 당신의 사무실 건물은 정문에서 자동으로 문을 여는 매우 큰 버튼이 있기 때문에 "접근 가능"하다고 생각하는 것과 같을 것입니다. 하지만 자갈 주차장을 통과하고 계단을 올라간 후에만 가능합니다. 그렇다면 사용자는 우선 어떻게 문에 도달합니까?

점포 접근성

오늘날 많은 부문에서 웹 접근성 규정 준수가 적용되며 정부와 같은 일부 부문에서는 의무 사항입니다. 온라인 소매 는 점점 더 많은 소송 의 대상이 되었으며 장애가 있는 사용자 도 명확한 기대치 를 가지고 있으므로 Storefront Accessibility 에 대한 요구가 증가하고 있습니다. 때때로 "소송으로 이어지는" 결과에 대한 "현금으로 이어지는" 접근 방식 사이의 차이를 만드는 경우가 있습니다.

가옥

예를 들어 프로세스를 설명하지만 먼저 몇 가지 전제를 설정합니다.

  1. 매장의 주요 목표는 사용자가 제품을 결제할 수 있도록 하는 것입니다.
  2. 인터페이스의 요소는 장애가 있는 사용자를 포함하여 사용자가 결제를 완료하는 데 도움이 되어야 합니다.
  3. 개발자와 품질 보증 테스터는 종종 사용자가 인터페이스의 A 지점에서 B 지점 또는 Z 지점으로 성공적으로 이동할 수 있는 것처럼 가장하여 테스트합니다. 같은 사람들은 또한 장애가 있는 사용자가 동일한 지점에 도달할 수 있는지 테스트해야 합니다.
  4. 장애가 있는 페르소나 를 에뮬레이션하는 동안 테스트에서 A 지점에서 B 지점 또는 Z 지점 으로 성공적으로 이동하면 여러 접근성 기준을 성공적으로 준수하게 됩니다.

페르소나 가 무엇인지 알아보기 전에 공감 을 명확히 합시다 . 쉽게 할 수 있는 것처럼 들립니다. "다른 사람의 입장이 되어 보세요"라는 말을 여러 번 들었는데 얼마나 어려울 수 있습니까? 글쎄요, 사람들은 서로 다른 수준의 공감을 가지고 있고 일반적으로 자신의 삶의 경험에 영향을 받습니다. 그래서 쉽지 않습니다.

공감은 공감이 아니다

또한 공감이 무엇을 의미하는지에 대한 다양한 인식은 복잡합니다. 저는 자발적인 정의를 많이 들었습니다. 넓은 마음을 갖는 것, 무언가에 대해 모두 감상적인 것, 박애주 의자가 되는 것 또는 "선 사이에서" 감정을 읽는 것… 대화의 맥락에 따라 전부일 수 있지만, 여전히 앞서 언급한 모든 것은 공감 보다 동정에 더 가깝습니다. 이제 웹 접근성 에 대해 이야기할 때 공감은 운 좋게도 매우 실용적인 문제입니다. 예를 들어 온라인 상점은 액세스할 수 있거나 액세스할 수 없습니다. 즉, 중요한 여정 이 성공하지 못하면 "절반 접근 가능"은 소용이 없습니다. 벽돌과 박격포 상점에는 적합하지 않기 때문입니다. 장애가 있는 쇼핑객은 들어가거나 쇼핑할 수 없습니다.

그 사실에 대해 "느끼는" 것과는 상관없이, 스토어프론트를 사용할 수 없는 사용자에 대해 생각하는 우리의 좋은 의도, 생각 및 감정은 더 쉽게 액세스할 수 있도록 만들지 않습니다. 그것은 동정심입니다. 멋지다. 동기부여입니다. 도움이 됩니다. 경각심을 일깨워줍니다. 그러나 웹 사이트에 액세스할 수 있도록 만들지는 않습니다.

사람들을 공감으로 "유도"하는 나의 일반적인 이야기는 다음과 같습니다. 먼저 편안한 분위기를 추가하고 우리가 가족, 친구 또는 가끔 방관자에 둘러싸인 레스토랑이나 바에 있다고 가정해 보겠습니다. 일반적으로 이 이야기를 하는 맥락입니다.

귀하 (장애가 없는 사용자 ) 가 여성을 위한 노란색 스카프와 같은 간단한 제품을 온라인으로 쇼핑하고 있는데 갑자기 컴퓨터 마우스가 작동을 멈추고 배터리가 소진되어 컴퓨터 만 사용하여 결제를 완료해야 한다고 가정합니다. 키보드 .

공감에 대한 저항

물론, 이 공감 운동에 대한 저항은 항상 존재하며 정상적입니다. 우리는 안락한 영역 밖에 있습니다. 그래서 다음과 같은 말을 듣습니다. "마우스패드가 내장된 노트북을 사용한다면?"... 그게 요점이 아니라는 점에 동의합시다. 마우스를 가지고 있는 것처럼 진부한 것에 공감해야 하는 것은 말도 안 되는 것처럼 들릴 수 있지만 전체 프로세스와 관련이 있습니다.

나는 내 이야기의 평범한 청중들에게서 세대적 요인을 지적해야 한다. 80년대 중반에 컴퓨터를 소유한 사용자는 키보드로 화면을 이동하는 방법을 기억할 수 있습니다. 당시에는 볼 마우스가 도입되기 시작했고 90년대 후반이 되어서야 광학 마우스가 상업적으로 이용 가능하지만 그 수십 년 동안 태어난 사용자는 키보드 전용 시나리오를 상상하면서 허를 찔릴 수 있습니다. 내가 말했듯이 공감하기가 쉽지 않습니다.

어쨌든 일단 예제가 동화되고 사람들이 이론을 던지고 키보드만 사용하여 화면에서 이동하는 방법을 기억하거나 알아내기 시작 하면 결제를 완료하는 방법에 대한 아이디어, 계획, 로드맵( 여정 )을 갖게 됩니다. .

자, 일단 이 키보드 여정이 동화되면 복잡성을 추가해 보겠습니다. 이 항목을 여러 번 구매했다고 가정하고(모든 사람에게 노란색 스카프 제공) 이제 프로세스를 암기하고 "너무 좋다"는 것을 알고 있습니다. 마우스, 눈을 감고도 할 수 있을 정도로 훌륭합니다… 정말요? … 시도해 봅시다: 키보드 탐색 + 눈 감음 .

장애가 있는 페르소나

눈을 감기 전에 페르소나 가 무엇인지 정의해 봅시다 . 사용자 경험(UX) 디자인의 맥락에서 " 페르소나 "는 더 큰 사용자 그룹의 요구와 한계를 나타내는 목표와 특성을 가진 전형적인 사용자입니다. 예, 사용자에게 얼굴을 대면 공감 프로세스에 도움이 됩니다. "접근성을 위한 페르소나"를 검색하면 쉽게 사용할 수 있는 많은 페르소나 를 찾을 수 있습니다.

그렇긴 하지만, 술집에서 지나치게 단순화된 캐주얼한 스토리텔링에 대한 후속 조치로, 이 기사가 길어지기 시작했기 때문에(그렇게 많이 읽을 필요가 없다는 요점을 놓침) 짧은 단락에서 몇 가지 페르소나 를 지나치게 단순화해 보겠습니다. 장애가 없는 사용자가 쉽게 에뮬레이션 할 수 있습니다. 이전 기사 에서 가져온 Jane & John 을 입력 하십시오 . 그들은 이전에 접근성 기반 관점과 기대치를 설정할 때 저를 도왔습니다.

  • 제인: 최근에 오른손이 부러진 오른손잡이 사용자는 키보드 전용 탐색을 사용해야 하고 화면에서 자신의 위치를 ​​파악하고 사용자 인터페이스의 다음 요소로 이동하기 위해 시력에 의존해야 합니다.
  • John: 맹인 사용자, 키보드 전용 내비게이션 사용, 화면 판독기 음성에 의존하여 현재 위치를 파악하고 사용자 인터페이스의 다음 요소로 이동합니다.

사용자가 상점을 탐색할 수 있는 방법은 많지만 항상 더 일반적인 경로가 있습니다 . 상점이 실제로 돈을 버는 경로가 중요한 사용자 여정 입니다. 키보드 전용 내비게이션도 예외는 아니므로 Storefront Accessibility에 대한 이야기의 제품인 여성용 노란색 스카프를 기반으로 하는 평균적인 초간단 여정에 동의해 봅시다 .

중요한 사용자 여정

테스트 사용 사례: 제인 은 자신을 위해 노란색 스카프를 사려고 합니다. 반면에 John 은 여자 친구를 위해 같은 스카프를 사고 싶어합니다. 더 명확히 하기 위해 Jane과 John 은 관련이 없으며 서로를 알지 못합니다.

Jane & John 모두 에게 여성을 위한 노란색 스카프를 구입하는 중요한 여정은 다음과 같을 것입니다.

검색 필드 로 이동 > "노란색 스카프 여성" 입력 > 첫 번째 제품으로 이동(노란색 스카프인 척) > 체크아웃 프로세스 시작.

에뮬레이트 또는 시뮬레이트?

여기까지 읽어주셔서 감사합니다. 시뮬레이션과 에뮬레이션의 차이는 미묘합니다. 둘 다 "모방"이라는 단어를 포함하므로 해당 개념을 고수하겠습니다. 다음 예에서는 에뮬레이션 소프트웨어를 사용할 것이므로 이를 에뮬레이션이라고 부르겠습니다. 하지만 분명히 모방을 의미합니다.

이제 모방은 공감의 핵심이며 Jane & John 이 가게 앞의 노란색 스카프를 탐색 하는 방식과 최대한 비슷하게 모방해야 합니다 . 우리는 둘 다 키보드 전용 탐색을 사용한다는 것을 알고 있으므로 체크아웃을 완료하려면 다음 키가 필요합니다.

키보드 상호 작용

  • 탭
  • Shift+Tab
  • 우주
  • 시작하다
  • 화살표 키.

자, 여기가 바의 청중과 독자인 당신에게 용기를 주는 곳입니다. 농담입니다. 웹에서 온라인 상점을 하나 또는 여러 개 선택하도록 친절하게 초대합니다. 그러나 가장 중요한 것은 여성을 위한 노란색 스카프를 찾을 수 있고 Jane & John 을 모방하여 체크아웃 프로세스를 최대한 진행하려고 노력하는 것 입니다. 즉, 원하지 않는 경우가 아니라 "실제로" 매번 스카프를 구매할 필요가 없습니다.

제인 에뮬레이션

Jane 이 사용 하는 키보드 키만 사용하여 중요한 사용자 여정을 따르십시오 .

존을 에뮬레이션

ChromeVox 확장 프로그램을 활성화 하고 — 마침내! — 눈 을 감고 발성이 말하는 내용을 듣고 John 이 사용할 키보드 키만 사용하여 중요한 사용자 여정을 따르십시오.

일반적인 문제

다양한 종류의 상점 접근성을 통해 에뮬레이션 경험을 비교할 때 다음과 같은 문제에 직면할 수 있습니다. 무작위 요소에 도달하여 페이지에서 다음 논리적 요소로 탭할 수 없음, 어떤 지점에서 앞으로 탭할 수 없음(키보드 트랩) , 색상이나 가격과 같은 제품에 대한 의미 있는 설명을 들을 수 없습니다. 슬프게도 이것은 매우 일반적이며 특정 웹 사이트에서 웹 접근성이 부족함을 나타내는 지표입니다.

기준 준수

용어 설명: 기준은 복수입니다. 기준은 단수입니다.

이제 Jane & John 을 에뮬레이션 하여 체크아웃 프로세스를 성공적으로 완료 했다면 해당 매장은 다음 WCAG 2.0 기준을 준수한 것입니다.

Jane과 John의 성공적인 에뮬레이션을 위한 16가지 기준을 보여주는 표(키보드, 키보드 트랩 없음, 차단 차단, 포커스 순서, 일관된 탐색, 보이는 포커스, 텍스트가 아닌 콘텐츠, 정보 및 관계, 페이지 제목, 링크 목적, 페이지 언어, 초점, 오류 식별, 구문 분석, 표제 및 레이블, 오류 방지). 처음 6개의 기준은 Jane과 John을 위한 것이고 나머지 10개는 John만을 위한 것입니다.

대부분의 기준이 레벨 A이고 몇 개만 있는 레벨 AA인지 확인하십시오. 제 생각에는 위의 것들이 "초보자용"을 준수하기 위한 가장 중요한 기준입니다. 그들은 그 위에 더 풍부한 사용자 경험을 구축하기 위한 기반을 설정합니다. 예를 들어 더 많은 레벨 AA 기준을 추가하거나 점자 디스플레이와 같은 다른 보조 기술을 연결합니다. 색상, 텍스트 크기, 비디오 및 오디오 사용에 관한 기준과 같이 "더 간단한" 기준과 별개이거나 어려운 부분이라고 생각합시다.

바에서의 이야기는 여기서 끝입니다. Jane & John 으로 에뮬레이션을 완료할 수 있었는지 여부 입니다. 조금만 노력해도 건배받을 가치가 있습니다. 지금쯤이면 깨달았겠지만 눈 을 감으면 Storefront Accessibility의 문제가 어디 있는지 "보기" 시작했습니다. 그래서 건배! 당신이 마시는 무엇이든.

결론적으로

  1. 우리는 공감과 함께 "걷기"를 통해 매장 접근성을 확인할 수 있습니다.
  2. 온라인 상점을 계획, 개발 및 테스트할 때 위에 언급된 16가지 기준과 관련된 버그를 제거하기 위한 프로세스의 모든 노력은 장애가 있는 사용자의 결제를 용이하게 합니다.
  3. 웹 개발자는 액세스 가능한 중요한 사용자 여정 이 QA 테스터에게 넘기기 전에 실제로 작동하는지 확인해야 합니다.
  4. 최고의 검증 도구는 공감입니다.
  5. 때때로 눈을 감으면 문제가 있는 곳을 "볼" 수 있습니다.
  6. 장애가 있는 쇼핑객은 오프라인 매장에서 하듯이 온라인으로 구매할 수 있어야 합니다.
  7. 평생 최고의 시나리오를 통해 누구도 장애에서 면제되지 않습니다. 우리는 모두 나이가 듭니다.
  8. 웹 접근성은 소송으로 이어지는 시나리오 가 되기 전에 모든 현금으로 이어지는 전략 에서 비즈니스 기회로 보아야 합니다 .