javascript 界面_没有JavaScript的选项卡式界面

javascript 界面

More and more fancy interface features rely on JavaScript to create— and therefore create accessibility problems with —how they work. Even when today they no longer require JS to be implemented. CSS3 has brought some serious power to us as developers, allowing for modal dialogs, “hamburger” mobile friendly menus, and even tabbed interfaces to be implemented without a single line of JavaScript.

越来越多的精美界面功能依赖JavaScript来创建(以及因此而产生)其工作方式的可访问性问题。 即使在今天，他们不再需要实施JS。 CSS3为我们的开发人员带来了强大的力量，无需使用一行JavaScript就可以实现模式对话框，“汉堡包”移动友好菜单甚至选项卡式界面。

使用JavaScript有什么问题？ (What’s Wrong With Using JavaScript?)

In and of itself nothing, so long as it is not your only means of providing usability/functionality on a page. As I said in a recent article, good JavaScript should enhance an already working page, NOT be your only means of it working.

只要它不是在页面上提供可用性/功能的唯一方法，它就什么也不是什么。 就像我在最近的一篇文章中所说的那样，好JavaScript应该增强一个已经在工作的页面，而不是您唯一的工作方式。

If basic functionality does not work when scripting is blocked, disabled, or otherwise irrelevant, you are not WCAG compliant and therefore risking prosecution or civil litigation under laws like the US ADA or UK EQA. Screen readers (software that reads the page aloud), braille readers, search engines, and other non-visual user-agents have difficulty with — if not outright cannot access — pages that use JavaScript for everything. Many users also block it out of distrust, or work in places where it is disabled on purpose. JavaScript should not be your go-to technology as the solution to every flipping problem client-side!

如果在脚本被阻止，禁用或其他不相关的情况下基本功能不起作用，则说明您不符合WCAG的要求，因此可能面临根据美国ADA或UK EQA等法律起诉或提起民事诉讼的风险。 屏幕阅读器(大声读取页面的软件) ，盲文阅读器，搜索引擎和其他非可视用户代理在使用JavaScript进行所有操作的页面上都存在困难-即使不是完全无法访问。 许多用户也出于不信任的目的而将其阻止，或在故意禁用它的地方工作。 JavaScript不应该作为解决每一个棘手的客户端问题的解决方案而成为您的首选技术！

Again, not saying you can’t use JavaScript, but it should ENHANCE the user experience, not be the only means of providing it.

再说一次，并不是说您不能使用JavaScript，而是应该增强用户体验，而不是提供JavaScript的唯一方法。

那么，如果没有标签，我们如何实现标签呢？ (So How Do We Implement Tabs Without It?)

That’s actually pretty easy thanks to CSS 3 and the “new” (if a decade as of 2020 can be called “new”) :checked, :nth-child, and the General sibling combinator. Basically, we “abuse” <input type=”radio”> to accomplish this.

多亏了CSS 3和“新” (如果可以将2020年的十年称为“新”) :checked ， :nth-child和General兄弟组合器 ，这实际上很容易。 基本上，我们“滥用” <input type=”radio”>来实现这一点。

The real magic comes from that if you click on a <label> where the for=”” attribute points at an input, it’s the same as clicking on that input! As such we can place our labels in a list for proper semantics, separate from and after their inputs.

真正的魔力在于，如果单击<label>上for=””属性指向输入的地方，则与单击该输入相同！ 这样，我们可以将标签放置在列表中以获取适当的语义，与它们的输入分开并在输入之后。

Everything will go into a <div class=”tabset”> so that we can easily target everything without slopping classes all over the markup for no good reason.

一切都将放入<div class=”tabset”>这样我们就可以轻松地将所有内容作为目标，而无需在整个标记中增加类，而无需任何理由。

标记 (The Markup)

First our inputs:

首先我们的输入：

<div class="tabset">
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_description"
   hidden
   aria-hidden="true"
   checked
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_statistics"
   hidden
   aria-hidden="true"
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_reviews"
   hidden
   aria-hidden="true"
  >
  <input
   type="radio"
   name="tabset_1"
   id="tabset_1_contact"
   hidden
   aria-hidden="true"
  >

They all get the same name to function as a radio set, with unique ID’s for each. I like to use the name as a prefix to the ID.

