Как сделать сноски доступными на веб-странице?

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

Например:

Пример сносок в документе PDF

Я хочу создать веб-страницу HTML с эквивалентностью сносок.

Страница должна соответствовать рекомендациям по доступности в соответствии с Рекомендациями по доступности веб-контента (WCAG) 2.0, уровень AA. Веб-страница также должна быть в формате HTML4.

Моя первая мысль - создать сноски, такие как раздел " Ссылки " в Википедии. Тем не менее, моя веб-страница потенциально может быть очень длинной, и я боюсь, что это может дезориентировать людей и заставить их потерять отслеживание того, что они читают, если им нужно прокрутить весь путь вниз, а затем вернуться назад. Таким образом, это не будет доступно. (Пожалуйста, поправьте меня, если я ошибаюсь.)

Javascript, очевидно, запрещен, поскольку некоторые пользователи могут отключить его, поэтому полагаться на него будет невозможно.

Я подумал об открытии нового окна с предоставленной дополнительной информацией. Однако открытие нового окна открывает совершенно новую банку с червями в отношении доступности, поэтому я предпочел бы избежать этого, если это возможно.

Я знаю, что есть <cite> тэг, но, насколько я понимаю, этот тэг предназначен для цитирования ссылок и не подходит, если моей целью является предоставление дополнительной информации. (Опять же, пожалуйста, поправьте меня, если я ошибаюсь.)

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

Источник

2 ответа

Решение

Я бы сделал что-то вроде этого:

Первая ссылка приводит читателя к сноске, ссылка сноски - к текстовой позиции.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Title</title> 
        <style type="text/css">
            .up
            {
                vertical-align: super;
            }
        </style> 
    </head>
    <body>
        <div>
            Lorem ipsum dolor sit <a href="#note1" id="number1">amet<span class="up">1</span></a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
        <div>
            <div><a href="#number1" id="note1">1 Some more info</a></div>
        </div>
    </body>
</html>
Источник

Если вы не возражаете против использования PHP, вот две функции, которые работают вместе для создания нескольких сносок. Они делают то, что предлагает Andie2302, но делают большую часть работы за вас.

Вы можете навести указатель мыши на номер сноски, чтобы открыть всплывающую подсказку с текстом сноски. Вы можете щелкнуть сноску, чтобы перейти к исходной ссылке.

Чтобы создать сноску, вставьте следующее в место исходной ссылки:

      <?php footnote("Your footnote text") ?>

Поместите следующее внизу страницы (перед закрывающим тегом body):

      <?php PrintFootnotes(); ?>

Вот функции. Поместите это вверху вашего документа:

      <?php
function footnote($footnote){
  global $Footnotes, $FootnoteCount;
  $FootnoteCount++;
  $Footnotes[$FootnoteCount] = "$footnote";
  print "<a name='$FootnoteCount' title=\"$footnote\" style='font-size: smaller;'><sup>$FootnoteCount</sup></a>";
}

function PrintFootnotes(){
  global $Footnotes, $FootnoteCount;
  print "&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;<br>";
  print "<table>";
  for($i = 1;$i < $FootnoteCount + 1;$i++){
    print "<tr><td style='vertical-align: top; font-size: smaller;'><sup>$i</sup></td><td><a href='#$i' style='color: black;
text-decoration: none; font-size: smaller;'>$Footnotes[$i]</a></td></tr>";
  }
  print "</table>";
}
?>

Расширение имени вашей страницы должно быть .php, а не .html (сервер нормально отобразит HTML-код). Вы можете использовать .phtml, если ваш сервер поддерживает его. В противном случае все, что вам нужно сделать, это добавить функции и другой код, как описано выше.

Для получения подробной информации о том, как работают функции, перейдите по ссылке:

https://vocademy.net/textbooks/WebDatabase/Footnotes/PageSetup.php?CourseDirectory=WebDatabase&amp;amp;Page=3&amp;amp;FileName=PHPFootnotes

Эти функции используют минимальный код, необходимый для их работы. Вы можете захотеть добавить больше форматирования и т. д. Например, вы можете захотеть добавить скобки вокруг ваших ссылочных номеров. Для этого измените строку печати в первой функции сноски следующим образом:

        print "<a name='$FootnoteCount' title=\"$footnote\" style='font-size: smaller;'><sup>[$FootnoteCount]</sup></a>";
Источник
Другие вопросы по тегам