Question

我正在制作一个符合Web UI 508的要求，其中一个要求是“禁用CSS时使用Web UI”。我们有几个地方使用style=display:inline和style=display:none显示/隐藏元素，并使用JS函数调用相应地调用它们。当我禁用CSS（使用WAT2.0）时，隐藏的元素也会显示，这不会使用户界面很好。我们在几个地方都有这些东西，比如折叠/扩展描述，鼠标移动弹出等等。

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

Answer 1

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

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

Answer 2

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

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

Answer 3

在这种情况下使用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;
}

Answer 4

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

E.g。

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

额外的好处是，这也会使您的Javascript 不引人注目，这在谈论可访问性时肯定受到高度赞赏。

Answer 5

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

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

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

这可能听起来有点笨拙，但实际上是一件好事，因为你正在走向不引人注目的JavaScript

Answer 6

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

你应该做的是确保网站仍然可用，禁用脚本（只要它是一个真实的网站，而不是一个网络应用程序）：渐进增强/优雅降级是这里的关键短语......

Answer 7

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

在鼠标移动或点击时动态隐藏和显示的内容对于辅助功能来说并不是那么有用。屏幕阅读器软件往往相当简单，并且不一定知道如何处理页面的动态更改。

我建议设计你的页面，使用干净的语义HTML，看起来很好用的CSS，然后使用CSS和JavaScript使页面更有吸引力或更强大的支持。另请尝试在开发过程中在Links中预览您的网站。

Answer 8

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

  if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); }
    else { divByDate.Attributes.Add("style", "display:none"); }

Answer 9

我认为网络只是连续的字符串，所以使用我的方法，您可以获取元素的innerHTML并修改它以动态操作页面的源代码。有几种方法可以解决这个问题。

只需将其innerHTML设置为空字符串即可删除父元素中的内容。
```
document.getElementById('myElement').innerHTML = '';
```
我使用的另一个便宜的技巧是在我的源代码中添加HTML注释，这样我就可以添加各种“标签”，并使用正则表达式在它们之间抓取文本。
```
<body>
  
    <div>Hello World.</div>
  
  <div>Au revoir.</div>
</body>
```
然后，您可以执行JavaScript正则表达式来替换标记之间的所有内容。
```
document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');
```
正则表达式找到标记，然后找到零个或多个空格或非空白字符，后跟我的标记，并用空字符串替换它，留下以下内容。
```
<body>
  <div>Au revoir.</div>
</body>
```
当然，您总是可以使用JavaScript库（jQuery，Mootools，Prototype等）来帮助您完成其中的一些工作。这些库具有删除DOM对象的方法。

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

Answer 10

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

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

可以在 MDN web docs

中找到有关此 HTML 标记的大量信息

有没有办法显示/隐藏没有CSS的元素？

10 个答案: