귀하의 웹 사이트가 '문을 닫고', 수백만 명의 고객을 배치합니까? 모든 사람이 알아야 할 체크리스트 웹 접근성 (WCAG)을 엽니 다.

상상해보십시오 ... 당신은 엄청난 마케팅 예산을 가지고 있습니다. 웹 사이트는 아름답게 설계되었습니다. 그러나 당신의 제품을 "사고 싶어"하는 사람들이 있습니다. 당신의 제품은 누락 될 것이지만 ... 그는 돈이 없기 때문에가 아니라 당신의 웹 사이트가 그를 위해 사용했기 때문에 할 수는 없습니다.

해당 그룹의 사람들이 스크린 리더를 사용하여 시각적으로 손상 될 수 있지만 귀하의 웹 사이트에는 설명이 없습니다. 또는 손이 떨리기 시작하는 노인 일 수도 있습니다. 작은 버튼을 클릭하거나 임시 팔이있는 사람이 마우스를 쉽게 사용할 수 없습니다 ... 그들은 모르는 모든 "고객"입니다.

이 문제는 작은 문제가 아닙니다. 그리고 모든 사람이 평등에 대해 이야기하는 것은 더 이상 먼 문제가 아닙니다. 모든 사람이 액세스하거나 웹 접근성에 액세스 할 수있는 웹 사이트를 갖는 것은 "좋은 일"이 아니라 막대한 비즈니스 기회를 잠금 해제하는 데 "표준"입니다. 미래에 발생할 수있는 법적 위험을 예방합니다.

‍

프롬프트 : 분할 화면 이미지 비교. 한쪽은 고객이 쉽게 웃는 사진입니다. 다른 쪽은 안과 결함이있는 고객의 사진입니다. (옆에 백인 직원의 상징이있을 수 있습니다). 같은 웹 사이트를 사용하려고하는 동안 실망하고 있습니다. 그러나 그의 컴퓨터 화면은 왜곡이 액세스 할 때 장애물을 전달하는 것을 보여줍니다.

‍

아름다운 웹 사이트가 왜 "벽"을 차단하는 이유는 무엇입니까?

이 문제는 많은 기업들이 간과하는 "사각 지대"에서 발생합니다. 우리는 각 사람의 "좋은 경험"이 동일하지 않다는 것을 잊어 버릴 때까지 대부분의 사람들의 눈에 웹 디자인에 "아름다운"웹 디자인에 집착하는 경향이 있습니다. 주된 이유는 다음과 같습니다.

• "구조"가 아닌 "이미지"에 중점을 둡니다. 디자이너와 마케팅 담당자는 레이아웃, 색상 및 애니메이션의 아름다움에 중점을 두는 경향이 있지만, 스크린 리더와 같은 기술 (보조 기술)을 돕는 데 도움이되는 올바른 HTML 구조를 무시하는 것은 웹에서 "이해"및 "커뮤니케이션"할 수 있습니다.
• 문제와 오해 : 많은 사람들은 웹 접근성이 "소규모 장애인"의 문제라고 생각하지만 실제로는 많은 사람들과 관련이 있습니다. 노인, 일시적 장애가있는 사람들 (예 : 무기 부러진) 또는 제한된 상황에 처한 사람들 (예 : 작은 대조적으로 보이지 않는 태양에서 웹을 사용하는 등). 2022 년의 데이터에서 태국은 약 4,190 만 명의 장애인 또는 전체 인구의 약 6%가 있습니다. 이것은 당신이 간과 할 수없는 시장입니다.
• "복잡하고 비싸다"는 기술이라고 생각합니다. "표준"또는 "wcag"라는 단어는 무섭고 기술적 인 용어로 들릴 수 있습니다. 비즈니스 소유자가 먼 문제라고 느끼게하는 것은 실제로 접근성을 시작하더라도 예산을 거의 사용할 수있는 작은 지점에서 시작될 수 있음에도 불구하고 높은 투자를해야합니다.

‍

프롬프트 : 간단한 인포 그래픽 이미지는 내부에 기어가있는 뇌 이미지를 보여 주지만 눈 모양의 아이콘, 귀 및 손으로 기어가 나오고 "시각에만 초점을 맞추고", "인식 부족", "복잡해 보인다"는 메시지가 전달되어 문제의 원인을 전달합니다.

‍

당신이 생각하는 것보다 위험합니다! 귀하의 웹 사이트가 모든 사람을 "환영하지"않을 때의 영향

웹 접근성 소개 비즈니스 기회가 누락되었을뿐만 아니라 브랜드의 위험이 여러 차원에서 위험합니다.

