文章/答案/技术大牛

发布

社区首页 >问答首页 >Next.js和辅助功能组件以更改字体和字体大小

问Next.js和辅助功能组件以更改字体和字体大小
EN

Stack Overflow用户

提问于 2022-05-16 21:57:29

回答 1查看 467关注 0票数 1

我正在尝试创建一个可访问性组件，并可以选择更改设置，如暗模式、更高的对比度、字体大小等。

我制作了一个组件作为引导模式，其中可以更改可访问性的设置。实现了暗模式和更高的对比度，并工作。

我遇到的问题是改变字体大小。我希望能够动态地将字体大小设置为更小或更大的大小。我的想法是在<body>标记中添加一个类，因为有一些文章展示了如何在_document.js中动态地设置body标记中的类。

我无法找到一个好的方法来实现这一点，而且可能是以完全错误的方式看待它。

为了更好地了解到目前为止所做的事情，我已经用完整的代码设置了一个： https://codesandbox.io/s/nextjs-react-bootstrap-accessibility-exndhh

到目前为止，可访问性组件如下所示：

import { useState, useEffect } from "react";

import { useTheme } from "next-themes";

import { Button, Modal, Form } from "react-bootstrap";

import { UniversalAccess } from "./Icons";

const Accessibility = () => {
  // A11Y - Accessibility modal
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  // A11Y - Accessibility themes
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme, resolvedTheme } = useTheme();
  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <>
      <Button
        variant="warning"
        className="px-4 py-2 ms-lg-3 d-flex align-items-center"
        onClick={handleShow}
      >
        <UniversalAccess className="me-2" />
        Accessibility
      </Button>

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>Accessibility settings</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p className="h5">Colors</p>
          <Form.Check
            type="switch"
            id="dark-mode"
            label="Dark mode"
            onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
            checked={resolvedTheme === "dark"}
          />
          <Form.Check
            type="switch"
            id="contrast-mode"
            label="Higher contrast"
            onChange={() =>
              setTheme(theme === "contrast" ? "light" : "contrast")
            }
            checked={resolvedTheme === "contrast"}
          />

          <div className="my-4">
            <p className="h5">Font size/type</p>
            <div className="d-flex mb-1 align-items-end">
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "30px", height: "30px" }}
                >
                  <span style={{ fontSize: "0.7rem" }}>A</span>
                </Button>
                <p>Small</p>
              </div>
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="mx-3 rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "40px", height: "40px" }}
                  // Should be active because default font size
                  active
                >
                  <span style={{ fontSize: "1rem" }}>A</span>
                </Button>
                <p>Default</p>
              </div>
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "50px", height: "50px" }}
                >
                  <span style={{ fontSize: "1.5rem" }}>A</span>
                </Button>
                <p>Large</p>
              </div>
            </div>
            <Form.Check
              type="switch"
              id="dyslexia-mode"
              label="Dyslexia font"
            />
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default Accessibility;

最后，我希望可以选择动态更改字体，以及这里的任何建议都是更受欢迎的！

这里的目标不是完全兼容WCAG，而是至少有一些WCAG兼容。

也许有一个方便的花花公子反应库，但还没有找到。

react-bootstrap

bootstrap-5

reactjs

next.js

回答 1

Stack Overflow用户

发布于 2022-05-17 03:51:07

通常，我们(我的公司)由用户代理来决定字体和字体大小。例如，在Firefox中，在“字体”下，您可以告诉浏览器覆盖网页的字体和字体大小；此外，在“缩放”下，您可以更改页面缩放。在Chrome中，在“外观”下，你也可以这样做。

这似乎是WCAG2.1和我推荐的方法(您将在下面看到原因)。

内容的缩放主要是用户代理的责任。满足UAAG 1.0检查点4.1的用户代理允许用户配置文本规模。作者的职责是创建不妨碍用户代理有效缩放内容的Web内容。

在设计可访问性时，我能给出的最好建议是确定WCAG2.1认为足以调整文本大小是什么。

尽管如此，由于nextjs和react bootstrap，您将要遇到的问题：

持久化--在模型中使用上下文会变得非常麻烦(您需要将上下文始终保存在DOM中，这意味着该模型需要驻留在div#__next下，而不是吗？)目前使用react-bootstrap是可能的，因为它将modals附加到body和div#__next容器之外)，并且本地存储仅限于客户端，所以当页面被SSR访问时，您将得到一个庞大的日志服务。
支持--根据WCAG，你需要支持200%的字体大小。因此，您可能会希望有某种步骤: 100%，125%，150%，175%，200%。
布局-通过支持可变字体大小，您还需要支持可变布局。否则，文本所占的空间可能比预期的要大:打破容器，打破表单输入，垂直拉长按钮，包装某种文本，使其难以阅读。在用户代理中更改字体时，这是预期的，但由于您支持字体大小调整，您肯定也希望支持不同的布局(如上面的充分链接所述)。
屏幕阅读器--目前，你的字体大小按钮并没有传达它们的意图；它们被解读为没有任何上下文的“按钮”。您需要使用语义标记或aria属性来获取屏幕阅读器。如果您想深入研究它，我肯定知道Mac和大多数流行的Linux发行版都在其可访问性系统设置中内置了屏幕阅读器--对Windows一无所知。

是否有可能完成上面的操作？是的，但对于您正在使用的第三方库，可能(就像简单/根本不一样)。

在解决上述问题之前，我会问自己：(对于你、一家公司或一家客户)，这将花费多少代价来解决这些问题，更重要的是，这个特性带来了哪些无法在本地实现的价值？

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72266061

复制

相似问题

问Next.js和辅助功能组件以更改字体和字体大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js和辅助功能组件以更改字体和字体大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js和辅助功能组件以更改字体和字体大小
EN