用 JavaScript 实现无障碍设计-JavaScript中文网-JavaScript教程资源分享门户

在现代的Web应用中，最好的用户体验通常意味着同时考虑各种用户的需要，包含那些可能有视力、听力或运动障碍的人员。为了实现这些需要，前端开发人员需要有意识地创建无障碍设计的网页，并确保所有用户都能够轻松地使用它们。

在本文中，我们将讨论如何使用JavaScript实现无障碍设计。我们将探讨一些基本的原则和考虑事项，并演示如何在现有的Web应用程序中使用JavaScript解决无障碍设计问题。

无障碍设计原则

无障碍设计是一种为解决各种障碍而设计的方法，包括视觉、听觉、认知性和运动性障碍。以下是一些无障碍设计的主要原则：

利用语义标签：使用HTML标签可以有效地传递信息，使屏幕阅读器和搜索引擎了解页面的内容和结构。
使用可访问性属性：在HTML标签上使用属性，例如alt和title，提供标准、有意义和可读的文字描述。
考虑焦点和键盘操作：让用户使用键盘导航和操作，通过为活动元素添加焦点来帮助他们。
语音标注和描述：将视觉元素与语音标注和描述联系起来，以帮助那些无法看到视觉信息的人员。

这些原则可以帮助开发人员创建可访问性的Web应用程序，使所有人都能够使用网站的功能。

JavaScript 实现无障碍设计

JavaScript是一种实现无障碍设计的强大工具，可以使网页更加交互。以下是一些JavaScript编程的最佳实践，以用于实现无障碍设计：

1. 让元素键盘焦点友好

让页面元素对键盘用户和视觉障碍人员可访问并友好，是实现无障碍设计的关键。以下示例显示如何使用JavaScript处理焦点：

// javascriptcn.com code example
const focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstFocusable = focusable[0];
const lastFocusable = focusable[focusable.length - 1];

document.addEventListener('keydown', function(e) {
    var isTabPressed = e.key === 'Tab' || e.keyCode === 9;

    if (!isTabPressed) { 
        return; 
    }

    if (e.shiftKey) { // if shift key pressed for shift+tab combination
        if (document.activeElement === firstFocusable) {
            lastFocusable.focus(); 
            e.preventDefault();
        }
    }
    else { // If tab key is pressed
        if (document.activeElement === lastFocusable) {
            firstFocusable.focus(); 
            e.preventDefault();
        }
    }
});

在上面的代码中，我们选择了所有具有键盘焦点的元素，并将其存储在一个节点列表中。随后循环列表，并为第一个焦点和最后一个焦点节点创建引用。最后，我们将addEventListener方法应用于整个文档，并侦听键盘事件。如果用户按下的是"Tab"键，我们将捕获这个事件，并通过使它前进或后退来让用户进入下一个或上一个焦点元素。如果焦点达到边缘，则将其设置为适当的元素。

2. 用户定义的内容

一个Web应用程序当前正在处理的内容可以从JavaScript生成。但是在无障碍设计的视角，可能需要让用户轻松访问网站的内容，特别是那些有交互性例如隐藏菜单。在下面的代码块中，我们演示怎样使用户内容对无障碍用户友好：

// javascriptcn.com code example
const contentBlock = document.querySelector('[data-modal-content]');
const triggerCloseButton = document.querySelector('[data-trigger-close]');
const hiddenTabIndex = -1;

function showContentBlock() {
    toggleDialogClasses();

    contentBlock.removeAttribute('tabindex');
    contentBlock.setAttribute('open', '');
    contentBlock.children[0].setAttribute('tabindex', hiddenTabIndex);

    addCloseListener();
}

function toggleDialogClasses() {  
    contentBlock.classList.toggle('modal--visible');
    contentBlock.previousElementSibling.classList.toggle('modal--visible');
}

function hideContentBlock() {
    toggleDialogClasses();

    contentBlock.removeAttribute('open');
    contentBlock.setAttribute('tabindex', hiddenTabIndex);
    contentBlock.children[0].setAttribute('tabindex', hiddenTabIndex);

    removeCloseListener();
}

function addCloseListener() {
    triggerCloseButton.addEventListener('click', hideContentBlock);
}

function removeCloseListener() {
    triggerCloseButton.removeEventListener('click', hideContentBlock);
}

triggerCloseButton.addEventListener('keydown', function(e) {
    var isEscapeKey = e.key === 'Escape' || e.keyCode === 27;

    if (isEscapeKey) {
        hideContentBlock();
    }
});

以上代码是一个典型的对话框，当你选择一个选项，它会出现在屏幕上方。在这种情况下，在showContentBlock() 函数中将选项存储在变量contentBlock中，triggerCloseButton 变量将成为默认选项的返回函数。函数中，由于需要考虑视障人员，所有的焦点都会被指定，包括那个隐含的关闭按钮。

3. 对于HTML弹出窗口要使用适当的标记

HTML弹出窗口可以是用户友好的交互元素，但在无障碍设计的视角，它们可以对有视力障碍的用户造成混乱。有关说明或标记对许多人并不自然或直接，需要引导。

下面是一些通过HTML标记弹出窗口的最佳实践之一。在本示例中，我们使用了ARIA（无障碍互联网应用程序）标记 (role="dialog") 来确保它在页面上随时可见。

<div role="dialog" aria-labelledby="dialog-title" id="dialog-one" aria-modal="true" aria-describedby="dialog-message">
<h2 id="dialog-title">Dialog Box Title</h2>
<div id="dialog-message">
     <p>Dialog Box message goes here </p>
    <button>Close me please</button>
</div>

上述代码段提供了几个有用功能—首先通过role="dialog"标记区域是一个弹出窗口，其次，aria-labelledby 属性与DOM上的 h2 元素建立关联，使屏幕阅读器读取器通知用户弹框标题是什么。

结论

使用JavaScript实现无障碍设计需谨慎使用，我们必须考虑到障碍及视力障碍,认知及动作障碍，使用正确的语义标签,用户需求的元素，键盘或鼠标的焦点元素，语音标注以及代码段必须整体易于理解和可阅读。本文提供了具体的示例代码和最佳实践，以帮助您改善现有的Web应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672edbeeeedcc8a97c8b123f