它们都具有相同的名称以用作收音机，每个都有唯一的ID。 我喜欢使用名称作为ID的前缀。

They get “hidden” so that when our screen media CSS is inapplicable/irrelevant to the UA, they are ignored. I further set aria-hidden=”true” so that should the screen media CSS get applied to aural/speech (NOT supposed to happen, but some UA’s are trash) they will still be ignored. Remember, concepts like tabs are for screen media only.

它们被“隐藏”，因此当我们的屏幕媒体CSS不适用/与UA不相关时，它们将被忽略。 我进一步设置了aria-hidden=”true”以便将屏幕媒体CSS应用于听觉/语音(应该不会发生，但有些UA会成为垃圾)，它们仍将被忽略。 请记住，标签等概念仅适用于屏幕媒体。

Next is our list of labels that will become our “tabs”.

接下来是我们将成为“标签”的标签列表。

<ul hidden aria-hidden="true">
   <li><label for="tabset_1_description">Description</label></li>
   <li><label for="tabset_1_statistics">Statistics</label></li>
   <li><label for="tabset_1_reviews">Reviews</label></li>
   <li><label for="tabset_1_contact">Contact</label></li>
</ul>

These too are “hidden” both by attribute and aria-hidden. A simple list of choices (the proper semantics, if you omit the UL/LI some UA’s will think it’s a run-on sentence of gibberish). Again the magic being that clicking on these labels is the same as clicking on the input these are “for”.

这些属性在属性上也被“隐藏”，并且被aria隐藏。 选择的简单列表(适当的语义，如果您省略UL / LI，则某些UA会认为这是胡言乱语)。 同样，魔术是单击这些标签与单击输入是“ for”相同。

Our tab content can then be treated as <section> inside a <div>.

然后，我们的选项卡内容可以在<div>内被视为<section> <div> 。

<div>
   <section>
    <h2>Description</h2>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elementum neque, ac pharetra tortor. Vivamus ac vehicula augue. Curabitur pretium commodo nisi id pellentesque.
    </p>
   </section><section>
    <h2>Statistics</h2>
    <p>
     Sed ut leo in turpis efficitur convallis at bibendum erat. Curabitur in egestas ex. Etiam efficitur sagittis molestie. Praesent condimentum elementum ipsum sit amet euismod. Sed vestibulum, leo ac iaculis fringilla, felis nulla placerat turpis, eu aliquam elit risus vel tellus.
    </p>
   </section><section>
    <h2>Reviews</h2>
    <p>
     Donec non nunc ac augue ornare aliquam. Aenean sed volutpat arcu. Sed molestie lacus placerat nisl gravida condimentum.
    </p>
   </section><section>
    <h2>Contact</h2>
    <p>
     Nullam nec condimentum lacus. Integer dapibus velit nec ipsum varius, a pharetra arcu imperdiet. Donec pretium libero a tincidunt vulputate. Mauris feugiat tempor lectus, quis placerat mi congue sit amet.
    </p>
   </section>
  </div>
 <!-- .tabset --></div>

Each one getting a <h2> to describe the section for non-visual UA’s. If we want, we can hide these headings in our screen media stylesheet.

每个人都得到一个<h2>来描述非视觉UA的部分。 如果需要，可以在屏幕媒体样式表中隐藏这些标题。

造型 (Styling It)

All this code will also assume that some form of “reset” is in use. First, we need to target the input so that they are no longer “hidden” by the attribute so we can still have keyboard navigation, whilst simultaneously still being hidden. This also fixes a bug where IE won’t change the state of an input that has the hidden attribute on it unless you set it visible with display.

所有这些代码还将假定正在使用某种形式的“重置”。 首先，我们需要以输入为目标，以使它们不再被属性“隐藏”，以便我们仍然可以进行键盘导航，同时仍被隐藏。 这也修复了一个错误，即IE不会更改具有hidden属性的输入的状态，除非您将其设置为在display可见。

.tabset > input {
  display:block; /* "enable" hidden elements in IE/edge */
  position:absolute; /* then hide them off-screen */
  left:-100%;
}

Next is our unordered list.

接下来是我们的无序列表。

.tabset > ul {
  position:relative;
  z-index:999;
  list-style:none;
  display:flex;
  margin-bottom:-1px;
}

