网络可访问性：可访问的流体版式-css教程-PHP中文网

网络可访问性：可访问的流体版式

碧海醫心

发布： 2024-12-01 09:51:48

转载

910人浏览过

简介
首先：字体大小：20px - 不好的做法
如何制作无障碍的流畅文本
10 分钟内的版式组件
灵感来自

介绍

今天我想提醒一下重要的主题 - 辅助功能。这是一个社区驱动的
努力让数字访问变得更容易。

这个主题的一小部分是排版。文本在任何浏览器字体大小下都应该看起来不错。

100%	200%
@@##@@	@@##@@

首先：字体大小：20px - 不好的做法

我知道，我们都这么做了，互联网上很多人在他们的课程中使用它。但这是一个糟糕的方法。如果您不确定选择哪个单位，这里有一个简单的规则：

px - 不会改变的固定大小元素，例如边框或阴影。

rem - 字体大小，以便更改浏览器默认字体大小的用户可以访问。

vw / vh - 元素大小与视口大小一致

% - 元素大小遵循相对大小

如何制作无障碍的流畅文本

我们所需要的只是clamp()以使其可访问和公式
使其响应。

确保将全局字体大小设置为 16px。并且行高至少为 1.2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
}

登录后复制

定义最小和最大屏幕尺寸，在我的例子中为 320 px - 1920 px。
定义您希望在最小和最大屏幕上显示的文本大小。在我的示例中，我有 h1 标签，所以我的
字体大小将分别为 50px 和 90px。
转到 https://utopia.fyi/type/calculator 并在其中输入您的值

网络可访问性：可访问的流体版式屏幕”加载=“懒惰”宽度=“800”高度=“177”>

向下滚动到 css 生成器。我们需要 --step-0 值

   copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

登录后复制

放置夹具(3.125rem, 2.625rem 2.5vw, 5.625rem);作为文本的字体大小。

结果：

320px	1920px	1920px(200% zoom)
@@##@@	@@##@@	@@##@@

您可以看到，通过 1 行 css，我的文本即可响应并可进行浏览器缩放。

10 分钟内的版式组件

我的目的是尽可能快速、灵活地创建灵活的 typography 组件。

我拍摄了最大的 h1 文本。转到https://utopia.fyi/type/calculator并生成8个降级步骤：

网络可访问性：可访问的流体版式屏幕”加载=“懒惰”宽度=“800”高度=“458”>

这将是我的 p、h1-6、span 和标签文本大小

    --size-text-s: clamp(0.7268rem, 0.6834rem + 0.2169vw, 0.9437rem);
    --size-text-m: clamp(0.8721rem, 0.8106rem + 0.3075vw, 1.1796rem);
    --size-text-l: clamp(1.0466rem, 0.961rem + 0.428vw, 1.4746rem);
    --size-h6: clamp(1.2559rem, 1.1384rem + 0.5873vw, 1.8432rem);
    --size-h5: clamp(1.507rem, 1.3476rem + 0.797vw, 2.304rem);
    --size-h4: clamp(1.8084rem, 1.5941rem + 1.0716vw, 2.88rem);
    --size-h3: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
    --size-h2: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
    --size-h1: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);

登录后复制

然后再玩 5 分钟 react，瞧：

我的 react 可重用版式组件