屏幕阅读器安全吗_如何为屏幕阅读器设计网站布局

屏幕阅读器安全吗

It’s easy to think about a layout as being a primarily visual concern. The header goes up top, the sidebar is over here, the call to action is in an overlay on top of the content (just kidding). Grids, borders, spacing and color all portray valuable visual data, but if these hints to the structure of a page are only visible, some users may find your content unintelligible.

容易将布局视为主要的视觉关注点。 标头位于顶部，侧边栏位于此处，号召性用语位于内容顶部的叠加层中(只是在开玩笑)。 网格，边框，间距和颜色都代表着宝贵的视觉数据，但是，如果仅显示页面结构的这些提示，则某些用户可能会觉得您的内容难以理解。

You can experience this first hand if you try using a screen reader on the web. When I fired up VoiceOver on my Mac and took it out for a test drive, I realized that to a screen reader user, a lot pages are just a big heap of ‘content’, missing helpful organizational cues.

如果您尝试在网络上使用屏幕阅读器，则可以亲身体验。 当我在Mac上启动VoiceOver并进行测试时，我意识到对于屏幕阅读器用户来说，很多页面只是一大堆“内容”，缺少有用的组织提示。

The experience can be kind of like listening to a long rambling story without any indication to what details are important or related to the main thread of the story. Halfway through the story, you aren’t sure whether it’s worth it to keep listening because you don’t know if you’ll even find what it is you’re looking for.

体验就像听一个漫长的漫长故事，而没有任何细节是重要的或与故事的主线相关的指示。 故事进行到一半时，您不确定继续收听是否值得，因为您不知道自己是否还能找到所要的内容。

In the context of a website, your screen reader might be halfway through reading you a list of 50 sidebar links when you start wondering if there is any valuable content on the site at all.

在网站环境中，当您开始怀疑网站上是否有任何有价值的内容时，您的屏幕阅读器可能已经阅读了50个侧边栏链接的列表。

Experiences like this are caused by websites that are built with layouts that are only visual. Ideally, however, our visual layouts should point to an underlying organizational model of our content. They should be visual indicators for a conceptual model. The visual indicators are just one way of revealing this model. The Web Accessibility Initiative’s ARIA (Accessible Rich Internet Applications) project provides alternative indicators to users who may need them.

此类体验是由以仅视觉布局构建的网站引起的。 但是，理想情况下，我们的视觉布局应指向内容的基础组织模型。 它们应该是概念模型的视觉指示器。 视觉指示器只是显示此模型的一种方法。 Web Accessibility Initiative的ARIA(可访问富Internet应用程序)项目为可能需要它们的用户提供了替代指标。

I’ll walk through how to make use of these indicators to make a simple web page easy to use, navigate and read for users of assistive technology. All the example code is available on GitHub.

我将逐步介绍如何利用这些指标来使辅助技术用户易于使用，浏览和阅读简单的网页。 所有示例代码都可以在GitHub上找到 。

初始布局 (Initial Layout)

Here’s an example of a page with a pretty simple layout. We’ve got a header at the top containing a logo and navigation, some body content, a sidebar off to the right with a related posts list and a list of social media sharing links, a search box below the content, and a footer containing the contact info of our business.

这是一个布局非常简单的页面示例。 我们在顶部有一个标题，其中包含徽标和导航，一些正文内容，位于右侧的边栏以及相关的帖子列表和社交媒体共享链接列表，内容下方的搜索框以及包含以下内容的页脚我们业务的联系信息。

• Preview the initial layout

  预览初始布局

• View the HTML

  查看HTML

Visually, the content is pretty well divided, using a simple grid and background colors to distinguish the different elements. If you fire up VoiceOver on this page, you can navigate through the page pretty well using the next element command. The order of elements in the markup pretty much follows the visual order of elements. First we read the header, then the body copy, then the sidebar, then the search box, then the footer. That’s pretty good. If I press CAPS + U to pull up the VoiceOver menus, I can get a list of all the headers on the page and all the links, and navigate directly to them.

在视觉上，使用简单的网格和背景色来区分不同的元素，内容可以很好地划分。 如果在此页面上启动VoiceOver，则可以使用下一个element命令很好地浏览该页面。 标记中元素的顺序几乎遵循元素的视觉顺序。 首先，我们先阅读页眉，然后阅读正文，然后阅读侧边栏，然后阅读搜索框，然后阅读页脚。 很好 如果按CAPS + U弹出VoiceOver菜单，则可以获取页面上所有标题的列表以及所有链接，然后直接导航到它们。

Just by using well-structured HTML, simple grouping with <div> elements and a good use of heading tags we’ve got a decent experience. It’s better than the rambling story websites I mentioned above, but it could be even better.

仅通过使用结构良好HTML，使用<d iv>元素进行简单分组以及充分使用标题标签，我们就获得了不错的体验。 它比我上面提到的故事故事网站要好，但它甚至可能更好。

跳过链接 (Skip Link)

• Preview the skip link layout

  预览跳过链接的布局

• View the HTML

  查看HTML

First we’ll add a skip-link as the first item of the page. A skip link is a very common accessibility feature that allows users to skip past lengthy lists of links and other information repeated on every web page directly to the main content of the current page. It’s a link that is the first element in the tab order of the page.

首先，我们将添加一个跳过链接作为页面的第一项。 跳过链接是一种非常常见的可访问性功能，它使用户可以跳过冗长的链接列表和在每个网页上重复的其他信息，直接跳到当前页面的主要内容。 这是一个链接，它是页面的Tab键顺序中的第一个元素。

Right inside the opening body tag, let’s add:

在开始的body标签内，让我们添加：

<a href="#main" class="skip">Skip to main content</a>

We’ll also want to hide this link visually, but make it appear on-screen when it receives focus. To visually hide the link, we’ll add the following CSS:

我们还将希望以可视方式隐藏此链接，但当它获得焦点时使其显示在屏幕上。 为了直观地隐藏链接，我们将添加以下CSS：

.skip { 
    clip: rect(1px, 1px, 1px, 1px); 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } 
/* Display the link on focus. */ 
.skip:focus { 
    background-color: #fff; 
    border-radius: 3px; 
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 
    clip: auto !important; 
    color: #888; 
    display: block; 
    font-weight: bold; 
    height: auto; left: 5px; 
    line-height: normal; 
    padding: 15px 23px 14px; 
    text-decoration: none; 
    top: 5px; 
    width: auto; 
    z-index: 100000;
}

The link location of the skip link needs to be an id pointing to the main content of the page. In our case, I added id="main" to the <div class="content"> section and gave the skip link a url of href="#main".

跳过链接的链接位置必须是指向页面主要内容的id 。 在我们的例子中，我将id="main"添加到<div class="conten t”>部分，并给出了rl of href=" #main”的跳过链接au rl of href=" 。

If you visit the skip link page and hit your Tab key, the link should display. If you fire up VoiceOver and start navigating through the page, the skip link should be the first thing you come across, and clicking it should trigger VoiceOver to start reading the main content of the page.

如果您访问跳过链接页面并按Tab键，则会显示该链接。 如果启动VoiceOver并开始浏览页面，则跳过链接应该是您遇到的第一件事，单击它应触发VoiceOver开始阅读页面的主要内容。

WCAG使用的技术 (WCAG Techniques Used)

With this step, we’ve allowed users to skip straight to the meat of our page, but beyond easily accessing the main content, they still don’t have a good conceptual map of the rest of the page.

通过这一步骤，我们允许用户直接跳到页面的内容，但是除了轻松访问主要内容之外，他们仍然没有页面其余部分的良好概念图。

ARIA的角色和地标 (ARIA Roles and Landmarks)

One way to provide users with a conceptual map of the page is by using semantic HTML5 elements like <header>, &lt;nav&gt;, <main>;, <section>, and <aside>. These elements have built in data associated with them that is parsed by browsers and screen readers. They create landmarks on a web page. By using these elements judiciously in place of <div> elements, we can provide extra information to assistive technology devices and help the user build a conceptual map of our page.

为用户提供页面概念图的一种方法是使用语义HTML5元素，例如<head header >, ＆ lt;nav ＆g t;, <m ain> ;, < section>和<aside>。 这些元素具有与之关联的内置数据，这些数据由浏览器和屏幕阅读器进行解析。 他们在网页上创建地标。 通过使用这些ELE ments代替<div>元素的明智，我们能够为辅助技术设备提供额外的信息，帮助用户构建我们的页面的概念图。

I’ve maintained the same layout as before, but I’ve swapped some divs for some semantic HTML5 elements. I’ve also added a role attribute to the search component. Alternatively, you could keep all the divs and add a role instead of swapping them out for the new HTML5 elements. (See the w3 guidelines for ARIA roles)

我保持了与以前相同的布局，但是我将一些div换成了一些语义HTML5元素。 我还向搜索组件添加了role属性。 另外，您可以保留所有div并添加一个role而不用将它们替换为新HTML5元素。 (请参阅关于ARIA角色的w3准则 )

• Preview the updated layout

  预览更新的布局

• View the updated HTML

  查看更新HTML

Here are the key changes:

以下是主要更改：

• <div class="header"> becomes <header class="header">

  <div class="heade r”>成为comes <header class= “ header”>

• <div class="main-navigation"> becomes <nav class="main-navigation">

  <div class="main-navigatio n”>成为comes <nav class="main-nav igation”>

• <div class="content"> becomes <main class="content">

  <div class="conten t”>是comes <main class=" content”>

• <div class="sidebar"> becomes <aside class="sidebar">

  <div class="sideba r”>成为comes <aside class=" sidebar”>

• <div class="related-posts"> becomes <section class="related-posts">

  <div class="related-post s”>成为comes <section class="relate d-posts”>

• <div class="search"> becomes <div class="search" role="search">

  <div class="searc h”>成为comes <div class="search" role= “”

Now when I fire up VoiceOver and press CAPS + U, I get a new Landmarks menu. Inside this menu you can see the following elements:

现在，当我启动VoiceOver并按CAPS + U ，我得到一个新的Landmarks菜单。 在此菜单内，您可以看到以下元素：

• banner
  旗帜
• navigation
  导航
• main
  主要
• complementary
  补充
• search
  搜索
• content information
  内容信息

Selecting any of these menu items takes the user straight to that element, so they can easily navigate through the different elements of a page. If they are at the bottom of the page, they can easily get back to the main navigation in the header via the Landmarks menu.

选择这些菜单项中的任何一个，都会使用户直接进入该元素，因此它们可以轻松浏览页面的不同元素。 如果它们位于页面底部，则可以通过“地标”菜单轻松返回标题的主导航。

WCAG使用的技术 (WCAG Techniques Used)

We’ve dramatically increased the navigability of our page and provided an initial map to our users, but we’re missing a few things to make this experience really awesome. First, the names of our site sections are fairly generic. We aren’t exactly sure just from listening to the menu what might be in any of the elements. Second, some elements aren’t easily navigable. For instance, our sidebar components are all grouped under the label ‘complementary’.

我们极大地提高了页面的可导航性，并为用户提供了初始地图，但是我们缺少一些东西来使这种体验真的很棒。 首先，我们网站部分的名称相当通用。 我们不能仅通过听菜单来确定任何元素中可能包含什么。 其次，某些元素不容易导航。 例如，我们的侧边栏组件都分组在标签“ complementary”下。

We can add some well-thought out ARIA labels to make this experience even better.

我们可以添加一些经过深思熟虑的ARIA标签，以使这种体验更好。

使用适当的ARIA标签 (Using Appropriate ARIA Labels)

By peppering in some ARIA labels we can give the user an even more detailed conceptual map of our layout.

