This is for everyone – Accessibility

What and why accessibility?

Web accessibility methods ensure that people with impairments or disabilities can perceive, understand, navigate, interact with, and contribute to the products we all create. Just as importantly, many methods improve general usability, resulting in easier-to-use interfaces that are Perceivable, Operable, Understandable and Robust for everyone.

These are the four principles of accessibility from the Web Content Accessibility Guidelines (WCAG) standard^[3], version 2.0 onwards. They specify the success criteria for achieved levels of conformance – A, AA and AAA.

In the Wikimedia Design Style Guide and its resources we aim for satisfying all level AA success criteria. Some AAA criteria are not possible to be satisfied for entire websites as they are opposing each other. We also try to balance requirements that enable the widest possible audience under reasonable operation for our non-profit organization. Further, highly specific user group needs might be better covered by specific software products than by the Foundation itself.

Note, that our principles mainly focus on designing for:

• Visual impairment needs
• Motor impairment needs

Other categories like speech impairments don't apply in our graphical user-interface focus; while hearing and cognitive impairments are to be covered on a content level. See for example Simple Wikipedia (English)^[4] for being inclusive to users with learning difficulties.

Accessible by design

Colors and color palette – Use of color

Visual, motor

All colors of our palette feature level AA contrast ratio. We're following color-related accessibility rules:

• Never use color as the only means of providing information or requesting an action.
• The combinations of text and its background color must not fall below the WCAG recommended threshold ratio of 4.5:1 for standard text and 3:1 for larger text.

Fonts and typography – Legible and zoomable content

Visual

Choices of typeface, size, style, and spacing of text make it well readable in general and are a must for some to be legible. Our choices advise on minimum font sizes. Those are able to be overridden by user browser preferences – setting fonts in relative CSS units em or rem to provide text zooming when needed.

Touch and keyboard interaction – Ensure alternative input methods

Motor

Our components are designed to support different interaction mechanisms, including touch, pointing devices and keyboard.

When touch screens are the main interface, our components' design ensures minimum touch target sizes for happy human fingers. Additionally, users with motor impairments profit from minimum target sizes for pointer inputs too.
Our components feature a strong outline to indicate keyboard focus state. This enables keyboard-bound users to easily navigate the interface.

Icons and images – Provide text alternatives

Visual

When implementing icons and images, you have to define a textual description to enable assistive technology to interpret it, as long as they are not solely used as decorative elements:

Icons have to be provided with SVG title attributes or with text nodes visible only for screen readers when used in icon-only buttons.
Images have to provide alt attributes with alternative text.
title attributes are part of the icons in WikimediaUI icon collection, and code in WikimediaUI theme of user-interface library OOUI.

Markup – Follow standards

Visual, motor

Markup for our components is provided in semantic HTML and follows Web Accessibility Initiative's ARIA Authoring practices standard^{[5, 6]}. This lets assistive technology software identify them correctly.
Additionally, it improves machine readability, resulting in better search optimization or alternative content delivery, for example in popular voice interfaces.

See also

Please have a look at further documentation for developers in Wikimedia projects and English Wikipedia's Manual of style for accessibility on content.