web组件设计样式_如何设置可访问性的样式：Web组件方法

最新推荐文章于 2024-08-07 12:28:13 发布

cumian8165

最新推荐文章于 2024-08-07 12:28:13 发布

阅读量427

点赞数

文章标签： python java html javascript 编程语言 ViewUI

原文链接：https://www.freecodecamp.org/news/styling-accessibility-a-web-components-approach-dc2aa8123eb2/

版权

web组件设计样式

by Cristiano Correia

克里斯蒂亚诺·科雷亚(Cristiano Correia)

The new Web Standards are evolving fast, and sometimes it’s hard to actually know the current state of a particular subject in a sea of subjects. I often realize that the vast majority of web projects start without having Accessibility (a11y) in mind and it becomes daunting to go back and fix it.

新的Web标准发展Swift，有时很难真正了解特定主题在海洋中的当前状态 。我经常意识到，绝大多数Web项目在开始时都没有考虑可访问性(a11y)，因此回去对其进行修复变得很艰巨。

Since there are still many Web Components projects yet to be born, I decided to gather up the 101’s about those particular subjects and guide anyone sailing in these seas for the first time. So in this article, you will find:

由于仍有许多Web组件项目尚待诞生，因此我决定收集有关这些特定主题的101册，并首次指导在这些海洋中航行的任何人。因此，在本文中，您将找到：

The basics about Accessibility
有关辅助功能的基础知识
The basics about Web Components
有关Web组件的基础知识
What’s new regarding CSS
关于CSS的新功能
How can you make your Web Components more accessible
如何使您的Web组件更易于访问

Let’s sail.

让我们起航。

基础知识1。什么是Web可访问性？ (Basics #1. What’s Web Accessibility?)

“Accessibility is often viewed as making your site work on screen readers. In reality, web accessibility is a subset of User Experience (UX) focused on making your websites usable by the widest range of people possible, including those who have disabilities.”

“可访问性通常被认为是使您的网站在屏幕阅读器上工作。 实际上，网络可访问性是用户体验(UX)的子集，用户体验(UX)致力于使您的网站可供包括残障人士在内的尽可能多的人使用。”

The above quote (from Dave Ruppert on “Myth: Accessibility is ‘blind people’” for the a11y project) reflects the biggest challenge about Web Accessibility: knowing exactly what it is.

上面的引言(来自a11y项目的“ 神话：可访问性是'盲人'的 Dave Ruppert))反映了Web可访问性的最大挑战：确切地了解它的含义。

Web Accessibility is essentially a way of giving access your product to all your potential users.

Web无障碍实质上是一种将产品访问权授予所有潜在用户的方法。

The 5 categories of accessibility to take into account are:

要考虑的5种可访问性类别是：

Visual (e.g. non-sighted, myopia, color blindness, etc.)
视觉(例如，无视力，近视，色盲等)
Auditory
听觉
Motor
发动机
Cognitive
认知性
Temporarily disabled users (e. g. one-handed phone users)
暂时禁用的用户(例如单手电话用户)

If we need to translate those into a product, it usually means being concerned about:

如果我们需要将它们转换为产品 ，通常意味着要关注：

Semantics
语义学
Keyboard inputs
键盘输入
Text alternatives
文字替代
Color Contrast
色彩对比

In order to take that into account while developing a product, you should:

为了在开发产品时考虑到这一点，您应该：

Make sure you convey meaning through not only color but also form
确保您不仅通过颜色而且通过形式传达含义
Make sure your product is resizable
确保您的产品可调整大小
Make sure your content subjects are distinguishable
确保您的内容主题可区分
Make sure you follow the guidelines from the W3C in general
确保总体上遵循W3C的指南

…and don’t forget about the Accessibility Tree! It is the

…不要忘记可访问性树！ 它是

“structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers” (source).

“由与DOM并行运行的平台可访问性API产生的结构，该结构将可访问性信息公开给诸如屏幕阅读器之类的辅助技术” ( 源 )。

基础知识2：Web组件简史 (Basics 2: A Brief History of Web Components)

Web Components, in their essence, are actually “nothing”: Web Components are a set of new Web Standards that help us achieve a native way of making Components. In broad strokes, I would define Web Components as:

实际上，Web组件实际上是“一无所获”：Web组件是一组新的Web标准 ，可以帮助我们获得一种本机化的组件制造方法。概括地说，我将Web组件定义为：

A native way to achieve a small and re-usable set of logic, behaviors and interface elements, through a series of browsers standards.

通过一系列浏览器标准来实现少量的，可重复使用的逻辑，行为和界面元素的本机方法 。

So, what are the building blocks of Web Components?

那么，Web组件的构成要素是什么？

HTML Templates
HTML模板
Shadow DOM
影子DOM
Custom Elements
自定义元素
…and HTML Imports (-ish)
…和HTML导入(-ish)

HTML模板 (HTML Templates)

HTML Templates are a form of re-using pieces of HTML without the original “template” being rendered on the page.

HTML模板是一种重复使用HTML的形式，而页面上没有呈现原始的“模板”。

It works as follows:

其工作方式如下：

Which will render something like this:

它将呈现如下内容：

You can check how HTML Templates are currently being supported by browsers on this caniuse page.

您可以在此caniuse页面上查看浏览器当前如何支持HTML模板。

影子DOM (Shadow DOM)

Shadow DOM is a way to achieve CSS scoping, DOM encapsulation, and composition, making it easier to build isolated components.

Shadow DOM是一种实现CSS作用域，DOM封装和组合的方法，使构建隔离的组件更加容易。

There’s two modes of achieving Shadow DOM: “closed” and “open”. The difference is that when you instance element.shadowRoot, the “open” mode returns the HTML node and the “closed” mode returns null. Both modes return null when you try to query the DOM. Bear in mind that you have to set a mode to use Shadow DOM since there is no default value for it.

有两种实现Shadow DOM的模式：“关闭”和“打开”。区别在于，当您实例化element.shadowRoot ，“打开”模式将返回HTML节点，而“关闭”模式将返回null 。当您尝试查询DOM时，两种模式均返回null 。请记住，由于没有默认值，因此必须设置使用Shadow DOM的模式。

It works as follows:

其工作方式如下：

Which will render something like this:

它将呈现如下内容：

And the DOM tree will look something like this:

DOM树将如下所示：

You can check how Shadow DOM is currently supported by browsers on this caniuse page.

您可以在此caniuse页面上查看浏览器当前如何支持Shadow DOM。

自定义元素 (Custom Elements)

Custom Elements are the way to achieve full re-usable encapsulated pieces of logic and have the best from Shadow DOM and HTML Templates, including slots.

自定义元素是实现完全可重用的封装逻辑部分的一种方法，并具有Shadow DOM和HTML模板(包括slot)的最佳功能 。

All this can be achieved by the following:

所有这些可以通过以下方式实现：

Which will render something like this:

它将呈现如下内容：

You can check how Custom Elements are currently supported by browsers on this caniuse page.

您可以在此caniuse页面上查看浏览器当前如何支持Custom Elements。

…和-ish：HTML导入与ES模块 (…and the -ish: HTML Imports vs. ES Modules)

HTML Imports were a big part of the Web Components standards, but they’ve stopped being supported and no longer are listed on the Web Components page (being replaced by ES Modules). They’re no more than a footnote at this point in Web Components history. As Wilson Page from the Firefox OS team puts it:

HTML导入是Web组件标准的重要组成部分，但已不再受支持，并且不再在“ Web组件”页面上列出(已由ES Modules代替)。它们仅是Web组件历史记录中的脚注。正如Firefox OS小组的Wilson Page 所说：

“We’ve been working with Web Components in Firefox OS for over a year and have found using existing module syntax (AMD or Common JS) to resolve a dependency tree, registering elements, loaded using a normal <script> tag seems to be enough to get stuff done.”

“我们已经在Firefox OS中使用Web组件一年多了，发现使用现有的模块语法(AMD或Common JS)来解析依赖关系树，注册元素，并使用普通的<script>标记加载就足够了。得到的东西做“。

If you want to know more about the state of the HTML Imports vs. ES Modules, you can check out this page.

如果您想进一步了解HTML导入和ES模块的状态，可以查看此页面。

Web Components are way more than this. Make sure you continue to search for more information about them, specially regarding custom events, observedAttributes, testing and performance.