• 소득 및 고객 손실 : 이것은 가장 분명한 효과입니다. 구매력을 가진 많은 고객 그룹과 함께 판매 할 수있는 기회를 마감하고 있습니다. 장애인 또는 모든 그룹에 관심이있는 브랜드를 지원하기로 선택한 가족 및 친구에게 직접적으로
• 법적 위험 : 전 세계의 많은 국가에는 장애인을위한 웹 사이트를 만들지 않는 많은 민간 회사가 있습니다. 태국 자체는 장애가있는 2007 년의 삶의 질의 승진과 개발 과 관련 장관 규정을 위해 정보와 서비스에 액세스 할 권리를 촉진합니다. 민간 부문의 현재 100%가 정부 기관만큼 강렬하지는 않지만 이것이 멀리 보이는 사업을 준비 해야하는 세계의 추세입니다.
• 브랜드의 신뢰성 (브랜드 트러스트) : 소비자가 "가치"에서 브랜드를 지원하기로 선택한 시대에 브랜드가 웹 사이트를 보유하고있는 웹 사이트를 보유하고있는 웹 사이트를 보유하고 부정적인 이미지를 만들 수있는 웹 사이트를 보유하고 구성이 웹 사이트에서 신뢰를 창출합니다. 당신이 만들려고 노력하는 것
• SEO 영향 : Google은 사용자 경험 (UX)에 매우 중요합니다. 하드 액세스 웹 사이트는 종종 높은 바운스 속도, 낮은 페이지를 가지고 있으며, 이는 SEO에게는 나쁜 신호입니다. 핵심 웹 비율 에도 직접적인 영향을 미칩니다 .

‍

프롬프트 : 그림은 4 장의 카드 형태의 4 가지 효과를 보여줍니다. 첫 번째 카드에는 돈이 날아가는 모습이 있고, 두 번째 잎은 망치, 세 번째 잎은 브랜드 로고가 깨진 브랜드 로고이며, 네 번째 잎은 위험을 전달하기 위해 빨간색 톤을 가진 SEO 그래프입니다.

‍

문제를 해결하기 위해 경전 개방 : WCAG의 4 가지 원칙부터 시작

괜찮아요. 웹에 액세스하는 것은 생각만큼 어렵지 않습니다. WCAG (Web Content Accebilibility Guidelines) 라는 국제 표준에 있으며 , "부어"를 기억하기 쉬운 4 가지 주요 원칙으로 나뉩니다. 각 항목이 무엇인지, 어떤 체크리스트를 즉시 시작합니까?

1. 인식 가능 (인식) - 사용자가 다양한 감각을 통해 콘텐츠를 인식 할 수 있도록합니다.

• [] 모든 이미지에는 설명이 있어야합니다 (Alt Text) : 해당 사진이 무엇인지 설명하려면 작성하십시오. Screen Reader 프로그램을 시각 장애인을 위해 읽을 수 있도록
• 청각 장애인 캡션, 맹인을위한 오디오 설명 및 전사와 같은 다른 옵션이 있어야합니다
• [] 적절하게 모순되어야하는 색상 : 텍스트와 배경은 충분한 대비 비율 (정상 텍스트의 경우 4.5 : 1 이상)을 가져서 흐려짐에 따라 실명을 가진 사람들이 읽기 쉽습니다.
• [] 색상으로만 의사 소통하지 마십시오 : 아래에 밑에 빨간색으로 링크를 만드는 것과 같은 색상 실명을 유발할 수 있습니다. 링크인지 알 수 없습니다.

2. 작동 (사용 가능) - 사용자가 다양한 웹 구성 요소를 제어하고 사용할 수 있습니다.

• [] 모든 기능은 키보드를 통해 사용해야합니다. 마우스를 사용할 수없는 사용자는 탭을 눌러 링크, 버튼 및 다양한 양식으로 슬라이드 할 수 있어야합니다.
• [] "키보드 트랩"없음 : 사용자는 키보드를 사용하여 팝업에 갇히지 않고 웹 사이트의 여러 부분에서 이동하여 "나오기"해야합니다.
• [] 충분한 사용자 시간 제공 : 자동 세션이있는 경우 사용자가 적시에 요청할 수있는 옵션이 있어야합니다.
• [] 심각한 번쩍이는 내용을 피하십시오 : 일부 사람들의 발작을 자극 할 수있는 빛 (초당 3 회 이상)이 발작을 자극 할 수 있습니다.

