여기서 우리는 폼 입력에 세련된 아직 의미 툴팁을 생성하는 HTML과 CSS를 사용합니다. 내가 사용하고 aria-describedby 입력 및 툴팁과의 관계를 만들 수 있습니다. 이 나타나거나 가져가 초점에 모두 사라지면 그 때 나는 스타일 툴팁 및 제어를 CSS를 사용합니다.
우리는 VoiceOver를 사용합니다. 시험에 맥 OS에 CMD + F5를 사용하는 것이.
몇 가지 자료 :
- CSS 삼각형
- 툴팁 - 스타일 가이드 a11y -이 체크를 직감하고 그 전환에 약간의 도움을하는 데 사용됩니다.
- 웹 접근성을 평가하기 VoiceOver를 사용
<! DOCTYPE HTML > < HTML LANG = "EN" > < 선두 > < 메타 캐릭터 = "UTF-8" /> < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" /> < 메타 HTTP-당량 = "X-UA-지원" 내용 = "즉 = 엣지" /> < 제목 > 에 Egghead A11y 툴팁 </ 제목 > < 링크 HREF = "은 https : //fonts.googleapis.= "스타일" /> < 스타일 > 체 { 폰트 패밀리 : "몬"산세 리프 ; 배경 : #eedbff ; 색상 : # 6505cc ; } 형성 { MAX-폭 : 40em을 ; 마진 : 1rem ; } .a11y 입력 도움말 - { 위치 : 상대 ; } 입력 [TYPE = "텍스트"] { 폭 : 100 % ; 최대 폭 : 100 % ; 패딩 : 0.75rem ; 마진 : 8px -2px 20 픽셀 ; 상자 크기 조정 : 국경 상자 ; 경계 반경 : 4 픽셀 ; 테두리 : 2 픽셀 고체 RGBA (101, 5, 204, 0.7) ; 폰트 크기 : 1rem ; 최소 높이 : 1600 픽셀 ; } 입력 [TYPE = "텍스트"] : 포커스 입력 [TYPE = "텍스트"] : 호버 { 개요 : 없음 ; 상자 그림자 : 2 픽셀 10px RGBA 2 픽셀 (60, 0, 130, 0.5) ; } 입력 [TYPE = "텍스트"] : 호버 + [역할 = "툴팁"] { 공개 : 볼 ; 불투명도 : 1 ; } [역할 = "툴팁"] { 전이 : 불투명 0.2 초, 0.5 초 용이성에서 아웃 ; 가시성 : 숨겨진 ; 불투명도 : 0 ; 위치 : 상대 ; 배경 : # 6505cc ; 색상 : #eedbff ; 패딩 : 0.5rem의 0.75rem ; 경계 반경 : 5px ; } [역할 = "툴팁"] :: 후 { 함량 : "" ; 위치 : 절대 ; 왼쪽 : 20 픽셀 ; 맨 : -5px ; 폭 : 0 ; 높이 : 0 ; 국경 왼쪽 : 5px 고체 투명 ; 국경 오른쪽 : 5px 고체 투명 ; 국경 - 하단 : 5px 고체 #의 6505cc ; } </ 스타일 > </ 머리 > < 몸 > < 형식 > < 라벨 에 대한 = "이름" > 이름 : </ 라벨 > < 스팬 클래스 = "a11y-입력 툴팁" > < 입력 유형 = "텍스트" ID = "이름" 아리아 - describedby = "a11y-툴팁" /> < 스팬 역할 = "툴팁" ID = "a11y-툴팁" > 성과 이름을 보냅니다. </ 스팬 > </ 스팬 > </ 형성 > <
