모든 사용자가 웹사이트에 액세스할 수 있도록 하는 도구

장벽이 없는 World Wide Web은 모두에게 놀라운 장소가 될 수 있습니다. 웹사이트는 어떻습니까? 웹 접근성 지침을 따르나요?

당사 웹 팀은 접근성을 존중하며 귀하가 웹사이트에 액세스할 수 있도록 항상 도울 준비가 되어 있습니다. 또한 액세스 가능한 콘텐츠를 만들고 팀의 일상적인 콘텐츠 편집 방식에서 이미지에 액세스할 수 있도록 하는 방법에 대한 팁을 공유하고 싶습니다.

이 게시물은 접근성(줄여서 11y)에 대해 알고 싶었던 모든 것을 요약할 것입니다. 웹사이트를 액세스 가능하게 만드는 것의 의미, 사이트의 CMS(Drupal 모듈 및 WordPress 플러그인)를 기반으로 사용할 수 있는 접근성 도구 등.

웹사이트에 액세스할 수 있다는 것은 무엇을 의미합니까?

접근 가능한 웹사이트는 시각, 청각, 인지 또는 운동 장애에 관계없이 모든 사용자가 사용할 수 있는 웹사이트입니다. 색상 대비에서 키보드 탐색에 이르기까지 모든 면에서 친숙합니다.

뒤에 남겨진 사용자가 없습니다. 사이트의 콘텐츠와 UI는 보조 기술을 포함하여 다양한 방식으로 이해하고 제어하기 쉽습니다.

웹 사이트에서 접근성이 중요한 이유는 무엇입니까?

• 웹사이트 접근성(a11y)은 당신의 태도를 보여주기 때문에 브랜드의 평판을 향상시킵니다. 질병 통제 예방 센터(Centers for Disease Control and Prevention)에 따르면 미국 성인 4명 중 1명은 어떤 형태로든 장애가 있습니다. 대부분의 사람들은 장애를 가진 친구나 지인이 있으며 지침을 따르려는 귀하의 의지에 감사드립니다.
• 웹사이트를 액세스 가능하게 만들고 가능한 법적 소송으로부터 보호하십시오. 미국 장애인법(ADA)은 장애인에 대한 차별을 금지합니다. 모든 사람에게 평등한 접근과 기회가 제공되어야 한다고 명시되어 있습니다. 웹사이트에 액세스할 수 없는 비즈니스를 상대로 한 소송이 증가하고 있습니다.
• 접근 가능한 사이트는 훨씬 더 넓은 범위에 도달합니다. 수치를 추정하려면 위에서 언급한 미국 인구의 4분의 1을 고려하고 상황에 따른 문제가 있는 사용자를 추가하십시오. 여기에는 부러진 팔, 피곤한 눈 또는 사이트 콘텐츠를 모국어가 아닌 언어로 사용해야 하는 경우가 포함될 수 있습니다. 이 모든 경우에 사용자는 액세스 가능한 사이트를 좋아할 것입니다.
• 웹사이트를 액세스 가능하게 만들면 SEO가 향상됩니다. 보조 도구에 대한 준비는 여러 면에서 검색 엔진에 대한 준비와 유사합니다. 이미지를 설명하는 ALT 태그, 명확한 메타 설명, 비디오 캡션, 명확한 메뉴 계층 구조 및 기타 관행도 좋은 SEO 관행입니다.

내 웹사이트에 대한 접근성을 어떻게 추가합니까?

웹사이트에 액세스할 수 있도록 하려면 WCAG(웹 콘텐츠 접근성 지침)를 따라야 합니다. 이는 장애가 있는 사용자와 사이트 상호 작용의 모든 측면을 수용하는 국제 웹 표준입니다.

WCAG는 W3C(World Wide Web Consortium)의 WAI(Web Accessibility Initiative)에 의해 제공되었습니다. 네 가지 주요 원칙을 기반으로 합니다.

• 내용을 인지할 수 있음
• 인터페이스 요소가 작동 가능
• 콘텐츠 및 컨트롤을 이해할 수 있습니다.
• 내용은 충분히 견고하다

