These guidelines outline a systemic approach to creating products that lower barriers to participation, treating accessibility as an attribute of the experience rather than a separate feature, while also addressing the complex interplay of cultural, linguistic, and technical factors that shape how users interact with digital products.
All humans are growing, changing, and adapting to the world around them every day. We want our designs to reflect that diversity. Every decision we make can raise or lower barriers to participation in society. It's our collective responsibility to lower these barriers through inclusive products, services, environments, and experiences.
A disability is not an attribute of a person. It is something that happens at the points of interaction between people and society. These interactions can create physical, cognitive, and social exclusion if they are not designed to create utility and elegance for everyone. It's important to keep in mind that not all disabilities are permanent. For example, a broken arm can temporarily limit the ability to use a keyboard and high context situations can temporarily affect sensory and cognitive abilities.
Accessibility
Disabilities aren't inherent personal characteristics but rather emerge from the interactions between people and their environment. When these interactions aren't thoughtfully designed, they can lead to physical, cognitive, or social exclusion. Not all disabilities are permanent. A broken hand may limit the ability to use a mouse or keyboard for a period of time. Glare from the sun, a loud environment, contextual changes such as driving or walking can all cause accessibility issues.
Inclusive design is a method used to help make products more accessible, but accessibility is an attribute of the experience, measured against specific standards outlined by the World Wide Web Consortium (W3C). The Web Content Accessibility Guidelines (WCAG) are organized into four main categories:
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Operable
User interface components and navigation must be operable.
Understandable
Information and the operation of the user interface must be understandable.
Robust
Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
Internationalization
Internationalization is a fundamental consideration in the design and development process to include users that may vary in culture, region, or language. It can help avoid awkward and expensive re-engineering when the product is introduced to a new market. Internationalization, much like inclusivity, is a way of thinking and methods to facilitate specific requirements. The product should be designed and built with the anticipation that the presentation can change without affecting the underlying architecture.
Localization
Localization refers to the adaptation of content to specific cultural nuances of another region. This can help establish credibility and familiarity as well as enhance the user experience and improve usability. Some specific considerations are:
Text
Design for 30-50% text growth; German and Finnish translations often require significantly more space than English
Allow for shorter text; some languages like Chinese can convey the same meaning in fewer characters
Increase line spacing for languages with diacritics (accents) and complex scripts to prevent character overlap
Ensure fonts include character sets for target languages; web fonts may need fallbacks for unsupported scripts
Support right-to-left (RTL) languages like Arabic and Hebrew; mirror layouts and reverse reading patterns
Accommodate languages like Japanese and Chinese that can be written vertically in traditional contexts
Layout
Use elastic layouts that adapt to varying text lengths without breaking design integrity
Create buttons that expand with longer text while maintaining minimum touch targets
Allow input fields to accommodate longer labels and placeholder text in various languages
Design expandable navigation that handles varying menu item lengths
Build cards with flexible heights to accommodate different content lengths
Implement responsive grids that reflow content when text expansion affects column widths
Content Structure
Use culturally neutral icons; avoid hand gestures, religious symbols, or culture-specific imagery
Plan for text overlay replacement in images and graphics; consider text-free alternatives
Research color symbolism; red means danger in Western cultures but luck in Chinese culture
Support different decimal separators, thousands separators, and currency formatting
Accommodate various date formats (MM/DD/YYYY vs DD/MM/YYYY) and calendar systems
Design flexible address forms; postal codes vary by country and some regions don't use them
User Interface Elements
Account for different alphabetical sorting; some languages sort accented characters differently
Consider virtual keyboards, IME (Input Method Editors) for Asian languages, and character composition
Ensure placeholder text is translatable and culturally appropriate
Design space for longer error messages and culturally appropriate tone
Use universal loading indicators rather than text-based progress messages
Cultural Considerations
Accommodate different visual scanning patterns; Western F-pattern vs other cultural reading behaviors
Consider cultural taboos, dress codes, gender representation, and inclusive imagery
Allow for formal vs informal language variations; some cultures require different levels of politeness
Design for varying privacy and data sharing comfort levels across cultures
Support different phone number formats, social media preferences, and communication channels
Account for different work week patterns, holidays, and seasonal considerations
Technical Implementation
Use UTF-8 encoding to support all international characters and emoji
Plan for language/region URL patterns (subdirectories, subdomains, or parameters)
Ensure database fields can store variable-length international text
Implement smart truncation that doesn't break words or character sequences
Structure APIs to deliver localized content efficiently
Organize locale-specific assets (images, videos, documents) systematically
Accessibility & Compliance
Ensure screen readers properly handle different languages and character sets
Support various keyboard layouts and input methods across cultures
Design for different privacy laws, accessibility requirements, and content regulations
Provide clear, accessible language selection with native language names
Use proper lang attributes and ARIA labels for multilingual content
Consider varying literacy levels and technological familiarity across target markets
Component States
Each component, view, and mode has eleven potential states, based on activity and status. It's important to consider every applicable state for components as well as how they transition from one state to the next.
Before
The component exists but hasn't started.
Loading
Information is being acquired or processed or the component or item is being built.
Empty
The component exists but has no content to display.
Error
Something has gone wrong and the component cannot function as expected.
Success
The component has completed its task successfully.
Disabled
The component exists but cannot be interacted with.
Focus
The component is currently selected for interaction.
Hover
The user's cursor is positioned over the component.
Active
The component is being interacted with.
Selected
The component has been chosen from a group of options.
Completed
The component has finished its task and is in its final state.