【早阅】创建可访问的CSS艺术

作者：@Alvaro Montoro
原文：https://alvaromontoro.com/blog/67979/creating-accessible-css-art

背景

CSS 艺术（CSS Art）是一种利用 CSS 技术创建图形和插图的创意形式，自 CSS 诞生以来就一直存在。它不仅是一种学习和练习 CSS 的好方法，还能为开发者提供有趣的编码挑战。然而，CSS 艺术的一个主要问题是其固有的不可访问性。本文探讨了如何通过一些最佳实践和技巧，使 CSS 艺术对所有用户更加友好，包括屏幕阅读器用户、色觉障碍者、前庭功能障碍或眩晕患者等。

【小册】CSS实战

要点

本文提出了多项改进 CSS 艺术可访问性的建议，包括将 CSS 艺术标识为图像、添加替代文本、选择像素完美或可扩展设计、使用语义 HTML 元素、谨慎使用动画、考虑用户颜色选择以及设置宽高比。

分析

将 CSS 艺术标识为图像：通过添加 role="img" 和 aria-label 或 aria-labelledby 属性，可以使屏幕阅读器将 CSS 艺术识别为图像，并提供替代文本。这确保了即使 CSS 未能正确加载，用户仍能获取图像的描述信息。

 <div role="img">
   
 div>

添加替代文本：使用 aria-label 或 aria-labelledby 属性为 CSS 艺术提供替代文本，确保屏幕阅读器用户能够理解图像内容。此外，通过隐藏替代文本的显示，可以避免在 CSS 加载失败时影响页面布局。

 <div role="img" aria-labelledby="alt-image">
   <div id="alt-image">The alternative text goes herediv>
   
 div>

 #alt-image {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }

在如 

 或  这样的非语义静态文本元素中添加 aria-label 或 aria-labelledby 被视为反模式，并且会被屏幕阅读器忽略。

选择像素完美或可扩展设计：开发者可以选择像素完美设计以确保图像的精确显示，或选择可扩展设计以实现响应式布局。可扩展设计需要考虑一些 CSS 属性的兼容性问题，但能够提供更好的用户体验。

使用语义 HTML 元素：建议使用 

 或 

 等语义 HTML 元素来包裹 CSS 艺术，以提高代码的可读性和可访问性。特别是 

 元素，可以更好地传达 CSS 艺术的独立性和完整性。

 <figure aria-labelledby="alt-image">
   <figcaption id="alt-image">
     Here goes the alternative text
   figcaption>
   
 figure>

谨慎使用动画：CSS 艺术中的动画可能会对某些用户造成不适，特别是前庭功能障碍或眩晕患者。通过使用 prefers-reduced-motion 媒体查询，开发者可以为用户提供禁用或替换动画的选项。

 @media (prefers-reduced-motion) {
   .animated {
     animation: none;
   }
 }

考虑用户颜色选择：利用 prefers-contrast、prefers-color-scheme 和 forced-colors 等媒体查询，开发者可以根据用户的操作系统设置调整 CSS 艺术的颜色和对比度，以提高可访问性。

【早阅】针对用户动效和主题偏好使用 CSS 和 JavaScript 进行调整

 @media (prefers-contrast: more) {
   /* more: higher contrast colors, borders, no transparencies */
   /* less: lower contrast colors */
 }

 @media (prefers-colors-scheme: dark) {
   /* dark: drawing with more contrast vs dark background */
   /* light: drawing with more contrast vs light background */
 }

 @media (forced-colors: active) {
   /* override properties like box-shadow, add borders, etc. */
 }

• prefers-contrast：用来指示用户是否需要更高的或更低的对比度。

• prefers-color-scheme：检测用户是否请求了深色 / 浅色主题（通常用于夜间 / 白天模式）。

• forced colors：是否指定用户选择了有限的色彩方案。

设置宽高比：使用一个较新的 aspect-ratio 属性可以确保 CSS 艺术在不同设备上保持正确的宽高比，避免图像被拉伸或扭曲。

 /* This CSS art will be squared */
 #myCSSart {
   aspect-ratio: 1 / 1;
 }

 /* This CSS art will be twice as tall as it is wide */
 #myCSSart {
   aspect-ratio: 1 / 2;
 }

影响

这些改进措施不仅提高了 CSS 艺术的可访问性，还增强了用户体验。随着越来越多的开发者关注可访问性，这些最佳实践将成为创建更具包容性和用户友好性网页的重要工具。此外，这些技术也有助于推动整个行业对可访问性标准的重视和实施。

结论

通过采用这些建议，开发者可以在不影响创意表达的前提下，显著提升 CSS 艺术的可访问性。这不仅有助于吸引更广泛的用户群体，还能为整个行业树立良好的实践典范。未来，随着可访问性标准的不断完善和普及，我们可以期待更多创新和包容性的网页设计出现。

😀 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学，可联系 vx：zhgb_f2er

5 分钟新知：了解技术资讯的一种方式。
🚀可直接通过阅读原文了解详细内容。