The position:relative; and z-index:999; is for a “trick” we can use to make the tabs overlap their bottom border with the tab frame. To put all the labels on one line we could use inline-block or floats, but these days flex is just so much easier!

position:relative; 和z-index:999; 是一种“技巧”，我们可以使用它来使选项卡的底部边框与选项卡框架重叠。 要将所有标签放在一行上，我们可以使用inline-block或floats，但是如今flex变得非常容易！

As all our <label> and the <div> frame around the content tabs share the same border, it’s a no-brainer to declare them together.

由于我们所有的<label>和<div>框在内容选项卡上都具有相同的边框，因此一起声明它们是不费吹灰之力的。

.tabset > ul label,
.tabset > div {
  border:1px solid hsl(220, 100%, 60%);
}

Note, I’ve been using HSL lately, it’s actually easier to reskin your whole colour scheme as you can just search/replace “hsl(220” with whatever you want… or use CSS variables to assign it.

请注意，我最近一直在使用HSL，实际上，重新设置整个配色方案更容易，因为您可以使用所需的任何内容搜索/替换“ hsl(220”)…或使用CSS变量进行分配。

The labels:

标签：

.tabset > ul label {
  display:inline-block;
  padding:0.25em 1em;
  background:hsl(220, 100%, 90%);
  border-right-width:0;
}

…are set to inline-block so they obey padding top/bottom. You could set this display:block instead, but since they’re on a single line I feel more comfortable with inline-block. YMMV. Note they remove the right side border. We’ll get to that shortly.

…设置为inline-block因此它们遵循填充顶部/底部。 您可以改为设置display:block ，但是由于它们在一行上，所以我对inline-block感到更舒服。 YMMV。 请注意，它们删除了右侧边框。 我们将尽快解决。

.tabset > ul li:first-child label {
  border-radius:0.5em 0 0 0;
}

Round the corner of the first one.

绕过第一个。

.tabset > ul li:last-child label {
  border-right-width:1px;
  border-radius:0 0.5em 0 0;
}

Round the top-right corner of the last, then re-apply the right border. Boom, no double-border between elements, and the first/last ones getting some light rounding.

围绕最后一个的右上角，然后重新应用右边框。 动臂，元素之间没有双边界，并且第一个/最后一个元素得到了一些舍入。

.tabset > div {
  position:relative;
  background:hsl(220, 100%, 98%);
  border-radius:0 0.5em 0.5em 0.5em;
}

The <div> wrapping our <section> tags gets a lighter background and rounding on all but the top-left corner, where it sits flush with our tabs.

包裹<section>标记的<div>背景更浅，并且除左上角(与我们的标签页齐平)外的所有部分均取整。

Now the “complex” part begins. First we should have a style applied to the label when keyboard navigation occurs. A simple underscore on :focus can do the trick. This will look complex, but it isn’t.

现在，“复杂”部分开始了。 首先，当键盘导航发生时，我们应该将样式应用于标签。 一个简单的下划线：focus就可以解决问题。 这看起来很复杂，但事实并非如此。

.tabset > input:nth-child(1):focus ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):focus ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):focus ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):focus ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):focus ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):focus ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):focus ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):focus ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):focus ~ ul li:nth-child(9) label {
  text-decoration:underline;
}

Now, this limits us to only supporting up to 9 tabs, but honestly if you have more than 9 tabs it’s probably time to consider using a different interface style, possibly breaking it into multiple pages. You rarely see more than 5 tabs on a website for good reason.

现在，这将我们限制为最多仅支持9个选项卡，但是老实说，如果您有9个以上的选项卡，则可能是时候考虑使用不同的界面样式，可能将其分成多个页面。 您很少有理由在网站上看到超过5个标签。

The logic is actually simpler than it looks. Let’s look at just one selector:

逻辑实际上比看起来简单。 让我们来看一个选择器：

.tabset > input:nth-child(1):focus ~ ul li:nth-child(1) label,

Inside .tabset when the first input is focused, the label inside any adjacent unordered lists’s first li will get our style. That’s really all that says. This means that when you focus an input (keyboard nav or click on it), the associated label will get an underscore. We repeat this for however many tabs we want to support at maximum.

在.tabset内部，当第一个输入被聚焦时，任何相邻的无序列表的第一个li内的标签将具有我们的样式。 这就是所有这些。 这意味着，当您关注输入(键盘导航或单击它)时，关联的标签将带有下划线。 对于我们想要支持的最多选项卡，我们将重复此操作。

