如何 css 目标 "Tab" 输入状态？
How to css target "Tab" state of the input?
我相信对于辅助功能情况，选项卡用于在页面上的不同元素之间导航，通常在选项卡元素周围有一个虚线元素表示它处于焦点状态，我尝试研究这个，但没有找到对针对该州的 css 规则的引用。
你想要的 css 选择器是 :focus，就像 input:focus { ... } 但不是所有的东西都可以像这样被标记。锚点、输入和按钮之类的东西可以用这种方式标记。我脑子里什么都不知道了，但是像 div、span、h1/2/3/4/5/6 之类的东西不能被标记到。
还要注意，用 Tab 键进入项目并不是使其成为焦点的唯一方法。例如，一个锚点，您可以在其上按住鼠标左键，然后在松开之前将光标移开。执行此操作将突出该项目（如果您想在页面末尾附近设置样式，这可能有助于您的开发时间。）
Tab 键确实被许多不同类型的用户用来导航页面的各个部分。但是，当您说 "for accessibility cases" 时，可能意味着很多不同的意思。
屏幕 reader 用户通常依靠其他键盘操作将 阅读内容 "cursor" 放在标题、列表、表格等内容上.这些不会从 Tab 键获得焦点。
一位 keyboard-only 用户使用 Tab 键将焦点放在表单控件和链接等可操作元素上。但是，为了阅读页面，键盘用户可能会使用箭头键滚动，space 条一次移动一个屏幕，有时甚至使用 Page Up、Page Down、Home 和 End 键。在这些情况下，不需要焦点的视觉指示，可以是 counter-productive.
每个浏览器都有一个默认焦点 "ring" 它放置在接收焦点的可操作元素上。它的范围可以从虚线到蓝框，再到浏览器制造商决定的任何内容。
当用于可能遮挡聚焦环的背景颜色或纹理时，用户并不总是很容易看到这一点。因此，您不能依赖浏览器默认设置来获得最佳可访问性。
另请注意，许多 libraries/frameworks 使用 outline : none 等样式声明明确禁用聚焦环。这是不好的做法。
如果您希望显示焦点环，请注意只有可操作的项目才能获得焦点。您可以使用 tabindex="0" 强制执行它，但这对屏幕 reader 和键盘用户来说往往弊大于利。
您想用来设置具有焦点的内容样式的 CSS 选择器是 :focus。例如，您可以尝试 :focus {outline: 2px solid #f00;box-shadow: 0 0 2em rgba(255,255,255,.75);}，这会给您一个红色边框和白色外发光（阴影）。
所以，回顾一下：
- 使用
:focus.
- 知道只有可操作的项目才会获得关注。
- 不要为了应用焦点样式而在任何东西上使用
tabindex。
我相信对于辅助功能情况，选项卡用于在页面上的不同元素之间导航，通常在选项卡元素周围有一个虚线元素表示它处于焦点状态，我尝试研究这个，但没有找到对针对该州的 css 规则的引用。
你想要的 css 选择器是 :focus，就像 input:focus { ... } 但不是所有的东西都可以像这样被标记。锚点、输入和按钮之类的东西可以用这种方式标记。我脑子里什么都不知道了，但是像 div、span、h1/2/3/4/5/6 之类的东西不能被标记到。
还要注意，用 Tab 键进入项目并不是使其成为焦点的唯一方法。例如，一个锚点，您可以在其上按住鼠标左键，然后在松开之前将光标移开。执行此操作将突出该项目（如果您想在页面末尾附近设置样式，这可能有助于您的开发时间。）
Tab 键确实被许多不同类型的用户用来导航页面的各个部分。但是，当您说 "for accessibility cases" 时，可能意味着很多不同的意思。
屏幕 reader 用户通常依靠其他键盘操作将 阅读内容 "cursor" 放在标题、列表、表格等内容上.这些不会从 Tab 键获得焦点。
一位 keyboard-only 用户使用 Tab 键将焦点放在表单控件和链接等可操作元素上。但是，为了阅读页面，键盘用户可能会使用箭头键滚动，space 条一次移动一个屏幕，有时甚至使用 Page Up、Page Down、Home 和 End 键。在这些情况下，不需要焦点的视觉指示，可以是 counter-productive.
每个浏览器都有一个默认焦点 "ring" 它放置在接收焦点的可操作元素上。它的范围可以从虚线到蓝框，再到浏览器制造商决定的任何内容。
当用于可能遮挡聚焦环的背景颜色或纹理时，用户并不总是很容易看到这一点。因此，您不能依赖浏览器默认设置来获得最佳可访问性。
另请注意，许多 libraries/frameworks 使用 outline : none 等样式声明明确禁用聚焦环。这是不好的做法。
如果您希望显示焦点环，请注意只有可操作的项目才能获得焦点。您可以使用 tabindex="0" 强制执行它，但这对屏幕 reader 和键盘用户来说往往弊大于利。
您想用来设置具有焦点的内容样式的 CSS 选择器是 :focus。例如，您可以尝试 :focus {outline: 2px solid #f00;box-shadow: 0 0 2em rgba(255,255,255,.75);}，这会给您一个红色边框和白色外发光（阴影）。
所以，回顾一下：
- 使用
:focus. - 知道只有可操作的项目才会获得关注。
- 不要为了应用焦点样式而在任何东西上使用
tabindex。