通过添加一些ARIA标签，我们可以为用户提供更详细的布局概念图。

• Preview the updated layout

  预览更新的布局

• View the updated HTML

  查看更新HTML

In this next iteration, I’ve added the following labels:

在下一个迭代中，我添加了以下标签：

• <nav class="main-navigation"> now has an aria-label of Primary Navigation.

  <nav class="main-navigatio n”>现在已as an aria el of Primary Navi as an aria 。

• <main class="content"> now has an aria-labelledby attribute of main-title and its <h1&gt; has an id of main-title.

  <main class="conten t”>现在as an aria-labe te of main标题属性as an aria-labe标签te of main d it <h1 &g t; h as an id o主标题as an id o 。

• <aside class="sidebar"> now has an aria-labelledby attribute of sidebar-title and its <h2&gt; has an id of sidebar-title.

  <aside class="sideba r”>现在as an aria-labe te of sidebar属性as an aria-labe标题te of sidebar d it <h2 &g t; h as an id of s ideide-title as an id of s 。

• Both <section> elements in the sidebar now have an appropriate ARIA label.

  边栏中的两个<secti on>元素现在都具有适当的ARIA标签。

Let’s fire up VoiceOver again and pull up our Landmark menu with CAPS+U. Now we see that the ARIA labels we provided display next to each of our generic menu items. We also have a few extra menu items, because the <section> elements we provided labels for (Related Posts, Share Links), now have their own menu items.

让我们再次启动VoiceOver并使用CAPS+U出Landmark菜单。 现在，我们看到提供的ARIA标签显示在每个常规菜单项的旁边。 我们还有一些额外的菜单项，因为我们为标签(相关帖子，共享链接)提供的<secti on>元素现在具有自己的菜单项。

Now an assistive technology user has an equal (and maybe even better) conceptual map of the content and actions they can take on this website compared to a non-assistive technology user. They can get a quick overview of everything on the site, easily navigate to the section of the page they want, and quickly find what they are looking for.

现在，与非辅助技术用户相比，辅助技术用户对他们在本网站上可以采取的内容和行动具有相等(甚至更好)的概念图。 他们可以快速浏览该站点上的所有内容，轻松导航到所需页面的一部分，并快速找到所需内容。

WCAG使用的技术 (WCAG Techniques Used)

• Landmarks

  地标

• Labelling Landmarks

  标记地标

结语 (Wrap Up)

With a combination of well-structured HTML markup, thoughtful use of ARIA roles and a careful labeling of site sections using ARIA labels, we’re able to create a user experience for assistive technology users that rivals the experience of non-assistive technology users. We were able to take the conceptual map that was implicit in our visual layout and expose it to assistive technology.

通过将结构良好HTML标记，对ARIA角色的周到使用以及使用ARIA标签对站点部分的仔细标记相结合，我们能够为辅助技术用户创造与非辅助技术用户的体验相媲美的用户体验。 我们能够获取隐含在视觉布局中的概念图，并将其应用于辅助技术。

You may find holes in your conceptual map or sections that unnecessarily have the same function. The process can help you clarify your designs, identify areas that might not make sense conceptually or visually, and improve your design for all users of your site.

您可能会在概念图或部分中发现不必要地具有相同功能的Kong。 该过程可以帮助您澄清设计，确定在概念上或视觉上可能没有意义的区域，并为站点的所有用户改进设计。

Want to dive deeper into building accessible websites? Join my free email course: ? Common accessibility mistakes and how to avoid them. 30 days, 10 lessons, 100% fun! ? Sign up here.

是否想更深入地建设可访问的网站？ 加入我的免费电子邮件课程： 常见的可访问性错误以及如何避免它们。 30天，10节课，100％的乐趣！ ？ 在此注册。

翻译自: https://www.freecodecamp.org/news/how-to-design-website-layouts-for-screen-readers-347b7b06e9cc/

屏幕阅读器安全吗