WIKIPEDIA:MANUAL OF STYLE ACCESSIBILITY ANCHOR TESTS

This is an essay on Wikipedia:Manual of Style/Accessibility.

It contains the advice or opinions of one or more Wikipedia contributors. This page is not an encyclopedia article, nor is it one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community. Some essays represent widespread norms; others only represent minority viewpoints.

Anchor tests

This is a test of:

What it looks like when you follow anchors that are done in particular ways; and
What it looks like in the edit summary when you click the [edit] tool for a heading and anchors are done different ways in relation to the heading.

Links to each anchor:

Anchor 1: Bare HTML around heading
Anchor 2: Bare HTML at start of heading
Anchor 3: Bare HTML at end of heading
Anchor 4: Template at start of heading
Anchor 5: Template at end of heading
Anchor 6: Anchor underneath heading
Anchor 7: Anchor above heading
Anchor 8: Multiple templated anchors at start of heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 1: Bare HTML around heading

The code:

== <span id="anchor1">Anchor 1: Bare HTML around heading</span> ==

Results: Heading: Fully visible after jumping to anchor.; Edit summary: No effect; the markup is invisible.; Accessibility issues: Hard to identify the heading in the markup, because it is preceded by <span> code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 2: Bare HTML at start of heading

The code:

== <span id="anchor2" ></span>Anchor 2: Bare HTML at start of heading ==

Results: Heading: Fully visible after jumping to anchor.; Edit summary: No effect; the markup is invisible; Accessibility issues: Hard to identify the heading in the markup, because it is preceded by <span> code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 3: Bare HTML at end of heading

The code:

== Anchor 3: Bare HTML at end of heading<span id="anchor3" ></span> ==

Results: Heading: Not entirely visible after jumping to anchor, but still readable (Chrome, Mac OS X).; Edit summary: No effect; the markup is invisible.; Accessibility issues: Some screen readers could potentially begin reading after the anchor point, though most work on a line-by-line basis, so this may be a non-issue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 4: Template at start of heading

The code:

== {{anchor|anchor4}}Anchor 4: Template at start of heading ==

Results: Heading: Fully visible after jumping to anchor.; Edit summary: Garbled by presence of template; Accessibility issues: Hard to identify the heading in the markup, because it is preceded by template code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 5: Template at end of heading

The code:

== Anchor 5: Template at end of heading{{anchor|anchor5}} ==

Results: Heading: Not entirely visible after jumping to anchor, but still readable (Chrome, Mac OS X).; Edit summary: Garbled by presence of template, but still readable because it's at the end; Accessibility issues: Some screen readers could potentially begin reading after the anchor point, though most work on a line-by-line basis, so this may be a non-issue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 6: Anchor underneath heading

The code:

== Anchor 6: Anchor underneath heading ==
{{anchor|anchor6}}

Results: Heading: Not visible after jumping to anchor (Chrome, Mac OS X).; Edit summary: No effect; the markup is not present in it.; Accessibility issues: Screen readers may not realize there's a heading there, and thus not read it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 7: Anchor above heading

The code:

{{anchor|anchor7}}
== Anchor 7: Anchor above heading ==
<!-- There are anchors above this heading; please keep them with the section if you move it. -->

Results: Heading: Fully visible after jumping to anchor; Edit summary: No effect; the markup is not present.; Accessibility issues: None known.; Practical concern: When moving section, anchor will not go with it unless people notice it's there, so they have to be told, e.g in an HTML comment. If someone moves the section containing the anchor, it would take the anchor with it, so that section might also need an HTML comment about this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor 8: Multiple templated anchors at start of heading

The code:

== {{anchors|Sub-headline|Subheading|Subtitle|Deck|Subhed|Dek}}Anchor 8: Multiple templated anchors at start of heading ==

Results: Note: This method is used, e.g., at News style and various other articles.; Heading: Fully visible after jumping to anchor; Edit summary: Long template string in front of the heading name, may make edit summaries very short, unless people realize they can remove the template part from between the /* ... */ part.; Accessibility issues: Same as with other cases of using a template in front of the heading name, but worse due to the length.; Practical concern: This is actually a fairly lean way to do this if there are multiple short anchors, and the real heading isn't very long. Still, the #anchor7 method above would also work for this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anchor tests

Anchor 1: Bare HTML around heading

Anchor 2: Bare HTML at start of heading

Anchor 3: Bare HTML at end of heading

Anchor 4: Template at start of heading

Anchor 5: Template at end of heading

Anchor 6: Anchor underneath heading

Anchor 7: Anchor above heading

Anchor 8: Multiple templated anchors at start of heading

Anchor tests

Anchor 1: Bare HTML around heading

Anchor 2: Bare HTML at start of heading

Anchor 3: Bare HTML at end of heading

Anchor 4: Template at start of heading

Anchor 5: Template at end of heading

Anchor 6: Anchor underneath heading

Anchor 7: Anchor above heading

Anchor 8: Multiple templated anchors at start of heading

Videos

Websites

Encyclopedia

Facebook