如何通过 Up/down 箭头键访问 div 或 <li>

Question

所以我有几个 div 一个在另一个下面。我希望它们可以通过箭头键“通过网络访问”，即，如果我按下向下键，下一个 div 应该突出显示，如果我按向上键，前一个应该突出显示。

如果我有一个按钮，我可以使用 tabIndex 属性来实现它。

问题是 divs 不是可操作的项目。因此，如果我让用户以某种方式通过选项卡访问它们，可能会让用户感到困惑。因此，我只希望通过键盘的方向键。

如果可以实现所需的行为，我什至愿意将其转换为 <ul><li><li></ul>。

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

这是我用 <li>s 尝试的。但是，如果我单击第一个 li，我将无法通过按向下箭头突出显示下一个。

<ul role="menu" aria-label="menu">
            <li role="menuitem" tabindex="0">list 1</li>
            <li role="menuitem" tabindex="0">list 2</li>
            <li role="menuitem" tabindex="0">list 3</li>
            <li role="menuitem" tabindex="0">list 4</li>
            <li role="menuitem" tabindex="0">list 5</li>
    </ul>

Answer 1

您好，您应该根据需要使用 jquery。您的最后一个来源将是：

$(function(){
        document.onkeydown = function(e) {
            var selected = $('.mnu-item:focus').index();

            var next = selected + 1;
            var pre = selected - 1;

            if(pre < 0)
                pre = 0;
            if(next > $('.mnu-item').length)
                next = $('.mnu-item').length;

            if(e.which == 38) { // up
                $('.mnu-item').eq(pre).focus();
            }
            if(e.which == 40) { // down
                $('.mnu-item').eq(next).focus();
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        };
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul role="menu" aria-label="menu">
    <li role="menuitem" tabindex="0" class="mnu-item">list 1</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 2</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 3</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 4</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 5</li>
</ul>

希望对您有所帮助。

Answer 2

有一个 ARIA 小部件允许通过箭头键进行键盘导航，使用一个制表位而不是多个制表位：您的类似 <div> 列表可以表示为单列 Grid .

最初，第一行的单元格为 tabindex="0"，所有其他单元格为 tabindex="-1"。

使用 JavaScript，向下箭头将聚焦第二行中的单元格。它得到 tabindex="0" 而第一行中的单元格得到 tabindex="-1"，因此只有一个单元格是 tabbable/focusable。 examples/docs.

中指定了完整的键盘处理

在 JavaScript 中，您需要跟踪当前关注的项目。

以下是我使用 React 进行设置的方式：

class MyGrid extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            focusedItemIndex: 0
        }

        this.cellRefs = []

        this.handleFocus = (index => {
            this.setState(() => ({
                focusedItemIndex: index
            }))
        }).bind(this)

        this.handleKeydown = ((index, {
            key
        }) => {
            switch (key) {
                case 'ArrowUp': {
                    this.setState(() => ({
                        focusedItemIndex: Math.max(0, index - 1)
                    }))
                }
                break
                case 'ArrowDown': {
                    this.setState(() => ({
                        focusedItemIndex: Math.min(index + 1, this.props.items.length - 1)
                    }))
                }
                break
                case 'Home': {
                    this.setState(() => ({
                        focusedItemIndex: 0
                    }))
                }
                break
                case 'End': {
                    this.setState(() => ({
                        focusedItemIndex: this.props.items.length - 1
                    }))
                }
                break
                default: {
                    return
                }
            }
        }).bind(this)
    }
    componentDidUpdate(_, prevState) {
        if (prevState.focusedItemIndex !== this.state.focusedItemIndex) {
            this.cellRefs[this.state.focusedItemIndex].focus()
        }
    }
    render() {
        return (
            <div
                role="grid"
                aria-label="This needs a label">
                <div role="row">
                    {this.props.items.map((item, index) => (
                        <div
                            role="cell"
                            key={item}
                            ref={el => this.cellRefs[index] = el}
                            tabIndex={this.state.focusedItemIndex === index ? '0' : '-1'}
                            onFocus={this.handleFocus.bind(this, index)}
                            onKeyDown={this.handleKeydown.bind(this, index)}>
                            {item}
                        </div>
                    ))}
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <MyGrid items={['A', 'B', 'C']} />,
    document.querySelector('body')
)

如何通过 Up/down 箭头键访问 div 或 <li>

How do I make div or <li> accessible through Up/down arrow keys

html

javascript

wai-aria

web-accessibility