장애가 없도록 BigCommerce 구축

10824 단어 developmentecommercehowtobigcommerce

오늘날 전자상거래 세계에서 접근성을 고려한 디자인은 매우 중요하다.모든 사용자에게 최상의 쇼핑 환경을 제공하기 위해 BigCommerce는 Google의 초석 테마에 새로운 업데이트가 있음을 발표하게 되어 기쁩니다.이러한 접근성 업데이트를 통해 귀하와 귀하의 고객은 웹 콘텐츠 접근성 가이드(WCAG) 표준을 준수하는 데 필요한 도구를 가지게 됩니다.
본고에서 우리는 BigCommerce 플랫폼에서 제공하는 접근 가능한 기능을 연구하고자 합니다. 개발자로서 당신은 이러한 기능을 이해하고 상점에서 이러한 기능을 실현해야 합니다.alt text, 텍스트 접근성, 키보드 접근성, 사용자 정의를 소개합니다.

무장애 및 전자상거래


무장애 사이트는 장애 구매자들이 전자상거래 사이트를 조회하고 더욱 좋은 쇼핑 체험을 얻을 수 있게 한다.포용성을 가진 사이트를 설계하고 구축하는 것은 모든 웹 개발자의 중요한 고려 요소이다.접근 가능한 여러 가지 장점 중에서 이런 방법도 장점이 있다improves SEO and increases the potential reach for market penetration.

대상업적 접근성


Alt 텍스트


"Alt 텍스트는""Alt 태그""또는""Alt 설명""이라고도 하는데, 화면 판독기와 같은 기술로 시력이 손상된 사용자를 돕는 이미지 설명을 말합니다."좋은 경험의 법칙은 — 그림을 추가하려면alt 텍스트를 항상 추가하는 것을 잊지 마십시오.
BigCommerce에 alt 텍스트 설명을 추가하려면 세 가지 옵션이 있습니다.개발자는 Page Builder에 설명을 추가하거나 코드에alt 텍스트를 직접 추가하거나Aria 탭 속성을 사용할 수 있습니다.

BigCommerce Page Builder에 alt 텍스트를 추가하려면:

  • 제어판의 가게 > 내 테마에 들어가서 사용자 정의를 누르십시오.
  • Page Builder에 들어가면 이미지 위젯을 선택하고 목록 아래쪽에 있는 SEO 옵션을 확장합니다.
  • alt 텍스트를 입력합니다.
  • 저장을 클릭합니다.

    • 코드에alt 텍스트 추가


    이미지를 삽입할 때 다음과 같이 이미지 태그에alt 속성이 포함되어 있는지 확인합니다.
    <img src=”” alt=”Image description”>

    Aria 태그 속성을 사용하여 alt 텍스트 추가


    이 메서드는 ID 요소 속성과 일치하는 ID 참조 값을 사용하여 요소를 텍스트와 연결합니다.이 설명을 높은 단계로 설정하면 그림마다alt 속성을 추가하는 것을 피할 수 있습니다.
    예:
    <div role=”img” aria-label=”Description of the overall image”>

     <img src=”graphic1.png” alt=””>

     <img src=”graphic2.png”>

