Question

我选择使用radiobutton的标签作为定制按钮。这意味着无线电输入本身是display：none。因此，浏览器不会在收音机标签处停留标签，但我希望它们可以。

我试着向他们强制使用tabindex，但没有雪茄。

我想到的只是在标签前放置一个无意义的复选框，并将其设置为宽度：1px;和身高1px;这似乎只适用于chrome＆amp;狩猎。

那么，您是否有任何其他想法强制在这些位置停止制表而不显示元素？

编辑：

只是让其他人来这里，这就是我能够将小复选框插入chrome＆amp;使用JQuery的safari：

if ($.browser.safari) {
    $("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}

注意：$ .browser.webkit没有成为现实......所以我不得不使用safari

Answer 1

隐藏无线电输入，但在到达无线电输入的tabindex="0"元素上设置<label>。

（选项卡索引为0保持选项卡流中的元素，其他元素具有未指定的选项卡索引，这些元素仍然是可列表的。）

Answer 2

如果您将标签与任何字段分开并设置tabIndex，您可以选择它并捕获鼠标和键事件。使用type =“button”的按钮或输入似乎更明智，但适合自己。

<form>
    <fieldset>
        <input value="today">
        <label tabIndex="0" onfocus="alert('label');">Label 1</label>
    </fieldset>
</form>

Answer 3

在我看来，启用选项卡选择/箭头导航的可行解决方案是将不透明度设置为零，而不是“显示：无”

.styled-selection input {
    opacity: 0;         // hide it visually
    z-index: -1;        // avoid unintended clicks
    position: absolute; // don't affect other elements positioning
}

Answer 4

我的偏好：

    import React from 'react';

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            delegations: props.delegations
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            delegations: nextProps.delegations
        })
    }
    render() {
        return ( <
            div >
            <
            center > < h1 > Delegations List </h1> </center >
            this.state.delegations.map((delegation) => ( <
           div >
                <
                div >
                <
                h5 > {
                    delegation.delegationId
                } < /h5> <
                h6 > {
                    delegation.user.lastName
                } < /h6> <
                p > {
                    delegation.user.companyName
                } < /p> <
                /div> <
                /div>
            )) <
            /div>
        )
    };

 }

 export default Delegations

.tab-only:not(:focus) {
  position: fixed;
  left: -999999px;
}

Answer 5

另一个不错的选择是将 input + div 嵌套在标签中，并通过将 width和height设置为0px 来隐藏输入of display：none

此方法甚至允许您使用伪类，例如：focus或：使用输入检查：伪+ styleDiv

<label>
    <input type="radio">
    <div class="styleDiv">Display text</div>
</label>

input
{
    width: 0px;
    height: 0px;
}

input + .styleDiv
{
    //Radiobutton style here
    display: inline-block
}

input:checked + .styleDiv
{
   //Checked style here
}

Answer 6

我有另一个答案，我认为尚未提及。对于最近的工作，我一直在阅读Mozilla开发人员文档MDN Docs, Forms，尤其是辅助功能部分MDN Docs, Accessible HTML(5)，以获取与键盘辅助功能和表单结构相关的信息。

“辅助功能”部分中的一个具体提及是在可能的情况下使用HTML5元素 - 默认情况下它们通常具有跨浏览器和更易于访问的支持（并非总是如此，但是明确的内容结构和适当的元素也有助于屏幕阅读以及键盘辅助功能）。

无论如何，这里是一个JSFiddle：JSFiddle::Keyboard Accessible Forms

基本上，我所做的是：

无耻地将一些源代码从 Mozilla源代码复制到JSFiddle （来自小提琴的评论中的来源）
创建一个TEXT类型并为其分配＆＃34; 只读＆＃34; HTML5属性
将属性 tabindex =＆＃34; 0＆＃34; 添加到readonly
修改＆＃34; readonly＆＃34;该输入元素的CSS 因此它看起来像＃34;空白＆＃34;或隐藏＆＃34;

<强> HTML

<title>Native keyboard accessibility</title>
<body>

  <h1>Native keyboard accessibility</h1>

  <hr>

  <h2>Links</h2>

  <p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

  <p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>

  <h2>Buttons</h2>

  <p>
    <button data-message="This is from the first button">Click me!</button>
    <button data-message="This is from the second button">Click me too!
    </button>
    <button data-message="This is from the third button">And me!</button>
  </p>

  <!-- "Invisible" HTML(5) element -->
  <!-- * a READONLY text-input with modified CSS... -->
  <hr>
  <label for="hidden-anchor">Hidden Anchor Point</label>
  <input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
  <hr>

  <h2>Form</h2>

  <form name="personal-info">
    <fieldset>
      <legend>Personal Info</legend>
      <div>
        <label for="name">Fill in your name:</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="age">Enter your age:</label>
        <input type="text" id="age" name="age">
      </div>
      <div>
        <label for="mood">Choose your mood:</label>
        <select id="mood" name="mood">
          <option>Happy</option>
          <option>Sad</option>
          <option>Angry</option>
          <option>Worried</option>
        </select>
      </div>
    </fieldset>
  </form>


  <script>
    var buttons = document.querySelectorAll('button');

    for(var i = 0; i < buttons.length; i++) {
      addHandler(buttons[i]);
    }

    function addHandler(button) {
      button.addEventListener('click', function(e) {
        var message = e.target.getAttribute('data-message');
        alert(message);
      })
    }
  </script>

</body>

CSS样式

input {
  margin-bottom: 10px;
}

button {
  margin-right: 10px;
}

a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}


.hidden-anchor {
  border: none; 
  background: transparent!important;
}
.hidden-anchor:focus {
  border: 1px solid #f6b73c;
}

顺便说一句，您可以编辑 .hidden-anchor：focus 的CSS规则，以便根据需要删除隐藏锚点的突出显示。我把它添加到＆＃34;证明＆＃34;这里的概念，但它仍然按要求无形地工作。

我希望这有帮助！

Answer 7

丢弃收音机按钮而不是;在代码中保留一些隐藏字段，在其中存储UI组件的选定值。

强制标签停止隐藏元素？可能？

7 个答案: