Jump to content

Wikipedia:Manual of Style/Accessibility: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
General Cleanup; I use WP:LintHint, WP:AutoEd, spellcheck, then preview before publishing.
rv: several of those broken lists were deliberately so to demonstrate incorrectness, revert loss of more semantic elements already used correctly
Line 166: Line 166:


Articles (and other pages) that use color should keep accessibility in mind, as follows:
Articles (and other pages) that use color should keep accessibility in mind, as follows:

* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Footnotes|footnote labels]]. Otherwise, [[blindness|blind]] users or readers accessing Wikipedia through a printout or device without a color screen will not receive that information.
* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Footnotes|footnote labels]]. Otherwise, [[blindness|blind]] users or readers accessing Wikipedia through a printout or device without a color screen will not receive that information.
* Links should clearly be identifiable as a link to our readers.
* Links should clearly be identifiable as a link to our readers.
Line 179: Line 180:
** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
** There are some tools for simulating color-blind vision: [https://www.toptal.com/designers/colorfilter toptal] (webpage analysis) and [https://www.color-blindness.com/coblis-color-blindness-simulator/ coblis] (local file analysis). There are also browser extensions for webpage analysis: [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa Colorblinding] (Chrome) [https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl NoCoffee] (Chrome) [https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee] (Firefox)
** There are some tools for simulating color-blind vision: [https://www.toptal.com/designers/colorfilter toptal] (webpage analysis) and [https://www.color-blindness.com/coblis-color-blindness-simulator/ coblis] (local file analysis). There are also browser extensions for webpage analysis: [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa Colorblinding] (Chrome) [https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl NoCoffee] (Chrome) [https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee] (Firefox)
** A very simple open-source tool that can be helpful for choosing contrasting colours is [https://colororacle.org/ Color Oracle], a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of colourblindness or in greyscale.
** A very simple open-source tool that can be helpful for choosing contrasting colours is [https://colororacle.org/ Color Oracle], a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of colourblindness or in greyscale.
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} or {{tl|Overcoloured}}) at the top of the article.
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} or {{tl|Overcoloured}}) at the top of the article.


