用CSS和JavaScript创建一个文本大小调整的小部件

迪鲁宾
139 阅读5分钟

改善一般的网络无障碍性是一个庞大且不断变化的过程，但确保网站和应用程序对所有用户都是无障碍的，这一点很重要。

在本教程中，我们将重点讨论用户体验的一个简单而关键的方面：文字大小。对于一些用户来说，"正常大小 "的文本可能太小，无法舒适地阅读，或者根本无法阅读，而且，根据字体大小和家族，即使视力良好的用户也可能难以舒适地阅读文本。

有许多方法可以满足用户的需求，其中之一就是实现一个文本大小调整的小部件。在其最简单的形式中，这个小部件是一对按钮或链接，可以增加或减少文本大小。

让我们来学习如何实现一个文本大小调整的小部件。

可调节文本的无障碍标准

可调节文本大小的要求来自WCAG 2.0指南1.4.4。

调整文本的大小。除文字的标题和图像外，在不使用辅助技术的情况下，文字的大小可以调整到200%，而不会损失内容或功能。(AA级)

这里没有太多的内容，但WCAG 2.0在理解SC 1.4.4中提供了额外的信息。主要的收获如下。

  • 其目的是帮助低视力人士阅读网页上的文字
  • 文字的大小必须可以调整，至少要达到200%。
  • 在调整文字大小时，内容不能被剪切、截断或遮蔽

重要的是要注意，文本大小调整部件不是一个要求。它是确保用户能够阅读你的网站的建议技术之一，但也有其他可接受的解决方案来调整你的文本，例如简单地确保你的网站响应浏览器的文本大小设置。

我对这些要求的解释可以归结为：所有重要的文本必须可以调整到至少是默认字体大小（16px）的200%。我承认这是个有点松散的解释，但我的想法是，任何大于32px的文字都大于默认字体大小的200%，所以它应该已经足够清晰。

此外，如果你有大的标题，而你把它们的大小调整到原来的200%，很可能会导致剪裁或其他布局问题，这将不符合准则。

改造文本小部件的可行性

现在，让我们来谈谈实施文本小部件的可行性。具体来说，我将在现有网站上加装小部件的背景下讨论这个问题--这个网站在设计或建造时不一定考虑到文字大小的调整。

这样的网站可能会带来一些挑战，但我将重点讨论两个问题。

  • 一些字体大小可能是以像素为单位，而不是以相对单位，如em 或rem 。是的，这是一个大忌，但现实是，这样的网站仍然存在，原因有很多
  • 如果网站上有非常大的文本，增加其大小可能会破坏布局

我们的小部件可以有几种不同的工作方式。我们可以让它改变<html> 或<body> 的font-size 。这很容易，但它不会影响以像素为单位的字体大小，而且它将针对网站上的所有文本，包括已经很大的文本。

经过多次反复，这是我确定的方法。

  • 使用CSS选择器来指定应该被调整的大小
  • 对于每个选择器，获得初始的font-size
  • 当文字大小被调整时，根据初始大小更新每个选择器的font-size 。
  • 将文字大小设置存储在浏览器内存中，这样它就能在不同的页面和会话中持续存在。

这种方法有很多优点。首先，它非常灵活，几乎可以在任何网站上使用，而无需更新标记或样式。字体大小最初可以是任何单位，因为脚本会读取初始大小并将其作为计算新字体大小的基线。这种方法也可以用来创建一个系统，其中一个类可以调整特定文本的大小。

创建一个文本大小调整的小部件

这里有一个Codepen中的演示。让我们来看看这个脚本。

首先，为所有应该可以调整大小的文本元素创建一个CSS选择器阵列。你可以使用你的标记中已有的选择器，或者你可以专门为此创建一个类。

let selectorsToScale = [
  'p',
  'button',
  '#some .very .specific.selector',
  '.a-class-that-makes-text-resizable'
];

对于每个选择器，获取font-size ，并将选择器和字体大小作为一个键值对存储在一个数组中。

for (const selector of selectorsToScale) {
  let fontSize = $(selector).css('font-size');

  if (fontSize) {
    fontSize = fontSize.slice(0, fontSize.length - 2);
  } else {
    fontSize = '';
  }

  initialSizes[selector] = fontSize;
}

当用户用小部件调整文字大小时，该设置会被保存在浏览器中。这个设置只是一个从100到200的数字，代表文本大小的比例系数，是一个百分比。

在这里，我们检查是否有一个保存的设置，以便文本大小的调整在不同的页面和浏览会话中持续存在。

if (fontSizeSetting) {
  setFontSizes(fontSizeSetting);
} else {
  fontSizeSetting = 100.0;
}

当点击调整大小的按钮时，更新设置变量，将其存储在浏览器中，然后更新字体大小。

function changeFontSizes(direction) {
  if (direction === 'down') {
    fontSizeSetting -= 10;
  } else {
    fontSizeSetting += 10;
  }
  localStorage.setItem('codepenFontSizeSetting', fontSizeSetting);
  setFontSizes(fontSizeSetting);
}

最后，让我们关注一下实际调整文字大小的部分。对于我们一开始指定的每个选择器，我们根据初始值和新的文字大小设置计算新的font-size --以像素为单位，然后将该font-size 到选择器上。

function setFontSizes(setting) {
  const resizeFactor = setting / 100.0;

  indicator.html(parseInt(setting));

  for (const selector of selectorsToScale) {
    let initialSize = initialSizes[selector];

    initialSize = parseFloat(initialSize);

    let newSize = initialSize * resizeFactor;

    $(selector).css('font-size', newSize + 'px');
  }
}

最后但并非最不重要的是，我对小部件的外观有一些想法。G178技术在细节上很稀疏，但重要的是使小工具对需要它的人来说容易使用。文字应该相当大，对比度高，按钮应该容易点击。

小组件本身也应该在页面上容易找到，其目的应该明确，所以要避免使用时髦但模糊的图标。为了让它不碍事，但仍然容易获得，我选择让我的文本调整小部件从屏幕的侧面或底部滑出，但这是可选的。一个静态的小部件也是完全可以接受的。

结论

在为网络构建时，有一千种方法可以完成一些事情。调整文本的大小也不例外。这里概述的方法是在现有网站上实现文字大小调整的一个相对较低的方法，但最终，适合你的方法将取决于你的项目的平台、代码库、受众和预算。

使用CSS和JavaScript创建一个文本大小的小工具》一文首次出现在LogRocket博客上。

avatar
文章
阅读
粉丝