整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

Web 开发中出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。或者，在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态：

  • 元素完全隐藏并从文档流中删除。
  • 元素只是隐藏在视觉上，而且仍然可以被辅助技术(AT)访问，比如屏幕阅读器。
  • 元素是可见的，但仅对屏幕阅读器隐藏。

在这篇文章中，我们将学习在html和css中隐藏元素，并涵盖易访问性、动画和隐藏用例等方面，让我们开始吧。

HTML5 隐藏属性

它是一个布尔 HTML 属性，隐藏了附加到它的元素。当浏览器加载一个web页面时，它不会渲染带有hidden属性的元素，除非该元素被CSS手动覆盖，这与应用display: none的效果类似。

考虑下面的例子：

我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时，才会显示该图。我向元素添加了hidden`属性。

在CSS中，我使用hidden属性仅在所需的视口大小中显示元素。

img[hidden] {
  display: none;
}

@media (min-width: 400px) {
  img[hidden] {
    display: block;
  }
}

事例源码：https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

那么，你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时，我们可以确定即使CSS因为某种原因没有加载，元素也会被隐藏。

可访问性对hidden的影响

从可访问性的角度来看，hidden将元素完全隐藏在web页面之外，因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。

CSS display 属性

每个元素都有一个默认的display值，比如inline-block、block、table等等。要隐藏具有display属性的元素，我们应该使用display: none。当一个元素使用display: none隐藏时，它的所有后代都将被删除。

考虑下面的例子：

img {
  display: none;
}

@media (min-width: 400px) {
  img {
    display: block;
  }
}

这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么？请参见下图：

注意，当蓝皮书被隐藏时，它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了，它更改了文档流，或者在我们的示例中，更改了图书流堆栈。

下面是一个动画，演示当移除书本时发生的情况：

如果资源隐藏在CSS中，它们会加载吗？

是的，会的。例如，如果<image>被CSS隐藏，并且我们在某个断点处显示它，则它已经被加载。即使图片被CSS隐藏，该图片也会引起HTTP请求。

在下面的演示中，我只添加了一个图像，并使用CSS隐藏它。然后，我打开「DevTools」并检查networks选项卡，它显示图像已加载。

稍后我们将对此进行讨论，以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。

style 元素

值得一提的是，有些元素的默认值是display: none。可以将<style>元素添加到HTML页面中，我们可以将其display属性更改为block，这样就可以看到它了。

「html」

<body>
    <style>
       .title { color: #000; }
    </style>
</body>

「css」

style {
    display: block;
}

如果您希望样式块始终可见且可编辑，这是非常有用的。可以通过向style标签添加属性contentteditable =true来编辑它。

事例：https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可访问性对display: none的影响

使用display：none时，它将对屏幕阅读器完全隐藏。

Opacity

通过将opacity度设置为0，该元素及其所有后代将被隐藏，并且不会被继承， 但是，它仅从视觉角度隐藏它们。除此之外，opacity值为1以外的元素将创建一个新的堆叠上下文。

在上图中，蓝皮书仅在视觉上隐藏。与使用display: none时发生的情况相比，它的空间仍然保留，并且堆栈顺序没有变化。

img {
    opacity: 0;
}

根据最初的示例，如果我们要隐藏不透明的图像，结果将如下所示：

该图像仍然存在，并且已保留其空间。它仅从视觉角度隐藏。

更新:2020年1月13日

Dusan Milovanovic指出，pointer-events: none | auto可以用来禁用opacity为0的隐藏元素上的鼠标事件。这一点很重要，因为用户可能会对单击、悬停或选择隐藏元素的文本感到困惑。

事例：https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

可访问性对opacity: 0的影响

一个元素以opacity: 0仍然可以被屏幕阅读器访问，并且可以用键盘进行聚焦。

Visibility

通过使用visibility: hidden，我们可以显示或隐藏类似于使用opacity: 0的元素，而不会影响文档的视觉流。

请注意，蓝皮书是如何从可视流中隐藏的，但是它并没有影响图书堆栈的顺序。

当在父元素上使用visibility: hidden时，所有内容都是隐藏的，但是当该父元素的子元素具有visibility: visible时，将显示该子元素。

「html」

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><!-- Desc --></p>
</article>

「CSS」

article {
    visibility: hidden;
}

img {
    visibility: visible;
}


在上面的例子中，<article>元素具有visibility: hidden。但是，添加visibility: visible可以让图片显示。同样，这是因为visibility应用于元素的后代，但是可以从具有该元素的子元素重写它。

事例源码：https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可访问性对visibility: hidden的影响

该元素被隐藏，其后代将从可访问性树中删除，并且屏幕阅读器不会渲染该元素。

Positioning

要隐藏带有position属性的元素，我们应该将它移到屏幕外，并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:

要将链接放置在屏幕之外，我们应该添加以下内容

「css」

.skip-link {
    position: absolute;
    top: -100%;
}

值-100%将推动元素100%的视口高度。结果，它将被完全隐藏。一旦它聚焦在键盘上，它就会像这样显示出来

.skip-link:focus {
    position: absolute;
    top: 0;
}

事例源码：https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

可访问性对position: absolute | fixed的影响

屏幕阅读器可访问该元素，并且键盘可聚焦。它只是从视口中隐藏起来。

Clip Path

当在元素上使用clip-path时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。

在上面的例子中，透明的黑色区域有clip-path。当clip-path应用于元素时，透明黑色区域下的任何内容都不会显示。

为了更直观地演示以上内容，我将使用clippy工具。在下面的GIF中，我有如下的clip-path:

将每个方向的多边形值设置为0 0，则裁剪区域的大小将调整为0。结果，图像将不会显示。同样，这也可以用一个圆来代替多边形:

img {
    clip-path: circle(0 at 50% 50%);
}


可访问性对clip-path的影响

元素仅在视觉上隐藏， 屏幕阅读器和键盘焦点仍然可以使用它。

事例源码：https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制颜色和字体大小

虽然这两种技术不像我们前面讨论的那样常见，但它们可能对某些用例有用。

颜色透明

通过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮非常有用。

字体大小

此外，将字体大小设置为0也很有用，因为这会在视觉上隐藏文本。考虑下面的示例，其中有一个具有以下结构的按钮：

我们的目标是以可访问的方式隐藏文本。为此，我添加了以下CSS

.button span {
    color: transparent;
    font-size: 0;
}

这样，文本就被隐藏了。它甚至可以在不更改颜色的情况下工作，但是我出于解释目的添加了它。

事例源码：https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

Aria Hidden

当向元素添加aria-hidden属性时，它将从可访问性树中删除该元素，这可以增强屏幕阅读器用户的体验。注意，它并没有在视觉上隐藏元素，它只针对屏幕阅读器用户。

<button>
    Menu
    <svg aria-hidden="true"><!-- --></svg>
</button>

在上面的例子中，我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了aria-hidden。

根据Mozilla Developer Network (MDN)，下面是属性的用例

  • 隐藏装饰性的内容，如图标、图像。
  • 隐藏复制文本。
  • 隐藏屏幕外或折叠的内容。

可访问性对aria-hidden="true"的影响

是为屏幕阅读器设计的，因为它只对屏幕阅读器隐藏内容。然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。

动画与互动

当我们想让一个隐藏的元素动起来时，例如，显示隐藏的移动导航，它需要以一种可访问的方式来完成。为了获得一种可访问的体验，我们将探索一些值得学习的好例子，以及一些不好的例子，以避免犯可能会给屏幕阅读器用户带来不好体验的错误。

####　菜单动画-不好的例子

我们有一个菜单，在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容：

ul {
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s ease-out;
}

ul.active {
    opacity: 1;
    transform: translateX(0);
}

有了上述内容，菜单将根据.active类展开和折叠，该类将通过 JavaScript 如下添加:

menuToggle.addEventListener('click', function(e){
  e.preventDefault();
  navMenu.classList.toggle('active');
});

结果可能看起来不错，但它有一个很大的错误。使用opacity: 0不会隐藏可访问性树的导航。即使导航在视觉上是隐藏的，它仍然可以通过键盘聚焦，并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。

下面是来自Chrome开发工具的 accessibility tree 的截图:

简而言之，accessibility tree是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中，导航列表在那里，而它在视觉上是隐藏的。我们需要解决两个问题:

1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时，避免通过屏幕阅读器告知导航

下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。导航列表在那里，而它是隐藏的

事例源码：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜单动画-好的例子

为了修正这个错误，我们需要使用visibility: hidden作为导航菜单。这将确保菜单是隐藏的视觉和屏幕阅读器。

「css」


添加后，菜单将从屏幕阅读器中隐藏。让我们再次测试，看看VoiceOver将显示什么：

事例源码：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

自定义复选框

默认的复选框设计很难自定义，因此，我们需要为复选框创建自定义设计。让我们看看基本的 HTML：

要自定义复选框，我们需要以一种可访问的方式隐藏输入。为此，应该使用position和其他属性。有一个常见的CSS类，称为sr-only或visual -hidden，它只在视觉上隐藏一个元素，并让键盘和屏幕阅读器用户可以访问它。

事例源码：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

###　隐藏按钮

在Twitter上，有一个名为“查看新推文”(See New Tweets)的按钮，对于带有aria-hidden内容的屏幕阅读器来说是隐藏的，只有在有新推文可用时才会显示出来。

作者：Ahmad shaded 译者：前端小智 来源：sitepoint

原文：https://www.sitepoint.com/hide-elements-in-css/

为一名 7 年多的前端开发者，我从未想过我的工作需要具有可访问性，直到最近才领悟。


是的，我们确实提供了带 alt 标签的图片，并使用 header、footer、main、aside、nav 和 section 标签......就是这些，大多数人止步于此。我们中的一些人仍然使用带 class 的 div 作为这些特定的布局元素。为什么？因为我们不知道。


我们这样做不是任何人的错，除了少数，这个领域的大部分人都是被推到这个坑里谋生的，多数又在坑里一遍又一遍地做着同样的事情，到最后还在想我到底在做什么。


直到有必要改变。


也许这种需要会以启蒙的形式出现，顺便说一句，启蒙很少发生，更有可能是将正确的行业可访问性规范从开发团队的指导方针变为强制性的要求。


后者可能是你我所处的境况。好了，闲聊结束，我们直奔主题。


注意：不适用于高级前端技术人员，我没有详细介绍可访问性，只想制定一个简单的指引，可以在所有项目中遵循，类似于需要注意的事项清单。


如果你发现任何错误，请随时指出，我会尽快纠正。


以下是我们在开发任何前端时需要注意的事项：


  1. HTML 语义 —— 正确使用 HTML 分区元素
  2. 标题 —— 用于显示文档的结构，而非用于大字体的设计
  3. 键盘导航使用“tabindex”和 ARIA —— 确保 tab 可用以及删除多余的 tab 链接
  4. 可访问的图标按钮 —— 至少使用带有适当标签的<button>
  5. 焦点指示器 —— 除非有替代方案，否则不要禁用默认的焦点样式
  6. 尽可能提供视觉标签
  7. 描述性信息图——为屏幕阅读器提供回退文本描述

HTML 语义


有一种叫做 ARIA 地标的东西，它能简单地将网页划分为不同的地标，使屏幕阅读器更容易在网页内部导航。


当前这是不需要主动思考就能实现的，因为我们可能在不知不觉中就这么做了，即“默认情况下，HTML 分区元素定义了 ARIA 地标”。


这意味着正确地使用 HTML 分区元素，像<header>、<main>、<nav>、<footer>、article>、 <nav>等，而不要使用<div class="header">。


请查看ARIA实践，可以更深入地学习。

标题


屏幕阅读器浏览网页的另一种方式是使用标题。


使用标题是展示文档结构的一种方式，如果只是设计上要显示大字体或粗体，则不要使用它。


考虑一个没有 h1 页面的场景，当屏幕阅读器读到这样的页面时，用户是无法获知标题的，而页面的标题通常是用<h1>表示。


在这种情况下，为了提高可访问性，你可以做两件事：


  1. 请设计师做出一些必要的改变，这可能行不通，因为设计已经被客户签署了。
  2. 将<h1>标签添加到页面结构，并隐藏它。


当我们需要在网页上隐藏某些内容时，有以下几个选项：


  1. display: none;
  2. visibility: hidden;
  3. opacity: 0;
  4. clip-path: inset(100%)


选项 1 和 2 不可行，因为它们使元素从 DOM 中完全删除了，屏幕阅读器也不可用，隐藏属性也不行，这等同于“display: none;”。


参考用下面的样式类来隐藏你的元素：


.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

复制代码

键盘导航使用“tabindex”和 ARIA


我们需要了解的是，不是所有的用户都使用鼠标来浏览网页，有些只使用键盘导航，还有一些使用屏幕阅读器。对这些用户来说，从网页的一个部分到另一个部分，可能不像使用鼠标操作的人那么简单。


我们考虑下面的场景：


假设我们有一个博客，在文章的列表页上，一篇文章如下所示：



它有一个缩略图、一个标题、一个描述和一个“阅读更多”的按钮，这是几乎所有博客文章的通用模板。那么，我们是如何链接到详情页呢？


我们将缩略图做成一个链接(link 1)，接着是标题(link 2)，然后是“阅读更多”按钮(link 3)，这 3 个链接都指向同一个页面。


因此，当我们使用屏幕阅读器或键盘浏览页面时，我们必须用 tab 键按 3 次才能跳转到下一篇文章。


这当然得避免，也很简单。对冗余的链接，可以添加以下属性：


  1. tabindex="-1"（它可以防止链接被 tab 选中 —— 对于键盘用户）
  2. aria-hidden="true"（你不需要将它暴露给屏幕阅读器，因为已经有了相同的链接 —— 对于屏幕阅读器）


可访问图标按钮


首先，在设计中有按钮时，应使用<button>元素，不要使用<div>等其他元素，再将样式设置为按钮的样子，我知道我们这样做已经很久了，但是时候改变了。


原因正如 HTML 语义部分所述，原生元素有很多内置的 ARIA 特性。


尽管用<div>和<button>做出来的按钮对于大多数用户来说，看起来是一模一样的，但对于使用屏幕阅读器的盲人用户来说，它看起来非常不同，屏幕阅读器甚至可能会忽略这是一个按钮。


这里也有一些注意事项：


不设置按钮样式以及设置按钮样式的理想方法


针对于没有任何文本、只有图片的按钮，可遵循以下三个步骤中的任何一个：

  1. 使用隐藏的<span>来指明按钮标签
  2. 在<button>上使用 aria-label
  3. 在<button>上使用 aria-labelledby


如果你有兴趣，请查看这篇博文，了解更多关于上述步骤的详情。


焦点指标


你用过以下代码吗?


:focus {
    outline: none;
}

复制代码


当我们在网页上按 tab 键时，看到的轮廓就是焦点指示器，通常我们用上面的代码禁用它，至少我以前是这么做的。


这真是个糟糕的主意，焦点指示器能告诉使用键盘导航的用户们他们当前正在交互的位置，如果我们移除焦点样式，相当于将这些用户置于黑暗中，隐藏焦点指示器就像隐藏鼠标光标。


因此，如果你删除了默认的焦点样式，那一定得添加自定义的焦点样式。


在设置焦点指示器的样式时，我们需要考虑以下几点：

  1. 对比区
  2. 与相邻颜色对比
  3. 不要遮盖焦点元素


在下面的示例中，黑色显示了焦点指示器启用状态(使用键盘 tab 时的样式)：


设置焦点指示器样式的不同方法


对比区 —— 颜色发生变化的地方

相邻颜色 —— 与焦点指示器相邻的颜色


聚焦状态和非聚焦状态的颜色对比度最小应为 3:1，焦点指示器和相邻颜色之间也要符合这个规则。


意思是，如果你将一个白色背景页上的绿色按钮，设置的焦点指示器样式为 2px 的黑色边框，那么黑色和绿色、以及黑色和白色之间的最小对比度应该是 3:1。


如果你要覆盖默认的焦点样式，可使用以下代码：


:focus {
    outline: none;
}
 
button:focus {
    /* some exciting button focus styles */
}


button:focus:not(:focus-visible) {
    /* undo all the above focused button styles if the button has focus but the browser wouldn't normally show default focus styles */
}


button:focus-visible {
    /* some even *more* exciting button focus styles */
}



如果你有兴趣，可以查看这篇博文了解详情。

尽可能提供视觉标签


这对于使用语音命令浏览网页的人来说很有用。大家有点难理解吧，我先解释下为什么。首先，想想语音识别软件是如何工作的：


以苹果的 Siri 为例，我们先说一个关键句：“Hey Siri”，然后再说想要执行的命令。

比如：“Hey Siri，现在几点了?”


同理，想象一下用 Siri 浏览网页：


假设有一个按钮叫“发送”，我们可以说：”Hey Siri，点击发送按钮”。这很简单，对吧?

但是如果按钮只有一个图标，而没有“发送”标签，你要如何告诉 Siri 点击哪个按钮呢?


因此，尽可能提供视觉标签，如果不行，那至少让它可通过 tab 使用。

描述性信息图


当 SVG 用于图表等信息图或其它类型的数据表示时，通常不会为可访问用户提供任何信息。为了方便他们，最好的方式是提供屏幕阅读器能够读取到信息图文本描述。


下面示例实现这类 SVG 的好方法：


<object
    role="img"
    aria-label="Average something of something"
    aria-describedby="something_desc"
    data="some.svg"
    type="image/svg+xml"
>
 <!-- fallback -->
 <p id="something_desc">90% increase in number of sales in the year 2022 with proper SEO tactics implemented as to no SEO done for the previous year.</p>
</object>


小结


一份可以立刻行动的汇总清单：


  1. 是否正确地使用了所有的 HTML 分区元素，而不仅仅是 div?
  2. 标题是否用于适当的结构，而不是强调大小?
  3. 是否用 tabindex=-1 删除了不需要的链接？
  4. 所有按钮是否都可以访问?他们有合适的名称或标签吗?如果没有，你是否提供了 ARIA 标签或替代方法?
  5. 你改变焦点指示器的样式了吗?如果是，它们是否符合规范?
  6. 按钮、复选框和单选等表单元素，应该是可访问的。
  7. 尽可能提供视觉标签。
  8. 信息图表应该有一个文字说明的回退，如果使用 SVG，则<object>应带有回退描述。
  9. 应使用 tabindex= -1 禁用屏幕外链接，不然用户将被卡住，而不知道发生了什么。


可访问性就像是一片海洋，我只触及了表面。希望通过本文，能够为我们大多数人照亮一个潜在的黑暗区域。


我所写的一切都基于Sara Soueidan的博客和谈话，请访问她的博客了解更多信息。她有许多很酷的话题，非常地深入浅出。


原文链接：Frontend accessibility. Doing it the right way.

了解更多软件开发与相关领域知识，点击访问 InfoQ 官网：https://www.infoq.cn/，获取更多精彩内容！

ython3对url编解码

import urllib.parse
# Python3 url编码
print(urllib.parse.quote("天安门"))
# Python3 url解码
print(urllib.parse.unquote("%E5%A4%A9%E5%AE%89%E9%97%A8"))

my_web.py(修改)


在线咨询
上一篇：JavaScript基础知识：HTML DOM文档对象模型
下一篇：编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 金湾区 雨湖区 三元区 东方 安义县 武江区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服