Saintapedia:Accessibility: Difference between revisions

From Saintapedia
Jump to navigation Jump to search
VisualWikitext
>Tomoneill
(add Disability in America)
 
(Accessibility)
Tag: New redirect
Line 1: Line 1:
{{Notice|'''Powerpedia''' follows DOE's [http://energy.gov/about-us/web-policies Accessibility Policy] that is posted on [http://energy.gov/ Energy.gov].}}
#REDIRECT [[Accessibility]]
[[File:Disability in America.png|thumb|400x400px|Disability in America]]
[[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. Articles adhering to them are easier to read and edit for everyone.
 
== Color ==
''Derived from {{W|Wikipedia:Manual of Style/Accessibility}}''
=== Color recommendations ===
Prose text should never be manually colored. This will allow links to be clearly identifiable as a link to readers.
 
Articles 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 {{W|Wikipedia:Footnotes|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 Powerpedia are partially or fully color blind. Ensure the contrast of the text with its background reaches at least [http://www.w3.org/WAI/WCAG20/quickref/ WCAG (web content accessibility guidelines) 2.0's] AA level, and AAA level when feasible. Here is a selection of tools that can be used to check that the contrast is correct:
**The [http://www.paciellogroup.com/resources/contrast-analyser.html#download Color 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 [http://snook.ca/technical/colour_contrast/colour.html Snook's color contrast tool], which is entirely up-to-date.
**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.
**The [http://ColorSchemeDesigner.com color scheme generator] helps to choose a good set of colors for a graphical chart.
**[http://colorbrewer2.org/ Color Brewer 2.0's] provides safe color schemes for maps and detailed explanations.
**[http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org] or [http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com] are tools for simulating color blind vision.
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place {{tlx|Overcolored}} on the top of the article:
 
=== Recommendations from U.S. Access Board ===
{{Main|U.S. Access Board}}
The minimum accessible requirements just focus on foreground and background contrast, so that is not much for a color scheme on its own.  Once nice thing about the metric in WCAG 2.0 (luminosity contrast ratio of 4.5:1) is that it implicitly address colorblindness.  For more information, please see: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
 
If you want a web page with both black and white text (foreground) on a single background color, it turns out that there is only a narrow range of background that you can use.  For a true grey background, I think there are only two values that work to provide the required 4.5:1 contrast ratio.
 
There is a terrific resource for maps that can be used for accessible color schemes in general.  See Color Brewer 2.0, color advice for cartography at the following URL: http://colorbrewer2.org/
 
Be sure to check the option for “colorblind safe”.
 
=== Color contrast ===
* https://color.adobe.com/create/color-accessibility - Color wheel (or image in Extract Theme tab) can be used to generate color palette
* http://colorsafe.co/ for two colors
* U.S. Web Design System (USWDS) team recommendations:
** https://webaim.org/resources/contrastchecker/ to check two colors
** To use USWDS grades, you would need to match the luminance of your custom colors to the USWDS grade luminance levels. You can use a calculator like https://planetcalc.com/7779/ to evaluate the relative luminance for given colors.
** See https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility for more information.
* https://webaim.org/resources/contrastchecker/
* To check for multiple colors, you could use https://contrast-grid.eightshapes.com.
 
* Color pickers to find the closest color
** https://civicactions.github.io/uswds-color-tool/
** https://observablehq.com/@maya/closest-color-uswds-system-palette
* https://support.siteimprove.com/hc/en-gb/articles/115002413812-Siteimprove-Accessibility-Checker-Chrome-Extension
 
=== Mark ===
The <code><nowiki><mark></nowiki></code> HTML tag is being evaluated to improve accessibility of highlighted text.
* https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element
* https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#Mark
* https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
* https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/
 
== 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, a blind user is searching for [[disambiguation]] links. If he doesn't find any at the top of the page, he will know that there aren't any and he doesn't have to read the whole page to find that out.
 
=== Section headings ===
Headings should be descriptive and in a consistent order.
 
Headings should be nested sequentially, starting with level 2 (<code>==</code>), then level 3 (<code>===</code>) and so on (level 1 is not used, as this is the auto-generated page title), neither using random heading levels (e.g. selected for emphasis, which is not the purpose of headings), nor skipping parts of the sequence.
 
Do not make pseudo-headings using bold or semicolon markup. Screen readers and other machines can only use correctly formatted headings. If you want to reduce the size of the table of contents (TOC), use {{t|TOC limit}} instead.
{| class="wikitable"
|+ style="padding-top: 10px;" | Heading use (and misuse) examples
|-
! scope="col" style="background: PaleGreen;" | Correct
! scope="col" style="background: Pink;" | Random/chaotic
! scope="col" style="background: Pink;" | Skipping levels
! scope="col" style="background: Pink;" | Pseudo-headings
|- style="vertical-align: top;"
| style="width: 25%;" |
''&#91;Article lead here&#93;''{{break}}
<code>==Section==</code> ''&#91;level 2&#93;''{{break}}
<code>===Sub-section===</code> ''&#91;3&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''{{break}}
<code>===Sub-section===</code> ''&#91;3&#93;''{{break}}
<code>====Sub-sub-section====</code> ''&#91;4&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''
| style="width: 25%;" |
''&#91;Article lead here&#93;''{{break}}
<code>====Section'''?'''====</code> ''&#91;4&#93;''{{break}}
<code>===Section'''?'''===</code> ''&#91;3&#93;''{{break}}
<code>==Section'''?'''==</code> ''&#91;2&#93;''{{break}}
<code>==Section'''?'''==</code> ''&#91;2&#93;''{{break}}
<code>====Section'''?'''====</code> ''&#91;4&#93;''{{break}}
<code>===Section'''?'''===</code> ''&#91;2&#93;''
| style="width: 25%;" |
''&#91;Article lead here&#93;''{{break}}
''&#91;Level-2 section missing here&#93;''{{break}}
<code>===Section'''?'''===</code> ''&#91;3&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''{{break}}
''&#91;Level-3 sub-section missing here&#93;''{{break}}
<code>====Sub-section'''?'''====</code> ''&#91;4&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''
| style="width: 25%;" |
''&#91;Article lead here&#93;''{{break}}
<code>==Section==</code> ''&#91;level 2&#93;''{{break}}
<code>===Sub-section===</code> ''&#91;3&#93;''{{break}}
<code><nowiki>'''Sub-section'''</nowiki></code> ''&#91;Pseudo-headings&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''{{break}}
<code>===Sub-section===</code> ''&#91;3&#93;''{{break}}
<code>;Sub-sub-section</code> ''&#91;Pseudo-headings&#93;''{{break}}
<code>==Section==</code> ''&#91;2&#93;''{{break}}
<code><nowiki><small>==Sub-sub-section==</small></nowiki></code> ''&#91;3&#93;''
|}
 
=== Floating elements ===
In the wikitext, floating elements should be placed ''inside'' the section they belong to. For example, an image may be displayed under a header due to other floating elements pushing it down, while in the wikisyntax it is placed at the top of the page. Images should be inserted ''inside'' the section they belong to.
 
== Images ==
# Images should include an [[alt attribute]], even an empty one, 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 should refer the reader to the caption or adjacent text.
# In most cases, images should contain a caption, either using the built in image syntax or a secondary line of text.  The caption should concisely describe the meaning of the image, the essential information it is trying to convey.
# 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.
# Detailed image descriptions, where not appropriate for an article, should be placed on the image description page, with a note saying that activating the image link will lead to a more detailed description.
# Images should be inside the section they belong to (after the heading and after any links to other articles), and not in the heading nor at the end of the previous section, otherwise screen readers would read the image (and its textual alternative) in a different section; as they would appear to viewers of the mobile site.
# Avoid referring to images as being on the left or right. Image placement is different for viewers of the mobile version of Powerpedia, and is meaningless to people having pages read to them by assistive software. Instead, use captions to identify images.
 
== 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 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. These 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. Improper formatting can also more than triple the length of time it takes them to read the list. Likewise, do not switch between list marker types (colons, asterisks or hash signs) in one list, unless embedding lists starting at the highest level.
 
==== 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 [[WP:HTML|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 reader]]s. For example, for the coding:
 
<pre>* White rose
* Yellow rose
 
* Pink rose
 
* Red rose
</pre>
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 ({{tag|br|o}}). Use {{tl|plainlist}} / {{tl|unbulleted list}} if the list is to remain vertical; or consider {{tl|flatlist}} / {{tl|hlist}} if the list could be better rendered horizontally (in-line) as described in the following two sections.
 
==== Unbulleted vertical lists ====
For unbulleted lists running down the page, the templates {{tl|plainlist}} and {{tl|unbulleted list}} are available, to improve accessibility and semantic meaningfulness by marking up what is clearly a list rather than including {{Tag|br|single}} 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 <code><nowiki>{{!}}</nowiki></code> or is contained within {{tag|nowiki}} tags.
{| class="wikitable"
|+ Example of plainlist
! style="width:11.7em;" | Wikitext
! style="width:11.7em;" | Renders as
|-
| <pre style="line-height:1.2em;">{{plainlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}</pre>
| {{plainlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}
|}
 
{| class="wikitable"
|+ Example of unbulleted list
! style="width:11.7em;" | Wikitext
! style="width:11.7em;" | Renders as
|-
| <pre style="line-height:1.2em;">{{unbulleted list
| White rose
| Yellow rose
| Pink rose
| Red rose
}}</pre>
| {{unbulleted list
| 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 "<code>plainlist</code>", thus:
 
{{plainlist |
* <code><nowiki>| listclass = plainlist</nowiki></code> or
* <code><nowiki>| bodyclass = plainlist</nowiki></code>
}}
 
In infoboxes:
{{plainlist |
* <code><nowiki>| rowclass = plainlist</nowiki></code> or
* <code><nowiki>| bodyclass = plainlist</nowiki></code>
}}
 
may be used. See also [[Wikipedia:Manual of Style/Lists#Unbulleted lists|Manual of Style: Lists § Unbulleted lists]]. See [[WP:NAV]] for more details on Navigation templates.
 
==== Horizontal lists ====
{{shortcut|MOS:HLIST}}
 
For lists running across the page, and in single rows in infoboxes and other tables, the templates {{tl|flatlist}} and {{tl|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 <code><nowiki>{{!}}</nowiki></code> or is contained within {{tag|nowiki}} tags.
 
<!-- The following examples deliberately wrap the list over two lines to show the position of the list separator.
Please don't widen them. -->
{| class="wikitable"
|+ Example of flatlist
! style="width:11.7em;" | Wikitext
! style="width:11.7em;" | Renders as
|-
| <pre style="line-height:1.2em;">{{flatlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}</pre>
| {{flatlist |
* White rose
* Yellow rose
* Pink rose
* Red rose
}}
|}
 
{| class="wikitable"
|+ Example of hlist
! style="width:11.7em;" | Wikitext
! style="width:11.7em;" | Renders as
|-
| <pre style="line-height:1.2em;">{{hlist
| White rose
| Yellow rose
| Pink rose
| Red rose
}}</pre>
| {{hlist
| 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 <code>hlist</code>, thus:
{{plainlist |
* <code><nowiki>| listclass = hlist</nowiki></code> or
* <code><nowiki>| bodyclass = hlist</nowiki></code>
}}
 
In infoboxes:
{{plainlist |
* <code><nowiki>| rowclass = hlist</nowiki></code> or
* <code><nowiki>| bodyclass = hlist</nowiki></code>
}}
 
may be used.
 
== Links ==
# Create good link descriptions, especially for external links (avoid "[[click here]]!", "[http://example.com/ this]").<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G91.html | title = G91: Providing link text that describes the purpose of a link| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011| publisher = [[W3C]]}}</ref><ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F84 | title = 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| work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 1 January 2011}}</ref>
# Do not use {{W|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.
 
== Related ==
* [[IT Assistive Services]]
* [[Accessibility Committee]]
* [[Accessibility]]
* [[mediawikiwiki:Accessibility]]
* [[Functional Accessibility Evaluator]]
* [[Global Accessibility Awareness Day]]
 
== External links ==
*{{W|Wikipedia:Manual of Style/Accessibility}} - additional considerations
* {{W|Wikipedia:WikiProject Accessibility}} - project aims to make Wikipedia accessible for users with disabilities
* [http://blind.wikia.com/wiki/Mediawiki_and_Accessibility Blind Wiki]
 
{{Accessibility}}
{{Powerpedia}}
<references />

Revision as of 23:39, 14 September 2024

Redirect to:

Retrieved from ‘https://saintapedia.org/w/index.php?title=Saintapedia:Accessibility&oldid=3584’