Line 188: Line 189:
{{see also|Help:List|Wikipedia:Manual of Style#Bulleted and numbered lists|Wikipedia:Manual of Style/Lists#List styles}}
{{see also|Help:List|Wikipedia:Manual of Style#Bulleted and numbered lists|Wikipedia:Manual of Style/Lists#List styles}}


Do not separate list items by leaving empty lines or tabular column breaks between them. This includes items in a [[description list]] (a list made with a leading semicolon or colon) or an [[unordered list]]. Lists are meant to group elements that belong together, but [[MediaWiki]] will interpret the blank line as the end of one list and start a new one. Excessive double line breaks also disrupt [[screen reader]]s, which will announce multiple lists when only one was intended, and therefore may mislead or confuse users of these programs. Such improper formatting can also more than triple the length of time it takes them to read the list.
Do not separate list items by leaving empty lines or tabular column breaks between them. This includes items in a [[description list]] (a list made with a leading semicolon or colon) or an [[unordered list]]. Lists are meant to group elements that belong together, but [[MediaWiki]] will interpret the blank line as the end of one list and start a new one. Excessive double line breaks also disrupt [[screen reader]]s, which will announce multiple lists when only one was intended, and therefore may mislead or confuse users of these programs. Such improper formatting can also more than triple the length of time it takes them to read the list.


Likewise, do not switch between initial<!--initial doesn't proscribe *:: :::*--> list marker types (colons, asterisks or hash signs) in one list. For example, in a discussion, do {{tick}} this best practice:
Likewise, do not switch between initial<!--initial doesn't proscribe *:: :::*--> list marker types (colons, asterisks or hash signs) in one list. For example, in a discussion, do {{tick}} this best practice:


<pre>
<pre>
* Support. I like this idea. [[User:Example]]
* Support. I like this idea. [[User:Example]]
** Question: What do you like about it? [[User:Example 2]]
** Question: What do you like about it? [[User:Example 2]]
</pre>
</pre>
Line 200: Line 201:


<pre>
<pre>
* Support. I like this idea. [[User:Example]]
* Support. I like this idea. [[User:Example]]
*: Question: What do you like about it? [[User:Example 2]]
*: Question: What do you like about it? [[User:Example 2]]
</pre>
</pre>


Line 207: Line 208:


<pre>
<pre>
* Support. I like this idea. [[User:Example]]
* Support. I like this idea. [[User:Example]]
:: Question: What do you like about it? [[User:Example 2]]
:: Question: What do you like about it? [[User:Example 2]]
</pre>
</pre>


Line 214: Line 215:


<pre>
<pre>
* Support. I like this idea. [[User:Example]]
* Support. I like this idea. [[User:Example]]
:* Question: What do you like about it? [[User:Example 2]]
:* Question: What do you like about it? [[User:Example 2]]
</pre>
</pre>


Line 222: Line 223:
<pre>
<pre>
* Support. I like this idea. [[User:Example]]
* Support. I like this idea. [[User:Example]]

** Question: What do you like about it? [[User:Example 2]]
** Question: What do you like about it? [[User:Example 2]]
</pre>
</pre>
Line 232: Line 234:
</pre>
</pre>


When indenting in reply to a paragraph that starts with any mix of colons and asterisks, it is necessary to copy whatever series of colons and asterisks was used above, and append one more of either. Alternatively, simply [[WP:OUTDENT|outdent]].
When indenting in reply to a paragraph that starts with any mix of colons and asterisks, it is necessary to copy whatever series of colons and asterisks was used above, and append one more of either. Alternatively, simply [[WP:OUTDENT|outdent]].


==== Multiple paragraphs within list items ====
==== Multiple paragraphs within list items ====
Line 264: Line 266:
An accessible approach to indentation is the template {{tlx|block indent}} for multi-line content; it uses [[Cascading style sheets|CSS]] to indent the material. For single lines, a variety of templates exist, including {{tlx|in5}} (a universal template, with the same name on all Wikimedia sites); these indent with various whitespace characters. [[Wikipedia:Manual of style#Indentation|Do not abuse]] the {{tag|blockquote}} element or templates that use it (such as {{tlx|Quote}}) for visual indentation; they are only for directly quoted material.
An accessible approach to indentation is the template {{tlx|block indent}} for multi-line content; it uses [[Cascading style sheets|CSS]] to indent the material. For single lines, a variety of templates exist, including {{tlx|in5}} (a universal template, with the same name on all Wikimedia sites); these indent with various whitespace characters. [[Wikipedia:Manual of style#Indentation|Do not abuse]] the {{tag|blockquote}} element or templates that use it (such as {{tlx|Quote}}) for visual indentation; they are only for directly quoted material.


A colon (<code>:</code>) at the start of a line marks that line in the MediaWiki parser as the {{tag|dd}} part of an HTML [[description list]] ({{tag|dl}}).{{efn|1=HTML [[description list]]s were formerly called ''definition lists'' and ''association lists''. The <code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code> structure is the same; only the terminology has changed between HTML specification versions.}} The visual effect in most Web browsers is to indent the line. This is used, for example, to indicate replies in a threaded discussion on talk pages. However, this markup alone is missing the required {{tag|dt|o}} (term) element of a description list, to which the {{tag|dd|o}} (description/definition) pertains. As can be seen by inspecting the code sent to the browser, this results in broken HTML (i.e. it fails [[W3C Markup Validation Service|validation]]<ref>{{cite web |url= https://validator.w3.org/ |title=Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents |work=validator.w3.org |publisher=[[World Wide Web Consortium]] |date=2017 |version=v1.3+hg |access-date= December 13, 2017}} The validator failure reported is "'''Error''': Element <code>dl</code> is missing a required child element."</ref>). The result is that assistive technology, such as screen readers, will announce a description list that does not exist, which is confusing for any visitor unused to Wikipedia's broken markup. This is not ideal for accessibility, [[Semantic HTML|semantics]], or [[Wikipedia:Reusing Wikipedia content|reuse]], but is currently commonly used, despite the problems it causes for users of screen readers.<!--Accessibility editors consider this a legacy usage, some others disagree, and a Phabricator ticket is open to change the parsing of ":" markup, at https://phabricator.wikimedia.org/T6521 -->
A colon (<code>:</code>) at the start of a line marks that line in the MediaWiki parser as the {{tag|dd}} part of an HTML [[description list]] ({{tag|dl}}).{{efn|1=HTML [[description list]]s were formerly called ''definition lists'' and ''association lists''. The <code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code> structure is the same; only the terminology has changed between HTML specification versions.}} The visual effect in most Web browsers is to indent the line. This is used, for example, to indicate replies in a threaded discussion on talk pages. However, this markup alone is missing the required {{tag|dt|o}} (term) element of a description list, to which the {{tag|dd|o}} (description/definition) pertains. As can be seen by inspecting the code sent to the browser, this results in broken HTML (i.e. it fails [[W3C Markup Validation Service|validation]]<ref>{{cite web |url= https://validator.w3.org/ |title=Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents |work=validator.w3.org |publisher=[[World Wide Web Consortium]] |date=2017 |version=v1.3+hg |access-date= December 13, 2017}} The validator failure reported is "<strong>Error</strong>: Element <code>dl</code> is missing a required child element."</ref>). The result is that assistive technology, such as screen readers, will announce a description list that does not exist, which is confusing for any visitor unused to Wikipedia's broken markup. This is not ideal for accessibility, [[Semantic HTML|semantics]], or [[Wikipedia:Reusing Wikipedia content|reuse]], but is currently commonly used, despite the problems it causes for users of screen readers.<!--Accessibility editors consider this a legacy usage, some others disagree, and a Phabricator ticket is open to change the parsing of ":" markup, at https://phabricator.wikimedia.org/T6521 -->


Blank lines must {{em|not}} be placed between colon-indented lines of text – especially in article content. This is interpreted by the software as marking the end of a list and the start of a new one. If a blank line is needed, place the same number of colons on it as those preceding the text below the blank line, for instance:
Blank lines must {{em|not}} be placed between colon-indented lines of text – especially in article content. This is interpreted by the software as marking the end of a list and the start of a new one. If a blank line is needed, place the same number of colons on it as those preceding the text below the blank line, for instance:
Line 279: Line 281:
</pre>
</pre>


For more information on the weaknesses of colon-based description list markup – even for [[Wikipedia:Manual of Style/Lists#Description (definition, association) lists|actual description lists]] – {{crossref|see [[WP:Manual of Style/Glossaries/DD bug test cases]]}}.
For more information on the weaknesses of colon-based description list markup – even for [[Wikipedia:Manual_of_Style/Lists#Description (definition, association) lists|actual description lists]] – {{crossref|see [[WP:Manual of Style/Glossaries/DD bug test cases]]}}.


==== Vertical lists ====
==== Vertical lists ====
Line 288: Line 290:
<pre>* White rose
<pre>* White rose
* Yellow rose
* Yellow rose

* Pink rose
* Pink rose

* Red rose
* Red rose
</pre>
</pre>
Line 294: Line 298:
* White rose
* White rose
* Yellow rose
* Yellow rose

* Pink rose
* Pink rose

* Red rose
* Red rose


Line 428: Line 434:


<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
'''{{cross}} 1. Incorrect'''
<strong>{{cross}} 1. Incorrect</strong>
<pre>
<pre>
; Noble gases
; Noble gases
Line 441: Line 447:


<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
'''{{tick}} 2. Heading'''
<strong>{{tick}} 2. Heading</strong>
<pre>
<pre>
== Noble gases ==
== Noble gases ==
Line 503: Line 509:
<pre>
<pre>
{| role="presentation" class="toccolors" style="width:94%"
{| role="presentation" class="toccolors" style="width:94%"
| colspan="2" style="text-align: center; background-color: #ccf;" | '''Important text'''
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Important text</strong>
|-
|-
| The quick || brown fox
| The quick || brown fox
Line 560: Line 566:
Regarding accessibility, deviations from standard conventions may be tolerated [[WP:color|so long as they are accessible]]. Members of the accessibility project have ensured that the default style is accessible. If some template or specific color scheme deviates from the standard, its authors should make sure that it meets accessibility requirements such as providing enough [[Wikipedia:Colour contrast|color contrast]]. For instance, the infoboxes and [[Template:The Simpsons|navigational templates]] relating to ''[[The Simpsons]]'' use a yellow color scheme, to tie in with the dominant color in the series. In this case, blue links on yellow provide enough color contrast, and thus are accessible.
Regarding accessibility, deviations from standard conventions may be tolerated [[WP:color|so long as they are accessible]]. Members of the accessibility project have ensured that the default style is accessible. If some template or specific color scheme deviates from the standard, its authors should make sure that it meets accessibility requirements such as providing enough [[Wikipedia:Colour contrast|color contrast]]. For instance, the infoboxes and [[Template:The Simpsons|navigational templates]] relating to ''[[The Simpsons]]'' use a yellow color scheme, to tie in with the dominant color in the series. In this case, blue links on yellow provide enough color contrast, and thus are accessible.


In general, articles should use [[wikimarkup]] in preference to the limited set of [[meta:Help:HTML in wikitext#Permitted HTML|allowed HTML elements]]. In particular, do not use the HTML style elements {{tag|i|o}} and {{tag|b|o}} to format text; it is preferable to use Wiki-markup <code><nowiki>''</nowiki></code> or <code><nowiki>'''</nowiki></code> for purely typographic italicisation and boldfacing, respectively, and use [[Semantic HTML|semantic markup]] templates or elements for more meaningful differences. The {{tag|font|o}} element should also be avoided in article text; use {{tlx|em}}, {{tlx|code}}, {{tlx|var}}, and our other [[:Category:Semantic markup templates|semantic markup templates]] as needed, to emphasise logical differences not just visual ones. Use the {{tl|resize}}, {{tl|small}}, and {{tl|big}} templates to change font size, rather than setting it explicitly with CSS style attributes like <code>font-size</code> or deprecated style elements like {{tag|big|o}}. Of course there are natural exceptions; e.g., it may be beneficial to use the {{tag|u}} element to indicate something like an example link that isn't really clickable, but underlining is otherwise generally [[MOS:BADEMPHASIS|not used in article text]].
In general, articles should use [[wikimarkup]] in preference to the limited set of [[meta:Help:HTML_in_wikitext#Permitted_HTML|allowed HTML elements]]. In particular, do not use the HTML style elements {{tag|i|o}} and {{tag|b|o}} to format text; it is preferable to use Wiki-markup <code><nowiki>''</nowiki></code> or <code><nowiki>'''</nowiki></code> for purely typographic italicisation and boldfacing, respectively, and use [[Semantic HTML|semantic markup]] templates or elements for more meaningful differences. The {{tag|font|o}} element should also be avoided in article text; use {{tlx|em}}, {{tlx|code}}, {{tlx|var}}, and our other [[:Category:Semantic markup templates|semantic markup templates]] as needed, to emphasise logical differences not just visual ones. Use the {{tl|resize}}, {{tl|small}}, and {{tl|big}} templates to change font size, rather than setting it explicitly with CSS style attributes like <code>font-size</code> or deprecated style elements like {{tag|big|o}}. Of course there are natural exceptions; e.g., it may be beneficial to use the {{tag|u}} element to indicate something like an example link that isn't really clickable, but underlining is otherwise generally [[MOS:BADEMPHASIS|not used in article text]].


=== Users with limited CSS or JavaScript support ===
=== Users with limited CSS or JavaScript support ===

Revision as of 03:43, 29 June 2020

Web accessibility is the goal of making web pages easier to navigate and read. While this is primarily intended to assist those with disabilities, it can be helpful to all readers. We aim to adhere to Web Content Accessibility Guidelines 2.0 (also known as ISO/IEC 40500:2012) on which the following suggestions are based. Pages adhering to them are easier to read and edit for everyone.

On 14 January 2006, the Board of the Wikimedia Foundation passed the following nondiscrimination resolution: "The Wikimedia Foundation prohibits discrimination against current or prospective users and employees on the basis of race, color, gender, religion, national origin, age, disability, sexual orientation, or any other legally protected characteristics. The Wikimedia Foundation commits to the principle of equal opportunity, especially in all aspects of employee relations, including employment, salary administration, employee development, promotion, and transfer". The WMF asserts that its policies "may not be circumvented, eroded, or ignored by Wikimedia Foundation officers or staff nor local policies of any Wikimedia project".

Article structure

A standardized structure of articles improves accessibility, because it enables users to expect contents to be in a specific part of the page. For example, if a blind user is searching for disambiguation links and doesn't find any at the top of the page, they will know that there aren't any and they don't have to read the whole page to find that out.

Standardization is already a habit on Wikipedia, thus the guidelines to follow are simply Wikipedia:Manual of Style/Layout and Wikipedia:Lead section § Elements of the lead.

Headings

Headings should be descriptive and in a consistent order as defined in the Manual of Style.

Nest headings sequentially, starting with level 2 (==), then level 3 (===) and so on. (Level 1 is the auto-generated page title.) Do not skip parts of the sequence, such as selecting levels for emphasis; this is not the purpose of headings.

Examples of correct and incorrect use of nested headings
Correct Random/chaotic Skipping levels

[Article lead here]
==Section== [level 2]
===Sub-section=== [3]
==Section== [2]
===Sub-section=== [3]
====Sub-sub-section==== [4]
==Section== [2]

[Article lead here]
====Section?==== [4]
===Section?=== [3]
==Section?== [2]
==Section?== [2]
====Section?==== [4]
===Section?=== [3]

[Article lead here]
[Level-2 section missing here]
===Section?=== [3]
==Section== [2]
[Level-3 sub-section missing here]
====Sub-section?==== [4]
==Section== [2]

Do not make pseudo-headings by abusing semicolon markup (reserved for description lists) and try to avoid using bold markup. Screen readers and other assistive technology can only use headings that have heading markup for navigation. If you want to reduce the size of the table of contents (TOC), use {{TOC limit}} instead. In cases where {{TOC limit}} cannot be used because of lower-level headings elsewhere in the article, then using bold for the sub-sub-sub headings causes the least annoyance for screen reader users. Using a pseudo heading at all means you have exhausted all other options. It is a rarity.

Examples of acceptable and incorrect use of pseudo-headings and description lists
Acceptable Incorrect

[Article lead here]
==Section== [level 2]
===Sub-section=== [3]
'''Pseudo-heading'''
==Section== [2]
===Sub-section=== [3]
====Sub-sub-section==== [4]
;A term followed by
:a definition is a description list

[Article lead here]
==Section== [level 2]
===Sub-section=== [3]
;Pseudo-heading
==Section== [2]
===Sub-section=== [3]
<small>==Sub-sub-section==</small> [2]

Floating elements

In the wikicode, floating elements (including images) should be placed inside the section they belong to; do not place the image at the end of the previous section. (Depending on platform, "stacking" of several images alongside a relatively small amount of text may cause a particular image to be pushed down to a later section. However, this is not an accessibility issue, as screen readers always read each image's alt= out at the point where the image is coded.)

Resolution

Wikipedia articles should be accessible to readers using devices with small screens, or to readers using monitors with a low resolution. The lowest resolution that it is considered possible to support without adversely affecting other users is 1024×768; all articles should look acceptable at this resolution without excessive horizontal scrolling. This is sometimes an issue in articles with multiple images on both sides of the screen; although lower resolutions will tend to stretch paragraphs vertically, moving images apart in that direction, be careful not to add images or other floating content on both sides of the screen simultaneously. Large tables and images can also create problems; sometimes horizontal scrolling is unavoidable, but consider restructuring wide tables to extend vertically rather than horizontally.

Text

In articles, do not use strikethrough to remove objectionable text. Either comment it out with "<!--" and "-->" or remove it entirely. By default, most screen readers do not indicate presentational text attributes (bold, italic, underline) or even semantic text attributes (emphasis, importance, text deletion), so struck-out text is read normally along with any other text. (Editors using screen readers who participate in Wikipedia policy and deletion debates are advised to turn on notifications about text attributes when doing so, as struck text is very common in Wikipedia-internal discussions.)

Screen readers without Unicode support will generally read a character outside Latin-1 and Windows-1252 as a question mark, and even in JAWS, the most popular screen reader, Unicode characters are very difficult to read.

  1. Provide a transliteration for all text in a non-Latin writing system where the non-Latin character is important in the original context such as names, places, things etc. This functionality is available in templates that signify non-Latin-script languages and can also be found in templates such as {{transl}}; these templates also have other accessibility benefits (see the "Other languages" section below).
  2. Do not use unpronounceable symbols such as ♥ (a heart symbol); use images with alt text instead.[1]
  3. Symbols that cause problems for screen readers may already have templates created to produce an image and alt text. An example is the dagger template {{}} (see Category:Single-image insertion templates for more).

The sequence of characters must be sufficient to convey semantic aspects of the text (and, preferably, other similar forms of content); reliance on custom "special symbols" distinguishable only by CSS properties or wiki markup is not acceptable.

Do not use techniques that require interaction to provide information, such as tooltips or any other "hover" text. Abbreviations are exempt from these requirements, so the {{abbr}} template may be used to indicate the long form of a word.

Do not insert line breaks within a sentence, since this makes it harder to edit with a screen reader. A single line break may follow a sentence, which may help some editors.

Font size

Reduced or enlarged font sizes should be used sparingly, and are usually done with automated page elements such as headings, table headers, and standardized templates. Size changes are specified as a percentage of the original font size and not as an absolute size in pixels or point size. This improves accessibility for visually impaired users who use a large default font size.

Avoid using smaller font sizes within elements that already use a smaller font size, such as infoboxes, navboxes, and reference sections. This means that <small>...</small> tags, and templates such as {{small}} and {{smaller}}, should not be applied to plain text within those elements. In no case should the resulting font size of any text drop below 85% of the page's default font size (i.e. 11.9 px in Vector skin or 10.8 px in Monobook).

Other languages

Non-English words or phrases should be encased in {{lang}}, which uses ISO 639 language codes, thus:

{{lang|fr|Assemblée nationale}}

which renders as

Assemblée nationale

or {{lang-fr|Assemblée nationale}}

which renders as

French: Assemblée nationale.

Rationale: {{lang}} enables speech synthesizers to pronounce the text in the correct language.[2] It has many other uses; see Template:Lang/doc § Rationale for a comprehensive list of benefits.

It is not necessary nor desirable to wrap these constructions in italics markup; the {{lang}} and {{lang-xx}} templates already auto-italicize.

Links

  1. Create good link descriptions, especially for external links (avoid "click here!", "this").[3][4]
  2. Do not use Unicode characters as icons; use an icon with alt text instead. For example, a character like "→" can not be reproduced into useful text by a screen reader, and will usually be read as a question mark.

Color

Two screenshots of the same highly textual user interface. The top one uses red, green, and blue; the bottom one uses nearly the same color for red and green, so that the red text becomes nearly invisible in its green background.
A pair of screenshots showing the effects of red/green colorblindness on legibility

Colors are most commonly found in Wikipedia articles within templates and tables. For technical assistance on how colors are used, see Help:Using colours.

Articles (and other pages) that use color should keep accessibility in mind, as follows:

  • Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an accessible symbol matched to a legend, or footnote labels. Otherwise, blind users or readers accessing Wikipedia through a printout or device without a color screen will not receive that information.
  • Links should clearly be identifiable as a link to our readers.
  • Some readers of Wikipedia are partially or fully color-blind or visually impaired. Ensure the contrast of the text with its background reaches at least Web Content Accessibility Guidelines (WCAG) 2.0's AA level, and AAA level when feasible (see WCAG's "Understanding SC 1.4.3: Contrast (Minimum)"). To use named CSS colors for text on a white background, refer to Wikipedia:Manual of Style/Accessibility/CSS colors for text on white for recommended colors. For other usage, here is a selection of tools that can be used to check that the contrast is correct:
    • The Colour Contrast Analyser enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference" which is outdated.
    • You can also use Snook's color contrast tool, which is entirely up-to-date as of 11 January 2015.
    • The Wikimedia Foundation Design team has provided a color palette with colors being marked towards level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.
    • The table at Wikipedia:Manual of Style/Accessibility/Colors shows the results for 14 hues of finding the darkest or lightest backgrounds that are AAA-compliant against black text, white text, linked text and visited linked text.
    • Google's Chrome Canary has a color contrast debugger with visual guide and color-picker.
    • Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on WCAG 1.0's algorithm, while the reference is now WCAG 2.0's algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.
  • Additional tools can be used to help produce graphical charts and color schemes for maps and the like. These tools are not accurate means to review contrast accessibility, but they can be helpful for specific tasks.
    • Paletton (previously Color Scheme Designer) helps to choose a good set of colors for a graphical chart.
    • Color Brewer 2.0 provides safe color schemes for maps and detailed explanations.
    • There are some tools for simulating color-blind vision: toptal (webpage analysis) and coblis (local file analysis). There are also browser extensions for webpage analysis: Colorblinding (Chrome) NoCoffee (Chrome) NoCoffee (Firefox)
    • A very simple open-source tool that can be helpful for choosing contrasting colours is Color Oracle, a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of colourblindness or in greyscale.
  • If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Overcolored}} or {{Overcoloured}}) at the top of the article.

Block elements

Lists

Do not separate list items by leaving empty lines or tabular column breaks between them. This includes items in a description list (a list made with a leading semicolon or colon) or an unordered list. Lists are meant to group elements that belong together, but MediaWiki will interpret the blank line as the end of one list and start a new one. Excessive double line breaks also disrupt screen readers, which will announce multiple lists when only one was intended, and therefore may mislead or confuse users of these programs. Such improper formatting can also more than triple the length of time it takes them to read the list.

Likewise, do not switch between initial list marker types (colons, asterisks or hash signs) in one list. For example, in a discussion, do checkY this best practice:

* Support.  I like this idea.  [[User:Example]] 
** Question:  What do you like about it?  [[User:Example 2]]

or checkY this acceptable practice:

* Support.  I like this idea.  [[User:Example]] 
*: Question:  What do you like about it?  [[User:Example 2]] 

but ☒N don't do this (switch type from bullet list to description list):

* Support.  I like this idea.  [[User:Example]] 
:: Question:  What do you like about it?  [[User:Example 2]] 

nor ☒N this (switch type from bullet list to description list):

* Support.  I like this idea.  [[User:Example]] 
:* Question:  What do you like about it?  [[User:Example 2]] 

nor ☒N this (leave blank lines between list items):

* Support.  I like this idea.  [[User:Example]]

** Question:  What do you like about it?  [[User:Example 2]]

nor ☒N this (jump more than one level):

* Support.  I like this idea.  [[User:Example]]
*** Question:  What do you like about it?  [[User:Example 2]]

When indenting in reply to a paragraph that starts with any mix of colons and asterisks, it is necessary to copy whatever series of colons and asterisks was used above, and append one more of either. Alternatively, simply outdent.

Multiple paragraphs within list items

Normal MediaWiki list markup is unfortunately incompatible with normal MediaWiki paragraph markup. To put multiple paragraphs in a list item, checkY separate them with {{pb}}:

* This is one item.{{pb}}This is another paragraph within this item.
* This is another item.

Do not ☒N use line breaks to simulate paragraphs, because they have different semantics:

* This is one item.<br>This is the same paragraph, with a line break before it.
* This is another item.

Definitely do not ☒N attempt to use a colon to match the indentation level, since (as mentioned above) it produces three separate lists:

* This is one item.
: This is an entirely separate list.
* This is a third list.

Indentation

An accessible approach to indentation is the template {{block indent}} for multi-line content; it uses CSS to indent the material. For single lines, a variety of templates exist, including {{in5}} (a universal template, with the same name on all Wikimedia sites); these indent with various whitespace characters. Do not abuse the <blockquote>...</blockquote> element or templates that use it (such as {{Quote}}) for visual indentation; they are only for directly quoted material.

A colon (:) at the start of a line marks that line in the MediaWiki parser as the <dd>...</dd> part of an HTML description list (<dl>...</dl>).[a] The visual effect in most Web browsers is to indent the line. This is used, for example, to indicate replies in a threaded discussion on talk pages. However, this markup alone is missing the required <dt> (term) element of a description list, to which the <dd> (description/definition) pertains. As can be seen by inspecting the code sent to the browser, this results in broken HTML (i.e. it fails validation[5]). The result is that assistive technology, such as screen readers, will announce a description list that does not exist, which is confusing for any visitor unused to Wikipedia's broken markup. This is not ideal for accessibility, semantics, or reuse, but is currently commonly used, despite the problems it causes for users of screen readers.

Blank lines must not be placed between colon-indented lines of text – especially in article content. This is interpreted by the software as marking the end of a list and the start of a new one. If a blank line is needed, place the same number of colons on it as those preceding the text below the blank line, for instance:

: Text here.
:
: More text.

Another solution is new-paragraph markup, but it must be in one unbroken line in the wiki code:

: Text here.<p>More text.</p>

For more information on the weaknesses of colon-based description list markup – even for actual description listssee WP:Manual of Style/Glossaries/DD bug test cases.

Vertical lists

Bulleted vertical lists

For bulleted vertical lists, do not separate items by leaving blank lines between them. If list items are separated by more than one line break, the HTML list will be ended before the line break, and another HTML list will be opened after the line break. This effectively breaks what is seen as one list into several smaller lists for those using screen readers. For example, for the coding:

* White rose
* Yellow rose

* Pink rose

* Red rose

the software partially suppresses line spaces and therefore it looks like this:

  • White rose
  • Yellow rose
  • Pink rose
  • Red rose

but will be read by a screen reader as: "List of 2 items: (bullet) White rose, (bullet) Yellow rose, list end. List of 1 items: (bullet) Pink rose, list end. List of 1 items: (bullet) Red rose, list end."

Do not separate list items with line breaks (<br>). Use {{plainlist}} / {{unbulleted list}} if the list is to remain vertical; or consider {{flatlist}} / {{hlist}} if the list could be better rendered horizontally (inline) as described in the following two sections.

Unbulleted vertical lists

For unbulleted lists running down the page, the templates {{plainlist}} and {{unbulleted list}} are available, to improve accessibility and semantic meaningfulness by marking up what is clearly a list rather than including <br /> line breaks, which should not be used—see above. They differ only in the wiki-markup used to create the list. Note that because these are templates, the text of each list item cannot contain the vertical bar symbol (|) unless it is replaced by {{!}} or is contained within <nowiki>...</nowiki> tags. Similarly it can't contain the equals sign (=), unless replaced with {{=}} or contained within <nowiki>...</nowiki>, though you can bypass this by naming the parameters (|1=, |2= etc.). If this becomes too much of a hassle, you may be able to use the variant using {{endplainlist}} instead.

Example of plainlist
Wikitext Renders as
{{plainlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}
  • White rose
  • Yellow rose
  • Pink rose
  • Red rose
Example of unbulleted list
Wikitext Renders as
{{unbulleted list
| White rose
| Yellow rose
| Pink rose
| Red rose
}}
  • White rose
  • Yellow rose
  • Pink rose
  • Red rose

Alternatively, in templates such as Navboxes and the like, or any suitable container, such lists may be styled with the class "plainlist", thus:

  • | listclass = plainlist or
  • | bodyclass = plainlist

In infoboxes:

  • | rowclass = plainlist or
  • | bodyclass = plainlist

may be used. See also Manual of Style: Lists § Unbulleted lists. See WP:NAV for more details on Navigation templates.

Horizontal lists

For lists running across the page, and in single rows in infoboxes and other tables, the templates {{flatlist}} and {{hlist}} ("h[orizontal]list") are available to improve accessibility and semantic meaningfulness. This feature makes use of the correct HTML markup for each list item, rather than including bullet characters which, for example, are read out (e.g., "dot cat dot dog dot horse dot...") by the assistive software used by people who are blind. The templates differ only in the wiki-markup used to create the list. Note that because these are templates, the text of each list item cannot contain the vertical bar symbol ( | ) unless it is replaced by {{!}} or is contained within <nowiki>...</nowiki> tags.

Example of flatlist
Wikitext Renders as
{{flatlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}
  • White rose
  • Yellow rose
  • Pink rose
  • Red rose
Example of hlist
Wikitext Renders as
{{hlist
| White rose
| Yellow rose
| Pink rose
| Red rose
}}
  • White rose
  • Yellow rose
  • Pink rose
  • Red rose

Alternatively, in templates such as Navboxes and the like, or any suitable container, such lists may be styled with the class hlist, thus:

  • | listclass = hlist or
  • | bodyclass = hlist

In infoboxes:

  • | rowclass = hlist or
  • | bodyclass = hlist

may be used. See WP:NAV for more details on Navigation templates.

List headings

Improper use of a semicolon to bold a "fake heading" before a list (figure 1) creates a list gap, and worse. The semicolon line is a one-item description list, with no description content, followed by a second list.

Instead, use heading markup (figure 2).

☒N 1. Incorrect

; Noble gases
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon

checkY 2. Heading

== Noble gases ==
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon

Tables

Screen readers and other web browsing tools make use of specific table tags to help users navigate the data contained within them.

Use the correct wikitable pipe syntax to take advantage of all the features available. See meta:Help:Tables for more information on the special syntax used for tables. Do not solely use formatting, either from CSS or hard-coded styles, to create semantic meaning (e.g., changing background color).

Many navboxes, series templates, and infoboxes are made using tables.

Avoid using <br> tags in adjacent cells to emulate a visual row that isn't reflected in the HTML table structure. This is a problem for users of screen readers which read tables cell by cell, HTML row by HTML row, not visual row by visual row. WikiProject Accessibility/Infobox accessibility has been addressing this problem.

Data tables

{|
|+ [caption text]
|-
! scope="col" | [column header 1]
! scope="col" | [column header 2]
! scope="col" | [column header 3]
|-
! scope="row" | [row header 1]
| [normal cell 1,2] || [normal cell 1,3]
|-
! scope="row" | [row header 2]
| [normal cell 2,2] || [normal cell 2,3]
...
|}
Caption ( |+ )
A caption is a table's title, describing its nature.[WCAG-TECH 1] Data tables should always include a caption.
Row & column headers ( ! )
Like the caption, these help present the information in a logical structure to visitors.[WCAG-TECH 2] The headers help screen readers render header information about data cells. For example, header information is spoken prior to the cell data, or header information is provided on request.[6]
Scope of headers (! scope="col" | and ! scope="row" |)
This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells.[WCAG-TECH 3]

Wikipedia:Manual of Style/Accessibility/Data tables tutorial provides detailed requirements about:

  1. Correct table captions
  2. Correct headers structure
  3. Images and color
  4. Avoiding nested tables

Layout tables

Avoid using tables for visual positioning of non-tabular content. Data tables provide extra information and navigation methods that can be confusing when the content lacks logical row and column relationships. Instead, use semantically appropriate elements or <div>s, and style attributes.

When using a table to position non-tabular content, help screen readers identify it as a layout table, not a data table. Set a role="presentation" attribute on the table, and do not set any summary attribute. Do not use any <caption> or <th> elements inside the table, or inside any nested tables. In wiki table markup, this means do not use the |+ or ! prefixes. Make sure the content's reading order is correct. Visual effects, such as centering or bold typeface, can be achieved with style sheets or semantic elements. For example:

{| role="presentation" class="toccolors" style="width:94%"
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Important text</strong>
|-
| The quick || brown fox
|-
| jumps over || the lazy dog.
|}

Images

  1. Images that are not purely decorative should include an alt attribute that acts as a substitute for the image for blind readers, search-spiders, and other non-visual users. If additional alt text is added, it should be succinct or refer the reader to the caption or adjacent text. See WP:ALT for more information.
  2. In most cases, images should include a caption using the built-in image syntax. The caption should concisely describe the meaning of the image and the essential information it is trying to convey.
  3. Avoid using images in place of tables or charts. Where possible, any charts or diagrams should have a text equivalent or should be well-described so that users who are unable to see the image can gain some understanding of the concept.
  4. Avoid sandwiching text between two images or, unless absolutely necessary, using fixed image sizes.
  5. Avoid indiscriminate gallery sections because screen size and browser formatting may affect accessibility for some readers due to fragmented image display.
  6. Avoid referring in text to images as being on the left or right. Image placement may be different for viewers of the mobile site, and is meaningless to people having pages read to them by assistive software. Instead, use captions to identify images.
  7. Detailed image descriptions, where not appropriate for an article, should be placed on the image's description page, with a note saying that activating the image link will lead to a more detailed description.[how?]
  8. Images should be inside the section to which they are related (after the heading and after any links to other articles), and not in the heading itself nor at the end of the previous section. This ensures that screen readers will read, and the mobile site will display, the image (and its textual alternative) in the correct section.
  9. This guideline includes alt text for LaTeX-formatted equations in <math> mode.[clarification needed]
  10. Do not put images in headings; this includes icons and <math> markup. Doing so can break links to sections and cause other problems.

Animations, video, and audio content

Animations

To be accessible, an animation (GIF – Graphics Interchange Format) should either:

  • Not exceed a duration of five seconds (which results in making it a purely decorative element)[7] or
  • Be equipped with control functions (stop, pause, play)[8]

This requires GIFs with animations longer than five seconds to be converted to video (to learn how, see the tutorial converting animated GIFs to Theora OGG).

In addition, animations Template:Strong-em produce more than three flashes in any one-second period. Content that flashes more than that limit is known to cause seizures.[9]

Video

Subtitles can be added to video, in timed text format. There is a corresponding help page at commons:Commons:Video#Subtitles and closed captioning. Subtitles are meant for the transcription of speech.

There is a need for closed captions for the hearing impaired. As of November 2012 this is not possible, but this feature could be easily added and has been requested in bugzilla:41694. Closed captions are meant to be viewed instead of subtitles. Closed captions provide a text version of all important information provided through the sound. It can include dialogue, sounds (natural and artificial), the setting and background, the actions and expressions of people and animals, text or graphics.[10] Off-Wikipedia guides should be consulted for how to create closed captions.[11]

A text version of the video would also be needed for the blind, but as of November 2012 there is no convenient way to provide alt text for videos.

Audio

Subtitles for speech, lyrics, dialogue, etc.[12] can easily be added to audio files. The method is similar to that of the video: commons:Commons:Video#Subtitles and closed captioning.

Styles and markup options

Best practice: Use Wikimarkup and CSS classes in preference to alternatives

In general, styles for tables and other block-level elements should be set using CSS classes, not with inline style attributes. The site-wide CSS in MediaWiki:Common.css is more carefully tested to ensure accessibility (e.g. sufficient color contrast) and compatibility with a wide range of browsers. Moreover, it allows users with very specific needs to change the color schemes in their own style sheet (Special:MyPage/skin.css, or their browser's style sheet). For example, a style sheet at Wikipedia:Style sheets for visually impaired users provides higher contrast backgrounds for navboxes. The problem is that when the default site-wide classes are overridden, it makes it far more difficult for an individual to choose their own theme.

It also creates a greater degree of professionalism by ensuring a consistent appearance between articles and conformance to a style guide.

Regarding accessibility, deviations from standard conventions may be tolerated so long as they are accessible. Members of the accessibility project have ensured that the default style is accessible. If some template or specific color scheme deviates from the standard, its authors should make sure that it meets accessibility requirements such as providing enough color contrast. For instance, the infoboxes and navigational templates relating to The Simpsons use a yellow color scheme, to tie in with the dominant color in the series. In this case, blue links on yellow provide enough color contrast, and thus are accessible.

In general, articles should use wikimarkup in preference to the limited set of allowed HTML elements. In particular, do not use the HTML style elements <i> and <b> to format text; it is preferable to use Wiki-markup '' or ''' for purely typographic italicisation and boldfacing, respectively, and use semantic markup templates or elements for more meaningful differences. The <font> element should also be avoided in article text; use {{em}}, {{code}}, {{var}}, and our other semantic markup templates as needed, to emphasise logical differences not just visual ones. Use the {{resize}}, {{small}}, and {{big}} templates to change font size, rather than setting it explicitly with CSS style attributes like font-size or deprecated style elements like <big>. Of course there are natural exceptions; e.g., it may be beneficial to use the <u>...</u> element to indicate something like an example link that isn't really clickable, but underlining is otherwise generally not used in article text.

Users with limited CSS or JavaScript support

Auto-collapsed (pre-collapsed) elements should not be used to hide content in the article's main body, though elements such as tables can be made collapsible at the reader's option.

Wikipedia articles should be accessible to readers using browsers and devices that have limited or no support for JavaScript or Cascading Style Sheets; remember that Wikipedia content can be reused freely in ways we cannot predict as well as accessed directly via older browsers. At the same time, it is recognised that it is impossible to provide the same quality of appearance to such users without unnecessarily avoiding features that would benefit users with more capable browsers. As such, features that would cause content to be hidden or corrupted when CSS or JavaScript is unavailable must not be used. This includes techniques such as the deprecated hiddenStructure method for hiding table content (which produces incomprehensible output without CSS) and some implementations of the NavFrame collapsing code (which can make content inaccessible without JavaScript support). However, consideration for users without CSS or JavaScript should extend mainly to making sure that their reading experience is possible; it is recognised that it will inevitably be inferior.

To accommodate these considerations, test any potentially disruptive changes with JavaScript or CSS disabled. In Firefox or Chrome, this can be done easily with the Web Developer extension; JavaScript can be disabled in other browsers in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions.

See also

Template:Wikipedia books

Notes and references

Specific

  1. ^ HTML description lists were formerly called definition lists and association lists. The <dl><dt>...</dt><dd>...</dd></dl> structure is the same; only the terminology has changed between HTML specification versions.
  1. ^ "F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  2. ^ H58: Using language attributes to identify changes in the human language, Techniques for WCAG 2.0, W3C, accessibility level: AA.
  3. ^ "G91: Providing link text that describes the purpose of a link". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  4. ^ "F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  5. ^ "Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents". validator.w3.org. v1.3+hg. World Wide Web Consortium. 2017. Retrieved December 13, 2017. The validator failure reported is "Error: Element dl is missing a required child element."
  6. ^ "Table cells: The TH and TD elements". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  7. ^ "Setting animated gif images to stop blinking after n cycles (within 5 seconds)". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  8. ^ "Allowing the content to be paused and restarted from where it was paused". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.
  9. ^ "Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures". Web Content Accessibility Guidelines (WCAG) 2.0. World Wide Web Consortium. 11 December 2008. Retrieved 28 May 2015.
  10. ^ "Providing an alternative for time based media". Techniques for WCAG 2.0. W3C. Retrieved 1 January 2011.
  11. ^ Please see: A quick and basic reference for closed captions, a detailed reference (PDF) and a list of best practices for closed captions.
  12. ^ "Providing an alternative for time-based media for audio-only content". Techniques for WCAG 2.0. World Wide Web Consortium. Retrieved 1 January 2011.

General

Technical

External links