Web组件的功能远不止于此。确保继续搜索有关它们的更多信息，尤其是有关自定义事件 ， observedAttributes ，测试和性能的信息 。

奖金回合：新CSS“理论” (Bonus round: the new CSS “theories”)

If you check back on the code snippets on this article, you’ve already glimpsed a few new offerings from CSS:

如果您回顾一下本文的代码片段，您已经了解了CSS的一些新功能：

Scoped CSS (through Shadow DOM) solves one of the biggest problems with CSS, the “over-ruling”
范围CSS (通过Shadow DOM)解决了CSS最大的问题之一，即“过度统治”
With :host we can select to style a shadow host
使用：host我们可以选择设置阴影主机的样式
There is also :host() and :host-context() — the first one targeting the host that is passed inside the parenthesis (e.g. :host(.some-custom-element)) and the second one targeting the content of a shadow host (e.g. :host-context(h2) targets the h2’s inside a shadow host)
还有：host()和：host-context() －第一个针对在括号内传递的主机(例如：host(.some-custom-element))，第二个针对阴影的内容主机(例如：host-context(h2)以影子主机内的h2为目标)

您不应该使用的“理论” (“theories” you shouldn’t use)

Since Web Components are standards that are continuously evolving, there are a few things that have come and gone (like the already mentioned HTML Imports). That’s also the case for various aspects of CSS, and is especially true for the Shadow Piercing Combinators, which were forms of styling shadowed elements. If you come across these, please avoided them :) They are:

由于Web组件是不断发展的标准，因此有些事情已经过去了(例如已经提到HTML导入)。 CSS的各个方面也是如此，对于Shadow Piercing Combinator尤其如此，后者是对阴影元素进行样式设置的形式。如果遇到这些，请避免使用它们:)它们是：

::shadow
：：阴影
/deep/
/深/
>>>
>>>

但是，等等，CSS变量！ (But wait, CSS Variables!)

…and yes. There are proper forms of styling shadowed elements: CSS Variables. You can re-use generic styling inside (and actually, outside) Web Components. Let’s check out how:

…是的。有样式化阴影元素的适当形式：CSS变量。您可以在Web组件内部(以及实际上在外部)重新使用通用样式。让我们看看如何：

The h2 inside the shadowRoot will render as the content of the — main-text-color if it exists. If it does not exist, it will be rendered as blue. The result is something like this:

shadowRoot内部的h2将呈现为— main-text-color的内容(如果存在)。如果不存在，它将呈现为蓝色。结果是这样的：

You can check how CSS Variables are currently supported by browsers on this caniuse page.

您可以在此caniuse页面上查看浏览器当前如何支持CSS变量。

:: part()和:: theme() (::part() and ::theme())

::part() and ::theme() are very recent proposals to CSS that came to our aid as alternatives to style shadowed elements. Instead of trying to explain them, I’m just going to redirect you to this article by Monica Dinculescu which is excellent. They are very recent proposals to CSS so it’s quite possible that when you read this article they will still not be supported by your browser.

:: part()和:: theme()是CSS的最新建议，这些建议可以替代阴影元素的样式。我不打算解释它们，而是将您重定向到Monica Dinculescu的这篇很棒的文章。它们是CSS的最新建议，因此当您阅读本文时，很有可能浏览器仍不支持它们。

那么，如何使我们的组件可访问？ (So, how can we make our components accessible?)

Firstly…

首先…

基础知识，基础知识，3。有关可访问性的基础知识： (Basics, basics, 3. The basics about accessibility:)

There are a few things that we can do to our product from the ground-up that will immensely help in making it accessible to our users.

我们可以从头开始对产品做一些事情，这将极大地帮助我们的用户使用它。

One thing to remember is the blueberry theory (an idea “stolen” again from a talk of Monica Dunculescu):

要记住的一件事是蓝莓理论 (Monica Dunculescu的谈话再次“ 偷走”了一个想法)：

What makes a blueberry muffin is not adding blueberries to an existing muffin, is actually cooking a blueberry muffin from the beginning. Making a product accessible is not adding a few roles and ARIA labels after it’s built, but it is actually having accessibility in mind from the very start.

