Touch-Friendly Interface Design

1/* Apple iOS Guidelines: 44pt minimum */
2.touch-target {
3    min-width: 44px;
4    min-height: 44px;
5    padding: 12px;
6    margin: 8px;
7}
8
9/* Google Material Design: 48dp minimum */
10.material-touch-target {
11    min-width: 48px;
12    min-height: 48px;
13    padding: 16px;
14    margin: 8px;
15}
16
17/* Microsoft: 34px minimum, 40px recommended */
18.windows-touch-target {
19    min-width: 40px;
20    min-height: 40px;
21    padding: 10px;
22    margin: 6px;
23}
24
25/* Accessible touch targets for all users */
26.accessible-touch-target {
27    min-width: 48px;
28    min-height: 48px;
29    position: relative;
30    display: inline-flex;
31    align-items: center;
32    justify-content: center;
33    cursor: pointer;
34    user-select: none;
35    -webkit-tap-highlight-color: transparent;
36}

1/* Expandable touch areas using pseudo-elements */
2.expandable-touch {
3    position: relative;
4    display: inline-block;
5    padding: 8px 12px;
6}
7
8.expandable-touch::after {
9    content: '';
10    position: absolute;
11    top: -10px;
12    left: -10px;
13    right: -10px;
14    bottom: -10px;
15    min-width: 44px;
16    min-height: 44px;
17    background: transparent;
18    border-radius: inherit;
19}
20
21/* Icon buttons with adequate touch areas */
22.icon-button {
23    width: 24px;
24    height: 24px;
25    background: none;
26    border: none;
27    cursor: pointer;
28    position: relative;
29    padding: 12px; /* Creates 48px total touch area */
30    border-radius: 50%;
31    transition: background-color 0.2s ease;
32}
33
34.icon-button:hover,
35.icon-button:focus {
36    background-color: rgba(0, 0, 0, 0.04);
37    outline: 2px solid #007AFF;
38    outline-offset: 2px;
39}
40
41.icon-button:active {
42    background-color: rgba(0, 0, 0, 0.08);
43    transform: scale(0.95);
44}
45
46/* Touch-friendly form controls */
47.touch-input {
48    min-height: 48px;
49    padding: 12px 16px;
50    border: 2px solid #E5E5E5;
51    border-radius: 8px;
52    font-size: 16px; /* Prevents zoom on iOS */
53    transition: border-color 0.2s ease;
54}
55
56.touch-input:focus {
57    border-color: #007AFF;
58    outline: none;
59    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
60}
61
62/* Touch-friendly checkboxes and radio buttons */
63.touch-checkbox {
64    position: relative;
65    display: inline-flex;
66    align-items: center;
67    cursor: pointer;
68    padding: 8px;
69    margin: 4px;
70    min-width: 48px;
71    min-height: 48px;
72}
73
74.touch-checkbox input[type="checkbox"] {
75    position: absolute;
76    opacity: 0;
77    width: 100%;
78    height: 100%;
79    margin: 0;
80    cursor: pointer;
81}
82
83.touch-checkbox .checkmark {
84    width: 20px;
85    height: 20px;
86    border: 2px solid #007AFF;
87    border-radius: 4px;
88    margin-right: 12px;
89    position: relative;
90    transition: all 0.2s ease;
91}
92
93.touch-checkbox input:checked + .checkmark {
94    background-color: #007AFF;
95}
96
97.touch-checkbox input:checked + .checkmark::after {
98    content: '✓';
99    position: absolute;
100    color: white;
101    font-size: 14px;
102    top: -2px;
103    left: 2px;
104}
105
106.touch-checkbox:hover .checkmark {
107    border-color: #0056CC;
108}
109
110.touch-checkbox input:focus + .checkmark {
111    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
112}

1/* Base touch targets for mobile */
2.responsive-button {
3    min-width: 44px;
4    min-height: 44px;
5    padding: 12px 16px;
6    border-radius: 8px;
7    font-size: 16px;
8    border: none;
9    cursor: pointer;
10    transition: all 0.2s ease;
11}
12
13/* Larger targets for smaller screens */
14@media (max-width: 480px) {
15    .responsive-button {
16        min-width: 48px;
17        min-height: 48px;
18        padding: 14px 20px;
19        font-size: 18px;
20    }
21}
22
23/* Adjust for tablet landscape */
24@media (min-width: 768px) and (orientation: landscape) {
25    .responsive-button {
26        min-width: 40px;
27        min-height: 40px;
28        padding: 10px 14px;
29        font-size: 15px;
30    }
31}
32
33/* Desktop hover states */
34@media (hover: hover) {
35    .responsive-button:hover {
36        transform: translateY(-1px);
37        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
38    }
39}
40
41/* High-DPI display adjustments */
42@media (-webkit-min-device-pixel-ratio: 2) {
43    .responsive-button {
44        border-width: 0.5px;
45    }
46}