3. 사업 할 수있는 (이해하기 쉬운) - 컨텐츠와 사용법을 만드는 것은 너무 복잡하지 않습니다.

• [] 명확하고 간단한 언어 사용 : 설명없이 기술 어휘 또는 산업 어휘를 피하십시오.
• [] 탐색 및 내비게이션을 예측해야합니다. 사용자가 학습하고 쉽게 사용할 수 있도록 모든 페이지에서 일관되도록 메뉴와 레이아웃을 설계하십시오.
• [] 명확한 오류가 있습니다. 사용자가 잘못된 형식을 작성하면 "잘못된 곳"과 "오류"라고 말하는 것이 아니라 "고치는 방법"이라는 명확한 메시지가 있어야합니다.

4. 강력한 (내구성) - 웹이 다양한 기술 안정으로 작동하도록 허용

• [] 표준 HTML 코드 사용 : 코드 구조 청소 및 올바른 코드 구조 (예 : 태그 사용 등
  ,,
  ,, 책임을 져야 할) 프로그램이 최고의 작업을 읽는 데 도움이 될 것입니다.
• [] 예를 들어, 제품이 바스켓에 추가되면 프로그램에 읽고 발표하는 데 도움이되는 코드가 있어야합니다.

Depth Information에서 더 많은 공부를 원한다면 W3C Web Accessibility Initiative (WAI) A11Y 프로젝트 와 같은 커뮤니티는 훌륭한 출발점입니다.

‍

프롬프트 : Pour (인식 가능, 수술, 앙트가 독특하고 견고 함)에 따라 4 개의 부품으로 나뉩니다. 각 부분에는 주요 아이콘 (손 모양, 뇌 모양, 기어)과 그 아래에 짧은 체크리스트 2-3이 있습니다.

‍

실제 예 : "온라인 상점"이 접근성으로 20%의 판매를 증가시킬 때.

유명한 온라인 디저트 상점 인 "Baan Bakery"를 상상해보십시오. 처음에는 웹 사이트가 매우 아름답습니다. 그러나 노인 고객들로부터 작은 편지를 읽기가 어려웠고 "바구니에 추가 버튼"이 너무 가벼워서 팀이 점검하기로 결정한 것을 볼 수 없었습니다. 큰 접근성

해야 할 일 : 웹을 해체하지 않습니다. 그러나 AA 레벨 WCAG에 따라 업데이트로 시작합니다. 색상 버튼을 어둡게 조정합니다. 글꼴의 크기를 조금 더 크게 높이고 "딸기, 부드러운 케이크, 베리 소스를 얹은"모든 케이크에 대체 텍스트를 추가하고 고객이 키보드 만 사용하여 모든 단계를 주문할 수 있는지 확인하십시오.

놀라운 결과 : "Baan Bakery"의 판매 후 3 개월 만에 노인뿐만 아니라 거의 20%증가했습니다. 그러나 여전히 브랜드의 관심을 감탄하는 새로운 고객을 확보하게됩니다. "부모가 쉽게 사용할 수 있도록 웹 사이트를 만들어 주셔서 감사합니다." 이것이 모든 사람을위한 디자인의 힘입니다. "커버"경험을 만들고 "판매 생성"을 만들기 위해 UX/UI의 설계 에서 정상으로 변경됩니다

‍

프롬프트 : 측면의 웹 사이트 "Bake Bakery"의 제품 페이지의 이미지는 밝은 색상 버튼과 작은 문자를 보여줍니다. 후에는 배경과 명확하게 대조되는 어두운 버튼을 보여줍니다. 글자는 읽기가 더 쉽습니다. 판매 증가를 보여주는 작은 그래프로

‍

체크리스트가 준비되었습니다! 웹 사이트를 즉시 "업그레이드"하기 시작합니다.

여기서 읽고 싶을 것입니다. 이 약어 점검표를 사용하여 웹 사이트를 탐색하십시오. 작은 승리 (빠른 승리)로 시작합니다.

1. 홈페이지 탐색 : 모든 중요한 그림, 의미가있는 텍스트가 있습니까? 브라우저에서 확장 도구를 사용하여 확인하십시오.
2. 키보드로 테스트 : 마우스를 내려 놓으십시오. 웹 사이트를 서핑하려면 탭, Shift+Tab, Enter Button 및 Spacebar 만 사용하십시오. 메뉴로 이동하여 버튼을 누르고 양식을 성공적으로 작성할 수 있습니까?
3. 체코 대비 색상 : 온라인 도구 ( "색상 대비 확인"검색)를 사용하여 버튼의 문자 및 배경색 (예 : 구매 버튼, 연락처 버튼)을 떨어 뜨립니다.
4. 콘텐츠를 다시 읽으십시오 : 너무 복잡한 용어 나 문장이 있습니까? 사람들이 일반적으로 이해하는 언어로 조정하십시오.
5. 비디오를 봅니다 .

이 5 가지 항목에서 시작하여 큰 단계로 간주됩니다. 그리고이 스토리를 프로세스의 일부로 가져 오는 새로운 웹 사이트를 만들려면 조직 웹 사이트를 개발하면 많은 시간과 비용을 절약 할 수 있습니다.

‍

프롬프트 : 아이콘, 케치 아이콘, 두 가지 색상의 원 (대비 대신), 책 아이콘 및 재생 버튼 아이콘과 같은 각 항목에 대한 아이콘이있는 저렴한 상자가있는 체크리스트 이미지.

‍

사람들이 궁금해하는 질문 (그리고 명확한 답변)

Q1 : 접근성을 만들면 웹 사이트가 이전만큼 아름답 지 않게 보일 것입니까?

A : 사실이 아닙니다! 이것은 가장 일반적인 오해입니다. 접근 가능한 디자인은 "지루한"디자인이 아닌 "스마트"디자인입니다. 모든 사람이 아름답고 이용할 수있는 웹 사이트를 만들 수있는 동시에 창의성을 향상시키는 데 도움이되는 도전입니다.

Q2 : 많은 예산이 필요합니까? 우리의 소기업은해야합니까?

A : 100% 완벽한 모든 것을 할 필요는 없습니다. "낮은 자료 과일"또는 Alt Text 추가 또는 색상 버튼 조정과 같은 고정하기 쉬운 것부터 시작합니다. 가장 가치있는 투자에 더 많은 예산을 소비 할 필요는 거의 없으며 팀에서 "인식"을 창출하는 것이며 소규모 비즈니스의 경우 경쟁에서 우위를 창출하고 브랜드에 대한 충성도가 높은 고객 기반을 창출 할 수있는 기회입니다.

Q3 : WCAG에는 레벨 A, AA, AAA가 있습니다. 우리는 어떤 수준을 목표로해야합니까?

A : 대부분의 비즈니스 웹 사이트 및 조직의 경우 AA는 전 세계적으로 허용되는 금 표준입니다. 실제로는 커버리지 액세스 및 가능성 중에 균형이 잘 맞습니다. 웹 사이트 상장 회사에 대한 요구 사항 또는 투명성과 표준을 강조하는 웹 사무실에 대한 신뢰성 과 일치합니다.

Q4 : 어떤 도구를 확인할 수 있습니까?

A : Chrome Devtools의 Wave, Ax Devtools (브라우저 확장) 또는 등대와 같은 시작하기에 많은 훌륭한 자동 도구가 있습니다. 기본 접근성이지만 이러한 도구는 문제의 30-40% 만 감지하는 데 도움이 될 수 있습니다. 실제 테스트로 테스트하는 것이 여전히 가장 중요한 것입니다.

‍

프롬프트 : 편안한 의자에 십자가에 앉아있는 사람의 이미지. 그 주위에 떠 다니는 질문과 답변의 상징과 함께. 스마일 얼굴은 자신감과 불안감을 보여줍니다.

‍

이제 모든 고객을 환영 할 수있는 문을 열 시간입니다.

이 시점에서 웹 접근성이 복잡한 기술이나 끔찍한 법적 부담의 문제가 아니라 새로운 시대에 사업을하는 "마음"이라는 것을 알기를 바랍니다. "우리는 무엇을 팔고 있습니까?" "우리는 어떻게 최고의 경험을 '모두'에게 줄 수 있습니까?"

접근성에 대한 투자는 숫자 (판매, 전환율), 브랜드 사랑, 신뢰 및 가장 중요한 측면에서 수익을 제공하는 투자입니다.

귀하의 웹 사이트가 더 이상 고객을 차단하는 "장애물"이되기를 기다리지 마십시오. 우리가 제공 한 간단한 점검표로 오늘 웹 사이트를 탐색하고 고객을 환영하기 위해 문을 열었습니다.

귀하의 웹 사이트는 아름답고 모든 고객을 환영하고 실질적인 비즈니스 결과를 창출 할 준비가 되었습니까? UX/UI 및 웹 접근성 전문가에게 문의하십시오. 우리는 자유 로워집니다! 우리는 당신이 모든 사람을위한 훌륭한 웹 사이트를 만들도록 도와 줄 준비가되었습니다.

‍