WAI는 ARIA(Accessible Rich Internet Applications Suite)도 개발했습니다. 이것은 인터페이스, 특히 풍부하고 인터랙티브한 인터페이스를 보조 장치가 더 잘 이해할 수 있도록 하는 속성 모음입니다. WAI-ARIA 속성(역할, 상태 및 속성)을 HTML 마크업에 추가할 수 있습니다.

위의 모든 사항을 고려하여 웹사이트에 액세스할 수 있도록 하는 데 필요한 몇 가지 핵심 사항은 다음과 같습니다.

• 텍스트가 아닌 콘텐츠에 해당하는 텍스트(이미지의 경우 ALT 태그, 비디오의 경우 캡션, 오디오의 대본 등)
• 적절한 HTML 마크업(필요한 경우 WAI-ARIA 사용)
• 논리적 레이아웃
• 키보드 컨트롤
• 클리어 필드 레이블
• 유익한 오류 메시지
• 명확하고 간단한 언어
• 유익한 링크 텍스트
• 충분한 색상 대비
• 텍스트 크기 조정
• 조정 가능한 오디오 볼륨
• 자동 재생 미디어 없음
• 일반 작업을 완료하는 데 더 많은 시간

그리고 훨씬 더.

Drupal 또는 WordPress 웹사이트를 액세스 가능하게 만드는 도구

사이트가 CMS로 구축된 경우 운이 좋은 것입니다. 웹 사이트에 액세스할 수 있도록 하려면 이미 내장 또는 추가 플러그인이 있어야 합니다. 웹 사이트에 쉽게 설치 및 구성되며 다양한 측면을 처리합니다.

당사 에이전시의 주요 전문 지식은 Drupal 및 WordPress이므로 웹 사이트를 보다 포괄적이고 규정을 준수하도록 만드는 Drupal 모듈 및 WordPress 플러그인과 같은 CMS에 대한 유용한 확장을 나열합니다.

Drupal 접근성 모듈

자동 대체 텍스트

자동 대체 텍스트 모듈은 Microsoft Azure Cognitive Services API를 사용하여 이미지를 설명하는 대체 텍스트를 생성합니다. 이것은 인공 지능이 웹 사이트에 액세스할 수 있도록 하는 방법의 예입니다.

CKEditor 접근성 검사기

일상적인 편집 작업에서 콘텐츠에 액세스할 수 있도록 하는 것이 중요합니다. CKEditor 접근성 검사기 모듈은 Drupal 콘텐츠 편집기에서 생성된 콘텐츠를 검사하고 발견된 문제를 즉시 해결합니다. 이 모듈은 곧 Drupal 코어의 일부가 될 수 있습니다.

ARIA 랜드마크 역할 차단

Block ARIA Landmark Roles Drupal 모듈을 사용하면 사이트 마크업에서 WAI-ARIA 사용이 더욱 향상됩니다. 사이트 레이아웃의 모든 블록에는 블록 구성 양식에서 직접 ARIA 랜드마크 역할 및/또는 ARIA 레이블을 할당할 수 있습니다.

고대비

고대비 모듈을 사용하면 Drupal 사이트의 활성 테마와 고대비 버전의 테마 간에 전환할 수 있습니다. 이렇게 하면 시력 문제가 있는 사용자가 웹사이트에 더 쉽게 액세스할 수 있습니다.

텍스트 크기 조정

조정 가능한 텍스트 크기는 웹 사이트에 액세스할 수 있도록 하는 요구 사항 중 하나이므로 텍스트 크기 조정 모듈은 매우 유용합니다. 웹 사이트 방문자에게 글꼴 크기를 더 크게 또는 더 작게 만드는 두 개의 버튼이 있는 블록을 제공합니다.

텍스트 크기(Drupal 7만 해당)

Text Size 모듈도 비슷한 역할을 합니다. 그것은 조정 가능한 텍스트 크기 체인저 또는 확대/축소 기능을 제공합니다. 확대/축소 기능은 Firefox의 텍스트 확대/축소와 유사하지만 모듈은 가변 미디어 개체, 픽셀 이미지 및 벡터 이미지에서도 작동할 수 있습니다.

htmLawed

웹사이트에 액세스할 수 있도록 하려면 적절한 HTML 마크업이 필수적입니다. htmLawed Drupal 모듈은 HTML에 대한 고도로 사용자 정의 가능한 제어를 제공합니다. htmLawed PHP 라이브러리를 사용하여 코드를 제한하고 정제합니다.

워드프레스 접근성 플러그인

WP 접근성

WP 접근성은 웹 사이트에 액세스할 수 있도록 도와주는 다기능 플러그인입니다. 다양한 기능에는 건너뛰기 링크 활성화, 이미지에 ALT 태그 적용, 언어 및 텍스트 방향 속성 추가, 글꼴 크기 및 색상 대비 도구 모음 제공 등이 포함됩니다.

WP 접근성 도우미(WAH)

다음은 기본 도구가 포함된 또 다른 다목적 플러그인인 WP 접근성 도우미(WAH)입니다. 사이트에 사용자 친화적인 접근성 도구 모음을 추가합니다. 주요 기능 중에는 링크 건너뛰기 메뉴, 조정 가능한 글꼴 및 색상 대비, 접근성 오류 스캔 등이 있습니다.

UserWay별 접근성

UserWay 플러그인은 특히 키보드 탐색에 주의하면서 웹사이트에서 보다 부드러운 탐색 경험을 제공합니다. a11y 요구 사항을 보다 잘 준수하도록 사이트 요소를 스마트하게 수정합니다.

접근성 위젯

접근성 위젯 플러그인은 사이드바 위젯을 추가하여 사용자가 WordPress 웹사이트에서 텍스트 크기를 쉽게 크거나 작게 만들 수 있도록 합니다. "Small", "Medium" 및 "Large" 텍스트 옵션을 제공합니다.

Gravity Forms용 WCAG 2.0 양식 필드

Gravity Forms 플러그인용 WCAG 2.0 양식 필드를 사용하면 유명한 Gravity Forms 빌더가 만든 양식을 사이트에서 더 쉽게 액세스할 수 있습니다. 필드 세트의 양식 필드를 래핑하고, ARIA 속성을 추가하고, 오류 수와 관련 링크 등의 페이지 오류 메시지를 제공합니다.

스크린 리더 WCAG 접근성 도구

다음은 텍스트 음성 변환 엔진을 추가하여 웹사이트에 액세스할 수 있도록 하는 플러그인입니다. 스크린 리더 WCAG 접근성 도구 플러그인은 50개 이상의 언어로 텍스트를 읽을 수 있습니다. 그러나 플러그인의 무료 버전은 100자로 제한됩니다.

WP 접근성 도구 및 대체 텍스트 찾기 누락

다음은 다양한 방법으로 웹사이트에 액세스할 수 있도록 도와주는 플러그인입니다. WP 접근성 도구 및 누락된 대체 텍스트 찾기는 누락된 대체 텍스트 찾기, 명암비 검사기, 규정 준수 체크리스트, 자동화된 접근성 감사 등을 제공합니다.

SOGO 접근성

WordPress용 SOGO 접근성 플러그인은 웹사이트의 코드를 스캔하고 자동으로 접근성 지원을 추가합니다. JS 및 CSS를 사용하여 접근성 기능을 개선하거나 활성화합니다.

당사 전문가는 귀하의 웹사이트를 액세스 가능하게 만들 준비가 되어 있습니다.

이 문서가 CMS를 기반으로 하는 기본 액세스 가능성 원칙, 요구 사항 및 도구에 대한 좋은 검토를 제공했기를 바랍니다.

위에 나열된 Drupal 모듈과 WordPress 플러그인은 많은 것 중 일부일 뿐입니다. 당사 웹 개발 팀은 귀하의 웹사이트에 가장 적합한 것을 처음부터 선택하거나 생성할 수 있습니다. 귀하의 웹사이트를 모든 면에서 액세스할 수 있도록 해드립니다!