制作蓝莓松饼的原因不是在现有的松饼中添加蓝莓，而是从一开始就在烹饪蓝莓松饼。构建产品后，使其可访问性并没有添加一些角色和ARIA标签，但实际上从一开始就在考虑可访问性。

So…

所以…

角色 (Role)

Role is a way of telling a new element to behave as a different one. Quick example:

角色是一种告诉新元素表现不同的方式。快速示例：

标签索引 (TabIndex)

TabIndex is a way of making an element focusable (essential for a screen reader). If you set it as 0, it’s focusable on the right order, if it’s -1 it’s focusable out of the normal order (as in, you can trigger programmatically the focus of the element). If you set it to any other positive number, you change the actual order of the focus (highly avoidable). Quick example:

TabIndex是使元素可聚焦(对于屏幕阅读器必不可少的一种方法)。如果将其设置为0，则可以按正确的顺序聚焦；如果将其设置为-1，则可以按正常顺序聚焦(例如，可以以编程方式触发元素的聚焦)。如果将其设置为任何其他正数，则将更改焦点的实际顺序(高度可避免)。快速示例：

焦点指示 (Focus indicator)

The focus indicator is something (usually) native to the browser and serves as a visual aid to which element is focused at the current moment. If you’ve ever thought that the design is not perfect, please don’t remove it (e.g. on Chrome you might see it as an orange or blue glow around an input) with { outline: none; } on the CSS, for example. It’s extremely useful for everyone who uses screen readers — if you want to redesign it, please make sure you follow the accessibility guidelines.

焦点指示符(通常)是浏览器固有的东西，可作为当前元素所关注的视觉辅助。如果您曾经认为设计不完美 ，请不要将其删除(例如，在Chrome上，您可能会在输入周围看到它是橙色或蓝色的光)，并带有{ outline: none; } { outline: none; }在CSS，例如。对于使用屏幕阅读器的每个人来说，它都是非常有用的-如果您想重新设计它，请确保您遵循辅助功能准则。

咏叹调 (ARIA)

Aria is a way to improve how you label your components. There’s tons of them, so I won’t bother you with the huge list :) — you can find them here — just a quick example:

咏叹调是一种改善标记组件方式的方法。它们很多，所以我不会用庞大的清单来打扰您：)-您可以在这里找到它们-只是一个简单的例子：

Without the ARIA labels, a screen reader would perceive the input as “5, slider” but with them, it would read it as “ARIA: amount of problem. 5, slider. min: 0, max: 10”.

如果没有ARIA标签，屏幕阅读器会将输入感知为“ 5，滑块”，但带有它们，它将被读取为“ ARIA：问题数量”。 5，滑块。最小：0，最大：10”。

Here’s an excellent (and quick) tutorial on how to label a custom element:

这是有关如何标记自定义元素的出色(快速)教程：

键盘输入 (Keyboard input)

Like I mentioned at the beginning of the article, it’s quite important to bind the behavior to the keyboard. The native elements from HTML should have this covered but if you write a custom element, never forget that onkeydown, onkeypress and onkeyup events are your best friends.

就像我在文章开头提到的那样，将行为绑定到键盘非常重要。 HTML的本机元素应该涵盖了这一点，但是如果您编写自定义元素，请不要忘记onkeydown ， onkeypress和onkeyup事件是您最好的朋友。

那么，到底有什么新东西？ (So, what’s really new?)

简短的答案： (The short answer:)

Extending HTML interfaces.

扩展HTML接口。

长答案： (The long answer:)

Extending HTML interfaces :)

扩展HTML接口:)

Let me explain.

让我解释。

Although a native element should be fully accessible, it might not provide the exact functionality you need or look the way you want. We can for sure write something adapted to our actual needs but we would have to take care of all the accessibility needs since custom elements have no implicit semantics or keyboard support.… So, why can’t we extend the functionality of a native element? Now we can. Or “can”.

尽管本机元素应该可以完全访问，但是它可能无法提供所需的确切功能或外观。我们可以肯定地写一些适合我们实际需求的东西，但是由于自定义元素没有隐式语义或键盘支持，因此我们必须照顾所有的可访问性需求。……那么，为什么我们不能扩展本机元素的功能？现在可以了。或“可以”。

元素接口 (Element interfaces)

