html - 制作 HTML 表单元素 'display only' - 非交互式

Question

我正在开发一个动态表单构建器，用户可以在其中向页面添加不同的内容块(按钮、文本输入、文本段落、图像等)，然后他们可以发布这些内容，这将是一个简单的 HTML 表单。可以使用。
对于这个应用程序的“预览”部分(他们在其中添加不同的内容块并修改内容和外观)，我想到最简单的方法是只显示最终产品 HTML 本身和这样我或多或少地保证预览中显示的内容与实际表单中显示的内容相匹配。
这很重要的地方在于模糊的造型怪癖，such as the behaviour of buttons with display:block.
但是，我不希望预览像真实表单那样具有交互性。也就是说，我不想要以下行为:

输入接收焦点并能够插入内容

具有点击动画的按钮

点击链接导航

出现默认悬停样式。

此外，在可访问性方面，如果屏幕上出现一堆没有做任何事情的输入，则可能会非常困惑。
是否有浏览器 native /标准方式来做到这一点？
我的回退可能是禁用所有元素。但这不适用于链接。
另一种方法可能是在表单顶部放置一个不可见的 div，它会捕获所有点击事件。但我不喜欢可访问性 POV。
正在使用 role="presentation"用于这个？
代码示例
作为此处的示例，请参阅此处的一些示例代码: https://codepen.io/dwjohnston/pen/qBrGPmr?editors=1111
现在为此，我有 role="button" 的 div - 这些按钮是可点击的， - 当您点击它们时，侧面板将显示内容配置，例如输入、标签等的默认值。
已经存在一个问题 - 按钮内不允许有交互内容。
而且，我不应该能够选择这些控件(现在我可以手动添加 tabindex = "-1" ，但这不是完整的图片)。我不想混淆屏幕阅读器等。

Answer 1

信息
对此问题进行了编辑，解决了 OP 在其当前实现中遇到的具体问题。我把第一部分留在这里作为我的原始答案。
我不希望预览像真正的表单那样真正具有交互性。
为什么？使表单具有交互性对所有用户都非常有用(考虑到某些功能需要在预览中无法完全运行)。
让人们看到默认的悬停样式是什么样的，点击链接会做什么(即点击链接并警告说“将导航到 xxx 页面”)等。
我知道不想导航到新页面并提交表单(任何“保存”或“更新”操作加上任何“导航”操作)，但我认为其他所有内容都应该能够在预览中工作。
此外，在可访问性方面，如果屏幕上出现一堆没有做任何事情的输入，则可能会非常困惑。
如果预览出现在屏幕上，但随后我无法导航到按钮、链接等，那会更令人困惑。
对于屏幕阅读器用户来说，这会有什么表现？即您会使用 aria-hidden="true" 隐藏所有元素吗？ (在这种情况下，他们将如何测试页面？)。
我的回退可能是禁用所有元素。但这不适用于链接。
这确实是您可以处理的最糟糕的方法之一，disabled输入通常无法获得焦点，因此键盘用户在测试时会受到影响。
另外，如果最终生产表单中的某些元素在填写某个字段之前被禁用(例如)，那么用户如何在您的最终表单中进行测试？
此外，如果您在没有解释链接不起作用的情况下拦截链接的导航，也可能会导致混淆。 (如果您向最终用户解释，该链接是否可以在“预览”模式下在新窗口中打开？显然取决于它是否是静态链接等，但只是考虑用户可以检查任何自定义链接指向的方式正确的地方)。
建议的解决方案
我会说你需要完成表格的两个版本。 “真实世界”一和“预览”一。
HTML 可以(读作“应该”)相同，但您需要实现 JavaScript 处理程序来禁用您不想激活的功能。
只要您向最终用户警告该工具需要 JavaScript 才能工作，那么让编辑工具仅使用 JavaScript 并没有错，如果这是您的顾虑之一。 (发布工具和最终用户体验之间的区别在于您可以更加依赖 JavaScript。)
例如:假设您有一个 <button>单击时应向表单添加一个新行(在表单的生产版本中)，无论出于何种原因，您都不希望此功能在预览版本中处于事件状态。
在这种情况下，在表单的预览/演示版本中，当您单击此按钮时会出现 alert可以显示“将向表单添加新行”。
这样屏幕阅读器用户和仅键盘用户可以测试表单而无需做太多额外的工作(并且还可以查看表单是否有键盘用户在使用时的可用性问题!)
我认为这对每个人来说都是最清楚的，并且会带来更好的用户体验。
您只需要考虑进入和退出预览模式(例如 Esc 关闭)和快速编辑(当您预览表单时，如果表单特别长，可以选择聚焦先前聚焦的元素，只有键盘用户会感谢您为此!当您返回编辑时，将焦点放回上次编辑的项目也是如此)。
进一步阅读
从可访问性的角度来看，WCAG 不是您在这种情况下所需要的，Authoring Tool Accessibility Guidelines (ATAG)是。
这是关于如何创建编辑器、所见即所得等的一套鲜为人知的指南。
与所有 W3C 指南一样，这是一本沉重的阅读 Material ，但如果您了解核心原则，它将指导您做出正确的决定，您可以随时在这里询问是否需要澄清一些不清楚的个别点 :-)。

