접근성 이해: 5부-HTML 튜토리얼-php.cn

이것이 우리가 논의하고 싶은 마지막 원칙입니다. 대체로 말하면, 웹사이트의 콘텐츠와 탐색은 이해하기 쉬워야 한다고 명시되어 있습니다. 이러한 권장 사항 중 다수를 구현하는 책임은 플러그인이나 테마의 "최종 사용자"(또는 콘텐츠를 게시하는 사람)에게 있지만, 이러한 플러그인 및 테마의 개발자가 구현할 수 있는 몇 가지 권장 사항이 있습니다.

읽기 가능(3.1)

첫 번째 지침은 콘텐츠가 “읽기 쉽고 이해하기 쉬워야” 한다고 명시하고 있습니다. 제안의 대부분은 콘텐츠의 읽기 수준과 개발자와 관련이 없는 흔하지 않은 단어, 약어 및 두문자어의 사용과 관련되어 있습니다.

우리가 구현할 수 있는 한 가지 제안은 웹 페이지의 인간 언어를 프로그래밍 방식으로 식별할 수 있어야 한다는 것입니다. 이렇게 하려면 lang 属性在元素上指定语言。此外，应使用 dir 속성을 통해 콘텐츠가 오른쪽에서 왼쪽인지 여부를 표시하세요.

WordPress는 language_attributes() 来简化此操作，它会打印所需的属性。在主题的 header.php에서 제공:

으아악

language_attributes() 이 기능은 언어를 설정하고 필요한 경우 웹 사이트의 방향을 설정하고 출력을 필터링하여 플러그인(예: 다국어 플러그인)이 필요에 따라 속성을 변경할 수 있도록 합니다.

예측 가능(3.2)

두 번째 지침에서는 웹사이트가 예측 가능한 방식으로 보이고 작동해야 한다고 명시합니다. 테마의 HTML 마크업이 잘 구조화되고 논리적인지 확인하면 많은 권장 사항을 구현할 수 있습니다. 그 외에도 웹 페이지의 자연스럽고 논리적인 동작을 깨뜨리는 변경을 하지 말라고 권장하는 "하지 말라"는 조언이 많이 있습니다.

포커스 동작

이 시리즈의 네 번째 기사("실행 가능")에서 tabindex를 사용하지 않는 방법을 다뤘습니다. 이 권장 사항은 항목에 포커스가 있을 때 페이지 상태의 일부 변경을 트리거하는 것을 고려해서는 안 된다는 점을 명시하여 이를 기반으로 합니다.

예를 들어, 포커스를 받은 양식 버튼으로 인해 양식이 제출되어서는 안 되며, 포커스를 받은 링크로 인해 링크가 활성화되어서는 안 됩니다. 이는 해당 항목에 포커스가 있을 때 탐색 메뉴의 도구 설명이나 하위 메뉴가 나타나지 않아야 한다는 의미는 아닙니다. 이러한 예는 상태 변경을 의미하지 않습니다. 대략적으로 말하면 포커스가 있는 항목과 마우스를 가져가는 항목을 동일시할 수 있습니다.

초점을 가리지 마세요

포커스를 받는 요소에서 포커스를 제거하는 것은 피해야 합니다. 예를 들어 다음과 같은 행위는 절대 해서는 안 됩니다:

으아악

사용자 입력이 필요할 때 사용자를 도와주세요(3.3)

오류를 확인하세요

기본적으로 테마 개발자와 관련된 유일한 양식은 로그인/등록, 검색 및 댓글 양식입니다. 이 중 테마 개발자는 일반적으로 후자의 두 가지에만 중점을 둡니다. 양식을 검색하면 "오류"가 발생하지 않으므로 이 섹션에서는 주석 양식에 중점을 둡니다.

WordPress는 사용자에게 오류를 알리고 오류가 무엇인지 정확하게 알려주는 일을 훌륭하게 수행합니다. 그러나 사용자가 원래 페이지에서 벗어나도록 허용하고 "막다른 골목" 오류 페이지를 표시함으로써 이를 수행합니다.

了解辅助功能：第 5 部分

사용자가 원래 페이지로 돌아가면 양식이 초점을 잃고 다시 찾아야 합니다. 더 나은 해결책은 사용자가 양식을 올바르게 작성하기 전에 제출하지 못하도록 하는 것입니다. 그러나 이 작업을 수행할 때는 입력한 값이 유효하지 않다는 점을 사용자에게 전달해야 합니다. 그렇지 않으면 해당 값을 효과적으로 트래핑하게 됩니다.

사용 가능한 클라이언트 측 유효성 검사 스크립트가 엄청나게 많으며 자신만의 간단한 유효성 검사 스크립트를 만드는 것도 매우 쉽습니다. 중요한 것은:

사용자가 잘못된 값이 있는 필드를 떠난 후(또는 양식 제출을 시도한 후) 나타나는 오류 메시지는 오류가 존재하고 해당 위치(예: 식별 필드)를 알려야 합니다.
오류 메시지는 ARIA 속성 role="alert"을 사용하여 경고로 식별되어야 합니다.
적절한 경우 오류 메시지는 입력된 값이 허용되지 않은 이유를 사용자에게 최대한 명확하게 알려야 합니다.

이것은 이름 필드가 비어 있는 경우 오류 메시지를 추가하는 WebAIM 자체의 접근 가능한 양식 유효성 검사 예제(읽어보시기 바랍니다)를 기반으로 한 간단한 예제입니다.

으아악

WebAIM 샘플은 또한 사용자가 필드를 무효화하는 것을 방지하고 필드에 반환하여 오류를 수정합니다. 이렇게 하면 값이 비어 있을 때 사용자를 필드로 되돌리지 않는 것 을 권장합니다. 그렇지 않으면 양식을 제출할 의도 없이 실수로 필드에 초점을 맞추는 사용자를 실망시킬 것입니다.

이 시리즈의 앞부분에서 언급했듯이 의미를 전달하기 위해 색상이나 배치에만 의존해서는 안됩니다. 이 경우 오류 메시지는 관련 필드와 마찬가지로 텍스트에서 명확해야 합니다.

태그 제공

테마는 comment_form()를 사용하여 댓글 양식을 표시할 수 있으며 이는 접근 가능한 방식으로 태그를 처리합니다. 마찬가지로 기본 검색 양식에는 추가 작업이 필요하지 않습니다. 그러나 이러한 양식을 사용자 정의하거나 디자인할 때는 다음을 수행해야 합니다.

라벨이 항상 보이도록 하세요

라벨은 항상 표시되어야 합니다. 특히 이는 자리 표시자가 태그를 구성하지 않으며 검색에 사용되어서는 안 된다는 것을 의미합니다. 여기에는 몇 가지 이유가 있습니다:

对屏幕阅读器的支持不一致。
占位符通常采用柔和的颜色，可能难以阅读。
由于当字段获得焦点时占位符会消失，因此可能会给有认知障碍的人带来可用性问题。

在适当的情况下提供进一步说明

如果表单字段需要进一步的说明，可以在字段之后提供这些说明，但仍然使用 aria-scribedby 属性显式链接到该字段。该属性引用的元素的内容在field的标签后面读出。

以 W3C 网站为例：

<form> 

    <label for="fname">First name</label> 
    <input name="" type="text" id="fname" aria-describedby="fname-description"> 
    
    <p id="fname-description">A bit of instructions for this field linked with aria-describedby. </p> 

</form>

로그인 후 복사

但是，您应该注意，屏幕阅读器对此的支持并不一致。