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.
389. Text Edit Inline Input
389. Text Edit Inline Input
Text InputHypertext LinksModal
388. Multiple Item Selection Drag & Drop
388. Multiple Item Selection Drag & Drop
User SelectionDrag & Drop GestureTooltipScrollbarCheckbox
379. Dropdown Filters
379. Dropdown Filters
Filters
360. Page Outline Menu
360. Page Outline Menu
PaginationAnchor Scroll
362. Modal Blackout with Form & Animations
362. Modal Blackout with Form & Animations
ModalText InputTransition
349. HubSpot - Toggle High Contrast
349. HubSpot - Toggle High Contrast
Hypertext LinksNavbar
359. Toggle List/Grid View 
359. Toggle List/Grid View
TooltipHypertext Links
347. YouTube - Floating Progress Bar
347. YouTube - Floating Progress Bar
Side PanelAccordion
342. Savee - Light/Dark Mode Switcher 
342. Savee - Light/Dark Mode Switcher
CheckboxTabs
341. Image Grid Customization Sliders
341. Image Grid Customization Sliders
AnimationDrag & Drop GestureRange Field
340. Asana - Zoom/Magnifier Over Image
340. Asana - Zoom/Magnifier Over Image
Animation
346. Toggl - Sidebar Menu Show More
346. Toggl - Sidebar Menu Show More
AccordionNavbar
345. Vertical Accordion for FAQs
345. Vertical Accordion for FAQs
AccordionHypertext Links
343. Modal Drag & Drop to Fixed Position
343. Modal Drag & Drop to Fixed Position
Drag & Drop GestureModalSide Panel
332. Apple - Drag&Drop Browser File to Desktop
332. Apple - Drag&Drop Browser File to Desktop
Drag & Drop GestureImage / IllustrationFile OSModalClick Event
330. PositivePsychology - Article User Feedback
330. PositivePsychology - Article User Feedback
325. Apple - Drag & Drop Slots
325. Apple - Drag & Drop Slots
315. Signal - PIN Reminder
315. Signal - PIN Reminder
Text InputModalBannerHypertext Links
312. Pocket - View Switcher
312. Pocket - View Switcher
NavbarThumbnailToggle FieldRadio Button
306. Drag & Drop for Reordering Items
306. Drag & Drop for Reordering Items
Drag & Drop GestureFilters
302. Theme Switcher in Side-drawer
302. Theme Switcher in Side-drawer
Side PanelTransitionImage / IllustrationClick Event
293. Collapsable Sidebar Menu
293. Collapsable Sidebar Menu
Side PanelTransitionClick EventNavbar
288. Vimeo - Topbar Language Switching
288. Vimeo - Topbar Language Switching
282. Telegram - Chat Setup Wizard
282. Telegram - Chat Setup Wizard
280. Slack - Workspace Creation Wizard
280. Slack - Workspace Creation Wizard
271. Slack - Collapsable Sidebars
271. Slack - Collapsable Sidebars
278. Search Menu Dropdown from Input Text
278. Search Menu Dropdown from Input Text
277. Horizontal Card Slider with Actions
277. Horizontal Card Slider with Actions
258. Squarespace - Adaptable Viewport Size
258. Squarespace - Adaptable Viewport Size
Side PanelHypertext LinksAnimation
256. Modal Blackout with Steps & Forms
256. Modal Blackout with Steps & Forms
243. GIPHY - Trim Video Slicers
243. GIPHY - Trim Video Slicers
AnimationUser SelectionDrag & Drop Gesture
254. Notion - Side Menu Toggle
254. Notion - Side Menu Toggle
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
User SelectionText InputFixed on ScrollThumbnail
228. Notification Bell Status
228. Notification Bell Status
Hypertext LinksDropdown MenuEmpty StateUser SelectionAvatarAnimation
236. Horizontal Graph with Time Ranges
236. Horizontal Graph with Time Ranges
226. Youtube Studio - Image Multi-zone Crop 
226. Youtube Studio - Image Multi-zone Crop
225. Cloudflare - Multiple Graphs by Time Ranges
225. Cloudflare - Multiple Graphs by Time Ranges
222. Cloudflare - Toggle Light/Dark Theme
222. Cloudflare - Toggle Light/Dark Theme
220. Apple - Multi-window App
220. Apple - Multi-window App
219. Apple - Adjacent Sidebar Toggle
219. Apple - Adjacent Sidebar Toggle
218. Apple Keynote - Template Format Selection
218. Apple Keynote - Template Format Selection
214. Netflix - Information Toggle
214. Netflix - Information Toggle
Dropdown MenuVideoThumbnailNavbarButtonToggle Field
183. Apple MacOS - Full Screen Widget Customization
183. Apple MacOS - Full Screen Widget Customization
54. Apple Safari - Browser Reader Mode_02.31.50_p._m..png&w=1920&q=75)
54. Apple Safari - Browser Reader Mode
134. Save for Reading Later_12.09.49_p._m..png&w=1920&q=75)
134. Save for Reading Later
138. Read Modes_03.46.23_p._m..png&w=1920&q=75)
138. Read Modes
91. Settings for Account Privacy_12.08.18_a._m..png&w=1920&q=75)
91. Settings for Account Privacy
189. Feature Preview on Menu_09.05.58_p._m..png&w=1920&q=75)
189. Feature Preview on Menu
Dropdown MenuNotification Badge
7. sitepoint - Accessibility Adjustments
7. sitepoint - Accessibility Adjustments
157. Webflow - Magnifying Glass on Images
157. Webflow - Magnifying Glass on Images
11. Apple MacOS - Split OS Screens
11. Apple MacOS - Split OS Screens
167. Apple MacOS - 2-pane Widget Customization
167. Apple MacOS - 2-pane Widget Customization
182. Static Tooltip for Text Formatting
182. Static Tooltip for Text Formatting
29. About.me - Wizard Generation Profile_01.47.59_p._m..png&w=1920&q=75)
29. About.me - Wizard Generation Profile
186. Apple Safari - Browser Background Customization_15.51.37/w=1920,quality=90,fit=scale-down)
186. Apple Safari - Browser Background Customization
176. Wordpress.com - Natural Inputs with Suggestions
176. Wordpress.com - Natural Inputs with Suggestions
129. PDF Show & Download_21.22.04/w=1920,quality=90,fit=scale-down)
129. PDF Show & Download
86. Table Column Slicer
86. Table Column Slicer
202. Apple Reminders - List Widget Customization_12.18.26/w=1920,quality=90,fit=scale-down)
202. Apple Reminders - List Widget Customization
57. IDF - Encouraging Newsletter Sign-up_01.22.20_a._m..png&w=1920&q=75)
57. IDF - Encouraging Newsletter Sign-up
24. Window Maximize Options
24. Window Maximize Options
119. PrestaShop - Site Cookie Management_05.22.43_p._m..png&w=1920&q=75)
119. PrestaShop - Site Cookie Management
54. Modal for Language & Region Picker_16.58.20/w=1920,quality=90,fit=scale-down)
54. Modal for Language & Region Picker
156. Figma - Keyboard Navigated Menu
156. Figma - Keyboard Navigated Menu
21. Apple MacOS - Advanced Color Picking_13.57.49/w=1920,quality=90,fit=scale-down)
21. Apple MacOS - Advanced Color Picking
42. Modal for Tags Editing_02.04.21_p._m..png&w=1920&q=75)
42. Modal for Tags Editing
160. Pocket - Content Highlighting_13.23.22/w=1920,quality=90,fit=scale-down)
160. Pocket - Content Highlighting
188. Trello - Color shapes for Colour-blind
188. Trello - Color shapes for Colour-blind
ModalTooltipHypertext LinksText Input