2

我正在使一种 Web UI 508 兼容，并且一项要求声明“在禁用 CSS 时使用 Web UI”。我们有几个地方可以使用 JS 函数调用来显示/隐藏元素style=display:inline，style=display:none并相应地调用它们。当我禁用 CSS（使用 WAT2.0）时，隐藏的元素也会显示出来，这不会使 UI 变得很好。我们在几个地方都有这些东西，比如折叠/展开的描述、mousemove 上的弹出窗口等，

除了使用样式标签之外，还有其他方法可以显示/隐藏元素吗？请指教！

4

10 回答 10

12

这听起来很麻烦，但是您可以构建一个简单的库，该库实际上从 DOM 中删除节点并在需要时将它们注入回来。您仍然可以拥有一个将所有已删除节点保存为变量的对象，这样您就不必在插入时重新创建它们。

不过，我必须说，当要求指定站点应该在禁用 CSS 的情况下工作时，这很少意味着它应该在禁用 CSS的所有方面以完全相同的方式运行。例如，如果您有一个可展开/可折叠的列表，我认为对于禁用 CSS 的用户来说，一个可接受的折衷方案是始终显示列表中所有项目的内容。

于 2010-01-12T13:04:54.753 回答
6

Web UI 508 合规性要求用户可以访问具有样式或脚本的用户可用的所有内容，而这通常意味着超链接到静态页面，但它也可能涉及使用服务器端代码来模拟动态脚本。

通过从可访问的站点开始，然后添加支持的样式和脚本功能，始终最容易开发可访问的站点。

于 2010-01-12T13:35:11.363 回答
4

在这种情况下，请使用 javascript。只需从 body 标签中删除元素并在需要时将其放回原处。

window.holder = [];
function switchNodes(source, target){
    var parentNode = source.parentNode;
    if(parentNode && !target.parentNode){
        parentNode.insertBefore(target,source);
        parentNode.removeChild(source);
        return true;
    }

    return false;
}

function show(node){
    for(var i=0,item;item = holder[i];i++){
        if(item.node == node){
            var span = item.span;
            switchNodes(span, node); 
            holder.splice(i,1);
            return true;
        }
    }

    return false;
}

function hide(node){
    var span = document.createElement("span");
    if(switchNodes(node,span)){
        holder.push({node: node, span : span});
        return true;
    }
    return false;
}
于 2010-01-12T13:15:35.960 回答
4

您还可以考虑在服务器端显示/隐藏元素。无需使用 Javascript，只需将表单提交到服务器并利用 JSP 中标记库和 EL 的强大功能。

例如

<c:if test="${someCondition}">
    <p>This is displayed if ${someCondition} evaluates to true.</p>
</c:if>

一个额外的好处是，这也将使您的 Javascript不显眼，这在谈到可访问性时肯定会受到高度赞赏。

于 2010-01-12T13:21:22.320 回答
3

我不确定这是可能的。听起来页面的设计确实应该围绕这个要求。

我认为你应该像没有任何 JavaScript 一样处理这个问题。然后，您将不得不依靠页面刷新来显示/隐藏元素。即当您单击以显示/隐藏某些内容时，刷新页面，然后您的服务器端代码将执行该字段是否包含在页面上的逻辑。

如果它是一个输入字段，我想它仍然可以作为隐藏字段包含吗？

这可能听起来有点笨拙，但实际上是一件好事，因为您正在朝着不引人注目的 JavaScript 前进

于 2010-01-12T13:07:09.097 回答
3

您可以从 DOM 中删除元素而不是隐藏它们，但我认为没有充分的理由这样做。据我所知，屏幕阅读器会尊重display: none，而且我想不出任何其他原因客户端应该支持脚本，但不支持 CSS ......

您应该做的是确保该站点在禁用脚本的情况下仍然可用（只要它是一个实际站点而不是 Web 应用程序）：渐进增强/优雅降级是这里的关键短语......

于 2010-01-12T13:09:06.820 回答
2

第 508 条似乎是美国对网络可访问性的某种规定。

在鼠标移动或单击时动态隐藏和显示的东西对于可访问性并不是那么好。屏幕阅读器软件往往相当简单，不一定知道如何处理页面的动态更改。

我建议将您的页面设计为使用干净的语义 HTML，在关闭 CSS 的情况下看起来不错，然后使用 CSS 和 JavaScript 使页面在受支持的情况下更具吸引力或功能强大。还可以在开发过程中尝试在链接中预览您的网站。

于 2010-01-12T13:16:45.070 回答
1

##我通常用这种方式：##

  if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); }
    else { divByDate.Attributes.Add("style", "display:none"); }
于 2010-01-12T14:27:04.667 回答
1

我认为 Web 只不过是一串连续的字符，因此使用我的方法，您可以获取元素的 innerHTML 并对其进行修改以动态操作页面的源代码。有几种方法可以解决这个问题。

  1. 只需将父元素的 innerHTML 设置为空白字符串即可删除其内容。

    document.getElementById('myElement').innerHTML = '';

  2. 我使用的另一个便宜的技巧是在我的源代码中添加 HTML 注释，这样我就可以添加各种“标签”并使用正则表达式在它们之间抓取文本。

    <body>
  <!--Start-->
    <div>Hello World.</div>
  <!--End-->
  <div>Au revoir.</div>
</body>

    然后，您可以执行 JavaScript 正则表达式来替换标签之间的所有内容。

    document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');

    正则表达式找到标记，然后找到零个或多个空格或非空格字符，然后是我的标记，并将其替换为空白字符串，为您留下以下内容。

    <body>
  <div>Au revoir.</div>
</body>

  3. 当然，您总是可以使用 JavaScript 库（jQuery、Mootools、Prototype 等）来帮助您完成其中的一些工作。这些库具有删除 DOM 对象的方法。

如果您希望能够将内容写回，只需将其保存到变量中并插入带有标识符的 HTML 注释。做另一个正则表达式替换，它又回来了。

于 2010-01-12T14:54:51.667 回答
0

是的，使用该<details>元素，您可以创建可协作的内容：

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

可折叠细节元素

可以在MDN 网络文档中找到有关此 HTML 标记的大量信息

于 2021-01-12T16:08:27.363 回答