编辑:您如何使用当前设计实现可访问的界面
您在 codepen you linked 中遇到的问题他们的解决方案如下:
停止接收焦点的交互项
当您包装每个元素时，您已正确诊断出最大的问题，即嵌套的交互元素。
对此的解决方案非常简单:给每个交互元素一个 tabindex="-1"如你所说。这可以确保它们不会被错误地聚焦。
确保可以聚焦并激活实际的包装项目
然后我们只需要确保包装器 .content-item有 tabindex="0"所以它被添加到焦点顺序。
我们还需要捕获 Enter 和 空格键并确保我们的面板也被它们激活。
视觉焦点指示器
我还添加了一个 outline到包装器“按钮”，以便视觉焦点指示器可用。
这样基本上解决了正常的键盘导航问题，下一个问题是屏幕阅读器将如何解释嵌套按钮、输入等。
屏幕阅读器更正
在这里，我也会变得简单，完全从屏幕阅读器中隐藏按钮、输入等，而是解释里面的元素。
实际上，我们使按钮不可见，而是描述了 .content-item 的内容。 .
要隐藏元素，我们使用 aria-hidden="true"为了宣布一些有意义的事情，我们可以使用一些 visually-hidden (screen reader only) text里面<span> .这将比使用 aria-label 强得多面对如此复杂的应用。
使应用程序与鼠标运行良好
最后的挑战 - 停止鼠标事件。
幸运的是pointer-events: none有 really good support即使在少数不支持它的浏览器上，能够点击输入也不是世界末日(我们已经为键盘用户修复了它)
解决所有问题的示例:
这解决了您的选择方法的所有问题。
请注意，它没有考虑组件本身的可访问性错误(例如 <input> 没有 <label> 等)，但我认为这只是因为它是一个示例。
您唯一需要解决的是如何生成描述项目和 .content-info 的视觉隐藏文本。 “按钮” Action 。

document.addEventListener("DOMContentLoaded", function () {
 
  const items = document.getElementsByClassName("content-item"); 
  const rightPanel = document.getElementById('right-panel');
  
  for (let i = 0; i< items.length; i++) {
    const item = items[i]; 
    
    item.addEventListener("click", (e) => {
      console.log(e.target);
      const id = e.target.dataset.id; 
      rightPanel.innerHTML = id; 

    });
  
  // ADDED this to capture the Enter and Space presses on our wrapper button
    item.addEventListener("keydown", function(e){
      if(e.keyCode == "32" || e.keyCode == "13"){
      console.log(e.target);
         const id = e.target.dataset.id; 
         rightPanel.innerHTML = id; 
      }
    });
  
  }
});

.main {
  display: flex; 
  flex-flow: row nowrap; 
  
}

.left {
  flex: 1 1 auto; 
}

.right {
  flex: 1 1 auto;
}

.content-item {
  margin-top: 20px;
  width: 600;
  border: solid 2px blue; 
  cursor: pointer;   
}

/* ADDED a focus indicator so keyboard users know where they are */
.content-item:focus{
    outline: 4px solid #333;
}

/* ADDED to stop pointer events reaching the input, button etc. */
input, button{
    pointer-events: none;
}

/* ADDED the visually hidden class so we can provide meaningful text to screen reader users */
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class ="main"> 
  <div class ="left">
<!-- Added `tabindex="0"` so the wrapper is focusable by keyboard -->
<div class="content-item" role="button" data-id="item-1" tabindex="0">
  <!-- added `aria-hidden="true"` and `tabindex="-1"` to hide the input from screen readers and make sure it cannot be focused by keyboard, I also added `role="presentation"` just for good measure, although it shouldn't be needed. -->
  <input type="text" aria-hidden="true" tabindex="-1" role="presentation">
  <!-- Added this span that explains the action that the "content-item button" would perform if clicked. You need to come up with something meaningful for the contents of this -->
  <span class="visually-hidden">Edit input [input identifier]</span>
</div>

<div class="content-item" role="button" data-id="item-2" tabindex="0">
  <button aria-hidden="true" tabindex="-1" `role="presentation"`> I am a button</button>
  <span class="visually-hidden">Edit button [button identifier]</span>
</div>
  </div>
  
  <div class ="right" > 
    
    <h2> Right panel</h2>
    <div id ="right-panel"> 
      
    </div>
    
  </div>   
</div>