1class TouchGestureManager {
2    constructor(element) {
3        this.element = element;
4        this.startPoint = { x: 0, y: 0 };
5        this.endPoint = { x: 0, y: 0 };
6        this.startTime = 0;
7        this.endTime = 0;
8        this.threshold = {
9            distance: 50,  // Minimum distance for swipe
10            time: 300      // Maximum time for tap
11        };
12        
13        this.init();
14    }
15    
16    init() {
17        // Touch events (mobile)
18        this.element.addEventListener('touchstart', (e) => this.handleStart(e), { passive: false });
19        this.element.addEventListener('touchmove', (e) => this.handleMove(e), { passive: false });
20        this.element.addEventListener('touchend', (e) => this.handleEnd(e), { passive: false });
21        
22        // Pointer events (universal)
23        this.element.addEventListener('pointerdown', (e) => this.handleStart(e));
24        this.element.addEventListener('pointermove', (e) => this.handleMove(e));
25        this.element.addEventListener('pointerup', (e) => this.handleEnd(e));
26        
27        // Mouse events (desktop fallback)
28        this.element.addEventListener('mousedown', (e) => this.handleStart(e));
29        this.element.addEventListener('mousemove', (e) => this.handleMove(e));
30        this.element.addEventListener('mouseup', (e) => this.handleEnd(e));
31    }
32    
33    handleStart(e) {
34        const point = this.getEventPoint(e);
35        this.startPoint = point;
36        this.startTime = Date.now();
37        
38        this.element.classList.add('touching');
39        this.onTouchStart && this.onTouchStart(point);
40    }
41    
42    handleMove(e) {
43        const point = this.getEventPoint(e);
44        const deltaX = point.x - this.startPoint.x;
45        const deltaY = point.y - this.startPoint.y;
46        
47        // Prevent default scrolling for horizontal swipes
48        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
49            e.preventDefault();
50        }
51        
52        this.onTouchMove && this.onTouchMove(point, deltaX, deltaY);
53    }
54    
55    handleEnd(e) {
56        const point = this.getEventPoint(e);
57        this.endPoint = point;
58        this.endTime = Date.now();
59        
60        this.element.classList.remove('touching');
61        
62        const deltaX = this.endPoint.x - this.startPoint.x;
63        const deltaY = this.endPoint.y - this.startPoint.y;
64        const deltaTime = this.endTime - this.startTime;
65        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
66        
67        // Determine gesture type
68        if (deltaTime < this.threshold.time && distance < this.threshold.distance) {
69            this.onTap && this.onTap(this.endPoint);
70        } else if (distance > this.threshold.distance) {
71            const direction = this.getSwipeDirection(deltaX, deltaY);
72            this.onSwipe && this.onSwipe(direction, distance);
73        }
74        
75        this.onTouchEnd && this.onTouchEnd(point);
76    }
77    
78    getEventPoint(e) {
79        if (e.touches && e.touches.length > 0) {
80            return { x: e.touches[0].clientX, y: e.touches[0].clientY };
81        }
82        return { x: e.clientX, y: e.clientY };
83    }
84    
85    getSwipeDirection(deltaX, deltaY) {
86        if (Math.abs(deltaX) > Math.abs(deltaY)) {
87            return deltaX > 0 ? 'right' : 'left';
88        } else {
89            return deltaY > 0 ? 'down' : 'up';
90        }
91    }
92}

1/* Touch action controls */
2.swipeable-container {
3    touch-action: pan-x; /* Allow horizontal scrolling only */
4    overflow-x: auto;
5    overflow-y: hidden;
6    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
7}
8
9.vertical-scroll {
10    touch-action: pan-y; /* Allow vertical scrolling only */
11    overflow-y: auto;
12    overflow-x: hidden;
13    -webkit-overflow-scrolling: touch;
14}
15
16.pinch-zoom {
17    touch-action: pinch-zoom; /* Allow pinch-to-zoom */
18}
19
20.no-touch-action {
21    touch-action: none; /* Prevent all default touch behaviors */
22}
23
24/* Touch feedback animations */
25.touch-ripple {
26    position: relative;
27    overflow: hidden;
28    transition: all 0.2s ease;
29}
30
31.touch-ripple::after {
32    content: '';
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    width: 0;
37    height: 0;
38    border-radius: 50%;
39    background: rgba(255, 255, 255, 0.5);
40    transform: translate(-50%, -50%);
41    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
42    pointer-events: none;
43    opacity: 0;
44}
45
46.touch-ripple:active::after,
47.touch-ripple.touching::after {
48    width: 200px;
49    height: 200px;
50    opacity: 1;
51    transition: width 0.1s ease, height 0.1s ease;
52}
53
54/* Long press indication */
55.long-pressable {
56    position: relative;
57    transition: all 0.2s ease;
58}
59
60.long-pressable::before {
61    content: '';
62    position: absolute;
63    top: 0;
64    left: 0;
65    right: 0;
66    height: 3px;
67    background: linear-gradient(90deg, #007AFF 0%, transparent 0%);
68    border-radius: 2px;
69    transition: all 0.1s ease;
70    opacity: 0;
71}
72
73.long-pressable.pressing::before {
74    opacity: 1;
75    background: linear-gradient(90deg, #007AFF var(--progress, 0%), transparent var(--progress, 0%));
76}
77
78/* Swipe indicators */
79.swipe-container {
80    position: relative;
81    overflow: hidden;
82}
83
84.swipe-indicator {
85    position: absolute;
86    top: 50%;
87    right: 20px;
88    transform: translateY(-50%);
89    opacity: 0.6;
90    font-size: 20px;
91    animation: swipeHint 2s ease-in-out infinite;
92}
93
94@keyframes swipeHint {
95    0%, 100% { transform: translateY(-50%) translateX(0); }
96    50% { transform: translateY(-50%) translateX(-10px); }
97}
98
99/* Pull-to-refresh */
100.pull-to-refresh {
101    position: relative;
102    min-height: 100vh;
103    touch-action: pan-y;
104}
105
106.refresh-indicator {
107    position: absolute;
108    top: -60px;
109    left: 50%;
110    transform: translateX(-50%);
111    width: 40px;
112    height: 40px;
113    border-radius: 50%;
114    background: #007AFF;
115    display: flex;
116    align-items: center;
117    justify-content: center;
118    color: white;
119    transition: all 0.3s ease;
120    opacity: 0;
121}
122
123.pull-to-refresh.pulling .refresh-indicator {
124    transform: translateX(-50%) translateY(80px);
125    opacity: 1;
126}
127
128.pull-to-refresh.refreshing .refresh-indicator {
129    animation: spin 1s linear infinite;
130}
131
132@keyframes spin {
133    from { transform: translateX(-50%) translateY(80px) rotate(0deg); }
134    to { transform: translateX(-50%) translateY(80px) rotate(360deg); }
135}

1// Multi-touch gesture handler
2class MultiTouchHandler {
3    constructor(element) {
4        this.element = element;
5        this.touches = new Map();
6        this.initialDistance = 0;
7        this.initialScale = 1;
8        
9        this.init();
10    }
11    
12    init() {
13        this.element.addEventListener('touchstart', (e) => this.handleTouchStart(e));
14        this.element.addEventListener('touchmove', (e) => this.handleTouchMove(e));
15        this.element.addEventListener('touchend', (e) => this.handleTouchEnd(e));
16    }
17    
18    handleTouchStart(e) {
19        for (let touch of e.touches) {
20            this.touches.set(touch.identifier, {
21                x: touch.clientX,
22                y: touch.clientY
23            });
24        }
25        
26        if (e.touches.length === 2) {
27            this.initialDistance = this.getDistance(e.touches[0], e.touches[1]);
28            this.onPinchStart && this.onPinchStart();
29        }
30    }
31    
32    handleTouchMove(e) {
33        e.preventDefault();
34        
35        if (e.touches.length === 2) {
36            const currentDistance = this.getDistance(e.touches[0], e.touches[1]);
37            const scale = currentDistance / this.initialDistance;
38            
39            this.onPinch && this.onPinch(scale);
40        } else if (e.touches.length === 1) {
41            const touch = e.touches[0];
42            const startTouch = this.touches.get(touch.identifier);
43            
44            if (startTouch) {
45                const deltaX = touch.clientX - startTouch.x;
46                const deltaY = touch.clientY - startTouch.y;
47                
48                this.onPan && this.onPan(deltaX, deltaY);
49            }
50        }
51    }
52    
53    handleTouchEnd(e) {
54        for (let touch of e.changedTouches) {
55            this.touches.delete(touch.identifier);
56        }
57        
58        if (e.touches.length < 2) {
59            this.onPinchEnd && this.onPinchEnd();
60        }
61    }
62    
63    getDistance(touch1, touch2) {
64        const dx = touch1.clientX - touch2.clientX;
65        const dy = touch1.clientY - touch2.clientY;
66        return Math.sqrt(dx * dx + dy * dy);
67    }
68}
69
70// Long press handler
71class LongPressHandler {
72    constructor(element, options = {}) {
73        this.element = element;
74        this.duration = options.duration || 500;
75        this.threshold = options.threshold || 10;
76        this.timeout = null;
77        this.startPoint = null;
78        
79        this.init();
80    }
81    
82    init() {
83        this.element.addEventListener('touchstart', (e) => this.start(e));
84        this.element.addEventListener('touchmove', (e) => this.move(e));
85        this.element.addEventListener('touchend', (e) => this.end(e));
86        this.element.addEventListener('touchcancel', (e) => this.cancel(e));
87    }
88    
89    start(e) {
90        this.startPoint = {
91            x: e.touches[0].clientX,
92            y: e.touches[0].clientY
93        };
94        
95        let progress = 0;
96        const progressInterval = 50;
97        
98        this.timeout = setTimeout(() => {
99            this.onLongPress && this.onLongPress(e);
100        }, this.duration);
101        
102        // Visual progress feedback
103        const progressTimer = setInterval(() => {
104            progress += progressInterval;
105            const percentage = (progress / this.duration) * 100;
106            this.element.style.setProperty('--progress', `${percentage}%`);
107            
108            if (progress >= this.duration) {
109                clearInterval(progressTimer);
110            }
111        }, progressInterval);
112    }
113    
114    move(e) {
115        if (this.startPoint) {
116            const currentPoint = {
117                x: e.touches[0].clientX,
118                y: e.touches[0].clientY
119            };
120            
121            const distance = Math.sqrt(
122                Math.pow(currentPoint.x - this.startPoint.x, 2) +
123                Math.pow(currentPoint.y - this.startPoint.y, 2)
124            );
125            
126            if (distance > this.threshold) {
127                this.cancel();
128            }
129        }
130    }
131    
132    end(e) {
133        this.cancel();
134    }
135    
136    cancel() {
137        if (this.timeout) {
138            clearTimeout(this.timeout);
139            this.timeout = null;
140        }
141        
142        this.element.style.removeProperty('--progress');
143        this.element.classList.remove('pressing');
144        this.startPoint = null;
145    }
146}

1/* High contrast support */
2@media (prefers-contrast: high) {
3    .touch-button {
4        border: 2px solid currentColor;
5        background-color: ButtonFace;
6        color: ButtonText;
7    }
8    
9    .touch-button:focus,
10    .touch-button:hover {
11        outline: 3px solid Highlight;
12        outline-offset: 2px;
13    }
14}
15
16/* Reduced motion support */
17@media (prefers-reduced-motion: reduce) {
18    .touch-button,
19    .gesture-element {
20        transition: none;
21        animation: none;
22    }
23    
24    .touch-ripple::after {
25        display: none;
26    }
27}
28
29/* Large text support */
30@media (prefers-reduced-data: reduce) {
31    .icon-button {
32        background-image: none;
33    }
34    
35    .icon-button::after {
36        content: attr(aria-label);
37        font-size: 12px;
38    }
39}
40
41/* Touch accommodation preferences */
42.touch-accommodations {
43    --touch-size-multiplier: 1;
44}
45
46@media (prefers-reduced-motion: reduce) {
47    .touch-accommodations {
48        --touch-size-multiplier: 1.2;
49    }
50}
51
52.accessible-touch-target {
53    min-width: calc(44px * var(--touch-size-multiplier));
54    min-height: calc(44px * var(--touch-size-multiplier));
55    padding: calc(12px * var(--touch-size-multiplier));
56}
57
58/* Focus management for touch */
59.touch-focus-visible {
60    outline: none;
61}
62
63.touch-focus-visible:focus-visible {
64    outline: 2px solid #007AFF;
65    outline-offset: 2px;
66    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3);
67}
68
69/* Skip to content for mobile */
70.skip-to-content {
71    position: absolute;
72    top: -40px;
73    left: 6px;
74    background: #000;
75    color: #fff;
76    padding: 8px;
77    text-decoration: none;
78    border-radius: 4px;
79    z-index: 10000;
80    transform: translateY(-100%);
81    transition: transform 0.3s ease;
82}
83
84.skip-to-content:focus {
85    transform: translateY(0%);
86}
87
88/* Voice control support */
89.voice-control-target {
90    position: relative;
91}
92
93.voice-control-target::before {
94    content: attr(data-voice-command);
95    position: absolute;
96    top: -20px;
97    left: 0;
98    background: rgba(0, 0, 0, 0.8);
99    color: white;
100    padding: 2px 6px;
101    border-radius: 3px;
102    font-size: 10px;
103    opacity: 0;
104    pointer-events: none;
105    transition: opacity 0.2s ease;
106}
107
108.voice-control-active .voice-control-target::before {
109    opacity: 1;
110}
111
112/* Touch target spacing for motor impairments */
113.motor-friendly-layout {
114    display: flex;
115    flex-wrap: wrap;
116    gap: 16px;
117    padding: 16px;
118}
119
120.motor-friendly-layout .touch-target {
121    min-width: 56px;
122    min-height: 56px;
123    margin: 8px;
124    border-radius: 12px;
125}
126
127/* One-handed operation support */
128.thumb-zone {
129    position: fixed;
130    bottom: 0;
131    left: 0;
132    right: 0;
133    height: 40%;
134    pointer-events: none;
135    z-index: -1;
136}
137
138.thumb-zone::before {
139    content: '';
140    position: absolute;
141    bottom: 0;
142    right: 20px;
143    width: 60%;
144    height: 80%;
145    border-radius: 50% 50% 0 0;
146    background: rgba(0, 122, 255, 0.1);
147    border: 2px dashed rgba(0, 122, 255, 0.3);
148}
149
150/* Primary actions in thumb zone */
151.primary-actions {
152    position: fixed;
153    bottom: 20px;
154    right: 20px;
155    display: flex;
156    flex-direction: column;
157    gap: 12px;
158}
159
160.floating-action-button {
161    width: 56px;
162    height: 56px;
163    border-radius: 50%;
164    background: #007AFF;
165    color: white;
166    border: none;
167    font-size: 24px;
168    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
169    transition: all 0.3s ease;
170    cursor: pointer;
171}
172
173.floating-action-button:hover,
174.floating-action-button:focus {
175    transform: scale(1.1);
176    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
177    outline: 3px solid rgba(0, 122, 255, 0.3);
178}
179
180.floating-action-button:active {
181    transform: scale(0.95);
182}

1<!-- Accessible touch button with comprehensive labeling -->
2<button 
3    class="touch-button" 
4    type="button"
5    aria-label="Add item to favorites"
6    aria-describedby="favorite-help"
7    data-voice-command="Add favorite">
8    <svg aria-hidden="true" focusable="false">
9        <use href="#heart-icon"></use>
10    </svg>
11    <span class="sr-only">Add to favorites</span>
12</button>
13<div id="favorite-help" class="sr-only">
14    Double-tap to add this item to your favorites list
15</div>
16
17<!-- Touch-friendly form with proper labeling -->
18<form class="touch-form">
19    <div class="form-group">
20        <label for="email" class="form-label">
21            Email Address
22            <span class="required-indicator" aria-label="required">*</span>
23        </label>
24        <input 
25            type="email" 
26            id="email"
27            class="touch-input"
28            aria-describedby="email-help"
29            aria-required="true"
30            autocomplete="email"
31            inputmode="email">
32        <div id="email-help" class="help-text">
33            We'll use this to send you updates
34        </div>
35    </div>
36    
37    <div class="form-group">
38        <fieldset class="touch-fieldset">
39            <legend class="form-legend">Notification Preferences</legend>
40            <div class="checkbox-group">
41                <label class="touch-checkbox">
42                    <input type="checkbox" value="email">
43                    <span class="checkmark" aria-hidden="true"></span>
44                    Email notifications
45                </label>
46                <label class="touch-checkbox">
47                    <input type="checkbox" value="push">
48                    <span class="checkmark" aria-hidden="true"></span>
49                    Push notifications
50                </label>
51            </div>
52        </fieldset>
53    </div>
54    
55    <button type="submit" class="submit-button touch-button">
56        Submit Form
57        <span class="loading-indicator" aria-hidden="true"></span>
58    </button>
59</form>

1class AccessibleTouchInterface {
2    constructor() {
3        this.touchTargets = document.querySelectorAll('.touch-target');
4        this.longPressActions = new Map();
5        this.init();
6    }
7    
8    init() {
9        this.enhanceTouchTargets();
10        this.addGestureSupport();
11        this.improveAccessibility();
12    }
13    
14    enhanceTouchTargets() {
15        this.touchTargets.forEach(target => {
16            // Add minimum touch area
17            const rect = target.getBoundingClientRect();
18            if (rect.width < 44 || rect.height < 44) {
19                target.style.minWidth = '44px';
20                target.style.minHeight = '44px';
21                target.classList.add('enhanced-touch-target');
22            }
23            
24            // Add touch feedback
25            this.addTouchFeedback(target);
26        });
27    }
28    
29    addTouchFeedback(element) {
30        let feedbackTimeout;
31        
32        element.addEventListener('touchstart', (e) => {
33            element.classList.add('touch-active');
34            
35            // Haptic feedback if supported
36            if (navigator.vibrate) {
37                navigator.vibrate(10);
38            }
39            
40            // Visual feedback
41            this.createRippleEffect(element, e.touches[0]);
42        }, { passive: true });
43        
44        element.addEventListener('touchend', () => {
45            feedbackTimeout = setTimeout(() => {
46                element.classList.remove('touch-active');
47            }, 150);
48        }, { passive: true });
49        
50        element.addEventListener('touchcancel', () => {
51            clearTimeout(feedbackTimeout);
52            element.classList.remove('touch-active');
53        }, { passive: true });
54    }
55    
56    createRippleEffect(element, touch) {
57        const rect = element.getBoundingClientRect();
58        const x = touch.clientX - rect.left;
59        const y = touch.clientY - rect.top;
60        
61        const ripple = document.createElement('div');
62        ripple.className = 'touch-ripple-effect';
63        ripple.style.cssText = `
64            position: absolute;
65            left: ${x}px;
66            top: ${y}px;
67            width: 0;
68            height: 0;
69            border-radius: 50%;
70            background: rgba(255, 255, 255, 0.6);
71            transform: translate(-50%, -50%);
72            animation: ripple 0.6s ease-out;
73            pointer-events: none;
74        `;
75        
76        element.style.position = 'relative';
77        element.style.overflow = 'hidden';
78        element.appendChild(ripple);
79        
80        setTimeout(() => {
81            ripple.remove();
82        }, 600);
83    }
84    
85    addGestureSupport() {
86        // Double-tap handler
87        let lastTap = 0;
88        
89        document.addEventListener('touchend', (e) => {
90            const now = Date.now();
91            const timeSinceLastTap = now - lastTap;
92            
93            if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
94                const target = e.target.closest('[data-double-tap]');
95                if (target) {
96                    e.preventDefault();
97                    this.handleDoubleTap(target);
98                }
99            }
100            
101            lastTap = now;
102        });
103    }
104    
105    handleDoubleTap(element) {
106        const action = element.getAttribute('data-double-tap');
107        element.dispatchEvent(new CustomEvent('doubletap', {
108            detail: { action }
109        }));
110        
111        // Visual feedback for double-tap
112        element.style.animation = 'none';
113        element.offsetHeight; // Trigger reflow
114        element.style.animation = 'doubleTapFeedback 0.3s ease';
115    }
116    
117    improveAccessibility() {
118        // Announce touch interactions to screen readers
119        const announcer = document.createElement('div');
120        announcer.setAttribute('aria-live', 'polite');
121        announcer.setAttribute('aria-atomic', 'true');
122        announcer.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;';
123        document.body.appendChild(announcer);
124        
125        // Announce gesture availability
126        document.addEventListener('focus', (e) => {
127            const target = e.target;
128            const gestures = [];
129            
130            if (target.hasAttribute('data-swipe')) {
131                gestures.push('swipe');
132            }
133            if (target.hasAttribute('data-long-press')) {
134                gestures.push('long press');
135            }
136            if (target.hasAttribute('data-double-tap')) {
137                gestures.push('double tap');
138            }
139            
140            if (gestures.length > 0) {
141                announcer.textContent = `Available gestures: ${gestures.join(', ')}`;
142            }
143        });
144        
145        // Handle reduced motion preferences
146        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
147            document.documentElement.style.setProperty('--animation-duration', '0s');
148        }
149    }
150}
151
152// Auto-init on DOM ready
153document.addEventListener('DOMContentLoaded', () => {
154    new AccessibleTouchInterface();
155});