감사 대시보드는 접근성과 관련된 일반적인 문제를 강조하므로 사이트를 활성화하기 전에 문제를 수정할 수 있습니다. 심각한 오류(빨간색 사각형으로 표시됨)는 사용자가 중요한 사이트 콘텐츠를 놓치거나 검색 성능이 저하될 수 있는 문제를 나타냅니다. 중간 정도의 오류(노란색 삼각형으로 표시됨)는 꼭 해결해야 할 문제는 아니지만 중요한 문제를 의미합니다.
이 튜토리얼은 다음을 포함하여 감사 대시보드에 대한 통찰력을 제공합니다.
접근성 문제 발견
접근성 문제 해결
접근성 문제 무시
접근성 문제 재검토
접근성에 대해 더 자세히 알아보려면 접근성 강좌에 등록하세요.
메모: 감사 대시보드는 구성 요소 내의 접근성 문제를 분석하지 않습니다. 따라서 구성 요소 내의 접근성 문제를 신중하게 식별하고 수동으로 해결하십시오. 구성요소에 대해 자세히 알아보세요.
접근성 문제 발견
감사 대시보드는 현재 설계 단계에서 일반적인 문제를 식별하고 해결하는 데 도움이 되는 4가지 영향력 있는 접근성 검사로 구성되어 있습니다. 다음 사항에 중점을 두고 있습니다.
대체 텍스트 누락
정보가 없는 링크 콘텐츠
건너뛴 제목 수준
반복 요소 ID
감사 대시보드를 활용하고 표시된 문제로부터 학습함으로써 이러한 고려 사항에 대한 기술과 인식을 향상시켜 나중에 고려하지 않고 설계 및 개발 워크플로에 통합할 수 있습니다.
다음을 클릭하여 감사 대시보드에 액세스합니다. 감사 대시보드 아이콘 디자이너의 왼쪽 하단에 있습니다.
전문가 팁: 사용 대체/옵션 + 유 키보드의 모든 항목을 빠르게 확장하거나 축소하려면 감사 대시보드.
유용한 팁: 감사 대시보드는 텍스트 색상 대비 비율 검사를 다루지 않지만 Webflow는 디자인하는 동안 텍스트의 접근성을 확인하는 데 도움이 되도록 텍스트 요소에 대한 색상 선택기에 내장된 색상 대비 검사기를 제공합니다.
대체 텍스트 누락
대체 텍스트는 시각 장애가 있거나 시각 장애가 있는 방문자를 위해 이미지 콘텐츠의 모양이나 기능을 설명합니다. 파일을 로드하지 못하거나 사용자가 이미지를 비활성화한 경우에도 이미지 대신 나타납니다. (SEO에도 도움이 됩니다.)
참고하면 도움이 됩니다: 화면 판독기는 텍스트와 이미지 콘텐츠를 음성으로 변환하는 도구로 시각 장애인, 시각 장애인 또는 시각 장애가 있는 개인이 활용합니다. 인지 장애나 학습 장애가 있는 사람들에게도 도움이 됩니다.
누락된 대체 텍스트를 수정하는 방법을 알아보세요.
감사 대시보드에서 누락된 대체 텍스트를 신고한 이유
대체 텍스트가 없으면 의미 있는 대체 텍스트 없이 이미지를 포함했거나 이미지를 장식용으로 지정하지 못했음을 의미합니다. 이미지가 페이지의 다른 곳에서는 찾을 수 없는 필수 정보를 전달하는 경우, 이미지를 볼 수 없는 개인은 해당 정보를 놓치게 되며 검색 엔진은 이미지 내용을 해석하는 데 어려움을 겪게 됩니다.
메모: 감사 대시보드는 라이트박스 미디어 구성 요소 내의 이미지에 대한 대체 텍스트를 평가하지 않습니다. 또한 CMS에 링크된 이미지에 대한 대체 텍스트는 평가하지 않습니다. 라이트박스 미디어 구성 요소 내의 이미지와 CMS에 연결된 이미지에 대체 텍스트를 추가할 때는 주의하세요. CMS 바인딩 이미지에 대한 대체 텍스트 설정에 대해 자세히 알아보세요.
정보가 없는 링크 콘텐츠
링크 텍스트는 명확하고 맥락 없이도 이해할 수 있어야 하며 독자에게 링크의 목적과 목적지를 알려야 합니다.
정보가 없는 링크 콘텐츠를 수정하는 방법을 알아보세요.
감사 대시보드에서 설명 콘텐츠 없이 링크에 플래그를 지정하는 이유
빈 링크는 의미 있는 텍스트나 이미지 대체 텍스트가 부족한 링크를 의미하며 화면 판독기에 의존하는 사용자에게 혼란을 야기합니다.
이미지의 래스터화된 텍스트(텍스트가 독립적인 텍스트 단위가 아닌 이미지의 일부임을 나타냄)는 화면 판독기나 검색 엔진에서 해석할 수 없습니다. 이미지와 함께 사용된 설명 텍스트가 실제 텍스트 구성 요소인지 확인하는 것이 좋습니다.
접근 가능한 타이포그래피에 대해 알아보세요.
건너뛴 제목 계층
제목은 목차와 유사하게 페이지의 배열과 레이아웃에 대한 인식을 개인에게 제공합니다. 이를 통해 사람들은 페이지 구조를 신속하게 탐색하고 콘텐츠를 나누어 시각적으로 또는 화면 판독기를 통해 쉽게 스캔할 수 있습니다. 제목 구조가 없거나 부적절하면 방문자는 원하는 것을 찾기 위해 추가 노력을 하게 됩니다.
건너뛴 제목 계층을 수정하는 방법을 알아보세요.
감사 패널에서 건너뛴 제목 계층을 표시하는 이유
건너뛴 제목 계층은 제목 요소(H1, H2 등)가 제목 계층을 준수하지 않음을 의미합니다. 올바른 제목 계층 구조. H1은 최상위 제목으로 간주되고, H1 아래의 H2 제목 그룹 콘텐츠, H3 제목은 H2 제목 아래에 속하는 식으로 간주됩니다.
제목 수준을 건너뛰면 제목 계층 구조가 중단됩니다(예: H1 및 H3 제목은 있지만 H2 제목은 없음). 이는 인지 장애가 있는 개인과 스크린 리더를 사용하는 개인에게는 당황스러울 수 있습니다.
복제된 요소 ID
디자이너와 개발자는 고유 식별자(ID)를 사용하여 사이트 접근성을 향상하거나 링크, 스크립팅 또는 스타일 지정(CSS 사용)을 포함하는 사용자 정의 코드로 사이트 기능을 향상합니다. 각 ID가 전체 웹페이지에서 고유한지 확인하는 것은 웹 개발의 표준 관행으로 간주됩니다(즉, 각 ID는 하나의 요소만 식별함).
중복된 요소 ID를 표시하는 감사 패널의 이유
여러 요소에 동일한 ID를 사용하면 공유 ID가 있는 초기 요소만 대상으로 하기 때문에 맞춤 코드나 스크린 리더가 제대로 작동하지 않을 수 있습니다. 최신 브라우저는 일반적으로 중복 ID를 허용하지만 사이트 방문자가 최종 사이트에서 결함을 경험할 위험이 여전히 높습니다.
감사 패널을 활용하면 페이지에서 중복 ID를 찾아내고 사전에 해결할 수 있어 사용자 정의 코드를 디버깅하는 데 소요되는 시간을 줄이고 게시된 사이트의 접근성을 손상시킬 위험을 완화할 수 있습니다.
접근성 문제 해결
많은 경우 접근성 문제를 해결하려면 부재 분류를 추가하는 것이 포함됩니다. 우리는 다음을 논의할 것입니다:
누락된 대체 텍스트를 수정하는 방법
설명이 없는 링크 콘텐츠를 수정하는 방법
건너뛴 제목 계층을 해결하는 방법
중복된 요소 ID를 수정하는 방법
누락된 대체 텍스트를 수정하는 방법
자산 패널에서 이미지에 대체 텍스트를 할당할 수 있습니다.
또는 이미지가 의미 정보를 전달하기 위한 것이 아니고 순전히 장식용인 경우 화면 판독기에서 건너뛰도록 이미지를 장식용으로 명시적으로 지정할 수 있습니다.
메모: 이미지가 장식용인지 정보용인지 확인하려면 페이지에서 해당 이미지를 제거하세요. 이미지 없이 정보가 누락된 경우 정보 제공용이므로 대체 텍스트가 필요합니다. 링크, 버튼, 로고로 작동하거나 중요한 정보를 포함하는 이미지에는 항상 대체 텍스트가 필요합니다.
중대한: 평가 패널은 라이트박스 멀티미디어 구성 요소 내의 시각적 개체에 대한 대체 텍스트를 확인하지 않습니다. 또한 평가 패널은 CMS 바인딩 시각적 개체에 대한 대체 텍스트를 분석하지 않습니다. 라이트박스 멀티미디어 구성 요소 및 CMS에 연결된 시각적 개체 내의 모든 시각적 개체에 대한 대체 텍스트를 포함했는지 확인하세요. CMS 바인딩된 시각적 개체에 대한 대체 텍스트 설정에 대해 자세히 알아보세요.
감사 패널에 대체 텍스트가 없는 이미지는 2가지 범주로 분류됩니다.
자원
텍스트 콘텐츠
리소스 category 아래에 대체 텍스트가 누락된 이미지
시각적 개체가 다음으로 분류될 때마다 자원 감사 패널에서 분류하면 캔버스의 시각적 개체가 대체 텍스트가 없는 리소스에 연결되어 있음을 나타냅니다.
이미지 구성 요소에서 누락된 대체 텍스트를 수정하려면:
다음을 탭하세요. 원하는 작업 포인터 (이렇게 하면 리소스의 기본 설정으로 이동하게 됩니다. 리소스 패널)
선택하다 "나를 위해 찾아보세요" 내 대체 텍스트가 없음 시각적 개체에 대한 대체 텍스트 설정을 자동으로 찾아내는 인터페이스 리소스 패널
포함하다 설명적인 대체 텍스트를 사용하거나 시각적 개체를 다음과 같이 지정합니다. 장식용
기억하면 좋은 점: 정보 인터페이스를 클릭하고 캔버스에서 끌어서 위치를 변경할 수 있습니다.
자산 패널의 시각적 개체에 구성된 대체 텍스트를 대체하려는 경우 캔버스의 개별 시각적 개체에 사용자 지정 대체 텍스트를 도입할 수 있습니다.
캔버스의 시각적 요소에 사용자 지정 대체 텍스트를 추가하려면 다음을 수행합니다.
캔버스에서 시각적 구성 요소를 선택합니다.
“를 선택하세요.기어” 아이콘에 액세스하려면 시각적 설정
'개인 설명'을 선택하세요. 대체 텍스트 드롭다운 목록 해당 시각적 개체에 대한 사용자 지정 대체 텍스트를 입력합니다.
특정 시각적 개체에 대체 텍스트를 설정하는 방법에 대해 자세히 알아보세요.
텍스트 콘텐츠 category 아래에 대체 텍스트가 누락된 이미지
시각적인 부분이 포함된 경우 텍스트 콘텐츠 감사 패널의 category는 텍스트 요소 내의 시각적 개체에 대체 텍스트가 없음을 나타냅니다.
텍스트 요소 내의 시각적 개체에서 누락된 대체 텍스트를 해결하려면 다음을 수행하세요.
탭하세요. 원하는 작업 포인터 캔버스에서 텍스트 요소를 찾고 대체 텍스트가 없음 상호 작용
선택하다 "나를 위해 찾아보세요"에서 대체 텍스트가 없음 시각적 개체에 대한 대체 텍스트 설정을 자동으로 찾는 인터페이스 리소스 패널
통합 설명적인 대체 텍스트를 사용하거나 시각적 개체를 다음과 같이 분류합니다. 장식용
자산 패널의 이미지에 대해 정의된 대체 텍스트를 바꾸려는 경우 서식 있는 텍스트 요소 내의 개별 이미지에 대해 개인화된 대체 텍스트를 포함할 수 있는 옵션이 있습니다.
서식 있는 텍스트 요소 내의 이미지에 대해 사용자 정의된 대체 텍스트를 제공하려면 다음을 수행하십시오.
디자이너 캔버스의 서식 있는 텍스트 요소 내부에 있는 이미지를 두 번 클릭하세요.
'를 탭하세요.렌치" 기호
'Custom'을 선택하세요. 대체 텍스트 드롭다운 특정 이미지에 대한 사용자 정의 대체 텍스트를 입력합니다.
단일 이미지의 대체 텍스트 구성에 대해 자세히 알아보세요.
중요한: 감사 패널은 라이트박스 미디어 요소 내의 이미지에 대한 대체 텍스트의 유효성을 검사하지 않습니다. 또한 감사 패널은 CMS 바인딩 이미지에 대한 대체 텍스트를 확인하지 않습니다. 라이트박스 미디어 요소 내의 모든 이미지와 CMS에 연결된 이미지에 대해 대체 텍스트를 제공했는지 확인하세요. CMS 바인딩 이미지의 대체 텍스트 정의에 대해 자세히 알아보세요.
효과적인 대체 텍스트 작성을 위한 팁
이미지의 목적, 의도, 의미를 설명하세요.
주변 콘텐츠를 반복하지 마세요(예: 캡션이 이미지를 완전히 설명하는 경우 대체 텍스트가 필요하지 않거나, 대체 텍스트가 중복되거나, 개인의 약력에 대한 대체 텍스트에서 개인의 이름이 중복되는 경우). 이는 반복적인 텍스트이며 이미지나 모양을 설명하지 않습니다. 개인.)
구두점을 포함합니다(화면 판독기가 이미지에 대해 좀 더 사람과 유사한 설명을 제공할 수 있도록 지원).
시각 장애가 있는 방문자가 대체 텍스트에서 이미지에 대한 실질적인 정보를 얻을 수 있도록 텍스트를 구성하고 설명을 1~2 문장의 필수 세부 정보로 제한합니다(설명을 너무 과도하게 설명하지 마세요).
관련 맥락을 추가하지 않는 한 "차트", "이미지" 또는 "다이어그램"과 같은 모호한 용어는 피하십시오. 대신 차트, 다이어그램 또는 이미지에 묘사된 의미나 추세를 설명하십시오.
이 문제를 해결하려면 페이지의 모든 링크 구성 요소에 목적이 분명하고 설명적인 텍스트가 포함되어 있는지 확인하세요.
'자세히 알아보기', '링크' 또는 '여기를 클릭하세요'와 같은 일반적인 용어는 사용하지 마세요. 동안 감사 패널 일반적인 용어에 대한 구체적인 조언을 제공하지 않으며 링크의 기능에 대해 명확하고 명시적인 언어를 사용하여 유용성을 향상시킵니다(예: "자산 다운로드").
이미지와 병합된 텍스트 없이 자산을 활용할 수도 있습니다. 대신 이미지 자산에 텍스트 요소를 겹쳐보세요.
이미지 링크(예: 아이콘 버튼)를 사용하는 경우 해당 링크에 대한 대체 텍스트도 포함해야 합니다.
대상 작업 화살표(링크 옆에 있는 감사 패널의 화살표)를 선택한 다음 이미지/아이콘에 대한 대체 텍스트를 추가하여 링크를 수정합니다(링크에 이미지가 포함된 경우).
요소 설정(이미지 요소에 대한 설정)에서 대체 텍스트 수정 사항을 조정하여 대체 텍스트의 설명을 향상시킬 수 있습니다.
자원
링크 구성 방법과 사용 가능한 옵션에 대해 자세히 알아보려면 링크 문서와 WCAG 링크 목적 기준.
생략된 제목 수준을 해결하는 방법
제목은 콘텐츠 프레임워크를 반영하고 섹션 콘텐츠의 윤곽을 명확하게 설명하는 논리적인 숫자 순서를 따라야 합니다.
예를 들어, 이 자습서의 제목(감사 패널 소개)은 이 페이지의 유일한 수준 1 제목(H1)이고, 이 자습서의 하위 제목은 수준 2 제목(H2)이며 해당 하위 제목 내의 모든 제목은 다음 수준을 따릅니다. (H3, H4 등). 이 단락의 제목은 레벨 3 제목이며 이 섹션의 업데이트된 내용을 설명합니다.
모든 요소 ID는 전체 웹페이지에서 고유해야 합니다. 즉, 각 ID는 개별 요소만을 식별합니다.
둘 이상의 요소에 동일한 ID를 할당하면 ID를 추가할 때 설정 패널에 오류 알림이 표시되고 후속 사이트 감사가 실패하게 됩니다. 감사 패널은 중복된 ID가 있는 모든 요소와 구성 요소 인스턴스를 강조 표시하여 사이트에서 중복된 ID를 즉시 식별하고 수정할 수 있도록 합니다.
중복된 ID를 수정하려면:
탭하세요. 원하는 작업 화살표 플래그가 붙은 곳에 인접한 ID 에서 감사 패널 복제된 요소를 휘두르는 모든 요소와 구성 요소 인스턴스를 표시합니다. ID
다음을 클릭하세요. '나를 표시하세요' 화살표 플래그가 지정된 요소 옆(이 작업을 수행하면 설정 패널 어디에 ID 설립되었습니다)
4년 이상의 경험을 갖춘 Webflow 전문가이자 프론트엔드 개발자입니다. 저는 뛰어난 Webflow 경험을 만들기 위해 다재다능한 기술 세트(HTML, CSS, JS, Figma, Adobe)를 가져옵니다. 70개 이상의 프로젝트를 통해 맞춤형 코드와 시각적 개발을 원활하게 혼합하는 능력을 연마했습니다. 체계적이고 마감일을 준수하며 성장에 대한 열정을 갖고 있는 저는 역동적인 환경에서 탁월한 능력을 발휘합니다. 경계를 넓혀 놀라운 것을 만들어 봅시다.