Accessible page

Page in progress

We’re currently working on this page to bring you the best possible experience.

Note that you can contribute by opening a pull request or an issue if something is either wrong or missing. Thanks for your help !

Thank you for your understanding! 🌸

Figma

⏳ To do

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Comment

Create the accessible page component in Figma

An accessible page is a webpage that is designed and developed to be easily usable with one hand on mobile devices.

It ensures that interactive elements are within reach of the thumb, providing a seamless and efficient user experience. Additionally, it adheres to accessibility standards, making content perceivable, operable, understandable, and robust for users with various abilities and disabilities.

This includes features like keyboard navigation, screen reader compatibility, sufficient color contrast, and alternative text for images, ensuring inclusivity and usability for all users.

Note

These areas are where interactive elements like buttons, links, and navigation controls should ideally be placed to enhance usability for one-handed use.

Conversely, the top corners and edges of the screen are harder to reach, especially on larger devices, and should be reserved for less frequently used functions or information that doesn’t require immediate action.

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Properties

Status	Name	Type	Default	Required	Description
🔭	image	string		❌	The header’s image
🔭	color	string		❌	Color of the header
🔭	icon	string		❌	The icon which illustrate the page
🔭	title	string		✅	The title of the page

Examples

Alternative

No alternative.