Home
Flows
Components
Changelog
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.12

Home
/Flows
/Accessibility & Personalization
Description
Great products should fit for every person.

Patterns for Accessibility & Personalization

Because great products should fit for every person. Good interfaces allows people adjust the experience for different physical or cognitive requirements. This pattern usually combine checkboxes, forms and button components.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (71)
  • Tablet (1)
  • Mobile (14)
404. Sidebar Backdrop Menu

404. Sidebar Backdrop Menu

Desktop | Pathfinding | Accessibility | Decision Making | Web | English | Side Panel | Scrollbar | Toggle Field | Button | Image / Illustration | Fixed on Scroll | Filters | Animation

402. Transition: Zoom-to-Dock for Minimize

402. Transition: Zoom-to-Dock for Minimize

Desktop | Awareness | Accessibility | Decision Making | Apple OS | EspaƱol | Navbar | Drag & Drop Gesture | Animation | Pagination | Side Panel | Transition | Click Event | Browser Window

389. Text Edit Inline Input

389. Text Edit Inline Input

Desktop | Accessibility | Decision Making | Web | English | Text Input | Hypertext Links | Modal

388. Drag & Drop and Checkbox to Select Multiple Item

388. Drag & Drop and Checkbox to Select Multiple Item

Desktop | Accessibility | Feedback | Awareness | Decision Making | Web | EspaƱol | User Selection | Drag & Drop Gesture | Tooltip | Scrollbar | Checkbox

379. Dropdown Filters

379. Dropdown Filters

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Filters

360. Page Outline Menu

360. Page Outline Menu

Desktop | Pathfinding | Awareness | Accessibility | Onboarding | Web | English | Pagination | Anchor Scroll

362. Modal Blackout w/ Form & Animations

362. Modal Blackout w/ Form & Animations

Desktop | Accessibility | Apple OS | EspaƱol | Modal | Text Input | Transition

349. HubSpot - Toggle High Contrast

349. HubSpot - Toggle High Contrast

Desktop | Accessibility | Awareness | Web | English | Hypertext Links | Navbar

359. Toggle List/Grid View

359. Toggle List/Grid View

Desktop | Accessibility | Onboarding | Pathfinding | Web | EspaƱol | Tooltip | Hypertext Links

347. YouTube - Floating Progress Bar

347. YouTube - Floating Progress Bar

Desktop | Awareness | Accessibility | Feedback | Web | English | Side Panel | Accordion

342. Savee - Light/Dark Mode Switcher

342. Savee - Light/Dark Mode Switcher

Desktop | Accessibility | Pathfinding | Web | English | Checkbox | Tabs

341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

Desktop | Accessibility | Pathfinding | Web | English | Animation | Drag & Drop Gesture | Range Field

340. Asana - Zoom/Magnifier Over Image

340. Asana - Zoom/Magnifier Over Image

Desktop | Accessibility | Pathfinding | Web | English | Animation

346. Sidebar Menu With Collapsable Items (Show More)

346. Sidebar Menu With Collapsable Items (Show More)

Desktop | Pathfinding | Accessibility | Awareness | Web | English | Accordion | Navbar

345. Vertical Accordion for FAQs

345. Vertical Accordion for FAQs

Desktop | Pathfinding | Accessibility | Awareness | Web | EspaƱol | Accordion | Hypertext Links

343. Modal/Dialog Drag & Drop to Fixed Position

343. Modal/Dialog Drag & Drop to Fixed Position

Desktop | Accessibility | Pathfinding | Awareness | Web | EspaƱol | Drag & Drop Gesture | Modal | Side Panel | Alert Dialog

332. Drag & Drop to Create File from Web Image

332. Drag & Drop to Create File from Web Image

Desktop | Pathfinding | Accessibility | Awareness | Web | Apple OS | Drag & Drop Gesture | Image / Illustration | File OS | Modal | Click Event

330. PositivePsychology - Article User Feedback

330. PositivePsychology - Article User Feedback

Desktop | Accessibility | Feedback | Web | English

325. Drag & Drop Tag Colors to Slots

325. Drag & Drop Tag Colors to Slots

Desktop | Decision Making | Awareness | Accessibility | Apple OS | English | Drag & Drop Gesture | Color Marker | Checkbox | Tags

315. Signal - PIN Reminder

315. Signal - PIN Reminder

Desktop | Awareness | Accessibility | Apple OS | English | Text Input | Modal | Banner | Hypertext Links

312. Pocket - View Switcher

312. Pocket - View Switcher

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Navbar | Thumbnail | Toggle Field | Radio Button

306. Drag & Drop for Reordering List Items (Mouse)

