운용성: 접근성, 4부

대체로 이는 모든 사용자 가 탐색할 수 있도록 웹사이트가 안전 해야 한다는 원칙입니다. 여기에는 키보드만 사용하여 전체 웹사이트에 액세스하기 위한 지침이 포함되어 있습니다. 또한 웹사이트가 사용자 입력(키보드 또는 기타 수단을 통해)에 응답하는 방식은 예측 가능하고 명확하며 안전해야 합니다.

이 마지막 사항은 주로 발작을 일으킬 수 있는 웹 사이트의 모든 기능이 기본적으로 비활성화되어 있는지 확인하고 해당 기능을 활성화하기 전에 사용자에게 경고하는 것을 의미합니다. 이 원칙은 또한 사용자에게 작업을 완료하는 데 "충분한 시간"을 제공하기 위한 지침을 제공하지만 여기서는 이에 대해 다루지 않습니다.

키보드 접근성(2.1)

키보드만 사용하여 웹사이트를 탐색하고 사용할 수 있다는 것은 접근성의 가장 중요한 측면 중 하나입니다. 시각 장애가 있는 사용자는 거의 독점적으로 키보드에 의존하는 반면, 운동 장애가 있는 사용자는 마우스 제어가 어려워 키보드 액세스에 의존할 수도 있습니다. 어떤 사람들은 손을 덜 사용하거나 전혀 사용하지 않고 더 큰 키보드, 마우스 스틱, 헤드 스틱, 단일 스위치 또는 시프 앤 퍼프에 의존할 수도 있습니다.

WebAIM 웹사이트에서 이러한 장치에 대한 지침을 찾을 수 있지만 기본적으로 사용자 입력을 키보드 스트로크로 변환합니다. 키보드로 웹 사이트에 액세스할 수 없는 경우 해당 장치를 사용하는 모든 사용자는 웹 사이트를 사용할 수 없습니다.

다행히도 테마나 플러그인 키보드에 액세스할 수 있게 만드는 것은 비교적 간단합니다. 몇 가지 핵심 사항은 다음과 같습니다.

키보드를 통해 전체 메뉴에 접근할 수 있는지 확인하세요

많은 테마에서는 메뉴 항목 위로 마우스를 가져가면 하위 메뉴가 표시됩니다. 괜찮지만 일반적으로 상위 메뉴 항목에 초점이 맞춰지면(호버링과 반대로) 하위 메뉴가 표시되지 않습니다. :hover 的任何相关规则并将其应用到 :focus 복사하면 전투의 절반이 완료됩니다. 하위 메뉴 항목은 전체 메뉴 내에서 사용자 탭으로 나타납니다. 그러나 사용자가 하위 메뉴로 전환하면 상위 메뉴는 초점을 잃고 하위 메뉴는 사라집니다. 이는 JavaScript를 사용하여 수정할 수 있습니다. 이 시리즈의 다음 기사에서는 이에 대해 자세히 설명하고 JavaScript가 아닌 폴백을 제공하는 방법을 설명합니다.

사용자를 “트랩”하지 마세요

"기본" 양식 입력(선택, 입력, 라디오 등) 키보드에 액세스할 수 있도록 하기 위해 아무 것도 할 필요가 없습니다. 그러나 페이지의 특정 부분(양식 필드 포함)에 초점이 맞춰지면 키보드만 사용하여 해당 페이지를 반드시 이동해야 합니다. 그렇지 않으면 사용자가 사실상 꼼짝 못하게 됩니다. 이는 일반적으로 기본 동작이므로 재정의하지 않아야 합니다.

탐색을 간단하고 명확하게 만드세요(2.4)

가이드에는 두 가지 유형의 제안이 있습니다. 즉, 사용자가 현재 어디에 있는지 명확하게 알려주는 것과 사용자가 가고 싶은 곳으로 쉽게 이동할 수 있도록 하는 것입니다.

이 작업을 수행할 때 조언을 따르는 것에는 이미 많은 테마가 수행하는 작업이 포함됩니다. 즉, 페이지 전체에 걸쳐 일관된 탐색 메뉴를 갖고, 현재 페이지를 강조 표시하고, 사용자가 사이트에서 자신의 위치를 ​​빠르게 확인할 수 있도록 합니다(예: 탐색경로 사용).

스타일: 적절한 초점