We can then repeat this pattern for when the input are checked.

然后，我们可以在检查输入时重复此模式。

.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):checked ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):checked ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):checked ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):checked ~ ul li:nth-child(9) label {
  background:hsl(220, 100%, 98%);
  border-bottom-color:hsl(220, 100%, 98%);
}

Making them the same color and bottom border as our content <div> makes it look like the tab is “on top”. That’s where our -1px bottom margin comes into play.

使它们与我们的内容<div>相同的颜色和底部边框使该选项卡看起来像在“顶部”。 这就是我们的-1px下边距起作用的地方。

So what about showing/hiding the content <section>? First let’s hide the sections.

那么显示/隐藏内容<section>呢？ 首先，让我们隐藏这些部分。

.tabset > div > section,
.tabset > div > section h2 {
  position:absolute;
  top:-999em;
  left:-999em;
}

I use the same code to hide the H2 off screen. A big problem with screen readers and some other non-sighted UA’s is that they’ll often not read content if you set them to display:none; or visibility:hidden; Search engines in particular will oft obey screen media behaviors when they shouldn’t in their search for dirtbag black-hat SEO scam artists trying to use the “content cloaking” trick. By sliding it off screen we at best avoid the issue entirely, at worst get flagged for a manual review where any competent person at Google will go “yeah, this is fine”.

我使用相同的代码将H2隐藏在屏幕之外。 屏幕阅读器和其他一些非可视UA的一个大问题是，如果将它们设置为display，则它们通常不会阅读内容。 或可见性：隐藏； 当搜索引擎不应该搜索试图使用“内容掩盖”技巧的黑帽子SEO欺诈艺术家时，尤其会遵循屏幕媒体的行为。 通过将其滑出屏幕，我们最多可以完全避免该问题，最糟糕的是，它会被标记为需要人工复查的Google主管人员会“是的，这很好”。

When possible, be it scripted or CSS driven, try NOT to use display:none on major content sections! You’re risking the content being ignored by search and other non-visual user-agents.

如果可能，无论是脚本编写还是CSS驱动的，请尽量不要在主要内容部分使用display：none！ 您冒着被搜索和其他非可视用户代理忽略的内容的风险。

Next I set a nice all-around padding on the <section> everywhere but bottom. I prefer to pad instead of margin to avoid “collapse” headaches, and if you pad the bottom of content elements then pad all other directions of the parent, it’s just easier to deal with.

接下来，我在除底部以外的所有地方的<section>上设置了一个很好的全填充。 我更喜欢用填充而不是空白来避免“崩溃”的麻烦，而且，如果填充内容元素的底部，然后填充父级的所有其他方向，则处理起来会更容易。

.tabset > div > section {
  padding:1em 1em 0;
}

Then we implement the same selector logic as with the <ul> to switch the <section> to display:static;

然后，我们实现与<ul>相同的选择器逻辑，将<section>切换为display:static;

.tabset > input:nth-child(1):checked ~ div > section:nth-child(1),
.tabset > input:nth-child(2):checked ~ div > section:nth-child(2),
.tabset > input:nth-child(3):checked ~ div > section:nth-child(3),
.tabset > input:nth-child(4):checked ~ div > section:nth-child(4),
.tabset > input:nth-child(5):checked ~ div > section:nth-child(5),
.tabset > input:nth-child(6):checked ~ div > section:nth-child(6),
.tabset > input:nth-child(7):checked ~ div > section:nth-child(7),
.tabset > input:nth-child(8):checked ~ div > section:nth-child(8),
.tabset > input:nth-child(9):checked ~ div > section:nth-child(9) {
  position:Static;
}

One thing to remember about display:static; is that it basically ignores all positioning rules. This pops the currently selected section into view without having to change any other properties.

关于display:static;要记住的一件事display:static; 是它基本上会忽略所有定位规则。 这会在不更改任何其他属性的情况下将当前选定的部分弹出显示。

Which is good for a quick and dirty implementation. You could get more complex with this, like leveraging display:flex; on the <div> and using position:relative to slide them all into place, opening the doors to fancy animations and the like.

这对于快速而肮脏的实现很有用。 您可能会因此变得更加复杂，例如利用display:flex; 在<div>并使用position：relative将它们全部滑入到位，为精美的动画等打开了大门。

Finally as these are label driven, and you’re clicking on those labels, there’s the issue that clicking quickly or accidentally dragging whilst clicking can select the text in an unwanted fashion. Also if someone goes to copy/paste from the page, you might not want those labels in the copy since they’re redundant to the H2… which would copy. Hence:

最后，由于这些标签是由标签驱动的，并且您正在单击这些标签，因此存在一个问题，即单击时快速单击或意外拖动会以不需要的方式选择文本。 另外，如果有人要从页面复制/粘贴，您可能不希望这些标签出现在副本中，因为它们对于要复制的H2是多余的。 因此：

.tabset > ul label {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

Stops those labels from being selected. It might SEEM like using all the browser-prefix versions is wasteful and unnecessary, but if you check “Can I use”

停止选择这些标签。 看起来SEEM就像使用所有浏览器前缀版本都是浪费和不必要的，但是如果您选中“我可以使用”

You’ll see the compatibility table says that all versions of IE need -ms-, all versions of Safari still need -webkit-, the -moz- version was only “recently” removed and with them dropping new build support for certain older OS that’s a cutoff we still have to worry about, etc, etc.

您会看到兼容性表显示，所有版本的IE都需要-ms-，所有版本的Safari仍需要-webkit-，仅-moz-版本被“最近”删除，并且它们删除了对某些较旧OS的新构建支持这是我们仍然要担心的截止点，等等，等等。

But really that’s all there is to it.

但这就是全部。

现场演示 (Live Demo)

Here is a working example:

这是一个工作示例：

The file directory:

文件目录：

https://cutcodedown.com/for_others/medium_articles/tabsWithoutJS/

https://cutcodedown.com/for_others/medium_articles/tabsWithoutJS/

Is wide open for easy access to the gooey bits and pieces. I put a .txt of the markup in there for those shy of “view-source”, and there’s a tabs.rar file containing the full code for easy download.

敞开式设计，方便拿取粘糊糊的碎屑。 我在其中放了一个标记的.txt文件，以避开“查看源代码”，还有一个tabs.rar文件，其中包含易于下载的完整代码 。

Pay attention to the keyboard functionality. Hit [tab] until you see the underscore on one of the tabs — or click on one to focus it — and then try the arrow keys. When any of the radio buttons receives focus, you can use the arrows to switch between them.

注意键盘功能。 点击[tab]，直到您在其中一个选项卡上看到下划线(或单击其中的一个以使其突出显示)，然后尝试使用箭头键。 当任何一个单选按钮获得焦点时，您可以使用箭头在它们之间切换。

利弊 (Pros and Cons)

Unlike many out there, I like to list off the problems first.

与那里的许多人不同，我喜欢首先列出问题。

缺点 (Disadvantages)

1. You are reliant upon more modern browsers for this to work. It should function well in everything ≥ IE 10. These days I’m getting in the habit of just blocking CSS and letting things gracefully degrade to my semantic markup in legacy browsers.

   您需要依靠更现代的浏览器才能正常工作。 它应该在所有IE 10以上的版本中都能正常运行。这些天，我开始养成只阻止CSS，让内容在旧版浏览器中优雅地降为我的语义标记的习惯。

2. For each additional tab you have to add 3 lines of CSS for it to be supported in three different places. This can get unwieldy, but really if you need more than nine of them you probably shouldn’t be making a tabbed section of a website.
   对于每个其他选项卡，您必须添加3行CSS，以使其在三个不同的地方得到支持。 这可能很笨拙，但实际上，如果您需要九个以上的控件，则可能不应该在网站的选项卡式部分中创建。

3. This implementation doesn’t take a dump on the markup with endless pointless classes for nothing. This may upset some developers who can’t handle selectors and believe bald faced lies like how endless pointless classes for nothing resulting in two to twelve times the markup needed to do the job somehow magically makes “the render faster”. Wait, that’s a disadvantage? Sadly to many — let’s call them morons — it is.

   此实现不会在无休止的，毫无意义的类的标记上进行转储。 这可能会使一些无法处理选择器并认为秃顶的谎言的开发人员感到不安，就像无休止的毫无意义的类导致毫无用处的标记导致完成工作所需的标记的2到12倍以某种方式神奇地使“渲染速度更快”。 等等，这是不利吗？ 对许多人来说可悲的是-我们称其为白痴-是的。

优点 (Advantages)

1. The basic structure of the content <section> is the proper semantic markup, which means better usability for non-visual UA and alternative navigation.
   内容<section>的基本结构是正确的语义标记，这意味着非可视化UA和替代导航的可用性更高。
2. It doesn’t rely on JavaScript for all its functionality, so unlike other methods it is not a walking talking WCAG violation.
   它并非完全依靠JavaScript来实现其所有功能，因此与其他方法不同，它不是违反WCAG的规则。
3. CSS off in any modern browser all our UI controls disappear leaving us with a proper accessible structure.
   在任何现代浏览器中，CSS都关闭了，我们所有的UI控件都消失了，从而为我们提供了适当的可访问结构。
4. As it is 100% CSS controlled, you can expand on this with CSS transitions, animations, or any other effects you might be able to think of.
   由于它是100％由CSS控制的，因此您可以使用CSS过渡，动画或您可能想到的任何其他效果对此进行扩展。
5. It doesn’t piss all over the markup with made up fairy-tale non-semantic tags, endless pointless classes for nothing, and other “eye cans haz teh intarwebs” developer stupidity.
   它并没有因为虚构的童话般的非语义标签，无休止的无休止的类，以及其他“愚蠢的开发人员”愚蠢而无处不在。

6. The use of the “hidden” HTML 5 attribute and the aria-hidden=”true” role make it so screen readers, braille readers, users viewing without CSS, and the like ignore all the excess markup used to create the tabs, browsing the page as if it were just normal sections with headings.

   通过使用“隐藏的” HTML 5属性和aria-hidden=”true”角色，屏幕阅读器，盲文阅读器，未使用CSS进行查看的用户等均会忽略用于创建标签页的所有多余标记，页面，就像带有标题的普通部分一样。

7. It’s usually far less code than you’d have using any of the monuments to developer ignorance, incompetence, and ineptitude that are front end frameworks.

   通常，与使用任何作为前端框架的开发人员无知，无能和无能的纪念碑相比，使用的代码通常要少得多。

结论 (Conclusion)

“Abusing” <input type=”checkbox”> with the :checked CSS property and the general sibling combinator ~ can let you avoid a lot of scripted silliness in a manner that avoids most accessibility woes. “JavaScript only” solutions to problems should be avoided, and we finally have the tools to do so!

带有:checked CSS属性和一般的同级组合器~ “滥用” <input type=”checkbox”>可以使您避免大多数可访问性问题的方式避免了许多脚本化的愚蠢行为。 应该避免针对问题的“仅JavaScript”解决方案，而我们终于有了这样做的工具！

I hope you found this useful, and seriously folks: Put more thought into the accessibility of your sites, particularly in regards to what happens when there’s no JavaScript. You’d think Beyonce and Domino’s getting raked over the coals in court over issues like this would be serving as a wakeup call for developers who work for actual businesses; but no. Far too many developers are sticking their heads in the sand, crying “wah wah, is not” whilst plodding on with little more than apathy, ignorance, and wishful thinking.

我希望您发现这个有用且认真的人：在您的网站的可访问性方面多加考虑，尤其是在没有JavaScript的情况下。 您可能会认为，碧昂丝(Beyonce)和多米诺(Domino)在诸如此类问题上的法庭上之以鼻，这将为从事实际业务的开发人员敲响警钟。 但不是。 太多的开发人员坚持不懈，哭着说“哇哇，不是”，而冷漠，无知和一厢情愿地继续前进。

Don’t let “but millions of people do this way” — the bandwagon fallacy — or “but this has worked fine for years” — aka survivorship bias — dupe you into failing to embrace better ways of doing things, or prevent you from making websites that are actually capable of doing the only thing that really matters.

不要让“但有数百万人这样做”(即流行谬论)，或者“但是这种做法已经运行了好几年”(也就是幸存者偏见)，使您陷入无法接受更好的做事方式的情况，或者使您无法做到真正有能力做的事情才是真正重要的网站。

Delivering content to as many users as possible regardless of device limitations or handicap.

不论设备限制或障碍如何，都将内容交付给尽可能多的用户。

翻译自: https://levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8

javascript 界面