Zugängliche Fußnoten mit CSS

Key Takeaways

• CSS -Zähler können verwendet werden, um die Nummerierung von Fußnoten zu automatisieren, wodurch die Bedarf an manueller Nennennummer bei Änderungen am Dokument reduziert werden muss. Die Reihenfolge der Fußnoten in der Fußzeile sollte mit der Reihenfolge der Referenzen im Text übereinstimmen.
• Um Fußnoten für Bildschirmleser zugänglich zu machen, kann der Fußzeile ein Titel hinzugefügt werden, um die Fußnotenreferenzen zu beschreiben. Das Attribut „Aria-decrtedby“ kann verwendet werden, um die Verweise mit diesem Titel zu verknüpfen.
• Mit dem CSS-Pseudoelement ":: After" kann der Zähler für jede Fußnotenreferenz angezeigt werden. Die Pseudoklasse ": Ziel" kann verwendet werden, um die Fußnote hervorzuheben, wenn sie erwähnt wird.
• Um Fußnoten vollständig zugänglich zu machen, können Back-to-Content-Links hinzugefügt werden. Dies beinhaltet das Hinzufügen eines eindeutigen ID -Attributs zu jeder Referenz im Inhalt, mit dem durch Hinzufügen eines Links in jedem Listenelement im Fußzeilen hinzugefügt werden kann. Das Attribut "Aria-Label" kann verwendet werden, um diese Links zu beschreiben.

Ich habe neulich mit CSS -Zählern gespielt und darüber nachgedacht, sie mit Fußnoten umzugehen. Laut Plagiat, der einen überraschend langen Einstieg in dieser Angelegenheit hat, sind Fußnoten:

[…] Notizen, die am Ende einer Seite platziert sind. Sie zitieren Referenzen oder kommentieren einen bestimmten Teil des Textes darüber.

Sie sehen sie häufig in Papieren, wenn der Autor eine Information hinzufügen oder eine Referenz anführen möchte, ohne sie in der Mitte des Inhalts zu tun oder Klammern zu verwenden. Normalerweise werden Fußnoten mit einer Zahl gemäß der Position der Fußnote im Dokument dargestellt, dann sind die gleichen Zahlen am unteren Rand des Dokuments vorhanden, wobei zusätzliche Inhalte hinzugefügt werden.

Das Problem mit Fußnoten im Internet ist, dass sie ein Schmerz sein können, um aufrechtzuerhalten. Wenn Sie häufig an demselben Dokument arbeiten und die Reihenfolge der Abschnitte ändern und auf dem Weg Referenzen hinzufügen, ist es möglicherweise mühsam, alle vorhandenen Fußnoten neu zu nummerieren. Wenn Sie beispielsweise 3 vorhandene Verweise auf Fußnoten in einem Dokument haben und einen anderen hinzufügen möchten, aber auf einem in allen anderen auftretenden Inhalt, müssen Sie sie alle nummerieren. Nicht großartig…

Wir könnten CSS -Zähler verwenden, um das Ganze viel einfacher zu machen. Was wäre, wenn wir die Nummerierung nicht von Hand pflegen müssten und dies automatisch erledigt werden könnte? Das einzige, worauf wir achten müssten, ist, dass die Reihenfolge der tatsächlichen Notizen in der Fußzeile die Reihenfolge des Aussehens der Referenzen im Text respektiert.

Erstellen eines Beispieldokuments

Erstellen wir ein Beispieldokument, damit wir loslegen können.

<span><span><span><article</span>></span>
</span>  <span><span><span><h1</span>></span>CSS-Powered Footnotes<span><span></h1</span>></span>
</span>
  <span><span><span><p</span>></span>Maintaining <span><span><a</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> manually can be a pain. 
</span>  By using <span><span><span><a</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> <span><span><a</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add 
</span>  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span>
</span>
  <span><span><span><footer</span>></span>
</span>    <span><span><span><ol</span>></span>
</span>      <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. They 
</span>      cite references or comment on a designated part of the text above it.<span><span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets<span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained by 
</span>      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.<span><span><span></li</span>></span>
</span>    <span><span><span></ol</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></article</span>></span></span>

Unser Beispiel ist leicht: Wir haben einige Inhalte in einem -Element, das einige Links enthält () auf In-Document-IDs, die den Notizen in der

des Artikels zugeordnet sind.

Mit ein paar Stilen könnte es so aussehen:

Machen Sie es zugänglich

Bevor wir tatsächlich auf das Zähler einsteigen, sollten wir sicherstellen, dass unser Markup für Bildschirmleser vollständig zugänglich ist. Das erste, was wir tun möchten, ist, unseren Fußzeile einen Titel hinzuzufügen, der als Beschreibung oder unsere Fußnote -Referenzen dient. Wir verbergen diesen Titel mit CSS, damit er nicht visuell angezeigt wird.

<span><span><span><article</span>></span>
</span>  <span><span><span><h1</span>></span>CSS-Powered Footnotes<span><span></h1</span>></span>
</span>
  <span><span><span><p</span>></span>Maintaining <span><span><a</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> manually can be a pain. 
</span>  By using <span><span><span><a</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> <span><span><a</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add 
</span>  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span>
</span>
  <span><span><span><footer</span>></span>
</span>    <span><span><span><ol</span>></span>
</span>      <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. They 
</span>      cite references or comment on a designated part of the text above it.<span><span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets<span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained by 
</span>      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.<span><span><span></li</span>></span>
</span>    <span><span><span></ol</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></article</span>></span></span>

Dann möchten wir alle unsere Referenzen mit diesem Titel unter Verwendung des ARIA-beschriebenen Attributs:

beschreiben:

<span><span><span><footer</span>></span>
</span>  <span><span><span><h2</span> id<span>="footnote-label"</span>></span>Footnotes<span><span></h2</span>></span>
</span>  <span><span><span><ol</span>></span>
</span>    ...
  <span><span><span></ol</span>></span>
</span><span><span><span></footer</span>></span></span>

Jetzt verstehen die Benutzer von Bildschirmleser, wenn Links Verweise auf Fußnoten sind.

Hinzufügen der Referenzen

Ich weiß, was Sie denken: Er sagte, es würde CSS -Zähler geben. Wo sind die CSS -Zähler?

Was wir tun werden, ist, einen Zähler für jeden Link in dem Dokument mit einem auf die Fußnote eingestellten Attribut mit ARIA-beschriebenem, der auf Fußnote eingestellt ist, zu erhöhen. Anschließend zeigen wir den Zähler mit dem :: nach pseudoelement an. Von dort geht es darum, CSS -Stile anzuwenden.

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> 
</span>manually can be a pain. By using <span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> 
</span><span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add the 
</span>numbered references in the text and an ordered list to display the actual footnotes 
in the footer, it becomes extremely easy.<span><span><span></p</span>></span></span>

Jetzt sieht es so aus:

Ziemlich schön, oder? Als letzte Note möchten wir bei einer Fußnote aus einer Referenz die Notiz im Fußzeilen hervorheben, damit wir tatsächlich sehen, worauf die Notiz bezeichnet wird, auf die wir mit der: Ziel-Pseudo-Klasse:

tun können:

