>  기사  >  웹 프론트엔드  >  HTML 튜토리얼: 슈퍼 연결 생성

HTML 튜토리얼: 슈퍼 연결 생성

黄舟
黄舟원래의
2016-12-26 15:22:331555검색

탭 브라우징

포인팅 장치를 사용하지 않거나 사용할 수 없는 사용자는 바로 가기 탭 키를 사용하여 연결을 열 수 있으며 논리 키도 있어야 합니다. 탭 순서. HTML은 선형이지만 tabindex 속성을 사용하면 바로 가기 키의 순서를 정의할 수 있으며 이러한 논리적 탭은 자동으로 해당 위치에 배치됩니다.

단축키

단축키를 사용하면 키보드의 특정 키를 통해 더 쉽게 탐색할 수 있습니다(Alt 키나 Ctrl 키를 누른 상태에서 초점을 맞추기 위해). 포인팅 기기가 없으신 분들은 탭키를 이용해 연결하시는 것보다 더 빠르고 편리합니다.

모든 연결에 단축키를 설정할 필요는 없지만, 기본 내비게이션 연결에 대해서는 단축키를 설정해 두는 것이 좋습니다.

일부 페이지


참고

단축키의 문제점은 사용자가 단축키를 사용할 방법이 없는 경우가 많다는 것입니다. 키가 어디에 있는지, 키가 정확히 무엇인지 알고 있습니다(소스 코드를 보지 않는 한). 바로가기를 소리내어 읽을 수 있는 화면 판독기인 JAWS를 최대한 활용하려면 여전히 바로가기를 더 간단하게 만들어야 합니다.
'탐색 건너뛰기'(아래에 자세히 설명)와 같은 연결 기술을 사용하거나 별도의 페이지를 선택하여 단축키를 비롯한 사이트의 유용성 관련 기능을 설명할 수 있습니다. 점점 더 많이 사용되는 방법은 Windows 프로그램 메뉴의 방법과 유사하게 바로 가기 키에 해당하는 문자에 밑줄을 긋는 것입니다.


링크 제목

링크에 제목 속성을 추가하면 사용자가 가리키는 링크에 대한 설명을 제공하는 것이 좋습니다. 탐색을 향상할 수 있습니다.

이 연결이 Javascript를 실행하는 경우 Javascript 기능을 사용하지 않는 사용자에게 어떤 일이 발생하는지(또는 발생하지 않는지) 설명하는 것도 도움이 됩니다.


팝업

자바스크립트 팝업이라고 하면 꼭 사용하고 싶거나, 많은 사람(사용자)이 사용하라고 하면, onkeypress와 onclick을 사용하면 페이지를 더 쉽게 사용할 수 있습니다. 또한, 일반 페이지를 가리키는 href 속성이 포함된 링크를 포함하여 false를 반환하는 팝업 창이 기능적으로 정의되어 있으며, Javascript 기능을 사용하지 않는 사용자의 경우 이 페이지를 정상적으로 로드할 수 있습니다.

예:


...
Monster


인접 연결

링크는 다음과 같습니다. 화면 판독기에서 읽을 수 있도록 최소한 하나의 공백으로 구분하십시오.
문자, 연결 사이(예: 세로 막대 |── 연결 | 연결) 또는 주변 연결(예: 대괄호 []── [연결] [연결])을 사용하여 수행할 수도 있습니다. 목록 안에 연결을 넣는 것도 좋은 생각입니다. 그런 다음 병렬 목록에서도 CSS를 사용하여 디스플레이 스타일을 지정할 수 있습니다(display: in-line 사용).

탐색 건너뛰기

스크린 리더를 사용하는 사용자에게 탐색을 건너뛰고 콘텐츠로 바로 이동할 수 있는 기회를 제공해야 합니다. 이는 연결이 고정되어 있다고 가정하면(당연히 그래야 하는 대로) 사용자가 모든 페이지에서 동일한 정보를 살펴볼 필요가 없기 때문입니다. 특히 정보가 많은 경우에는 더욱 그렇습니다. 탐색을 건너뛰고 콘텐츠로 바로 이동하는 링크를 설정할 수 있습니다.

은 다음과 같습니다.



제목


탐색 건너뛰기










물론 비주얼 브라우저에 표시할 필요는 없으므로 CSS를 사용하여 숨길 수 있습니다.

참고

이것은 작은 CSS 트릭이지만 "탐색 건너뛰기"를 위한 특별한 약입니다. 여기에는 연결을 숨기는 방법이 포함됩니다.
가장 일반적인 해결 방법은 아마도 display: none을 사용하는 것이지만 일부 브라우저에서는 이 링크를 보지만 이해하지 못하므로 "탐색 건너뛰기" 링크가 표시되어야 합니다.
그러나 표시할 필요는 없습니다. 저명한 사용자에게 표시할 이유가 없습니다. 따라서 display: none을 포함하는 스타일을 고수하는 대신 요소 너비와 높이를 0으로 설정하는 것이 좋습니다(width: 0; height: 0;overflow:hidden;). 이는 동일한 시각적 효과를 가지지만 화면에서는 더 쉽습니다. 독자들이 이해하도록.

위 내용은 HTML 튜토리얼입니다. 슈퍼 연결 설정에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!