Доступность математического контента

Обработка Markdown с математическими выражениями

Библиотека Remark предоставляет возможность работать с Markdown-документами на уровне абстрактного синтаксического дерева (AST). Для включения математических выражений используются расширения, такие как remark-math, которое распознаёт блоки и встроенные выражения LaTeX:

import remark from 'remark';
import math from 'remark-math';
import html from 'remark-html';

remark()
  .use(math)
  .use(html)
  .process('E = mc^2', function(err, file) {
    console.log(String(file));
  });
  • remark-math поддерживает инлайн-математику $E=mc^2$ и блочную математику $$E=mc^2$$.
  • Преобразование в HTML осуществляется стандартным плагином remark-html, который превращает AST в строку HTML.

Преобразование Markdown в HTML с сохранением семантики

Для обеспечения доступности важно, чтобы математические выражения отображались корректно для вспомогательных технологий:

  • Использование MathML позволяет скринридерам корректно интерпретировать формулы.
  • Плагин rehype-katex или rehype-mathjax позволяет конвертировать LaTeX в HTML + CSS или MathML.

Пример цепочки Remark → Rehype с поддержкой KaTeX:

import remark from 'remark';
import math from 'remark-math';
import remark2rehype from 'remark-rehype';
import rehypeKatex from 'rehype-katex';
import rehypeStringify from 'rehype-stringify';

remark()
  .use(math)
  .use(remark2rehype)
  .use(rehypeKatex)
  .use(rehypeStringify)
  .process('$$\\int_0^1 x^2 dx$$', function(err, file) {
    console.log(String(file));
  });
  • remark2rehype переводит Markdown AST в Rehype AST (HTML AST).
  • rehype-katex преобразует математические блоки в корректный HTML с CSS для рендеринга.
  • rehype-stringify выводит конечный HTML.

Использование атрибутов для доступности

Для математического контента важно добавить ARIA-атрибуты и описания:

  • role="math" – обозначает блок как математический.
  • aria-label или aria-labelledby – предоставляет текстовую альтернативу.
  • Использование alttext для картинок с формулами (при fallback на PNG).

Пример добавления ARIA-атрибутов через Rehype:

import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeAccessibleAttributes from 'rehype-accessible-attributes';

rehype()
  .use(rehypeAccessibleAttributes, { mathRole: 'math', includeLabels: true })

Такой подход позволяет скринридерам корректно воспринимать формулы и обеспечивает соответствие стандартам WCAG.

Интеграция с React и серверный рендеринг

В React-проектах можно использовать Remark + Rehype для генерации HTML-элементов на лету:

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkMath from 'remark-math';
import remarkRehype from 'remark-rehype';
import rehypeKatex from 'rehype-katex';
import rehypeReact from 'rehype-react';
import React from 'react';
import ReactDOM from 'react-dom';

const processor = unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype)
  .use(rehypeKatex)
  .use(rehypeReact, { createElement: React.createElement });

const htmlContent = processor.processSync('$$a^2 + b^2 = c^2$$').result;

ReactDOM.render(htmlContent, document.getElementById('root'));
  • Позволяет использовать динамическую генерацию математических блоков в интерфейсе.
  • Обеспечивает корректное использование semantic HTML и доступность при серверном рендеринге (SSR).

Работа с альтернативными форматами

Для пользователей, которые не могут видеть визуальные формулы, важна возможность:

  • Генерировать MathML для скринридеров.
  • Предоставлять текстовые версии формул.
  • Использовать SVG или KaTeX CSS, которые масштабируются без потери качества.

Remark и Rehype позволяют создать pipeline, который одновременно:

  1. Парсит Markdown с математикой.
  2. Преобразует формулы в визуальный HTML.
  3. Добавляет доступные описания и ARIA-метки.
  4. Поддерживает разные выводные форматы (HTML, React, PDF).

Оптимизация для больших документов

Для учебников и научных статей:

  • Разделение Markdown на фрагменты или главы ускоряет процесс парсинга.
  • Кэширование AST для часто используемых формул уменьшает нагрузку на клиент.
  • Сборка статических страниц через next.js или Gatsby совместно с Remark/Rehype повышает производительность и доступность.

Важные рекомендации

  • Использовать одинаковый стиль оформления математических блоков во всём документе.
  • Проверять вывод через скринридеры (VoiceOver, NVDA) и валидаторы MathML.
  • Предусматривать fallback-рендеринг для браузеров без поддержки MathML или CSS KaTeX.

Такой подход обеспечивает максимальную доступность математического контента, одновременно сохраняя высокое качество визуального отображения и гибкость интеграции в современные веб-приложения.

Оглавление