当前位置：首页 > article >正文

CSS系列（23）-- 可访问性实践详解

article 2024/12/22 12:19:06

前端技术探索系列：CSS 可访问性实践详解 ♿

致读者：探索包容性设计的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 可访问性，学习如何创建真正包容所有用户的网页设计。

可访问性基础 🚀

颜色对比度

/* 不良实践 - 对比度不足 */
.low-contrast {
    color: #666;
    background: #888;
}

/* 良好实践 - 符合WCAG标准 */
.high-contrast {
    color: #222;
    background: #fff;
    /* 确保最小对比度比为4.5:1 */
}

/* 自定义属性支持高对比度模式 */
:root {
    --text-color: #333;
    --bg-color: #fff;
}

@media (prefers-contrast: high) {
    :root {
        --text-color: #000;
        --bg-color: #fff;
    }
}

焦点样式

/* 不要完全移除焦点轮廓 */
.bad-practice {
    outline: none; /* 避免这样做 */
}

/* 自定义焦点样式 */
.button {
    position: relative;
    outline: none;
}

.button:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

/* 确保悬停和焦点状态清晰可见 */
.interactive-element {
    transition: all 0.2s ease;
}

.interactive-element:hover,
.interactive-element:focus-visible {
    transform: translateY(-2px);
    background-color: var(--hover-color);
}

响应式可访问性 🎯

文本缩放

/* 使用相对单位 */
.text-content {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 65ch; /* 确保可读性 */
}

/* 响应文本缩放 */
@media (max-width: 768px) {
    html {
        font-size: calc(14px + 0.5vw);
    }
}

/* 支持用户首选的文字大小 */
@media (prefers-reduced-motion: no-preference) {
    .text-content {
        font-size: calc(1rem + 0.5vw);
    }
}

动画控制

/* 尊重用户的动画偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.animated-element {
    transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: none;
    }
}

屏幕阅读器支持 💫

隐藏元素

/* 视觉隐藏但保持可访问性 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 完全隐藏 */
.hidden {
    display: none;
}

/* 根据上下文隐藏 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

内容顺序

/* 使用Grid保持逻辑顺序 */
.content-grid {
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "aside"
        "footer";
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-areas:
            "header header"
            "nav main"
            "aside main"
            "footer footer";
    }
}

/* 确保tab顺序合理 */
.interactive-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.interactive-item {
    order: 0; /* 避免使用负值 */
}

表单可访问性 ⚡

标签和控件

/* 确保标签可点击 */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* 错误状态 */
.form-control:invalid {
    border-color: var(--error-color);
}

.error-message {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* 必填字段标记 */
.required-field::after {
    content: "*";
    color: var(--error-color);
    margin-left: 0.25rem;
}