Here is the list of the existing HTML interfaces. With them, you can extend the native behavior. We can revisit our example for Custom Elements and extend HTMLButtonElement to add our own behavior. Here’s how:

这是现有HTML接口的列表。有了它们，您可以扩展本机行为。我们可以重新查看自定义元素的示例，并扩展HTMLButtonElement以添加我们自己的行为。这是如何做：

If you remember the previous examples, I added (for dramatic effect :)) a CSS rule that all text would be white. This goes against the native look for a button and makes it unreadable. While extending the normal element with the text being black, we made it a bit more accessible (plus, I added an extra label on it).

如果您还记得前面的示例，我添加了一个CSS规则( 以产生戏剧性的效果:) )，所有文字均为白色。这违背了按钮的本机外观，并使按钮不可读。在将普通元素扩展为黑色文本的同时，我们使其更易于使用(此外，我在其上添加了额外的标签)。

The differences here are:

这里的区别是：

extends HTMLButtonElement instead of HTMLElement
extends HTMLButtonElement而不是HTMLElement
When we define the customElement, we pass as a third parameter an object with which element is extended (in this case “button”)
定义customElement时，我们将对象扩展为对象(在本例中为“按钮”)作为第三个参数
And we use it by referencing a native button element with is="accessible-button".
并且我们通过使用is="accessible-button"引用本机按钮元素来使用它。

This renders something like:

这呈现出类似以下内容：

The first button is not extended so it still has the color as white; The second one is extended so it now has the color black (plus, an ARIA label) and the third one does not work… Why? Because extending a HTML interface needs be done through the is attribute and not be referenced through the normal custom element tag.

第一个按钮没有扩展，因此仍然具有白色的颜色；第二个扩展了，因此现在具有黑色(加上ARIA标签)，第三个不起作用…为什么？因为扩展HTML接口需要通过is属性完成，而不是通过常规的自定义元素标记进行引用。

Beware: if you check the “Extending custom HTML elements” page by google, there is a very important note:

当心：如果您通过Google选中“ 扩展自定义HTML元素 ”页面，则有一个非常重要的注意事项：

Only Chrome 67 supports customized built-in elements (status) right now. Edge and Firefox will implement it, but Safari has chosen not to implement it. This is unfortunate for accessibility and progressive enhancement. If you think extending native HTML elements is useful, voice your thoughts on 509 and 662 on Github.

目前只有Chrome 67支持自定义的内置元素( 状态 )。 Edge和Firefox将实现它，但是Safari选择不实现它。这对于可访问性和逐步增强是不幸的。如果您认为扩展本机HTML元素很有用，请在Github上发表您的想法509和662 。

It’s not the safest feature to use just yet, so always check where your product should be used before using any of the features referenced on this article, specially this one.

这不是最安全的功能，因此在使用本文中引用的任何功能(尤其是此功能)之前，请始终检查应在何处使用您的产品。

因此，如果尚不支持Web组件，该怎么办？ (So if Web Components are not supported everywhere yet, what should I do?)

There’s an in-between state :)

有中间状态:)

填充胶 (Polyfills)

First and foremost, there are polyfills. Check them out here.

首先，是polyfills。在这里查看它们。

图书馆让您的生活更轻松 (Libraries that makes your life easier)

Angular Elements, Polymer and Stencil are just a few examples of libraries that can help you to use Custom Elements supported on multiple browsers.

Angular Elements ， Polymer和Stencil只是库的一些示例，可以帮助您使用在多个浏览器上支持的Custom Elements。

工具类 (Tools)

There’s a bunch of tools to help you make your components more accessible. A favorite of mine is the Accessibility Developer Tools, offered by Google Accessibility. It’s an excellent Chrome extension.

有很多工具可以帮助您使组件更易于访问。我最喜欢的是由Google Accessibility提供的Accessibility Developer Tools 。这是一个出色的Chrome扩展程序。

There’s also a lot of linters out there to keep an eye on you (e.g., the current project I’m working on is a React one, so I’m using the eslint- plugin-jsx-a11y to keep an eye on me).

还有很多棉短绒在那里留意你(例如，当前的项目我的工作是一个做出React，所以我使用的eslint-插件- JSX-A11Y保持眼睛对我) 。