Webflow에서 쉽게 접근할 수 있는 요소

스크린 리더 및 키보드 액세스 가능 Webflow 요소에 대해 알아보세요.

디자이너의 요소 추가 패널에서 구성 요소(예: 세그먼트, 탭, 시각적 개체 등)를 검색하고 프로젝트에 통합할 수 있는 옵션이 있습니다. 다음과 같이 표시된 요소는 얻기 쉬운 아래 제공된 차트에서는 사용자 지정 코드 없이 화면 판독기와 키보드 탐색에 대한 지원을 제공합니다. 그러나 키보드를 통해 특정 요소를 완전히 탐색할 수 있도록 하려면 특정 요소에 초점을 맞추는 스타일을 적용해야 합니다.

키보드를 통해 Tab, Dropdown, Slider 및 Navbar 구성 요소에 완전히 액세스할 수 있도록 하려면 포커스된 상태에 포커스 스타일("시각적 포커스"라고 함)을 설정하는 것이 필수적입니다. 이러한 방식으로 고급 사용자나 이동성이 제한된 개인과 같이 탐색을 위해 키보드를 사용하는 사용자는 사이트에서 쉽게 길을 찾을 수 있습니다. 시각적 초점에는 탐색 중에 활성 요소에 대한 시각적 표시가 포함되며 키보드 탐색에 의존하는 사용자에게 중요합니다. 포커스 상태 스타일 지정에 대한 추가 정보는 관련 리소스를 참조하세요.

또한 요소의 텍스트 콘텐츠와 요소 또는 페이지의 배경색 사이에 적절한 색상 대비를 유지하여 이러한 구성 요소에 액세스할 수 있도록 보장할 수도 있습니다. 명암비에 대한 추가 정보를 얻을 수 있습니다.

요소스크린 리더(ARIA) + 키보드 사용 가능



얻기 쉬운*
적용하다 집중된 상태 스타일:
1. 탭 링크 또는 전체 링크

쓰러지 다

얻기 쉬운*
적용하다 집중된 상태 스타일:
1. 드롭다운 토글
2. 드롭다운 링크 또는 모든 링크

그림

얻기 쉬운

버튼, 링크 블록

얻기 쉬운

분절

얻기 쉬운

버튼, 링크 블록

얻기 쉬운

상장

얻기 쉬운

컬렉션 목록

얻기 쉬운

네비게이션 바

얻기 쉬운

슬라이더

얻기 쉬운*
적용하다 집중된 상태 스타일:
1. 왼쪽 화살표
2. 오른쪽 화살표
3. 슬라이더 도트(.w-slider-dot:focus CSS를 수동으로 설정)

찾다

얻기 쉬운

라이트박스

얻기 쉬운

비디오, 유튜브, 배경 비디오

얻기 쉬운

지도

얻기 쉬운

파일 업로드

얻기 쉬운

구조

얻기 쉬운

온라인 쇼핑(장바구니, 장바구니에 추가, 온라인 결제, PayPal, 체크아웃)

얻기 쉬운

소셜 네트워크(페이스북, 트위터)

얻기 쉬운

피드백 제공

Webflow의 접근성에 관한 지속적인 피드백에 감사드립니다. 피드백을 제공하려면 다음 주소로 저희 팀에 이메일을 보내주세요. 접근성@webflow.com.

우리는 또한 귀하가 당사 및 다른 사용자들과 연결하는 것을 권장합니다. Webflow 포럼. 아이디어를 공유함으로써 Webflow 위시리스트, 귀하와 귀하의 웹사이트 방문자 모두가 더 쉽게 접근할 수 있는 제품을 만드는 데 기여할 수 있습니다.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)