iis配置:提示访问被拒绝_网站可访问性最佳做法：您的网站的提示

iis配置:提示访问被拒绝

This short guide will provide practical examples of how to implement accessibility in websites.

本简短指南将提供有关如何在网站中实现可访问性的实用示例。

Accessibility was not emphasized during school nor is it being emphasized enough in the real world of web development. It is our hope that this article, along with many others, will encourage developers to create accessible sites from now on.

在学校期间，没有强调可访问性，也没有在网络开发的现实世界中充分强调可访问性。 我们希望本文以及其他许多文章能够鼓励开发人员从现在开始创建可访问的网站。

It has always helped to get practical hands-on examples of how to do things. So this guide will focus on real-world examples  encountered in my day to day life as a web developer.

它总是有助于获得实践方法的实际示例。 因此，本指南将重点介绍我在作为Web开发人员的日常生活中遇到的真实示例。

跳过导航 (Skipping Navigation)

In order to give visually impaired users a pleasant experience on your website, they need to be able to access content quickly and efficiently. If you have never experienced a website through a screen reader I recommend doing so. It is the best way to test how easily a site can be navigated for non-sighted users. NVDA is a very good screen reader application that is provided free of charge. If you use the screen reader and find it helpful, please consider making a donation to the development team. The screen reader can be downloaded from nvaccess.org.

为了使视障用户在您的网站上获得愉悦的体验，他们需要能够快速有效地访问内容。 如果您从未体验过通过屏幕阅读器访问过的网站，则建议这样做。 这是测试非视障用户浏览网站的难易程度的最佳方法。 NVDA是一个非常好的屏幕阅读器应用程序，可免费提供。 如果您使用屏幕阅读器对您有所帮助，请考虑向开发团队捐款。 屏幕阅读器可以从nvaccess.org下载。

To allow visually impaired users to skip to the main content of a site and avoid tabbing through all the main navigation links:

为了使视障用户能够跳到网站的主要内容并避免通过所有主要导航链接进行分页：

1. Create a "skip navigation link" that lives directly underneath the opening  body  tag.

   创建一个直接位于body标签下方的“跳过导航链接”。

<a tabindex="0" class="skip-link" href="#main-content">Skip to Main Content</a>

tabindex="0"  is added to ensure the link is keyboard focusable on all browsers. Further information about keyboard accessibility can be found at webaim.org.2. The "skip navigation" link needs to be associated with the main html tag in your webpage document using the ID tag.

tabindex="0"以确保该链接在所有浏览器上都可以键盘聚焦。 有关键盘可访问性的更多信息，请参见webaim.org .2。 “跳过导航”链接需要使用ID标签与网页文档中的主要html标签相关联。

<main id="main-content">
...page content
</main>

1. Hide the "skip navigation" link by default. This ensures that the link is only visible to sighted users when the link is in focus.

   默认情况下，隐藏“跳过导航”链接。 这样可以确保只有在焦点对准链接时，该链接才对可见的用户可见。

   Create a class for the link that can be styled with CSS. In my example, I have added the class  

   为可以使用CSS设置样式的链接创建一个类。 在我的示例中，我添加了课程

   skip-link .

   skip-link 。

.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.skip-link:active, .skip-link:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}

These CSS styles hide the link by default and only display the link when it is receiving keyboard focus. For more information visit the a11yproject and this blog post.

这些CSS样式默认情况下隐藏链接，并且仅在接收键盘焦点时才显示该链接。 有关更多信息，请访问a11yproject和此博客文章 。

无障碍头结构 (Accessible Header Structure)

• Role "banner" is added to the  header  tag to signify to screen readers that this tag is the top most section. The role on the  header  is depreciated in HTML5 but should be added still in order to support as many screen readers as possible.

  角色“横幅”已添加到header标签，以向屏幕阅读器表示此标签是最顶部的部分。 header的角色在HTML5中已弃用，但仍应添加，以支持尽可能多的屏幕阅读器。

• This role is added to the  header  element when it is the child of the  body  element.

  当它是body元素的子元素时，此角色将添加到header元素。

<header role="banner">
</header>

可访问的主要内容结构 (Accessible Main Content Structure)

• Role "main" is added to the  main  tag to signify to screen readers that this tag is the  main  content section. Needing to add the role on the  main  is depreciated in HTML5 but should still be added in order to support as many screen readers as possible.

  将角色“ main”添加到main标签，以向屏幕阅读器表示此标签是main content部分。 HTML5中不再需要在main上添加角色，但仍应添加该角色，以支持尽可能多的屏幕阅读器。

• This role is added to the  main  element when it is the main content section of the page. If there is more than one  main  element then each element will need an  aria-labelledby  attribute or an  aria-label .

  当它是页面的主要内容部分时，此角色将添加到main元素中。 如果有多个main元素，则每个元素都需要一个aria-labelledby属性或aria-label 。

• More information can be found at the https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/main.html.

  可以在https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/main.html上找到更多信息。

<main role="main">
</main>

翻译自: https://www.freecodecamp.org/news/web-accessibility-best-practices-a11y-tips/

iis配置:提示访问被拒绝