什么是“最佳实践”? 用Javascript调整文本大小?

发布于 2024-07-29 20:53:09 字数 308 浏览 8 评论 0原文

使用 Javascript 调整文本大小的“最佳实践”(可访问性/可用性方面)是什么?

我当前的解决方案是,当用户单击调整大小链接时,它会向 body 标记添加一个额外的类。

它还设置一个 cookie,然后当加载页面时 - onLoad() - 它会读取 cookie 并在需要时再次重新应用主体类标记。

唯一不理想的是它加载然后应用 - 以前的解决方案是在页面加载之前编辑 CSS 文件,但如果 CSS 文件位于不同的目录中,则会引发安全警告。

那么,我的解决方案本质上合理还是有更好的方法?

亚当

What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?

My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.

It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.

The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.

So, essentially is my solution reasonable or is there a better way?

Adam

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

若水微香 2024-08-05 20:53:11

使用 Javascript 调整文本大小的“最佳实践”(可访问性/可用性方面)是什么?

“Web Accessibility Gone Wild”总结得非常好恕我直言:

如果您的默认字体大小对于网站访问者来说可能太小,请将其设置为足够的大小。

和,

所有浏览器都允许调整页面内容的大小或缩放 - 为什么要重复此浏览器功能?

另外,注意字体大小

这里的问题是基本的可用性和可访问性问题:好的设计应该看起来不错,而不需要用户放大或缩小文本大小。

但是,如果您有有效的理由 - 请随意忽略这一点。

What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?

"Web Accessibility Gone Wild" sums it up quite nicely imho:

If your default font size may be too small for site visitors, then make it an adequate size.

and,

All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?

Also, Care With Font Size:

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

However, if you have a valid reason - feel free to ignore this.

梦醒时光 2024-08-05 20:53:10

通过 JavaScript 添加 CSS 样式到 HTML

我认为你的建议是一个很好的方法。

这意味着您可以灵活地将 CSS 类添加到任何子元素而不是主体,以便您可以根据需要更改特定元素的文本大小。

Reading the cookie on page load

为了解决您描述的问题,我会在服务器端语言(php/asp/ruby 等)中查找 cookie,并在页面加载时显示 cookie 指定的内容。

在 PHP 中,您的 CSS 类定义可能如下所示:

echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';

Adding a CSS style to HTML via JavaScript

I think your suggestion is an excellent way of doing it.

It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.

Reading the cookie on page load

To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.

In PHP your CSS class definition may look like this:

echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
度的依靠╰つ 2024-08-05 20:53:10

什么是“最佳实践”
(可访问性/可用性方面)
使用 Javascript 调整文本大小?

最佳做法是“不要”。

以相对单位指定字体大小,并让本机浏览器控件根据用户意愿更改它。

尝试复制此功能很少会提供用户所需的字体大小(并且通常最终会提供原子、微观和微小的选择)。 是的,有些用户需要 72pt(或更大)的文本。

内置的浏览器控件适用于大多数(如果不是全部)网站。 您不需要用尽画布空间来复制它们。

What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?

Best practise is "Don't".

Specify the font size in relative units and let the native browser controls change it if the user wishes.

Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).

The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.

顾铮苏瑾 2024-08-05 20:53:10

您的解决方案听起来不错,但有一项补充:您可以在页面加载时读取 cookie,并在生成标记时将类添加到 body 元素。 大多数服务器端语言都支持这一点:PHP、JSP、RoR 等。
除此之外,你还有一个可靠的解决方案。

Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文