More actions
Proton One (talk | contribs) m he ➙ they |
|||
| (16 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
= Article structure = | = 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 | 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 they don'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. | ||
The guidelines to follow are [[UniWiki:Manual of Style/Layout]] and [[UniWiki:Manual of Style/Lead section#Elements of the lead]]. | The guidelines to follow are [[UniWiki:Manual of Style/Layout]] and [[UniWiki:Manual of Style/Lead section#Elements of the lead]]. | ||
| Line 125: | Line 125: | ||
Screen readers and other web browsing tools make use of specific table tags to help users navigate the data contained within them. | 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 [https://meta.wikimedia.org/wiki/Help:Table MetaWiki:Tables | Use the correct wikitable pipe syntax to take advantage of all the features available. See [https://meta.wikimedia.org/wiki/Help:Table MetaWiki: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 colour). | ||
Many [[Wikipedia:Wikipedia:Navigational templates|navboxes]], [[Wikipedia:Wikipedia:Series templates|series]] templates, and [[Wikipedia:Help:Infobox|infoboxes]] are made using tables. | Many [[Wikipedia:Wikipedia:Navigational templates|navboxes]], [[Wikipedia:Wikipedia:Series templates|series]] templates, and [[Wikipedia:Help:Infobox|infoboxes]] are made using tables. | ||
| Line 132: | Line 132: | ||
==== Data tables ==== | ==== Data tables ==== | ||
:''See also: [[Wikipedia:Wikipedia:Manual of Style/Accessibility/Data tables tutorial|Wikipedia:Data tables tutorial]]'' | |||
<pre> | <pre> | ||
| Line 155: | Line 155: | ||
; Scope of headers (<code> ! scope="col" | and ! scope="row" | </code>): This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells. | ; Scope of headers (<code> ! scope="col" | and ! scope="row" | </code>): This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells. | ||
[[ | [[Wikipedia:Wikipedia:Manual of Style/Accessibility/Data tables tutorial|Wikipedia's data tables tutorial]] provides detailed requirements about: | ||
# Correct table captions | # Correct table captions | ||
# Correct headers structure | # Correct headers structure | ||
| Line 162: | Line 162: | ||
==== Layout tables ==== | ==== Layout tables ==== | ||
Avoid using tables for layout purposes only. The best option is to use [[HTML]]'s <code><div></code> blocks and style attributes because they provide flexibility. | Avoid using tables for layout purposes only. The best option is to use [[Wikipedia:HTML|HTML]]'s <code><div></code> blocks and style attributes because they provide flexibility. | ||
For simple layouts, tables can be an option. Especially if the only point of the table is to get a floating effect, then <code>align="right"</code> etc. will work with some browsers [[#Users with limited CSS/JavaScript support|not supporting CSS]] at all. This is in fact a verbose approximation of <code><div></code> plus CSS, and not the design sin known as (nested) "table layout". | For simple layouts, tables can be an option. Especially if the only point of the table is to get a floating effect, then <code>align="right"</code> etc. will work with some browsers [[#Users with limited CSS/JavaScript support|not supporting CSS]] at all. This is in fact a verbose approximation of <code><div></code> plus CSS, and not the design sin known as (nested) "table layout". | ||
| Line 180: | Line 179: | ||
</pre> | </pre> | ||
= Images = | |||
:''Further information: [[Wikipedia:Wikipedia:Alternative text for images|Wikipedia:Alternative text for images]], [[UniWiki:Manual of Style#Images]], [[Wikipedia:Wikipedia:Image use policy#Size|Wikipedia:Image use policy#Size]]'' | |||
# Images 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 should refer the reader to the caption or adjacent text: see [[WP:ALT]] for more information. | # Images should include an [[Wikipedia:Alt attribute|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 should refer the reader to the caption or adjacent text: see [[Wikipedia:WP:ALT|Wikipedia:Alternative text for imates]] for more information. | ||
# In [[ | # In [[UniWiki:Manual of Style/Captions#Special situations|most cases]], images should contain a [[UniWiki:Manual of Style/Captions|caption]] using the built in image syntax. 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. | # 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. | # 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 | # Images should be inside the section they belong to (after the heading and after any links to other articles), and not 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. See [[Wikipedia:Wikipedia:Picture tutorial|Wikipedia:Picture tutorial]] for more information. | ||
# Avoid referring to images as being on the left or right. Image placement is different for viewers of the mobile version of Wikipedia, and is meaningless to people having pages read to them by assistive software. Instead, use captions to identify images. | # Avoid referring to images as being on the left or right. Image placement is different for viewers of the mobile version of Wikipedia, and is meaningless to people having pages read to them by assistive software. Instead, use captions to identify images. | ||
= Animations, videos and audio = | |||
:''Further information: [[Wikipedia:Wikipedia:Media help|Wikipedia:Media help]], [[Wikipedia:Wikipedia:Creation and usage of media files|Wikipedia:Creation and usage of media files]]'' | |||
== Animations == | |||
To be accessible, an animation ([[GIF]] – Graphics Interchange Format) should either: | To be accessible, an animation ([[Wikipedia:GIF|GIF]] – Graphics Interchange Format) should either: | ||
* Not exceed a duration of five seconds (which results in making it a purely decorative element) | * Not exceed a duration of five seconds (which results in making it a purely decorative element), or | ||
* Be equipped with control functions (stop, pause, play) | * Be equipped with control functions (stop, pause, play) | ||
This requires GIFs with animations longer than five seconds to be converted to video (to learn how, see the tutorial [//commons.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#Converting_an_animated_GIF converting animated GIFs to Theora OGG]). | This requires GIFs with animations longer than five seconds to be converted to video (to learn how, see the tutorial [//commons.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#Converting_an_animated_GIF converting animated GIFs to Theora OGG]). | ||
In addition, animations '''''must not''''' produce more than three flashes in any one-second period. Content that flashes more than that limit is known to cause seizures. | In addition, animations '''''must not''''' produce more than three flashes in any one-second period. Content that flashes more than that limit is known to cause seizures. | ||
== Video == | |||
Subtitles can be added to video, in [[Timed Text]] format. There is a corresponding help page at [ | Subtitles can be added to video, in [[Wikipedia:Timed Text|Timed Text]] format. There is a corresponding help page at [https://commons.wikimedia.org/wiki/Commons:Video#Subtitles_and_closed_captioning WikiMedia 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 | There is a need for [[Wikipedia:Closed captions:closed captions]] for the hearing impaired. As of December 2016 this is not possible, but this feature could be added in the future. 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. Off-UniWiki guides should be consulted for how to create closed captions.<ref>Please see : [http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html A quick and basic reference for closed captions], [http://www.cab-acr.ca/english/social/captioning/captioning.pdf a detailed reference (PDF)] and [http://www.dcmp.org/captioningkey/index.html a list of best practices for closed captions].</ref> | ||
A text version of the video would also be needed for the blind, but as of | A text version of the video would also be needed for the blind, but as of December 2016 there is no convenient way to provide alt text for videos. | ||
== Audio == | |||
Subtitles for speech, lyrics, dialogue, etc. | Subtitles for speech, lyrics, dialogue, etc. can easily be added to audio files. The method is similar to that of the video: [https://commons.wikimedia.org/wiki/Commons:Video#Subtitles_and_closed_captioning WikiMedia Commons:Video#Subtitles and closed captioning]. | ||
= Styles and markup options = | |||
=== Best practice: Use Wikimarkup and CSS classes in preference to alternatives === | === 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. | In general, styles for tables and other block-level elements should be set using CSS classes, not with inline style attributes. It allows users with very specific needs to change the color schemes in their browser's style sheet. For example, a style sheet at [[Wikipedia:Wikipedia:Style sheets for visually impaired users|Wikipedia:Style sheets for visually impaired users]] provides higher contrast backgrounds for [[Wikipedia:WP:NAVBOX|navboxes]]. The problem is that when the default site-wide classes are overridden, it makes it far more difficult for an individual to choose his/her own theme. | ||
It also creates a greater degree of professionalism by ensuring a consistent appearance between articles and conformance to a style guide. | 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 [[ | Regarding accessibility, deviations from standard conventions may be tolerated [[UniWiki:Manual of Style/Accessibility#Color|so long as they are 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:WP:Colour contrast|color contrast]]. For instance, the infoboxes and [[Wikipedia:Template:The Simpsons|navigational templates]] relating to ''[[Wikipedia:The Simpsons|The Simpsons]]'' use a yellow colour scheme, to tie in with the dominant colour in the series. In this case, blue links on yellow provides enough colour contrast, and thus is accessible. | ||
In general, articles should use [[ | In general, articles should use [[Wikipedia:Help:Wikitext|Wikimarkup]] in preference to the limited set of [[Wikipedia:Help:HTML in wikitext|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 [[Wikipedia:Category:Semantic markup templates|semantic markup templates]] or elements for more meaningful differences. The {{tag|font|o}} element should also be avoided in article text to emphasise logical differences, not just visual ones.. 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 [[UniWiki:Manual of Style/Text formatting#How not to apply emphasis|not used in article text]]. | ||
=== Users with limited CSS or JavaScript support === | === Users with limited CSS or JavaScript support === | ||
{{see also|UniWiki:Manual of Style#Scrolling lists and collapsible content}} | |||
{{see also| | |||
UniWiki articles should be accessible to readers using browsers and devices that have limited or no support for [[Wikipedia:JavaScript|JavaScript]] or [[Wikipedia:Cascading Style Sheets|Cascading Style Sheets]]; remember that UniWiki content can be reused freely in ways we cannot predict as well as accessed directly via older browsers. At the same time, it is recognized 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. 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 IE in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions. | 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 IE in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions. | ||
== See also == | == See also == | ||
* [[Wikipedia:Wikipedia:Accessibility dos and don'ts|Wikipedia:Accessibility dos and don'ts]] | |||
* [[Wikipedia:Accessibility dos and don'ts | * [[Wikipedia:Wikipedia:Dyslexic readers|Wikipedia:Dyslexic readers]] | ||
* [[Wikipedia:Wikipedia:Make technical articles understandable|Wikipedia:Make technical articles understandable]] | |||
* [[ | * [[Wikipedia:Wikipedia:Using JAWS|Wikipedia:Using JAWS]] | ||
* [[Wikipedia:Make technical articles understandable]] | |||
* [[Wikipedia:Using JAWS | |||
== References == | == References == | ||
| Line 251: | Line 239: | ||
=== Specific === | === Specific === | ||
{{Reflist}} | {{Reflist}} | ||
== External links == | == External links == | ||
| Line 282: | Line 244: | ||
* [http://colorfilter.wickline.org/ Colorblind web page filter] | * [http://colorfilter.wickline.org/ Colorblind web page filter] | ||
* [http://www.w3.org/WAI/intro/components.php Essential Components of Web Accessibility], from WAI | * [http://www.w3.org/WAI/intro/components.php Essential Components of Web Accessibility], from WAI | ||
* [http://www.w3.org/WAI/intro/accessibility.php Introduction to Web Accessibility], from [[Web Accessibility Initiative|WAI]] | * [http://www.w3.org/WAI/intro/accessibility.php Introduction to Web Accessibility], from [[Wikipedia:Web Accessibility Initiative|WAI]] | ||
* [https://bugzilla.wikipedia.org/show_bug.cgi?id=367 MediaWiki bug 367: Markup accessibility issues (tracking)] | * [https://bugzilla.wikipedia.org/show_bug.cgi?id=367 MediaWiki bug 367: Markup accessibility issues (tracking)] | ||