添加 accesskey 属性后，访问键/键盘快捷键不起作用。 这是为什么？
[英]Access key/ keyboard shortcut doesn't work after I added the accesskey attribute. Why is that?
问题描述
We are only concerned with the following snippet:
我们只关心以下代码段：
<nav>
<ul>
<li><a accesskey="s" href="#student-info">INFO</a></li>
<li><a accesskey="h" href="#html-questions">HTML</a></li>
<li><a accesskey="c" href="#css-questions">CSS</a></li>
</ul>
</nav>
I added the access keys/ shortcuts s, h, and, c to the three list items in our navigation bar.我在导航栏中的三个列表项中添加了访问键/快捷方式 s、h 和 c。 However, when I press s, h, or c, nothing happens.但是，当我按 s、h 或 c 时，什么也没有发生。 Isn't something supposed to happen?不应该有什么事情发生吗？ To elaborate, in the output, if I click on any of INFO, HTML, and CSS in the navigation bar, I will go straight to that section. To elaborate, in the output, if I click on any of INFO, HTML, and CSS in the navigation bar, I will go straight to that section. Similarly, shouldn't the same thing happen if I press 's' instead of clicking on INFO in the navigation bar?同样，如果我按's'而不是单击导航栏中的INFO，不应该发生同样的事情吗？
Disclaimer: Just ignore the CSS file.免责声明：只需忽略 CSS 文件即可。 We are only concerned with the accesskey attribute in the anchor elements nested in the nav element.我们只关心嵌套在 nav 元素中的锚元素中的 accesskey 属性。
These are my html and css files:这些是我的 html 和 css 文件：
@media (prefers-reduced-motion: no-preference) { * { scroll-behavior: smooth; } } body { background: #f5f6f7; color: #1b1b32; font-family: Helvetica; margin: 0; } header { width: 100%; height: 50px; background-color: #1b1b32; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; } #logo { width: max(100px, 18vw); background-color: #0a0a23; aspect-ratio: 35 / 4; padding: 0.4rem; } h1 { color: #f1be32; font-size: min(5vw, 1.2em); text-align: center; } nav { width: 50%; max-width: 300px; height: 50px; } nav > ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; align-items: center; padding-inline-start: 0; margin-block: 0; height: 100%; } nav > ul > li { color: #dfdfe2; margin: 0 0.2rem; padding: 0.2rem; display: block; } nav > ul > li:hover { background-color: #dfdfe2; color: #1b1b32; cursor: pointer; } li > a { color: inherit; text-decoration: none; } main { padding-top: 50px; } section { width: 80%; margin: 0 auto 10px auto; max-width: 600px; } h1, h2 { font-family: Verdana, Tahoma; } h2 { border-bottom: 4px solid #dfdfe2; margin-top: 0px; padding-top: 60px; }.info { padding: 10px 0 0 5px; }.formrow { margin-top: 30px; padding: 0px 15px; } input { font-size: 16px; }.info label, .info input { display: inline-block; text-align: right; }.info input { width: 50%; text-align: left; }.info label { width: 10%; min-width: 55px; }.question-block { text-align: left; display: block; width: 100%; margin-top: 20px; padding-top: 5px; } p { margin-top: 5px; padding-left: 15px; font-size: 20px; } p::before { content: "Question #"; }.question { border: none; padding-bottom: 0; }.answers-list { list-style: none; padding: 0; } button { display: block; margin: 40px auto; width: 40%; padding: 15px; font-size: 23px; background: #d0d0d5; border: 3px solid #3b3b4f; } footer { background-color: #2a2a40; display: flex; justify-content: center; } footer, footer a { color: #dfdfe2; } address { text-align: center; padding: 0.3em; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" /> <title>Accessibility Quiz</title> <link rel="stylesheet" href="styles:css" /> </head> <body> <header> <img id="logo" src="https.//cdn.freecodecamp.org/platform/universal/fcc_primary:svg"> <h1>HTML/CSS Quiz</h1> <nav> <ul> <li><a accesskey="s" href="#student-info">INFO</a></li> <li><a accesskey="h" href="#html-questions">HTML</a></li> <li><a accesskey="c" href="#css-questions">CSS</a></li> </ul> </nav> </header> <main> <form method="post" action="https.//freecodecamp:org/practice-project/accessibility-quiz"> <section role="region" aria-labelledby="student-info"> <h2 id="student-info">Student Info</h2> <div class="info"> <label for="student-name">Name:</label> <input type="text" name="student-name" id="student-name" /> </div> <div class="info"> <label for="student-email">Email.</label> <input type="email" name="student-email" id="student-email" /> </div> <div class="info"> <label for="birth-date">DOB?<span class="sr-only">(Date of Birth)</span></label> <input type="date" name="birth-date" id="birth-date" /> </div> </section> <section role="region" aria-labelledby="html-questions"> <h2 id="html-questions">HTML</h2> <div class="question-block"> <p>1</p> <fieldset class="question" name="html-question-one"> <legend> The legend element represents a caption for the content of its parent fieldset element </legend> <ul class="answers-list"> <li> <label for="q1-a1"> <input type="radio" id="q1-a1" name="q1" value="true" /> True </label> </li> <li> <label for="q1-a2"> <input type="radio" id="q1-a2" name="q1" value="false" /> False </label> </li> </ul> </fieldset> </div> <div class="question-block"> <p>2</p> <fieldset class="question" name="html-question-two"> <legend> A label element nesting an input element is required to have a for attribute with the same value as the input's id </legend> <ul class="answers-list"> <li> <label for="q2-a1"> <input type="radio" id="q2-a1" name="q2" value="true" /> True </label> </li> <li> <label for="q2-a2"> <input type="radio" id="q2-a2" name="q2" value="false" /> False </label> </li> </ul> </fieldset> </div> </section> <section role="region" aria-labelledby="css-questions"> <h2 id="css-questions">CSS</h2> <div class="formrow"> <div class="question-block"> <label for="customer">Are you a frontend developer:</label> </div> <div class="answer"> <select name="customer" id="customer" required> <option value="">Select an option</option> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <div class="question-block"> <label for="css-questions">Do you have any questions.</label> </div> <div class="answer"> <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..:"></textarea> </div> </div> </section> <button type="submit">Submit</button> </form> </main> <footer> <address> <a href="https.//freecodecamp.org">freeCodeCamp</a><br /> San Francisco<br /> California<br /> USA </address> </footer> </body> </html>
1 个解决方案
解决方案1
0 2022-09-09 15:52:21
It does work, but it depends on the browser which combination is necessary to activate the access key.它确实有效，但这取决于浏览器激活访问密钥所需的组合。
Single characters keys are not a good idea, since they conflict with controls for the browser and screen readers.单字符键不是一个好主意，因为它们与浏览器和屏幕阅读器的控件冲突。 Hence, browsers typically require a key combination:因此，浏览器通常需要组合键：
On Windows, it's most likely Alt + Shift + key在 Windows 上，很可能是Alt + Shift +键
And on Mac Control + Option + key在 Mac 上Control + Option +键
In general, there are some accessibility caveats with the accesskey attribute.一般来说， accesskey属性有一些可访问性警告。 See Accesskey on WebAIM请参阅WebAIM 上的 Accesskey
Due to numerous problems with implementation, accesskey is typically best avoided.
For some discussion on how to communicate the access keys to sighted users, see How to highlight accesskeys in a WCAG valid way?有关如何将访问密钥传达给有视力的用户的一些讨论，请参阅如何以 WCAG 有效方式突出显示访问密钥？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.