</div>
    이 방법을 더 깊이 이해하려면 Mozilla on ARIA: IMG role을 참조하십시오.

    텍스트 액세스 가능성


    전자상거래 사이트에 있어서 또 다른 중요한 접근성 고려 요소는 모든 잠재적 시청자와 구매자가 당신의 내용을 읽고 이해할 수 있도록 확보하는 것이다.개발자는 텍스트에 쉽게 액세스할 수 있도록 다음과 같은 사항을 기억해야 합니다.

    1. 색상 대비


    사용자가 사용하는 색을 선택하는 것은 시각적 접근성에 매우 중요하다.WCAG 2.1에 따르면 표준 텍스트의 최소 색 대비도는 4.5:1이고 큰 텍스트의 최소 색 대비도는 3:1이어야 한다.
    다음은 당신에게 가장 적합한 조합을 찾을 수 있도록 도와줄 좋은 도표입니다.

    예외적 상황
    주의해야 할 것은 색의 대비도와 텍스트 크기가 서로 영향을 줄 수 있다는 것이다.4.5:1 명암비 기준은 세 가지 예외가 있습니다.
    첫 번째는 큰 텍스트를 사용하는 것이다.큰 텍스트를 사용할 때 대비도는 3:1로 내려가야 한다. 왜냐하면 큰 텍스트는 읽기 쉽기 때문이다.
    두 번째는 텍스트를 덧붙이는 것으로 세 가지 다른 풍격이 있다.
  • 비활성 텍스트(예: 비활성화 버튼에 사용된 텍스트)
  • 배경에 나타나는 모든 종류의 텍스트와 같이 장식용으로 사용되는 텍스트는 사용자가 읽을 수 있는 것이 아니다.그것의 존재는 완전히 미학을 위한 것이다.
  • 의도적으로 숨겨진 텍스트입니다.링크를 건너뛰는 것이 좋은 예다.what a skip link에서 더 많은 정보를 읽으십시오.
    • 마지막 예외는 표지 유형이다.이것은 어떠한 표지나 브랜드 명칭의 일부분이다.
    올바른 색상 조합을 선택할 수 있는 추가 리소스:
  • Lighthouse
  • 크롬 합금Accessibility Developer Tool.
  • WebAIM Contrast Checker

    • 2. 텍스트 제목


    텍스트 제목은 개발자와 사이트 건설자가 내용을 조직하고 페이지에 좋은 구조를 제공할 수 있도록 한다.제목을 정확하게 사용하면 화면 판독기가 사용하는 제목에 따라 사이트를 쉽게 볼 수 있다.a survey conducted by WebAIM에서 70%에 가까운 화면 리더 사용자들이 제목으로 사이트를 방문한다고 밝혔다.
    다음은 제목의 정확한 사용과 부정확한 사용을 설명하는 예이다.

    위의 예에서 알 수 있듯이 ahierarchical pattern를 따르는 것이 매우 중요하다.
  • 당신의 메인 제목은 H1이어야 하며 주요 내용을 지적해야 한다
  • 하위 항목에 H2 적용
  • 제목을 건너뛰거나 변경하지 마십시오
    • 텍스트 제목을 만드는 가장 좋은 방법에 대한 예제 비디오를 보려면 를 참조하십시오.

    3. 텍스트 크기 및 정렬


    대비도, 텍스트 크기, 정렬 방식도 웹 내용의 가독성을 돕는 중요한 접근성 고려 요인이다.
    개발자로서 고려해야 할 사항은 다음과 같습니다.
  • 텍스트 블록
    • 주위에 공백 사용
  • 왼쪽 정렬 텍스트 사용
  • 글꼴 크기 14px
  • 행당 55-65자
  • 안감 없는 글꼴 사용
    • 물론 이것들은 모두 최선의 실천 조언으로 사이트마다 다른 설정이 필요할 수 있다.자세한 내용은 WebAIM article on Typefaces and Fonts를 참조하십시오.

    4. 텍스트 링크


    우리는 모든 사이트에서 링크가 매우 흔히 볼 수 있는 요소라는 것을 알고 있지만, 당신이 사용하는 텍스트에 관해서는 우리가 정확한 접근성을 확보하기 위해 세부 사항을 검사해야 한다.
    사이트에 링크를 만들 때 '링크' 라는 단어를 포함하지 마세요.이렇게 하면 대부분의 화면 판독기가 각 화면 앞에 "링크"라는 구문을 표시합니다.링크라는 단어를 추가하면 불필요해지고 사용자를 곤혹스럽게 할 수 있습니다.
    개발자는 '여기 클릭' 이나 '상세 정보 보기' 보다 더 묘사적인 텍스트를 사용해야 한다이것은 또 다른 용례로, 화면 리더의 사용자는 링크 내용의 상하문이 없을 것이다.이 문제를 피하기 위해서는 큰 소리로 낭독할 때 서면 텍스트 링크가 독특하고 의미가 있어야 한다.
    다음은 기억해야 할 제안 목록입니다.
  • 가능한 고유한 링크 텍스트 사용
  • URL을 링크 텍스트로 사용하지 마십시오.페이지 제목 또는 페이지 설명 고려
  • 링크 텍스트에서 링크라는 단어를 사용하지 마십시오.
  • 링크를 대문자로 쓰지 마십시오.
  • 링크 텍스트를 간결하게 유지합니다.
  • 다운로드에 직접 연결하지 마십시오
  • 링크 텍스트가 새 창을 열 때 경고
  • 손상되거나 비어 있는 링크 제거

    • 키보드 액세스 가능성


    키보드 액세스 가능성은 사용자가 마우스나 터치패드 대신 키보드를 사용하여 전자상거래 사이트를 방문할 수 있게 한다.개발자로서 사용자는 키보드만 사용하면 모든 링크, 메뉴, 단추와 폼 필드에 접근할 수 있습니다.
    모든 사이트에서 요소가 키보드 내비게이션에 참여할 수 있도록 tabindex 전역 속성을 사용하십시오. tabindex global attribute는 요소가 초점을 맞추고 순서 키보드 내비게이션에 참여할 수 있음을 나타낸다.이것은 모든 HTML 요소에 추가할 수 있습니다.다음 예에서는 앵커 태그에 추가합니다.
    예:
    <a href=”http://www.google.com/" tabindex=”1">Google</a>
    또 다른 중요한 키보드 기능은 내비게이션을 건너뛰는 것이다.이것은 사용자가 일반적으로 모든 페이지의 맨 위에 있는 내비게이션 링크와 하위 링크의 긴 목록을 돌아갈 수 있게 한다.이것은 운동 장애가 있는 사용자에게 특히 유리하다.
    웹 사이트에서 이 기능을 실현하는 가장 좋은 방법 중 하나는 보이지 않는 링크를 사용하는 것이다.너는 여기서 implement the “skip navigation” 기능에 대한 다른 방식을 더 많이 읽을 수 있다.
    자세한 내용은 아래에서 확인할 수 있습니다.
  • HTML tabindex Attribute
  • WebAIM Tabindex

    • 맞춤형 구성


    BigCommerce 웹 사이트에 스크립트 또는 코드를 추가하여 액세스 용이성을 높일 수도 있습니다.나는 다음과 같은 몇 가지를 열거했다.
  • 이동, 태블릿 또는 데스크탑 보기를 위한 스크립트 또는 플러그인을 추가합니다.응답 설계를 사용하여 줌 상태와 뷰포트 크기에 맞게 사용자 기술을 일치시킵니다.
  • 인증코드를 제외하고 여러 요소의 신분 검증이나 대체 방법을 추가하여 신분을 검증한다.시각 인증 코드는alt 텍스트를 허용하지 않기 때문에 시력이 손상된 사용자는 사용할 수 없습니다.
  • 화면 판독기가 액세스할 수 있는 숨겨진 제목을 추가합니다.
    • 다음 예에서 개발자는 메뉴 단추에 추가 색 대비도를 추가할 수 있다.
    바닥글에 있어요.html 파일의 기본 테마 파일입니다. 이 스타일 코드 세션에서 메뉴 옵션의 가시성을 강화할 수 있습니다.
    <style>
