【发布时间】：2021-11-05 00:05:56
【问题描述】：
可预知
我有一个网站，我在其中记录了已安装的 pythonic 库的列表。
对于每个库，我希望有可用的：
- 库的名称（很明显）
- 库文档的链接（因为文档很有用）
- 对该库的简要说明（以便人们快速了解该库的功能）
- 当前安装的版本（以免人们问我“您使用的是 x.y 版本吗？”）
我目前的解决方案是使用名称作为链接的文本，href'd 到其文档，并接受版本和描述是补充信息，并且可以使用工具提供给用户 -提示 - 这样他们就可以坐在 title 属性中
例子：
Data Visualization tools:
<a href='https://docs.bokeh.org/en/latest/docs/user_guide.html'
title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>,
<a href='https://graphviz.gitlab.io/documentation/'
title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph
drawing software - version: 2.48.0'>graphviz</a>,
这样可以保持 UI 简洁：它只是一个库列表，我可以按功能类型对其进行分组，并为大多数用户提供信息。
问题
这很好用，但是有两个问题：
- 可访问性并不好 - 补充信息对非视觉读者隐藏
- 如果使用键盘选择了项目，则工具提示不会显示
所需的解决方案
我正在寻找两种解决方案：
- 向非视觉用户提供补充信息
- 使任何切换补充信息的东西都适用于鼠标悬停和键盘焦点
我有 #1 的解决方案 - 请参阅我在 CodePen 中的演示或以下问题：https://codepen.io/perllaghu/pen/NWgdgJb
....但我就是不知道如何让:focus 工作！
我不确定它是元素顺序/放置的事情，还是选择器的事情......
<html lang="en">
<head>
<title>Hack</title>
<style>
/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
} */
html {
--darkgrey: #333333;
--lightgrey: #cccccc;
--darkblue: #041e42;
--lightblue: #0099ff;
--red: #a50034;
--yellow: #f4aa00;
--pastel: #fff0e8;
--white: #ffffff;
--green: #00A611;
--ff-title: "Poppins", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
--ff-body: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.35;
font-family: var(--ff-body);
background: var(--white);
color: var(--darkgrey);
}
*:focus {
outline: 4px solid var(--lightblue) !important;
outline-offset: 3px;
}
.side-padding {
padding-left: 10%;
padding-right: 10%;
}
a,
a:hover,
a:visited {
text-decoration: none;
color: inherit;
border-bottom: 1px dotted #004b6b;
border-radius: 5px;
}
#policy ul {
margin-left: 3rem;
margin-bottom: 1rem;
}
#policy li a,
#policy li a:hover,
#policy li a:visited {
text-decoration: none;
border-bottom: 1px dotted #004b6b;
color: var(--darkblue);
}
#policy li span {
color: var(--darkblue);
}
.set_of_libs {
position: relative;
}
.set_of_libs span span {
display: none;
position: absolute;
border: 1px solid var(--darkblue);
border-radius: 0.5rem;
background-color: var(--darkblue);
color: var(--pastel) !important;
padding: 0.5rem;
transform: translate(-50%, 50%);
z-index: 10;
max-width: 50%;
}
.set_of_libs span:hover span,
.set_of_libs span:focus span {
display: inline;
}
</style>
</head>
<body>
<header aria-label="Header section`">
<h1>Obligatory h1 Heading</h1>
</header>
<main id="policy" class="side-padding" aria-label="The Notebooks">
<h2>A main heading</h2>
<section aria-labelledby="standard_notebook_h3">
<h3 id="standard_notebook_h3">Standard Notebook</h3>
<p>Standard Notebook is the default python 3 notebook, with a wide selection of libraries includes.</p>
<ul>
<li class="set_of_libs">
Based on the <span><a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook" >jupyter/minimal-notebook</a> <span>(Jupyter's minimal notebook)</span></span> image.
</li>
<li class="set_of_libs">
Includes <span><a href="https://nbgrader.readthedocs.io/en/stable/" >nbgrader</a> <span>(A system for assigning and grading Jupyter notebooks)</span></span> and <span><a href="https://github.com/edina/plusGitRepo" >+GitRepo</a> <span>(+GitRepo lets your students collect content from a git repository.)</span></span>
tools for document sharing.
</li>
<li class="set_of_libs">
Provide <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/rubberband/readme.md" >rubberband</a> <span>(Multi-Cell selection using a rubberband.)</span></span>,
<span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise/readme.md" >exercise</a> <span>(Extension for hiding/showing solutions cells)</span></span>, and
<span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise2/readme.md" >exercise-2</a> <span>(Extension for hiding/showing solutions cells)</span></span>
extensions. <strong>Note</strong> these are not related to nbgrader in any way.
</li>
<li class="set_of_libs">
Data Access libraries: <span><a href='https://www.crummy.com/software/BeautifulSoup/bs4/doc/' >beautifulsoup4</a> <span>(Python library designed for screen-scraping - version: 4.9.3)</span></span>, <span><a href='https://pypi.org/project/dill/' >dill</a> <span>(Serialize all of python (almost) - version: 0.3.4)</span></span>,
<span><a href='https://github.com/gitpython-developers/gitdb' >gitdb2</a> <span>(GitDB allows you to access bare git repositories for reading and writing - version: 4.0.2)</span></span>, <span><a href='http://xmlsoft.org/html/index.html' >libxml2</a> <span>(The XML C parser and toolkit of Gnome - version: 2.9.12)</span></span>,
<span><a href='https://lxml.de/' >lxml</a> <span>(Pythonic binding for the C libraries libxml2 and libxslt - version: 4.6.3)</span></span>, <span><a href='https://dev.mysql.com/doc/connector-python/en/' >mysql-connector-python</a> <span>(Enables Python programs to access MySQL databases, using an API that is compliant with the Python Database API Specification v2.0 (PEP 249) - version: 8.0.25)</span></span>,
<span><a href='https://openpyxl.readthedocs.io/en/stable/' >openpyxl</a> <span>(a Python library to read/write Excel 2010 xlsx/xlsm/xltx/xltm files - version: 3.0.7)</span></span>, <span><a href='https://developers.google.com/protocol-buffers/docs/pythontutorial' >protobuf</a> <span>(Protocol Buffers - Googles data interchange format - version: 3.16.0)</span></span>,
<span><a href='https://github.com/willtrnr/pyxlsb' >pyxlsb</a> <span>(an Excel 2007-2010 Binary Workbook (xlsb) parser for Python - version: 1.0.8)</span></span>, <span><a href='https://docs.sqlalchemy.org/en/13/' >sqlalchemy</a> <span>(Database Abstraction Library - version: 1.4.22)</span></span>,
<span><a href='https://anaconda.org/conda-forge/sqlite' >sqlite</a> <span>(SQLite darabase engine/server - version: 3.35.5)</span></span>, <span><a href='https://textblob.readthedocs.io/en/dev/' >textblob</a> <span>(Simple, Pythonic text processing. Sentiment analysis, part-of-speech tagging, noun phrase parsing, and more - version: 0.15.3)</span></span>,
<span><a href='http://www.unixodbc.org/' >unixodbc</a> <span>(ODBC on non MS Windows platforms - version: 2.3.9)</span></span>, <span><a href='https://xlrd.readthedocs.io/en/latest/' >xlrd</a> <span>(Library for developers to extract data from Microsoft Excel (tm) spreadsheet files - version: 2.0.1)</span></span>,
<span><a href='https://xlwt.readthedocs.io/en/latest/' >xlwt</a> <span>(a library for developers to use to generate spreadsheet files compatible with Microsoft Excel versions 95 to 2003 - version: 1.3.0)</span></span>, <span><a href='https://xlsxwriter.readthedocs.io/' >xlsxwriter</a> <span>(a Python module for creating Excel XLSX files - version: 1.4.4)</span></span>,
and <span><a href='https://xmlschema.readthedocs.io/en/latest/' >xmlschema</a> <span>(An implementation of XML Schema for Python - version: 1.6.4)</span></span>
</li>
<li>
Data Visualization tools: <a href='https://docs.bokeh.org/en/latest/docs/user_guide.html' title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>, <a href='https://graphviz.gitlab.io/documentation/' title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph drawing software - version: 2.48.0'>graphviz</a>,
<a href='https://hvplot.holoviz.org/' title='0.7.3'>hvplot</a>, <a href='https://ipywidgets.readthedocs.io/en/latest/' title='Jupyter interactive widgets - version: 7.6.3'>ipywidgets</a>, <a href='https://github.com/matplotlib/ipympl' title='Matplotlib Jupyter Extension - version: 0.7.0'>ipympl</a>,
<a href='https://github.com/K3D-tools/K3D-jupyter' title='K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc) - version: 2.9.7'>k3d</a>,
<a href='https://matplotlib.org/contents.html' title='Publication quality features in Python - version: 3.4.2'>matplotlib-base</a>, <a href='https://mpld3.github.io/' title='D3 Viewer for matplotlib - version: 0.5.5'>mpld3</a>, <a href='https://jiffyclub.github.io/palettable/'
title='Palettable (formerly brewer2mpl) is a library of color palettes for Python - version: 3.3.0'>palettable</a>, <a href='https://plotly.com/python/' title='An interactive, browser-based graphing library for Python - version: 5.1.0'>plotly</a>,
<a href='https://geostat-framework.readthedocs.io/projects/pykrige/en/stable/' title='Supports 2D and 3D ordinary and universal kriging - version: 1.6.0'>pykrige</a>, <a href='https://docs.pymc.io/' title='PyMC3 allows you to write down models using an intuitive syntax to describe a data generating process - version: 3.11.2'>pymc3</a>,
<a href='https://seaborn.pydata.org/' title='Statistical data visualization - version: 0.11.1'>seaborn</a>, <a href='https://pypi.org/project/widgetsnbextension/' title='Interactive HTML Widgets for Jupyter - version: 3.5.1'>widgetsnbextension</a>,
and <a href='http://amueller.github.io/word_cloud/' title='A little word cloud generator in Python - version: 1.8.1'>wordcloud</a>
</li>
</ul>
</section>
</main>
</body>
</html>【问题讨论】：
-
你可能会发现这个小提琴对灵感很有用：jsfiddle.net/e78xavb9。它是为缩写而设计的（如果 JS 失败，则需要后备）并且需要一些调整，但它考虑了焦点和悬停（当您将光标移到它上面时工具提示将保持可见，因此使用屏幕放大镜的人可以有效地使用它） .
标签： html css css-selectors web-accessibility