Wikipedia:Accessibility

From Wikipedia, the free encyclopedia

This guideline is a part of the English Wikipedia's Manual of Style. Editors should follow it, except where common sense and the occasional exception will improve an article. Before editing this page, please make sure that your revision reflects consensus.

Shortcuts:
WP:ACCESS
WP:ACCESSIBILITY

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 the following guidelines are easier to read and edit by those Wikipedians with and without disabilities.

[edit] Article structure

[edit] Lead section

The lead section may contain optional elements presented in the following order: disambiguation links (dablinks), maintenance tags, infoboxes, images, navigational boxes (navigational templates), introductory text, and table of contents, moving to the heading of the first section.

[edit] Headings

[edit] Section structure

<!-- CORRECT CODE -->
== Foo bars ==
{{main|Foo bar}}
{{cleanup-section}}

[[Image:...|Typical Foo bar]]

A '''foo bar''' ...

[edit] Text

[edit] Links

[edit] Color

See Wikipedia:Colours#Using colours in articles

[edit] Lists

Do not separate list items by more than one line-break. If list items are separated by more than one line break, the HTML list tags will be ended. For example:

#One is a good number.
#Two is a better number.

#Three is the best number in the world.

#But the number four should not be mentioned at all costs.

appears as:

The same applies to unordered lists (using * instead of #).

[edit] Horizontal lists

For lists running across the page, the template {{flatlist}} and its partner {{endflatlist}} are available, to improve accessibility and semantic meaningfulness by marking up what is clearly a list, as such, rather than characters which are read out (e.g. "one dot two dot three dot...") by the kind of assistive software used by, for example, people who are blind. Alternatively, in templates and the like, such lists may be styled with the class "horizontal".

[edit] 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.

[edit] Data tables

{| 
|+ [caption text]
|-
! [column header 1] !! [column header 2] !! [column header 3]
|-
! [row header 1]
| [normal cell 1,2] || [normal cell 1,3]
|-
! [row header 2]
| [normal cell 2,2] || [normal cell 2,3]
…
|}

Caption ( |+ )

A caption is a table's title, describing its nature [1].

Row & column headers ( ! )

Like the caption, these help present the information in a logical structure to visitors. They can have the headers read first, and then navigate the related data [2].

Voice browsers might read aloud this data table in the following order [3]:

Caption: [caption text]

[column header 1]: [row header 1], [column header 2]: [cell 1,2], [column header 3]: [cell 1,3]

[column header 1]: [row header 2], [column header 2]: [cell 2,2], [column header 3]: [cell 2,3]

…

Note that each column header is repeated when reading every row, so an abbreviation could be added to long headers using the abbr="…" attribute, for example:

{|
|+ [caption text]
|-
! abbr="Wikipedian" | Wikipedia editor
! abbr="Edits"      | Number of edits
! Last edit
! abbr="Donations"  | Donations (US$)
|-
…

In this example all column headers have an abbreviation except the column with the date of the last edit, which is short enough.

[edit] Layout tables

Some navigation, series, and info boxes are made using tables.

Avoid using tables for layout purposes only. The best option is to use HTML's <div> blocks and style attributes because they provide flexibility. For example, see {{Dynamic navigation box}}.

For simple layouts tables can be an option. Especially if the only point of the table is to get a floating effect, then align="right" etc. will work with some browsers not supporting CSS at all. This is in fact a verbose approximation of <div> plus CSS, and not the design sin known as (nested) "table layout".

However, to avoid accessibility barriers, when using tables for layout purposes don't use any caption, row, or column headers, and also no summary attribute. These structural table elements should be used only for data tables. Don't use structural elements for presentation purposes, use style sheets. For Wiki table markup this means to avoid "!" (= <th> in XHTML) in such cases:

{| class="toccolours" width="94%"
| align="center" bgcolor="#ccccff" | '''Title'''
|-
| [normal cell] || [normal cell]
|-
| [normal cell] || [normal cell]
|}

For example, see {{NavigationBox}}

[edit] Other languages

Main article: Template:Lang/doc#Rationale

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

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

which renders as

Assemblée nationale.

[edit] Infoboxes

[edit] Images

For more detail see Wikipedia:Manual of Style#Images

For example, do not use:

=== Section 1b ===
[[Image:Image relating to section 1b.jpg|frame|left|Caption.]]
First paragraph of section 1b.

[edit] Style and markup

[edit] Keyboard shortcuts

For more detail see Wikipedia:Keyboard shortcuts

Numerous keyboard shortcuts for common Wikipedia tasks exist by default. They can be disabled.

[edit] See also

[edit] References

[edit] Notes

[edit] External links