.mobileMenu-toggle .mobileMenu-toggleIcon, .mobileMenu-toggle .mobileMenu-toggleIcon:after, .mobileMenu-toggle .mobileMenu-toggleIcon:before {
background: #fff;
}
</style>

    결론


    Google은 BigCommerce에 구축된 내용과 이러한 기능과 모범 사례를 활용하여 더욱 쉽게 접근할 수 있는 전자상거래 환경을 구축하는 방법을 기대하고 있습니다.

    관련 리소스


    맞춤형 BigCommerce 웹 사이트에 대한 자세한 내용은 DellDeveloper Documentation을 참조하십시오.
    또한 BigCommerce App Marketplace의 [사이트 도구] 범주에 있는 몇 가지 어플리케이션을 추천합니다.우리는 eSSential Accessibility 및 AccessiBe와 협력하여 귀하와 귀하의 업체가 더 많은 도구를 가지고 귀하의 사이트에서 접근성 기능을 실현할 수 있음을 증명했습니다.

    문장.

  • WCAG (Web Content Accessibility Guidelines)
  • Essential Accessibility
  • Audio Eye
  • AccessiBe

    • 비디오


  • WebAIM article on Typefaces and Fonts

    • 리소스 및 도구

  • WCAG Quick Reference
  • ANDI
  • Deque Axe Tools
  • Microsoft Accessibility Insights
  • Microsoft Narrator
  • macOS Voice Over
  • BigCommerce Theme Accessibility
    • 자주 사용하는div+css 3열 레이아웃 구조와 스타일 (1)
    Swift 컴파일러에 대해 물어봤는데, 그 강도가 몇 회까지 지속될지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage