可访问性不一致 可访问性低_如何开始网站可访问性

可访问性不一致 可访问性低

When I was entering the front end developer ranks, no one talked to me about accessibility. I didn’t know you could break the law by having an inaccessible website, until one day a university client came to my team for help on performing an accessibility audit. Man was I in over my head.

当我进入前端开发人员队伍时，没有人和我谈论可访问性 。 我不知道您可以通过拥有一个无法访问的网站来违法，直到有一天，一位大学客户来到我的团队寻求协助，以进行无障碍审核。 男人在我头上。

I started digging in and doing research, but found a lot of the documentation intimidating. Some of it was over my head. There was so much to digest, but I eventually made my way through. (Well, I’m actually still making my way through).

我开始进行研究并进行研究，但发现许多文档令人生畏。 其中有些在我头上。 有太多需要消化的东西，但是我最终还是成功了。 (嗯，我实际上仍在继续前进)。

I’ve since learned that accessibility doesn’t have to be intimidating, and can even be fun.

从那以后，我了解到可访问性不必令人生畏，甚至可以很有趣。

What would have helped me at the beginning were a few practical principles to help me grasp the basics.

一开始对我有帮助的是一些实用的原则，可以帮助我掌握基础知识。

So let me share with you: Ben’s homegrown web accessibility principles.

因此，让我与您分享： Ben的本地Web访问原则。

They’re not rules.

他们不是规则。

They are mental shifts that I had to make when I started developing accessible websites.

这些是我开始开发无障碍网站时必须做出的精神转变。

Let’s get into it.

让我们开始吧。

原则1：网页设计不只是图形设计 (Principle 1: Web design is more than graphic design)

When I started my first web job, I was handed a picture of a website and asked to turn it into a website.

当我开始第一个网络工作时，我收到一张网站图片，并要求将其变成网站。

After I did that, the designers then meticulously compared my website to their picture of a website and told me all the mistakes I made.

之后，设计师们将我的网站与他们的网站图片进行了精心的比较，并告诉了我所有的错误。

Line height should be 18px, not 16.

行高应为18px，而不是16px。

This gray is the wrong light gray. It should be light-light gray.

此灰色是错误的浅灰色。 它应该是浅灰色。

The box-shadow blur is off by a pixel.

盒子阴影模糊消失了一个像素。

Stuff like that. They were very impressive and I learned a ton.

类似的东西。 他们给人留下了深刻的印象，我学到了很多东西。

But none of us really considered that the web is not a controlled medium. We were so concerned with the visual elements of the work that we didn’t consider how the site might perform on a $99 Android phone over 3G, or for someone who was color blind, or someone who couldn’t see at all.

但是我们当中没有人真正认为网络不是受控媒体。 我们非常关注作品的视觉元素，因此没有考虑过该网站在价格为99美元的Android手机(超过3G)上的表现如何，或者对于那些色盲或根本看不到的人而言，该表现如何。

And the fact that the web can be accessed by different people in different situations is what makes web design so much more than graphic design.

Web可以被不同的人在不同的情况下访问的事实使得Web设计远胜于图形设计。

So instead of focusing merely on visual elements, I split my work into three main tasks.

因此，我不仅将工作重点放在视觉元素上，还将工作分为三个主要任务。

网页设计的三项任务 (Three tasks of web design)

Task 1: Write good (read: semantic) markup

任务1：编写良好的(阅读：语义)标记

The first task is to write good markup.

第一个任务是编写良好的标记。

This means organizing the content on the page well. Using HTML the way it was meant to be used. HTML is accessible by default. So if we get this right from the beginning, our jobs are so much easier. We’ll spend some more time on this a little later.

这意味着可以很好地组织页面上的内容。 使用HTML的原意使用方式。 默认情况下可访问HTML。 因此，如果我们从一开始就做到这一点，那么我们的工作就容易得多。 我们稍后会花更多时间。

Task 2: Enhance the markup with CSS

任务2：使用CSS增强标记

The second task is to use CSS to enhance the excellent markup that we have written.

第二项任务是使用CSS来增强我们编写的出色标记。

CSS should be used to emphasize the meaning of your content. It should make it more meaningful, more impactful. But you’ve got to use the right HTML to begin with or your job will be a lot harder.

应该使用CSS来强调内容的含义。 它应该使它更有意义，更有影响力。 但是，您必须使用正确HTML开头，否则您的工作会困难很多。

Task 3: Layer interactivity on your HTML and CSS with JavaScript

任务3：使用JavaScript在HTML和CSS上分层交互

The third task is to layer interactivity over the structure and style with JavaScript.

第三个任务是使用JavaScript在结构和样式上分层交互。

之前和之后 (Before and after)

Before adopting this approach, I used to just reach for the element that was easiest to style, and use that.

在采用这种方法之前，我通常只接触最容易样式化的元素，然后使用它。

I need big text, so I’ll use an h1.

我需要大文本，所以我将使用h1。

I have a complicated accordion interface, so I’ll use a bunch of divs.

我有一个复杂的手风琴界面，因此我将使用一堆div。

Stuff like that. But that only focuses on the visual aspects. To build accessible websites, we need to think about more than just how closely the site matches the picture. It’s more than visual design or graphic design. That’s why we call it web design.

类似的东西。 但这仅集中在视觉方面。 要构建可访问的网站，我们需要考虑的不仅仅是网站与图片的紧密程度。 它不只是视觉设计或图形设计。 这就是为什么我们称其为网页设计。

This brings us to principle 2.

这将我们带入原理2。

原则2：尽快(尽可能语义) (Principle 2: Be ASAP (as semantic as possible))

Here’s how I recommend doing this.

我推荐这样做的方法。

Every time you start typing <div>…

每次您输入<d iv>时…

Stop.

停止。

Look in the mirror.

照照镜子。

And ask yourself.

问问你自己。

Could I use a more semantic element?

我可以使用更多语义元素吗？

How do you know if there is a more semantic element to use?

您如何知道是否还有其他语义元素要使用？

The Mozilla Development Network has a page of all HTML elements organized by their purpose. (This reference is awesome — use it!)

Mozilla开发网络上有一个页面，其中按目的组织了所有HTML元素 。 (此参考资料很棒-使用它！)

Let’s look at some of the semantic alternatives we have for <div>s.

让我们看一下<d iv>的一些语义选择。

<d iv>的替代方法 (Alternatives to <div>)

If you have a stand alone section of a page, consider using the <section> tag.

如果页面的独立部分，请考虑使用<secti on>标记。

If you have a blog, news article, forum post, or any kind of self-contained piece of content, you could use an <article>.

如果您有博客，新闻文章，论坛帖子或任何独立的内容，则可以使用<artic le>。

Got several components of the same kind next to each other? Consider using an ordered or unordered list (<ul&gt; or <ol>).

是否将几个相同种类的组件彼此相邻？ 考虑使用有序列表或无序列表( < ul＆g t; o r <ol>)。

Got a top section on your blog post with title and metadata? Use a <header>. Got a bottom section with tags and such? Use a <footer>.

在博客文章的顶部找到标题和元数据？ 使用<head header>。 在底部有标签等？ Use a <footer> 。

Got a sidebar? Use an <aside>!

有侧边栏？ 使用<aside> ！

Got something that needs to be clickable? Use a <button>. This one is important. If it needs to be clickable and is not a link, you should probably use a button.

有需要点击的内容吗？ 使用<button> 。 这一点很重要。 如果需要单击它而不是链接，则可能应该使用一个按钮。

Let me repeat that: If it needs to be clickable and is not a link, you should probably use a button. We’ll talk more about that later.

让我重复一遍：如果需要单击它而不是链接，则可能应该使用button 。 我们稍后再讨论。

Just remember: Be ASAP. As semantic as possible.

只要记住： 尽快。 尽可能的语义化 。

原则3：网站看起来应该裸露在外 (Principle 3: Websites should look good naked)

What I mean by this is that if you remove all the CSS from your page, your website should still be readable and usable.

我的意思是，如果您从页面中删除所有CSS，则您的网站仍应可读且可用。

This principle is really driving home the point of principle 2 ASAP.

这个原则确实推动了原则2的提出 。

Think about it like this: if your markup is semantic, then you are using elements that convey meaning. And that means the browser will provide affordances and signifiers for the meaning and / or functionality of your markup.

这样思考：如果标记是语义的，那么您正在使用传达含义的元素。 这意味着浏览器将为标记的含义和/或功能提供功能和指示。

So the “naked test” is really a test of how semantic your markup is.

因此，“裸测试”实际上是对标记语义的测试。

Your markup should look like a well-structured outline, like we used to make in school for research papers.

您的标记应该看起来像是结构良好的轮廓，就像我们过去在学校里做的研究论文一样。

您如何检查？ (How do you check this?)

Here is the code. If you pop this into your dev tools console, it will strip out everything from the <head> of your document, including the styles.

这是代码。 如果将其弹出到开发工具控制台中，它将删除文档<he ad>中的所有内容，包括样式。

document.head.parentNode.removeChild(document.head);

What it’s doing is targeting the document head and then removing all its children.

它正在做的是针对文档头，然后删除其所有子级。

Most of the time, I use this as a little bookmarklet in my browser.

大多数时候，我在浏览器中将其用作小书签。

javascript:(function() { document.head.parentNode.removeChild(document.head); })();

To use this as a bookmarklet, add a new bookmark in your browser. In the URL field, copy and paste the code above instead of a URL. Now, you can click this bookmark while on any site and it will remove all the styles from the document head.

要将其用作书签，请在浏览器中添加一个新书签。 在“ URL”字段中，复制并粘贴上面的代码而不是URL。 现在，您可以在任何站点上单击此书签，它将删除文档头中的所有样式。

Let’s look at an example of this in action.

让我们看一个实际的例子。

Google登录表单 (The Google sign-in form)

I think everyone is likely familiar with the Google sign-in form. It’s got a title, the email input, and a couple buttons for Forgot Email, Create Account, and Next.

我认为每个人都可能熟悉Google登录表单。 它具有标题，电子邮件输入以及用于“忘记电子邮件”，“创建帐户”和“下一步”的几个按钮。

So what happens when we look at it naked?

那么，当我们裸照时会发生什么呢？

裸露的Google登录表单 (Naked Google sign-in form)

After we remove the styles, we still have the nice Sign in heading, so we know what this page is about.

删除样式后，我们仍然拥有漂亮的“登录”标题，因此我们知道此页面的内容。

We have a few inputs, but the labels aren’t exactly clear.

我们有一些输入，但标签并不完全清楚。

And…where did our buttons go?

而且...我们的按钮去了哪里？

If you look closely, you can see that what used to be the “Next” and “Forgot Email” and “Create Account” buttons now all appear to be normal text.

如果仔细观察，您会发现原来是“下一步”，“忘记电子邮件”和“创建帐户”按钮的所有内容现在都是普通文本。

We’ve got three inputs now, instead of the one we had before, and the labels appear to be after them.

现在，我们有了三个输入，而不是之前的输入，标签似乎在它们之后。

The Next and Create Account buttons swapped positions.

“下一步”和“创建帐户”按钮交换位置。

So everything is still here, but I’d say the main concern I have is with the buttons not really being buttons. They aren’t clear.

所以一切仍然在这里，但是我要说的是，我主要关心的是按钮不是真正的按钮。 他们不清楚。

And let me just say that just because Google isn’t using the HTML <button> element doesn’t mean this form is inherently inaccessible. It just means they have to do a lot more work with JavaScript and managing keyboard interactions that the browser would typically do for you.

而且，我只是说，仅仅因为Google未使用HTML <butt on>元素，并不意味着该表单本质上是不可访问的。 这仅意味着他们必须使用JavaScript进行更多工作，并管理浏览器通常会为您执行的键盘交互。

I typically use the naked test as a gut check for myself. Just because a site fails the Naked Test doesn’t mean the site is necessarily inaccessible. You can fail the naked test and still have an accessible website. But the Naked Test will reveal areas where you aren’t using semantic markup, and these areas may need special accessibility attention.

我通常将裸露测试用作自己的直觉检查。 仅仅因为某个站点未通过“裸露测试”，并不意味着该站点必然无法访问。 您可以通过裸测试失败，但仍然可以访问网站。 但是Naked Test将揭示您未使用语义标记的区域，这些区域可能需要特别注意可访问性。

在裸测试中要寻找什么 (What to look for during the naked test)

Here is what I look for when I run this test.

这是运行此测试时要寻找的东西。

First, I check to make sure the structure of the site makes sense. Are things in the right order? Does each section have a clear heading with the right level of heading tag?

首先，我检查以确保网站的结构合理。 事情顺序正确吗？ 每个部分的标题标题是否正确？

Next, does the content appear to be organized? Can I skim the page and get an idea of the content as if I were skimming an outline?

接下来，内容看起来是否井井有条？ 我可以像浏览大纲一样浏览页面并了解内容吗？

Third, I look to see if interactive elements look to be interactive. If I’ve created a bunch of interactive elements using <div>s, they won’t appear interactive. Then I’ll know to spend a little more time checking the keyboard functionality of those elements for accessibility.

第三，我看一下交互元素是否看起来是交互的。 如果我使用<d iv>创建了一堆交互式元素，它们将不会显示为交互式。 然后，我将花费更多时间检查这些元素的键盘功能是否具有辅助功能。

And lastly, I want to make sure inputs have clear labels.

最后，我要确保输入内容具有清晰的标签。

That about sums up the naked test. To reiterate, the point of the test is to reveal weaknesses in the semantics of your site and point out the areas where you’ll need to spend a little more time testing to make sure those components are accessible.

那就是总结一下赤裸裸的测试。 重申一下，测试的重点是揭示站点语义上的弱点，并指出需要花更多时间进行测试以确保这些组件可访问的区域。

原则4：与计算机对话 (Principle 4: Talk to your computer)

Here is my fourth and last homegrown principle: Talk to your computer.

这是我第四个也是最后一个本地出产的原则：与您的计算机对话。

Ok, maybe don’t actually talk out loud to your computer. What I mean here is communicate with your computer — give the browser some context using ARIA attributes.

好的，也许实际上不大声对您的计算机说话。 我的意思是与您的计算机通信 -使用ARIA属性为浏览器提供一些上下文。

ARIA属性 (ARIA attributes)

ARIA stands for Accessible Rich Internet Applications. There are ARIA states, roles, and properties that tell the browser certain things about your web page, if you choose to use them.

ARIA代表可访问的富Internet应用程序。 如果您选择使用ARIA状态，角色和属性，它们会告诉浏览器有关您网页的某些信息。

I am suggesting that you use them where appropriate. They won’t be visible to users, but they will be used by the browser and screen-readers to provide a little extra context to users behind the scenes.

我建议您在适当的地方使用它们。 它们对用户不可见，但是浏览器和屏幕阅读器将使用它们为幕后的用户提供一些额外的上下文。

Here are some examples:

这里有些例子：

aria-label (aria-label)

The aria-label attribute can be added as an attribute of an HTML element to tell a screen reader what it is. I use these on links a lot, to provide extra context to screen reader users for where the link is going.

可以将aria-label属性添加为HTML元素的属性，以告诉屏幕阅读器它是什么。 我在链接上经常使用它们，以便为屏幕阅读器用户提供链接前进方向的额外上下文。

aria-labelledby (aria-labelledby)

If you want to concatenate several existing text nodes into a single aria-label, you should use aria-labelledby. This attribute will accept one or more ID references to the text nodes you want to use to label the input. Here’s an example:

如果要将多个现有文本节点连接到一个aria-label ，则应使用aria-labelledby 。 此属性将接受对要用于标记输入的文本节点的一个或多个ID引用。 这是一个例子：

<p id="sample-id">Some Text</p>
<input aria-labelledby="sample-id another-id" value="" />
<p id="another id">That defines this input.</p>

A screen reader will read the input as “Some text that defines this input”.

屏幕阅读器会将输入读取为“定义此输入的某些文本”。

The cool thing about this is that it concatenates the text of all the IDs you pass in. (aria-label does not have this same functionality). There are few examples of why you might want to concatenate labels on the w3 site.

很棒的事情是，它将所有传入的ID的文本连接起来。( aria-label不具有此相同功能)。 关于为什么您可能希望在w3站点上串联标签的例子很少。

aria-expanded (aria-expanded)

The aria-expanded attribute tells whether an element is open or closed. You might use this on a hamburger button that controls your main navigation. When the screen reader user focuses on the button with an aria-expanded value of false, the screen reader will say something like “Main Menu, collapsed button” and they will know they can open the menu.

aria-expanded 属性指示元素是打开还是关闭。 您可以在控制主要导航的汉堡包按钮上使用此按钮。 当屏幕阅读器用户专注于具有aria-expanded值false的按钮时，屏幕阅读器会说“主菜单，折叠的按钮”之类的字样，并且他们知道可以打开菜单。

aria-describedby (aria-describedby)

The aria-describedby attribute points to an element that describes the current element. If you want to add some error text to an input, you might use this.

aria-describedby属性指向描述当前元素的元素。 如果要向输入中添加一些错误文本，则可以使用它。

Here is an example:

这是一个例子：

<label for="example-input">Email</label> 
<input type="email" id="example-input" aria-describedby="email-error" /> 
<div id="email-error"> 
  <p>The email address is in an invalid format.</p> 
</div>

In this example, on form submit, the text “The email address is in an invalid format.” is added dynamically to the div. When the input is focused, this message will be read aloud to screen readers.

在此示例中，在表单提交时，文本“电子邮件地址格式无效”。 被动态添加到div中。 输入内容集中后，此消息将被大声朗读给屏幕阅读器。

aria-live (aria-live)

aria-live lets the computer know that an area of the page will be updated later. This is really handy with AJAX stuff. It can have a value of polite, assertive, or off.

aria-live使计算机知道页面的某个区域稍后将更新。 使用AJAX东西真的很方便。 它的值可以是礼貌，有主见或不礼貌。

With these attributes, you are giving the browser extra context so it can have a better idea of what functionality a certain element may have, and more context to users of screen readers and other assistive technologies.

使用这些属性，您将为浏览器提供额外的上下文，以便它可以更好地了解某个元素可能具有的功能，并为屏幕阅读器和其他辅助技术的用户提供更多的上下文。

原则总结 (Summary of the principles)

That wraps up my four simple principles.

这总结了我的四个简单原则。

Just to recap:

总结一下：

Principle 1 is that web design is more than graphic design.

原则1是网页设计不只是图形设计。

Principle 2 is be as semantic as possible.

原则2尽可能具有语义。

Principle 3 is that websites should look good naked.

原则3是网站应该裸露在外。

Principle 4 is talk to your computer, use ARIA.

原则4是与您的计算机通话，请使用ARIA。

By minding these principles, you will be able to avoid a good chunk of the mistakes that are made by using non-semantic code concerned only with appearances.

通过遵循这些原则，您将能够避免由于使用仅与外观相关的非语义代码而导致的大部分错误。

And, if you want to see how to start putting these into practice, I’m launching a free email course: 9 Common Website Accessibility Mistakes and How to Fix Them. Get access to the course by signing up here!

而且，如果您想了解如何开始将它们付诸实践，我将开设一个免费的电子邮件课程： 9常见的网站可访问性错误和解决方法 。 在这里注册即可访问课程！

Common Accessibility Mistakes and How to Avoid ThemA free introduction to web accessibility course for web developers. Click here to sign up!benrobertson.io

常见的可访问性错误以及如何避免它们 针对Web开发人员的Web可访问性课程的免费介绍。 点击此处注册！ 本罗伯特森

Originally published at benrobertson.io.

最初发布于benrobertson.io 。

翻译自: https://www.freecodecamp.org/news/4-principles-for-getting-started-with-website-accessibility-4e85f75730b/

可访问性不一致 可访问性低