306. Drag & Drop for Reordering List Items (Mouse)

Desktop | Awareness | Accessibility | Web | English | Drag & Drop Gesture | Filters | List Items | Modal | Checkbox | Notion

302. Theme Switcher in Side-drawer

302. Theme Switcher in Side-drawer

Desktop | Accessibility | Pathfinding | Web | EspaƱol | Side Panel | Transition | Image / Illustration | Click Event | Google

293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

Desktop | Awareness | Pathfinding | Accessibility | Web | English | EspaƱol | Side Panel | Transition | Click Event | Navbar | Google | Gmail

288. Vimeo - Topbar Language Switching

288. Vimeo - Topbar Language Switching

Desktop | Awareness | Accessibility | Web | English | EspaƱol | Vimeo

282. Telegram - Chat Setup Wizard

282. Telegram - Chat Setup Wizard

Desktop | Onboarding | Accessibility | Pathfinding | Apple OS | English | Telegram

280. Slack - Workspace Creation Wizard

280. Slack - Workspace Creation Wizard

Desktop | Accessibility | Onboarding | Apple OS | EspaƱol | Slack

279. Collapsable Layout Sidebars

279. Collapsable Layout Sidebars

Desktop | Pathfinding | Accessibility | Apple OS | macOS | EspaƱol | Toolbar | Navbar | Side Panel | Click Event | Transition | Avatar | Chat | Drag & Drop Gesture | List Items | Button | Close Overlay | Slack

278. Search Menu Dropdown from Input Text

278. Search Menu Dropdown from Input Text

Desktop | Pathfinding | Accessibility | Web | English | Google | Google Analytics

277. Horizontal Card Slider with Actions

277. Horizontal Card Slider with Actions

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Linkedin

265. Youtube - Hidden Options Menu (Dots)

265. Youtube - Hidden Options Menu (Dots)

Desktop | Pathfinding | Accessibility | Web | English | YouTube | Google

258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

Desktop | Accessibility | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace

256. Modal Blackout w/ Forms & Steps

256. Modal Blackout w/ Forms & Steps

Desktop | Onboarding | Decision Making | Accessibility | Web | EspaƱol | English | Modal | Button | Steps | Dropdown Menu | Text Input | Image / Illustration | Close Overlay | Facebook

243. GIPHY - Trim Video Slicers

243. GIPHY - Trim Video Slicers

Desktop | Decision Making | Awareness | Accessibility | Web | English | Animation | User Selection | Drag & Drop Gesture | GIPHY

254. Toggle/Hide Sidebar Menu (Mouse)

254. Toggle/Hide Sidebar Menu (Mouse)

Desktop | Pathfinding | Accessibility | Web | English | EspaƱol | Toggle Field | Active State | Side Panel | Transition | Click Event | Notion

253. Youtube - Table Row Selector

253. Youtube - Table Row Selector

Desktop | Accessibility | Pathfinding | Awareness | Web | English | User Selection | Text Input | Fixed on Scroll | Thumbnail | YouTube | Google

228. Notification Bell Status

228. Notification Bell Status

Desktop | Accessibility | Web | English | Hypertext Links | Dropdown Menu | Empty State | User Selection | Avatar | Animation | YouTube | Google

236. Horizontal Graph with Time Ranges

236. Horizontal Graph with Time Ranges

Desktop | Pathfinding | Accessibility | Web | English | Google | Google Analytics

226. Youtube Studio - Image Multi-zone Crop

226. Youtube Studio - Image Multi-zone Crop

Desktop | Accessibility | Web | EspaƱol | YouTube | Google

225. Cloudflare - Multiple Graphs by Time Ranges

225. Cloudflare - Multiple Graphs by Time Ranges

Desktop | Pathfinding | Accessibility | Web | English | Cloudflare

222. Cloudflare - Toggle Light/Dark Theme

222. Cloudflare - Toggle Light/Dark Theme

Desktop | Accessibility | Web | English | Cloudflare

228. Open in New Window (Doble Click)

228. Open in New Window (Doble Click)

Desktop | Accessibility | Pathfinding | Apple OS | EspaƱol | Doble Click Event | Browser Window | Drag & Drop Gesture | Apple | Apple Notes

227. Secondary Sidebar Toggle (Mouse)

227. Secondary Sidebar Toggle (Mouse)

Desktop | Tablet | Accessibility | Pathfinding | Apple OS | EspaƱol | Click Event | Transition | Side Panel | Toggle Field | Active State | Apple | Apple Notes

218. Apple Keynote - Template Format Selection

218. Apple Keynote - Template Format Selection

Desktop | Decision Making | Accessibility | Apple OS | EspaƱol | Apple | Apple Keynote

214. Netflix - Information Toggle

214. Netflix - Information Toggle

Desktop | Accessibility | Web | EspaƱol | Dropdown Menu | Video | Thumbnail | Navbar | Button | Toggle Field | Netflix

205. Full Screen Widget Customization

205. Full Screen Widget Customization

Desktop | Accessibility | Apple OS | macOS | English | Cards | Bento Grid | Long Click Event | Click Event | Close Overlay | Apple

54. Apple Safari - Browser Reader Mode

54. Apple Safari - Browser Reader Mode

Desktop | Accessibility | Apple OS | Web | Apple | Apple Safari

134. Save for Reading Later

134. Save for Reading Later

Desktop | Mobile | Accessibility | Web | English

138. Read Modes

138. Read Modes

Desktop | Accessibility | Web | EspaƱol

91. Settings for Account Privacy

91. Settings for Account Privacy

Desktop | Accessibility | Web | English | Twitter

189. Feature Preview on Menu

189. Feature Preview on Menu

Desktop | Awareness | Accessibility | Web | English | Dropdown Menu | Notification Badge

7. sitepoint - Accessibility Adjustments

7. sitepoint - Accessibility Adjustments

Desktop | Accessibility | Web | English

157. Webflow - Magnifying Glass on Images

157. Webflow - Magnifying Glass on Images

Desktop | Accessibility | Web | English | Webflow

150. Split OS Screens

150. Split OS Screens

Desktop | Accessibility | Web | English | Drag & Drop Gesture | Long Click Event | Browser Window | Navbar | Side Panel | Active State | Live State

138. Widget Customization Sidebar (2-pane)

138. Widget Customization Sidebar (2-pane)

Desktop | Accessibility | Apple OS | macOS | English | Side Panel | Cards | Long Click Event | Drag & Drop Gesture | Close Overlay | Tabs | Transition | Toolbar | Apple

182. Static Tooltip for Text Formatting

182. Static Tooltip for Text Formatting

Desktop | Accessibility | Web | English | Google | Google Sites

29. About.me - Wizard Generation Profile

29. About.me - Wizard Generation Profile

Desktop | Onboarding | Accessibility | Web | English

115. Browser Background Customization

115. Browser Background Customization

Desktop | Accessibility | Apple OS | EspaƱol | Apple | Apple Safari

176. Wordpress.com - Natural Inputs with Suggestions

176. Wordpress.com - Natural Inputs with Suggestions

Desktop | Decision Making | Accessibility | Awareness | Pathfinding | Web | English | Wordpress

129. PDF Show & Download

129. PDF Show & Download

Desktop | Accessibility | Decision Making | Web | English

86. Table Column Slicer

86. Table Column Slicer

Desktop | Accessibility | Decision Making | Web | English

76. List Widget Customization

76. List Widget Customization

Desktop | Accessibility | Apple OS | macOS | EspaƱol | List Items | Color Marker | Side Panel

57. IDF - Encouraging Newsletter Sign-up

57. IDF - Encouraging Newsletter Sign-up

Desktop | Decision Making | Accessibility | Web | English

63. Window Maximize Options (on Right Click)

63. Window Maximize Options (on Right Click)

Desktop | Accessibility | Decision Making | Web | English | Right Click Event | Dropdown Menu | Color Marker | Image / Illustration | Browser Window

119. PrestaShop - Site Cookie Management

119. PrestaShop - Site Cookie Management

Desktop | Accessibility | Consent | Web | EspaƱol

54. Modal for Language & Region Picker

54. Modal for Language & Region Picker

Desktop | Accessibility | Web | English | Google

156. Figma - Keyboard Navigated Menu

156. Figma - Keyboard Navigated Menu

Desktop | Pathfinding | Accessibility | Windows | Apple OS | Web | English | View | Original source on Twitter | Figma

21. Advanced Color Picking

21. Advanced Color Picking

Desktop | Accessibility | Apple OS | macOS | EspaƱol | Tabs | Color Marker | Progress State | Dropdown Menu | Numeric Input | Range Field | Drag & Drop Gesture | User Selection

42. Modal for Tags Editing

42. Modal for Tags Editing

Desktop | Accessibility | Awareness | Web | English | Google | Google Keep

160. Pocket - Content Highlighting

160. Pocket - Content Highlighting

Desktop | Accessibility | Pathfinding | Web | EspaƱol

188. Trello - Color shapes for Colour-blind

188. Trello - Color shapes for Colour-blind

Desktop | Accessibility | Web | EspaƱol | Modal | Tooltip | Hypertext Links | Text Input | Trello

Ā 
Ā 
Ā