<span>/**
</span><span> * Initialiazing a `footnotes` counter on the wrapper
</span><span> */
</span><span>article {
</span>  <span>counter-reset: footnotes;
</span><span>}
</span>
<span>/**
</span><span> * Inline footnotes references
</span><span> * 1. Increment the counter at each new reference
</span><span> * 2. Reset link styles to make it appear like regular text
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span></span> {
</span>  <span>counter-increment: footnotes; /* 1 */
</span>  <span>text-decoration: none; /* 2 */
</span>  <span>color: inherit; /* 2 */
</span>  <span>cursor: default; /* 2 */
</span>  <span>outline: none; /* 2 */
</span><span>}
</span>
<span>/**
</span><span> * Actual numbered references
</span><span> * 1. Display the current state of the counter (e.g. `[1]`)
</span><span> * 2. Align text as superscript
</span><span> * 3. Make the number smaller (since it's superscript)
</span><span> * 4. Slightly offset the number from the text
</span><span> * 5. Reset link styles on the number to show it's usable
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>::after</span> {
</span>  <span>content: '[' counter(footnotes) ']'; /* 1 */
</span>  <span>vertical-align: super; /* 2 */
</span>  <span>font-size: 0.5em; /* 3 */
</span>  <span>margin-left: 2px; /* 4 */
</span>  <span>color: blue; /* 5 */
</span>  <span>text-decoration: underline; /* 5 */
</span>  <span>cursor: pointer; /* 5 */
</span><span>}
</span>
<span>/**
</span><span> * Resetting the default focused styles on the number
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>:focus::after</span> {
</span>  <span>outline: thin dotted;
</span>  <span>outline-offset: 2px;
</span><span>}</span>

Es ist ein bisschen roh, also können Sie gerne anpassen. Obwohl ich sagen muss, ich mag das reine Gelb für ein Highlight - es sieht so authentisch aus:

Back -Links

bereitstellen

Unsere Demo benötigt ein endgültiges Element, um vollständig zugänglich zu sein (sowie ziemlich cool): Back-to-Content-Links. Denken Sie darüber nach: Sie konzentrieren sich auf eine Referenz, gehen auf die relevante Notiz im Fußzeilen, lesen Sie sie und dann… nichts. Sie brauchen einen Weg, um dorthin zurückzukehren, wo Sie gegangen sind!

Diese Links bereitstellen ist nicht so schwierig: Wir müssen jeder Referenz im Inhalt nur ein eindeutiges ID -Attribut hinzufügen, damit sie verknüpft werden können. Ich habe mich entschlossen, einfach zu gehen und die ID zu nehmen, auf die sie sich beziehen, und einfach daran anhängen:

<span>footer <span>:target</span> {
</span>  <span>background: yellow;
</span><span>}</span>

Dann hat jedes Listenelement aus der Fußzeile einen eigenen Link, der auf die gerade hinzugefügte ID überführt. Der Inhalt des Links ist das Backlink Unicode-Symbol (↩ ↩ ↩ ↩>) und es hat ein ARIA-Label-Attribut mit einem Wert von „zurück zu Inhalt“.

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span> id<span>="footnotes-ref"</span>></span>footnotes<span><span></a</span>></span> 
</span>manually can be a pain. By using <span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css"</span> id<span>="css-ref"</span>></span>CSS<span><span></a</span>></span> 
</span><span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css-counters"</span> id<span>="css-counters-ref"</span>></span>counters<span><span></a</span>></span> 
</span>to add the numbered references in the text and an ordered list to display the actual 
footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span></span>

Um auf diese Links in CSS abzielen, können wir uns auf das ARIA-Label-Attribut verlassen, wie wir es für Aria geschrieben haben:

<span><span><span><ol</span>></span>
</span>  <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. 
</span>  They cite references or comment on a designated part of the text above it. 
  <span><span><span><a</span> href<span>="#footnotes-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets 
</span>  <span><span><span><a</span> href<span>="#css-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained 
</span>  by CSS whose values may be incremented by CSS rules to track how many 
  times they're used. <span><span><span><a</span> href<span>="#css-counters-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span><span><span><span></ol</span>></span></span>

Hier sieht die endgültige Demo aus:

Siehe den Stift zugänglichen Fußnoten mit CSS von SitePoint (@sinepoint) auf CodePen.

endgültige Gedanken

Mit nur ein paar Zeilen von CSS und einigen Aria-Attributen haben wir es geschafft, CSS-betriebene Fußnoten zu erstellen, die zugänglich sind und kein JavaScript benötigen. Wie cool ist das?

Zu Thema empfehle ich semantische CSS mit intelligenten Selektoren von Heydon Pickering. Schauen Sie sich auch A11y.css von Gaël Poupard an, um die Zugänglichkeit Ihrer Seiten zu überprüfen.

Vielen Dank an Heydon Pickering für seine wertvolle Hilfe in Bezug auf die Zugänglichkeit in dieser Demo.

häufig gestellte Fragen (FAQs) zu zugänglichen Fußnoten in CSS

Welche Bedeutung hat die Verwendung von Fußnoten in Webinhalten? Sie liefern zusätzliche Informationen, Erklärungen oder Referenzen, ohne den Fluss des Hauptinhalts zu stören. Sie sind besonders nützlich für akademische, Forschungen oder technische Inhalte, bei denen detaillierte Erklärungen oder Quellen erforderlich sind. Durch die Verwendung von Fußnoten können die Leser nach eigenem Ermessen ein tieferes Eintauchen in das Thema eintauchen und den Inhalt benutzerfreundlicher und zugänglicher machen. Fußnoten mit CSS umfassen einige Schritte. Zunächst müssen Sie Ihre Fußnoten in HTML mit den entsprechenden Tags markieren. Dann können Sie CSS verwenden, um Ihre Fußnoten zu stylen und zu positionieren. Mit CSS können Sie das Erscheinungsbild Ihrer Fußnoten, einschließlich ihrer Schriftgröße, Farbe und Position auf der Seite, steuern. Sie können auch CSS verwenden, um einen Link zum Haupttext von der Fußnote zu erstellen, so CSS kann verwendet werden, um dynamische Fußnoten zu erstellen. Dies bedeutet, dass die Fußnoten auf der Grundlage der Benutzerinteraktion erfolgen oder verschwinden können, z. B. über ein bestimmtes Wort oder eine bestimmte Phrase. Dies kann unter Verwendung von CSS-Pseudoklassen und -übergängen erreicht werden. Es ist jedoch wichtig sicherzustellen, dass solche dynamischen Fußnoten für alle Benutzer, einschließlich derjenigen, die assistive Technologien verwenden, weiterhin zugänglich sind. Es ist wichtig sicherzustellen, dass sie sich im Haupttext leicht unterscheiden, einfach zu navigieren und nützliche Informationen bereitzustellen. Dies kann erreicht werden, indem eine andere Schriftgröße oder -farbe für die Fußnoten verwendet wird, eine Verbindung zum Haupttext bereitgestellt und sichergestellt wird, dass die Fußnoten relevant und präzise sind. Darüber hinaus ist es wichtig, Ihre Fußnoten mit verschiedenen assistiven Technologien zu testen, um sicherzustellen, dass sie wirklich zugänglich sind.

Wie kann ich meine Fußnoten mit CSS stylen? Beispielsweise können Sie die Eigenschaft "Schriftgröße" verwenden, um die Größe des Fußnotentextes, die Eigenschaft "Farbe" anzupassen, um seine Farbe zu ändern, und die Eigenschaft "Position", um seine Position auf der Seite zu steuern. Sie können auch CSS verwenden, um einen Rand um Ihre Fußnoten um Ihre Fußnoten zu erstellen, eine Hintergrundfarbe hinzuzufügen oder andere stilistische Effekte anzuwenden. Stellen Sie sicher, dass Ihre Fußnoten für Bildschirmleser zugänglich sind. Sie können auch Aria -Rollen und -Hereigenschaften verwenden, um zusätzliche Informationen über die Fußnoten für assistive Technologien bereitzustellen. Darüber hinaus ist es wichtig, einen Link zum Haupttext von jeder Fußnote zurückzugeben, damit die Benutzer von Bildschirmleser einfach in Ihren Inhalt navigieren können.

Kann ich CSS verwenden, um Fußnoten zu erstellen, die auf verschiedenen Geräten reagieren? >

Ja, Sie können CSS verwenden, um Fußnoten zu erstellen, die auf verschiedenen Geräten reagieren. Dies kann erreicht werden, indem Medienabfragen verwendet werden, um den Stil und die Position der Fußnoten anhand der Bildschirmgröße anzupassen. Dies stellt sicher, dass Ihre Fußnoten einfach auf allen Geräten lesen und navigieren können, von Desktop -Computern bis hin zu Mobiltelefonen. Zu den Fußnoten gehört es, sie zu lang oder komplex zu machen, keine Verbindung zum Haupttext zurückzugeben und sie nicht mit assistiven Technologien zu testen. Es ist auch wichtig, Fußnoten als Ersatz für ein klares und prägnantes Schreiben zu vermeiden. Fußnoten sollten den Haupttext ergänzen, ihn nicht ersetzen. Verwenden der Pseudoklasse ': Hover'. Auf diese Weise können Sie den Stil der Fußnote ändern, wenn der Benutzer mit seiner Maus darüber hinweg hebt. Sie können beispielsweise die Hintergrundfarbe der Fußnote ändern oder sie in einer Popup-Box erscheinen lassen. Es ist jedoch wichtig sicherzustellen CSS, um Fußnoten in verschiedenen Sprachen zu erstellen. Dies kann erreicht werden, indem die Pseudo-Klasse „: Lang ()“ verwendet wird, um verschiedene Stile auf Fußnoten auf der Grundlage der Sprache anzuwenden. Auf diese Weise können Sie ein vielfältiges Publikum gerecht werden und sicherstellen, dass Ihr Inhalt für alle Benutzer unabhängig von ihrer Sprache zugänglich ist.

Das obige ist der detaillierte Inhalt vonZugängliche Fußnoten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!