웹 액세스 가능성(인코딩)

웹 액세스 검사 목록(인코딩)

액세스 가능성 향상은 장애가 있는 사람에게만 적용되는 것이 아니라 웹 품질 향상에도 모두 적용될 수 있습니다.인코딩편의 목적은 키보드 사용자와 화면 리더 사용자가 상호작용을 가지도록 하는 것이다.

button, a 태그 설정(초점)

button의 초점을 설정합니다.button 자신도 적당한 곳에 표시해야 한다.화면 판독기에서 버튼으로 읽습니다.활성 상태의 스타일도 설정합니다.

button{
	/* outline: none; NG */
} 

aria-label을 설정하면 단추에 낭독 내용을 추가할 수 있습니다.다음은 명령취소 버튼입니다.

<button aria-label="元に戻す">&#xE000;</button>

a 레이블은 "링크"를 나타냅니다.링크임을 명시적으로 나타내는 밑줄을 표시합니다.

a{
	/* text-decoration: none; NG */
}

태그의alt 설정

그림의alt 탭을 설정하십시오.화면 판독기 읽기.또한 그림이 존재하지 않을 때alt값을 출력합니다.탭을 전환하면 + - 의 대체 정보도 전환할 수 있습니다.숨기기만 하면 화면 판독기가 읽습니다.(아리아-label도 먼저 삭제)

적절한 용어 선택(UI 면)

용어는 사용자의 권익에 공을 들였고 적당한 용어를 선택하면 사용자의 인지적 긴장도를 완화시킬 수 있다.이하 참고서 인용

보존이 아니라 보존

삭제, 폐기 아님

교체가 아닌 편집

의미 HTML

적당한 곳에서 섹시한 내용을 사용하세요.무의미하게div 라벨로 둘러싸는 것을 피하세요.화면 판독기에서도 섹시한 내용을 읽을 수 있다.따라서 다중 섹션 탭을 사용하면 '구역, 구역, 구역' 으로 읽힌다.의식적으로 그 부분을 인코딩하세요.

<section>
	<section>
		<section>
		</section>
	</section>
</section>

ARIA 속성에는 랜드마크 스크롤이 있고 HTML5에는 nav 태그, aside,article 태그 등이 준비되어 있습니다.따라서 지표 롤러는 필요 없다.나는 현재 거의 모든 사이트가 사용되지 않는다고 생각한다.부정적 HTML의 의미는 목적을 달성할 때 ARIA 속성을 사용할 필요가 없습니다.또한 각 영역의 목적 강조 및 마크업에 제목을 사용하는 것이 좋습니다.

<h2 aria-level="4">セクション2</h2>

aria-level로 스타일을 바꾸고 싶지 않지만 제목 단계를 변경할 수 있습니다.

주요 컨텐트 건너뛰기

초기 탭 키에 '본문 여기 있습니다' 단추를 붙여 주십시오.참고 사이트는 사이트 축소판 그림tab키를 눌러 주세요.

a.skip{
	position: relative;
	top: -100px;
	trasition: position, 0.5s ease;
}

페이지 링크

페이지 내에서 이동한 후 초점을 설정하지 않으면 사용자의 오해를 불러일으킬 수 있습니다.JavaScript를 사용하여 포커스를 설정할 수 있습니다.

target.attr('tabindex', '-1');
target.focus();

텍스트 이미지

텍스트 이미지를 사용하지 마십시오.대안으로 alt 태그에 설정하면 된다는 의견도 있지만 피하는 것이 좋다.웹 글꼴을 사용하십시오.

탭 전환

로드

대화 상자