可访问性如何教会我更好地学习JavaScript-第一部分
最初发布在www.a11ywithlindsey.com
嗨，朋友们希望您度过了愉快的一周我写了一段时间的这条推文启发了我写这篇博客文章：
关于我的一个有趣的事实：由于可访问性，我开始学习JavaScript，尽管如此。
— Lindsey Kopacz?（@LittleKope），2019年7月9日
回应之一是“这将是一篇不错的博客文章。”所以我在这里。
在这篇文章中，我将继续：
- 我作为唯一前端开发人员的第一个项目的背景
- 该项目的要求使我在JavaScript方面变得更好
- 创建一个弹出菜单，使我可以开始玩JavaScript
- 我使用JavaScript解决的可访问性问题
- 了解渐进增强
- 我现在将如何改善
背景
大约3-4年前，虽然我从事技术工作了两年，但我终于知道我想成为一名前端开发人员。我和老板谈了有关拥有一个项目的前端开发的信息。我的老板喜欢为开发人员的实力及其期望的增长找到合适的项目。她分配给我的项目并不是特别性感。但是，这对我的学习来说是完美的。这不是重新设计。
不一样吧您很少听说没有重新设计的构建项目。工作：将其内容迁移到WordPress。客户不喜欢以前的CMS用户体验，但希望保持设计不变。这个项目使我能够改善其CSS，可访问性和性能。
要求
有一个主要的要求令我感到恐慌。我被禁止使用jQuery。当时，我认为这是一个愚蠢的要求，无法理解为什么我们不允许使用jQuery。像Angular和React这样的JavaScript框架仍然是新的。 Drupal和WordPress仍然严重依赖jQuery。
另一个主要要求是不允许我以任何方式更改内容标记。我们将在另一篇文章中进一步讨论这一点，但这最终是渐进增强的福音
在本文中，我不会过多地谈论WordPress或CSS。但是，我将快速完成一些我记得要完成的任务，以便在考虑可访问性的情况下进行设置。当时，我从UI开发人员的角度理解了可访问性，但对JavaScript的交叉知识却不了解。
从JavaScript开始
我们在代理商处有一个基本主题，我以此为基础开始学习。主题是带有CSS和可访问导航的JavaScript的空白面板。我第一次遇到JavaScript是在创建语言下拉菜单时。
这个网站有许多语言网站，超过20个。此菜单的目的是切换语言。我们保留了现有功能，该功能是指向每种语言首页的链接菜单。理想情况下，我希望使用语言切换器来获取用户所在的页面。但是，请记住，我们没有更改任何功能。这是一个迁移项目。
从JavaScript开始，我创建了一个带有无序列表的按钮。然后我们将使用 addEventListener 切换 visually-hidden 类。要了解有关视觉隐藏的更多信息，请查看A11y项目的相关文章。
很简单，对不对？
错误。
辅助功能问题
当我们这样做时，我们可以专注于看不见的链接。看看这个gif，尤其是您看到链接的左下角。当我们将注意力中心化在按钮上时，您会看到一个蓝色的轮廓吗？当我们再次开始制表时，我们隐藏的所有链接都是可聚焦的。我们看不到链接的焦点在哪里
我过去所做的事情比我需要的要大得多。我将菜单内链接的所有tabindexes设置为 -1 在页面加载时。在该事件侦听器中，我还检查了该类是否存在，并根据tabindex将其关闭。我的代码在我的头上有一线希望。我了解了很多关于JavaScript中HTML元素的属性的信息。这对我增强JavaScript技能很有价值。在学习焦点管理的同时，这对可访问性很重要。
至少在功能上要好得多。
我刚开始的时候以为 display: none 总是对可访问性不利。但事实并非如此。如果未打开某些内容，则任何人都不能访问它，甚至屏幕阅读器用户也不能访问。因此，我将对其进行一些更改。
我希望我做了什么：
- 去除
visually-hidden类 - 组
.lang-menu至display: none当我追加.open类，将样式更改为display: block - 更改切换类列表以切换类
open。
但是，执行上述步骤并不能完全解决问题。让我们谈谈渐进增强。
我希望我能做的渐进增强
不幸的是，这些策略都不能说明逐步增强。如果JavaScript无法加载或加载缓慢，我们希望人们仍然能够访问导航菜单。假设JS无法加载，那么我们的用户对此实施会如何处理？
如果JavaScript无法加载， ul 元素有 display: none，没有人能看到语言菜单。这是因为没有事件监听器就无法切换菜单打开。
我将为逐步增强做一些事情。
- 添加一个
no-js类 - JavaScript加载后立即删除该类。
- 更改打开/关闭以使更多的注意力放在“关闭”上，并在加载JavaScript时加载一个类。
- 使用创建一些默认样式
no-js，因此它看起来并不难看（我在这里不打算这样做） - 从视觉上隐藏按钮，并从辅助技术中隐藏（如果有）
no-js存在。
用ARIA添加上下文
如果您阅读了我的《揭秘ARIA》博客文章，您会知道，仅在需要更多上下文时才在最后添加ARIA。刚开始从事Web开发人员工作时，我对ARIA一无所知，因此我从未将其添加到代码中。
这是我要添加的ARIA属性：
-
aria-expanded向用户指示菜单是打开还是关闭。该值在事件侦听器上在true和false之间切换。 -
aria-haspopup指示元素具有弹出上下文菜单或子级菜单。
要在macOS上进行测试：
- 打开Safari并使用cmd + F5打开屏幕阅读器。
- 使用VoiceOver命令选择按钮。它应显示为“打开，折叠，弹出按钮”。
- 按回车。屏幕阅读器应阅读“打开，展开，弹出按钮”。
请参阅下面的视频转到原始帖子。
这些aria属性为屏幕阅读器用户提供有关如何与按钮进行交互的指导。如果我有一个更详细的按钮标签，并带有更多上下文来告诉您您要打开的内容，那就更好了
结论
看到我的代码如何演变为专注于可访问性的Web开发人员，这真的很有趣。我将针对该项目提出的另一个主要可访问性问题发表第二篇文章。这篇文章开始变得冗长我需要JavaScript来解决这些问题。我还需要JavaScript来学习渐进增强。
保持联系如果您喜欢这篇文章：
- 让我在Twitter上知道，并与您的朋友分享这篇文章另外，请随时向我发送任何后续问题或想法。
- 在patreon上支持我如果您喜欢我的工作，可以考虑每月捐款1美元。如果您的认捐金额达到或超过5美元，就可以对以后的博客文章进行投票我还为所有赞助人每月做一次“问我任何事情”会议
-
成为第一个了解我的帖子的人，以获取更多辅助功能
干杯!祝你有美好的一周