키보드를 사용하여 웹을 탐색할 수 있는 핵심 부분은 현재 집중하고 있는 내용을 정확하게 볼 수 있다는 것입니다. 현재 포커스를 받고 있는 요소는 페이지의 나머지 부분과 명확하게 구별되고 구별 가능해야 합니다. 따라서 대체 스타일을 제공하지 않는 한

을 피해야 합니다.

으아악 outline:none;포커스 순서 및 Tabindex

키보드 접근성의 또 다른 중요한 부분은 Tab 키가 예측 가능하고 자연스럽게 동작한다는 것입니다. 예를 들어 현재 초점이 양식 필드에 있는 경우 다음 탭을 통해 해당 양식의 다음 필드로 이동하고 싶습니다. Tab 키를 누르면 페이지에서 초점이 비정상적으로 위아래로 이동하는 경우 사용자에게 실망스럽고 혼란스러울 수 있습니다.

tabindex 사용을 피하세요

: tabindex 속성을 사용하면 탭 키를 통해 요소에 액세스하는 순서를 변경할 수 있습니다. 그러나 이 시리즈의 기사 2에 있는 DOM 구조에 대한 조언을 따르면 탭 순서는 페이지의 "자연스러운" 순서를 반영해야 합니다. tabindex에는 용도가 있지만 그 용도는 거의 없으며 열악한 사이트 구조를 "수정"하는 데 사용하면 더 많은 문제가 발생할 수 있습니다. 가장 좋은 접근 방식은 tabindex를 사용하지 않고 대신 테마가 논리적 DOM 구조를 생성하고 CSS를 사용하여 시각적 표현을 변경하도록 하는 것입니다. "자세히 읽기" 또는 "계속 읽기"를 피하세요

스크린 리더 사용자는 링크 사이를 이동하고 사이의 텍스트를 건너뛰는 경우가 많으며, 각 링크에서 스크린 리더는 "링크 [링크 텍스트]"를 읽습니다. 따라서 "자세한 내용을 보려면 링크", "여기를 클릭하려면 링크" 또는 "계속 읽으려면 링크"를 반복적으로 듣는 것은 이러한 사용자에게 매우 도움이 되지 않습니다. 이 경우 링크에 컨텍스트를 추가하면 게시물 제목만 제공됩니다. 따라서 “계속 읽기” 대신 “계속 읽기 [포스트 제목]”이 있습니다.

WordPress 테마에서 이 작업을 수행하려면

필터를 연결하고 "계속 읽기" 링크를 추가하기만 하면 됩니다.

으아악 excerpt_more이는 "자세히 보기" 링크에 대한 올바른 컨텍스트를 제공합니다. 그러나 일부 개선이 이루어질 수 있습니다.

首先，添加文章标题通常会破坏主题的美感，并且对于有视力的用户来说，这是多余的，因为“阅读更多”链接相对于文章标题和摘录的位置将使上下文显而易见。为了解决这些问题，我们可以“隐藏”文章标题，但屏幕阅读器仍然会阅读它们。

这意味着我们不能使用 display:none 或visibility:hidden; 作为屏幕-读者了解这些属性并会忽略内容。相反，我们可以将文本放置在屏幕外或使用 clip 属性：

.screen-reader {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

“屏幕阅读器类”有很多不同的示例；这个特定的类取自 Bootstrap 3。接下来，将适当的类添加到文章标题中，具体将上面的第 5 行替换为：

__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ), 

其次，虽然这将为用户提供链接指向何处的指示，但他们仍然必须在到达帖子标题之前收听“链接继续阅读...”。理想情况下，您应该将冗余信息放在链接文本的末尾，或者从锚标记中完全省略它，以减少识别链接所需的时间。

对于屏幕阅读器用户来说，不在链接文本前面添加冗余信息的另一个好处是屏幕阅读器通常会在页面上生成链接列表。如果您的许多链接都以相同的文本开头，这可能会使找到所需链接变得更加困难，特别是如果您的联系页面的链接位于“H”下方，因为它显示“如何联系我们”。

正确使用 <title></title> 标签

应使用 <title></title> 标签来识别用户的当前位置。该信息由屏幕阅读器读出，并显示在搜索结果以及屏幕窗口和浏览器选项卡中。为了让用户轻松识别他们所在的位置（或搜索到的内容），此标题标签应包含页面的标题和网站名称。理想情况下，网站名称应该放在最后，这样使用屏幕阅读器的人就不必在每次页面加载时先听您网站的名称，然后才能听到页面标题。

标题标签可以添加到主题中：

<title><?php wp_title(); ?></title>

要添加网站标题：

/** * Append site title to page title */ 
function mytheme_wp_title( $title, $sep, $seplocation ){ 
    return $title . ' | ' . get_bloginfo('name'); 
} 
add_filter( 'wp_title', 'mytheme_wp_title', 10, 3 );

跳到内容

通常，网站会有一个通用的标题和导航菜单，除了突出显示用户当前位置之外，它们将保持完全相同。必须通过选项卡浏览所有这些链接，或者在每次页面加载时听屏幕阅读器重复它们，是乏味且令人沮丧的。我们这些拥有良好（足够）视力和运动技能的人可以立即跳转到内容，并且我们可以让那些没有良好视力和运动技能的人也能轻松完成此操作。

如果您在 WordPress 管理员中，并在页面加载后按 Tab，您会注意到顶部会出现一个链接，其中显示跳到主要内容 -left（如果再次按 Tab，将出现跳到工具栏链接）。该链接位于页面的最顶部，因此它是选项卡切换时获得焦点的第一个链接，也是屏幕阅读器读出的网站的第一个链接。通过该链接，用户可以直接跳转到主要内容，跳过中间所有不必要的链接和网站徽标。

创建跳转到内容是让您的网站更易于导航的好方法，而且非常简单，只需要少量 HTML 和一些 CSS。

首先是 HTML。该链接应位于页面的最顶部，紧邻 标签下方。在大多数主题中，这将是 header.php 文件：

</head> 

<body> 

    <a class="skip-link" href="#main">
        <?php _e( 'Skip to main content', 'mytheme' ); ?>
    </a> 
    
    //Rest of page content

这里唯一需要注意的是：

1. href 值，在本例中为“main”。这必须与包含页面内容的元素的 ID 匹配。
2. 链接的类，我们将使用它来设置样式。

关于 (1)，您的循环将类似于：

<div id="main" class="hfeed" role="main"> 

    <?php if ( have_posts() ) : ?> 
    
        //The Loop
    
    <?php else: ?>
        
        //No posts found... display search
      
    <?php endif; ?> 
    
</div>

您的页面模板可能类似于：

<div id="main" role="main"> 

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
    
        <h1 class="entry-title"> <?php the_title(); ?> </h1> 
        
        <div class="entry-content"> 
            <?php the_content(); ?> 
        </div> 
        
    </div> 
    
</div>

现在剩下的就是向链接添加一些样式。

首先，我们希望链接隐藏，但不对屏幕阅读器隐藏，因此我们会将链接放置在屏幕外，而不是使用 display:none（在这种情况下，屏幕阅读器会忽略它）。

其次，当它获得焦点时，我们希望使链接变得明显，因此很明显以前隐藏的链接现在可见并具有焦点。

.skip-link { 
    position: absolute; 
    left:6px; 
    top:-100px; /* position offscreen so it's not visible, but can receive focus*/ 
    z-index: 100000; /* Position above WordPress' toolbar */ 
    font-size: 1em; 
    font-weight: bold; 
    display: block; 
    background: #ee7b00; 
    color: white; /*Style the link so that's clear*/ 
    height: auto; 
    width: auto; 
    line-height: normal; 
    padding: 15px 25px; 
    text-decoration: none;
    -webkit-transition: top 1s ease-out; 
    transition: top 1s ease-out; 
} 

.skip-link:focus { 
    top: 5px; /* Move onto screen */ 
    -webkit-transition: right 0s; 
    transition: right 0s; /*Animate, to make its appearance obvious */ 
}

确保网站导航安全 (2.3)

最后，请注意，有些人容易患光敏性癫痫发作。这可能是由闪烁或闪光效果引起的。去年 12 月，杰夫·钱德勒 (Jeff Chandler) 在一名访客警告杰夫·钱德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引发癫痫发作后。

这不仅限于癫痫发作，它还可能引发某些人的偏头痛或惊恐发作。它也不限于雪花效果 - 视频、轮播或音频文件自动播放也可以触发这些效果。

이것은 대부분 편집자의 결정이고 개발자로서 자동 재생을 차단하는 것이 우리의 임무는 아니지만 최소한 기본적으로 비활성화하여 이를 방지할 수 있습니다. Jeff는 자신의 기사에서 방문자가 스스로 재생할 수 있는 "눈" 효과를 제공하는 플러그인을 찾을 수 없다고 언급했습니다.

위 내용은 운용성: 접근성, 4부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!