使用HTML、CSS和JavaScript的可访问模式RAYBET雷竞技官网下载 2021-11-16 默认分类 暂无评论 4058 次阅读 ![1_GYIerS1Q6vlvD84reSN1gw.jpeg](http://www.guobacai.com/usr/uploads/2021/11/300826073.jpeg) 在这篇文章中,我想分享我用HTML、CSS和JavaScript实现的一个模态RAYBET雷竞技官网下载,它满足了W3C WCAG工作组设定的测试。 1. 检查role=dialog是否是作为自定义RAYBET雷竞技官网下载的容器(如div)的一个属性。 2. 检查该容器是否在用户交互或其他事件之后通过JavaScript插入(或使其可见)。 3.当RAYBET雷竞技官网下载被激活时,检查焦点是否被设置到容器中的一个元素。 4.当RAYBET雷竞技官网下载处于激活状态时,检查焦点是否从未被设置到不在容器中的元素。 5.当RAYBET雷竞技官网下载被停用时,检查焦点是否被设置到最初激活RAYBET雷竞技官网下载的控件上。 在这五点之上,我还希望模态RAYBET雷竞技官网下载能满足以下几点。 - 当用户点击Escape时,模态RAYBET雷竞技官网下载就会关闭。 - 当用户点击其可见部分之外时,模态RAYBET雷竞技官网下载就会关闭。 ## HTML代码 ``` 使用HTML、CSS和JavaScript的可访问模式对话框 - 锅巴菜 Accessible Modal Dialog To close click a button, Escape, or outside this dialog. X Close Main Title Open Modal 1 Open Modal 2 ``` 在上面的HTML代码中,最相关的几行是。 - **第12行:**我们在body标签中将aria-haspopup属性设置为 "dialog"。我也考虑过将其设置为 "alerttdialog",但我认为这个弹出式窗口不是为了提醒用户,所以 "alert "的角色似乎不太适合这种情况。我们设置这个属性是为了告诉屏幕阅读器,主体元素有一个弹出窗口。 - **第15-16行:**这是模态的外层div,在这里。 1.我们给角色属性 "dialog"(本来可以是 "alertialog")。 2.我们将 aria-modal 设置为 true,以便向屏幕阅读器表明这是一个模态元素。 1.我们按照RAYBET雷竞技官网下载角色的要求,指定ria-label。 2.我们将ria-live设置为 "assertive",这样,当RAYBET雷竞技官网下载更新(出现)时,屏幕阅读器将立即宣布它。 **第45-46行:**导入必要的脚本。 1.用于模态的JavaScript代码(见下文)。 2.inert polyfill,将模态后面的所有内容设置为惰性,这样它不仅对屏幕阅读器来说是不可访问的,对键盘导航也是如此。 ## JavaScript 代码 ``` const modal = { callOpen: () => { modal.opener = document.activeElement openModal() }, callClose: () => { closeModal(modal.opener) }, handleOverlayClick: (event) => { if(event.target.className === 'overlay'){ closeModal(modal.opener) } } } function openModal(){ setVisibile(true) setFocus() setInertBehindModal(true) } function closeModal(opener){ setVisibile(false) setInertBehindModal(false) opener.focus() } function attachEventListener(openButtons, closeButtons, overlay) { openButtons.forEach(b => { b.addEventListener('click', modal.callOpen) }); closeButtons.forEach(b => { b.addEventListener('click', modal.callClose) }); overlay.addEventListener('click', modal.handleOverlayClick) window.addEventListener('keydown', clallIfEscPress) } function setVisibile(visible) { const display = visible? 'block' : 'none' document.querySelector('.overlay').style.display = display } function setFocus() { document.querySelectorAll('.modal button, modal input, modal textarea, modal select')[0].focus() } function setInertBehindModal(inert) { const element = document.querySelector('main') element.inert = inert element.setAttribute('aria-hidden', inert) } function clallIfEscPress(event){ if(event.key === 'Escape') { modal.callClose() } } const openButtons = document.querySelectorAll('.open-modal') const closeButtons = document.querySelectorAll('.close-modal') const overlay = document.querySelector('.overlay') attachEventListener(openButtons, closeButtons, overlay) ``` 我试图用一种不言自明的方式来写代码,但有些部分可能需要解释一下。 - **第3行** 我们保存模态打开时拥有焦点的元素。这是必要的,以便在用户关闭模态时将焦点放回原处(第25行)。 - **第9行** 我们想在用户点击模态框周围的 "gray "不透明部分(覆盖层)时关闭模态。 - **第45行** 对于这种特殊情况,我们可以只寻找按钮。为了使代码更容易重复使用,我们也寻找其他可以接受焦点的元素,并且可以在模态RAYBET雷竞技官网下载中。我们把焦点放在我们找到的第一个元素上。 - **第50行:**这就是我们需要polyfill的部分。 ## CSS样式表 ``` .overlay { display: none; position:fixed; top: 0; width: 100%; height: 100%; background-color: rgba(211, 211, 211, 0.8); } .modal { background-color: white; margin: 20% auto; width: 50%; padding: 1rem; border: 1px solid black } :focus-visible { box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4); } ``` 我认为CSS不需要太多解释,但我觉得应该鼓励大家选择CSS display属性,而不是CSS visibility属性,或者隐藏属性。 如果在覆盖层上使用可见性,就需要(为了安全起见)将子元素的可见性设置为 "继承",因为如果该元素的后代将可见性设置为可见,那么它们就是可见的。另外,如果位置没有设置为固定或绝对,即使不可见,该元素仍然会占用空间。所以使用display属性感觉更安全,也省了一行代码。 而使用隐藏属性的风险在于,在一个带有隐藏属性的元素上改变CSS display属性的值会覆盖隐藏属性的行为。所以我觉得直接使用CSS display属性会更安全。 在iOS Safari+VoiceOver中,当使用display时,似乎有一个错误。"none "作为默认值时,似乎有一个bug,但是提到这个bug的帖子已经有两年多了,我没有找到更多的相关信息,而且在测试的时候,我也没有遇到这个bug。 标签: 属性, 代码, 容器, 对话, 模态, modal, dialog
评论已关闭