Wulin.com의 기사 소개 (www.vevb.com) : 모든 사람이 사용할 수있는 웹 사이트를위한 10 가지 사용 편의성 팁.
1. 로고에 대체 텍스트를 추가하십시오
여기에는 두 가지 이점이 있습니다. 화면 리더는 로고 이미지의 의미를 인식 할 수 있으며 이미지가로드되지 않으면 로고가없는 사용자에게도 부상을 입지 않은 사용자에게도 알 수 있습니다.
몇 가지 방법 :
<img src = logo.png alt = 웹 교육 웹 사이트>
또는 배경 이미지를 사용하여 로고를 구현하는 경우 제목 속성을 추가하여 구현할 수도 있습니다.
<span title = 웹 페이지 교육 웹 사이트> </span>
물론 링크 + 배경 이미지가 가장 좋은 방법이지만 제목 속성을 추가하는 것이 가장 좋습니다.
<제목 = 웹 교육 네트워크> 웹 교육 네트워크 </a>
2. 기본 랜드 마크를 추가하십시오
Aria Landmark는 W3C에 의해 정의 된 웹 사이트 유용성 규칙 세트입니다. 웹 사이트의 다른 모듈 또는 직접 호출되는 역할에 서술 적 랜드 마크를 추가하는 것은 웹 페이지를 더 잘 이해하기 위해 스크린 읽기 소프트웨어에 도움이되므로 시각적으로 손상된 사용자가 웹 사이트를 더 잘 사용할 수 있습니다.
<nav 역할 = 내비게이션>
<div id = maincontent 역할 = main>
<form action = search.php 역할 = 검색>
3. 초점 정의를 향상시킵니다
실제로, 많은 웹 사이트는 특히 IE 브라우저의 브라우저의 초점 스타일을 제거하기위한 모든 수단을 시도합니다. 실제로, 기본 초점이있는 브라우저를 갖는 것이 합리적입니다. 사용자의 현재 마우스 초점이 어디에 있는지 표시 할 수 있습니다. 이것은 키보드 스트리밍에 특히 중요합니다.
따라서 초점 스타일을 제거하지 마십시오. 기본 스타일이 잘 보이거나 주변이 아니라고 생각하더라도 (예 : 점선 상자, WebKit은 강조된 단단한 상자이며, Safari는 파란색이고 Chrome은 주황색입니다) 하이라이트 색상을 직접 정의 할 수 있습니다.
A : 초점 {
개요 : 1px 솔리드 레드;
배경 : 노란색;
}
제품 관리자 나 비주얼 디자이너가 포커스 상태를 제거해야한다고 주장하는 경우 하루 동안 마우스를 가져 가서 탭을 사용하여 링크를 전환 할 수 있다고 말하십시오. . .
4. 필요한 양식 항목을 정의하십시오
ARIA에 대한 속성을 사용하여 필요한 항목을 양식으로 정의하십시오. 주로 화면 읽기 소프트웨어를 알려주는 것입니다.
<입력 유형 = 텍스트 이름 = 사용자 이름 aria required = true>
5. 페이지에 H1을 추가하십시오
그 이유는 SEO뿐만 아니라 웹 사이트의 전반적인 유용성과 가독성에도 간단합니다. 또한 코드 강박 관념이 없습니까?
6. 테이블 헤더를 정의하십시오
일반적으로 많은 사람들이 모든 형태에 TD 태그를 사용하는 데 익숙합니다. 실제로 테이블에는 HD 태그뿐만 아니라 TH, COL, 스코프 등이 있습니다.
따라서 간단히 말하면 헤더를 TH 태그로 변경하십시오.
<th scope = col> 날짜 </th>
7. 테이블 설명을 정의합니다
테이블 앞에/후에 p를 추가하지 마십시오. 테이블에는 그림처럼 전용 캡션 태그가 있습니다.
<테이블>
<caption> 클래스 일정 </caption>
<tr>
...
8. 여기를 클릭하지 마십시오
이러한 링크 설명은 평범한 사람들에게는 중요하지 않지만 화면 읽기 소프트웨어는 매우 나쁩니다. 실제로 시각 장애가있는 사용자에게는 간섭입니다.
따라서 올바른 위치에서 링크를 사용하십시오.
9. Tabindex를 제거하십시오
옛날 옛적에 많은 사람들이 TabIndex를 사용하여 사용자 경험을 향상 시켰지만이 속성은 페이지의 정상적인 읽기 순서를 방해 할 것이며, 이는 시각적으로 손상된 사용자에게 비참하고 일반 사용자에게 친숙하지 않을 수 있습니다.
따라서 tabindex 속성을 남용하지 마십시오.
10. 온라인으로 확인하십시오
글쎄, 내가 이것을 보았을 때, 나는 그것이 실제로 광고라는 것을 알았지 만 웹 사이트 유용성 문제를 감지 할 수 있다면 좋은 일입니다. WebAim에서 개발 한 웹 도구는 URL을 입력하여 자동으로 감지합니다. 테스트는 꽤 좋았습니다.