如何确保网站的颜色主题提供符合WCAG 2 最低对比度要求的高对比度替代方案,同时更喜欢柔和的低对比度主题,除非用户想要或需要更高的对比度?
我尝试定义一个具有较高对比度的后备主题,并提供较低对比度的版本,除非用户需要高对比度,使用prefers-contrast媒体查询,但以下示例(也作为此处的codepen,未通过 axe 的可访问性审核Chrome 扩展程序由于前景色 2.71 的低对比度:#eeeeee,背景色:#f26600。)
需要什么 CSS 代码来定义正确的后备?用户希望如何表明他们的对比度偏好,是否有办法让浏览器或操作系统根据日光设置、暗/亮主题、环境光传感器等来适应对比度偏好?
p {
background-color: #f26600;
color: #eeeeee;
}
@media (prefers-contrast: more) {
p {
background-color: #aa3300;
color: #ffffff;
}
}
Run Code Online (Sandbox Code Playgroud)
我还尝试反转代码片段中的逻辑,使高对比度成为实际默认值,而不是相反:codepen.io/openmindculture/pen/eYVPgoo。这在没有颜色对比警告的情况下验证,但是这会显示柔和的版本吗?我在哪里可以声明我更喜欢较少的对比度,我怎么知道?
我正在寻找一种正确的方法来实现图像的延迟加载,而不会损害可打印性和可访问性,并且不会引入布局转换(内容跳转),最好使用本机loading=lazy和旧浏览器的回退。问题的答案如何使用 JavaScript 延迟加载图像?
包括各种解决方案,但没有一个完全满足所有这些要求。
优雅的解决方案应使用基于有效且完整的HTML标记,即<img src,srcset,sizes,width,height,和loading属性,而不是将数据放入data-属性,如流行的JavaScript库lazysizes和香草lazyload做。也不应该使用<noscript>元素。
由于chrome 中的一个错误,第一个支持原生延迟加载的浏览器,尚未加载的图像将在打印页面中丢失。
上面提到的两个 javascript 库都需要没有任何src属性的无效标记,或者空的或低质量的占位符 (LQIP),而src数据被放入data-src,而srcset数据被放入data-srcset,所有这些都只适用于 javascript。这是否被认为是 2020 年可接受的甚至最佳实践,这是否既不损害站点可访问性、跨设备兼容性,也不损害搜索引擎优化?
更新:
我在此 codepen 中仅使用 HTML 和 CSS@media print背景图像尝试了解决打印错误的方法。即使这按预期工作,每个图像都会有一个必要的 css 指令,这既不优雅也不通用。不幸的是,也没有办法在元素内部使用媒体查询。<picture>
Houssein Djirdeh 在lazy-load-with-print-ctl1l4wu1.now.sh有另一种解决方法,使用javascript 在单击“打印”按钮时更改loading=lazy为loading=eager。也可以在onbeforeprint上使用相同的函数。
我 …
我编写了一个插件,现在我想在其中创建测试。我按照官方文档并根据我的开发环境更改了 phpunit.xml.dist 。
测试正在运行,但容器不知道我的自定义定义/存储库。是不是我设置错了什么?
我尝试在标准 Dockware 容器上运行它。
phpunit.xml.dist
<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://schema.phpunit.de/7.1/phpunit.xsd"
colors="true"
bootstrap="../../../vendor/shopware/core/TestBootstrap.php"
cacheResult="false">
<php>
<ini name="error_reporting" value="-1"/>
<server name="KERNEL_CLASS" value="Shopware\Production\Kernel"/>
<env name="APP_ENV" value="test"/>
<env name="APP_DEBUG" value="1"/>
<env name="APP_SECRET" value="*"/>
<env name="SHELL_VERBOSITY" value="-1"/>
</php>
<testsuites>
<testsuite name="base">
<directory>src/Test</directory>
</testsuite>
<testsuite name="employee">
<directory>src/Components/Employee/Test</directory>
</testsuite>
</testsuites>
<filter>
<whitelist>
<directory suffix=".php">./</directory>
</whitelist>
</filter>
</phpunit>
Run Code Online (Sandbox Code Playgroud)
错误:
$ bash ./bin/phpunit.sh
PHPUnit 9.5.9 by Sebastian Bergmann and contributors.
Warning: Your XML configuration validates against a deprecated schema.
Suggestion: Migrate your XML configuration using …Run Code Online (Sandbox Code Playgroud) 如何从 Windows 创建 ssh 密钥并使用 OpenSSH 将其安装在 Linux 主机上,以便每次连接无需密码即可登录?
colors ×1
css ×1
html ×1
javascript ×1
lazy-loading ×1
linux ×1
shopware ×1
shopware6 ×1
ssh ×1
windows ×1