Cursor rule

1---
2description: Mobile accessibility standards per WCAG 2.5.8 Target Size (Minimum), 2.4.1 Bypass Blocks, and 1.3.4 Orientation requirements
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.css, *.scss, *.sass, *.less
4alwaysApply: false
5---
6 
7# Mobile Accessibility Best Practices
8 
9Ensures mobile interfaces follow WCAG compliance and provide proper accessibility for touch interactions, spacing, and orientation flexibility.
10 
11<rule>
12name: mobile_accessibility_standards
13description: Enforce mobile accessibility standards per WCAG requirements for touch targets, spacing, and orientation
14filters:
15  - type: file_extension
16    pattern: "\\.(vue|jsx|tsx|html|liquid|php|js|ts|css|scss|sass|less)$"
17 
18actions:
19  - type: enforce
20    conditions:
21      # Touch targets smaller than minimum recommended size
22      - pattern: "(width|height):\\s*(?:1[0-9]|2[0-3])\\s*(?:px|rem|em|%)"
23        pattern_negate: "(min-width|min-height|max-width|max-height)"
24        message: "Touch targets should be at least 24x24px (Level AA) or 44x44px (Level AAA) for optimal accessibility. Use CSS padding to increase touch area without affecting visual design."
25 
26      # Touch targets with insufficient padding
27      - pattern: "padding:\\s*(?:0|1|2|3|4)\\s*(?:px|rem|em)"
28        pattern_negate: "(min-width|min-height|max-width|max-height)"
29        message: "Consider increasing padding to create larger touch targets. Google recommends 48x48px with 8px spacing, Apple recommends 44x44px minimum."
30 
31      # Interactive elements without proper touch target sizing
32      - pattern: "<(button|a|input|select|textarea)[^>]*>"
33        pattern_negate: "(min-width|min-height|width|height|padding)"
34        message: "Interactive elements should have sufficient touch target size. Use CSS min-width/min-height or padding to ensure accessibility compliance."
35 
36      # Touch targets too close together (less than 8px spacing)
37      - pattern: "(margin|gap):\\s*(?:0|1|2|3|4|5|6|7)\\s*(?:px|rem|em)"
38        pattern_negate: "(min-width|min-height|max-width|max-height)"
39        message: "Touch targets should have at least 8px spacing between them to prevent accidental activation. Consider increasing margins or gaps."
40 
41      # Fixed orientation restrictions
42      - pattern: "orientation:\\s*(portrait|landscape)"
43        message: "Avoid restricting content orientation. Allow users to consume content in any orientation they prefer or require for their computing environment."
44 
45      # Viewport meta tag preventing orientation changes
46      - pattern: "<meta[^>]*name=\"viewport\"[^>]*>"
47        pattern_negate: "(width=device-width|initial-scale)"
48        message: "Viewport meta tag should support responsive design and orientation flexibility. Avoid restrictions that prevent content reflow."
49 
50      # CSS that prevents orientation flexibility
51      - pattern: "@media\\s*\\(orientation:\\s*(portrait|landscape)\\)"
52        pattern_negate: "(min-width|max-width|flex-direction|grid-template)"
53        message: "Orientation media queries should enhance layout, not restrict functionality. Ensure content remains accessible in both orientations."
54 
55      # Fixed positioning that may cause issues in different orientations
56      - pattern: "position:\\s*fixed"
57        pattern_negate: "(top|bottom|left|right|transform)"
58        message: "Fixed positioning may cause accessibility issues in different orientations. Consider using relative positioning with responsive adjustments."
59 
60      # Touch targets without proper focus indicators
61      - pattern: "<(button|a|input|select|textarea)[^>]*>"
62        pattern_negate: "(:focus|:focus-visible|outline|box-shadow)"
63        message: "Touch targets should have visible focus indicators for keyboard navigation accessibility."
64 
65      # Mobile-specific elements without touch-friendly sizing
66      - pattern: "(?i)<(button|a|input|select|textarea)[^>]*class=\"[^\"]*(?:mobile|touch|small)[^\"]*\"[^>]*>"
67        pattern_negate: "(min-width|min-height|width|height|padding)"
68        message: "Mobile-specific interactive elements must have adequate touch target sizes for accessibility compliance."
69 
70      # Grid layouts without proper spacing
71      - pattern: "display:\\s*grid"
72        pattern_negate: "(gap|grid-gap|margin|padding)"
73        message: "Grid layouts should include proper spacing between elements to prevent accidental touch activation."
74 
75      # Flexbox layouts without proper spacing
76      - pattern: "display:\\s*flex"
77        pattern_negate: "(gap|margin|padding|justify-content|align-items)"
78        message: "Flexbox layouts should include proper spacing and alignment to ensure touch target accessibility."
79 
80  - type: suggest
81    message: |
82      **WCAG Mobile Accessibility Requirements:**
83 
84      **Touch Target Size (WCAG 2.5.8 Target Size Minimum):**
85      - **Level AA (Required):** Minimum 24x24 pixels
86      - **Recommended:** 44x44 pixels or larger for optimal usability
87      - **Industry Standards:** Google (48x48px), Apple (44x44px)
88      - **Spacing:** At least 8 pixels between touch targets
89 
90      **Touch Target Implementation:**
91 
92      **1. CSS Padding Approach:**
93```css
94      /* Good: Touch target meeting minimum requirements */
95      .touch-button {
96        min-width: 24px;  /* WCAG 2.5.8 AA minimum */
97        min-height: 24px;
98        padding: 12px 16px; /* Padding increases effective touch area */
99        border: none;
100        background: #0056b3;
101        color: white;
102        border-radius: 4px;
103      }
104 
105      /* Better: Larger touch target for optimal usability */
106      .touch-button-optimal {
107        min-width: 44px;  /* Recommended size */
108        min-height: 44px;
109        padding: 12px 16px;
110        border: none;
111        background: #0056b3;
112        color: white;
113        border-radius: 4px;
114      }
115 
116      /* Good: Icon button with sufficient touch area */
117      .icon-button {
118        width: 24px;
119        height: 24px;
120        padding: 12px; /* Total touch area: 48x48px */
121        border: none;
122        background: transparent;
123      }
124```
125 
126      **2. Minimum Dimensions:**
127```css
128      /* Good: Meets WCAG 2.5.8 AA minimum */
129      .mobile-button {
130        min-width: 24px;
131        min-height: 24px;
132        padding: 8px 16px;
133        font-size: 16px; /* Prevents zoom on iOS */
134      }
135 
136      /* Better: Recommended size for optimal usability */
137      .mobile-button-optimal {
138        min-width: 44px;
139        min-height: 44px;
140        padding: 8px 16px;
141        font-size: 16px;
142      }
143 
144      /* Good: Responsive touch targets */
145      .responsive-button {
146        min-width: clamp(24px, 8vw, 120px);
147        min-height: clamp(24px, 8vh, 60px);
148        padding: 12px;
149      }
150```
151 
152      **3. Touch Target Spacing:**
153```css
154      /* Good: Proper spacing between touch targets */
155      .button-group {
156        display: flex;
157        gap: 12px; /* 8px minimum, 12px recommended */
158        align-items: center;
159      }
160 
161      /* Good: Grid with minimum touch target size */
162      .touch-grid {
163        display: grid;
164        grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
165        gap: 12px;
166        padding: 16px;
167      }
168 
169      /* Better: Grid with recommended touch target size */
170      .touch-grid-optimal {
171        display: grid;
172        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
173        gap: 12px;
174        padding: 16px;
175      }
176```
177 
178      **Spacing Between Elements (WCAG 2.4.1 Bypass Blocks):**
179 
180      **1. White Space for Navigation:**
181```css
182      /* Good: Adequate spacing for motor impairment users */
183      .navigation-links {
184        display: flex;
185        gap: 16px; /* Prevents accidental activation */
186        padding: 20px;
187        flex-wrap: wrap;
188      }
189 
190      /* Good: Callout action spacing */
191      .callout-actions {
192        display: grid;
193        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
194        gap: 20px; /* Generous spacing for accessibility */
195        margin: 24px 0;
196      }
197```
198 
199      **2. Touch-Friendly Spacing:**
200```css
201      /* Good: Touch-friendly button spacing */
202      .touch-buttons {
203        display: flex;
204        flex-direction: column;
205        gap: 16px; /* Vertical spacing for thumb navigation */
206      }
207 
208      /* Good: Horizontal button spacing */
209      .horizontal-buttons {
210        display: flex;
211        gap: 12px;
212        padding: 0 16px; /* Side padding for edge safety */
213      }
214```
215 
216      **Orientation Flexibility (WCAG 1.3.4 Orientation):**
217 
218      **1. Responsive Design Implementation:**
219```css
220      /* Good: Flexible layout that works in any orientation */
221      .responsive-container {
222        display: flex;
223        flex-direction: row;
224        gap: 16px;
225        padding: 20px;
226      }
227 
228      /* Responsive adjustments for different orientations */
229      @media (orientation: portrait) {
230        .responsive-container {
231          flex-direction: column;
232          gap: 12px;
233        }
234      }
235 
236      @media (orientation: landscape) {
237        .responsive-container {
238          flex-direction: row;
239          gap: 20px;
240        }
241      }
242```
243 
244      **2. Viewport Meta Tag:**
245```html
246      <!-- Good: Flexible viewport configuration -->
247      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
248```
249 
250      **3. CSS Grid for Orientation Flexibility:**
251```css
252      /* Good: Grid that adapts to orientation */
253      .adaptive-grid {
254        display: grid;
255        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
256        gap: 20px;
257        padding: 20px;
258      }
259 
260      /* Orientation-specific adjustments */
261      @media (orientation: portrait) {
262        .adaptive-grid {
263          grid-template-columns: 1fr;
264          gap: 16px;
265        }
266      }
267```
268 
269      **Mobile Accessibility Best Practices:**
270 
271      **1. Touch Target Guidelines:**
272      - **Minimum size:** 24x24px per WCAG 2.5.8 AA
273      - **Recommended size:** 44x44px or larger for optimal accessibility
274      - **Spacing:** At least 8px between interactive elements
275      - **Padding:** Use CSS padding to increase touch area
276      - **Visual feedback:** Provide clear touch feedback
277      - **Font size:** Minimum 16px to prevent zoom on iOS
278 
279      **2. Spacing and Layout:**
280      - **White space:** Generous spacing prevents accidental activation
281      - **Grid gaps:** Use CSS Grid gap property for consistent spacing
282      - **Flexbox spacing:** Use gap property or margins for flex layouts
283      - **Touch margins:** Add margins around touch targets for safety
284      - **Visual separation:** Clear visual boundaries between interactive elements
285 
286      **3. Orientation Support:**
287      - **Responsive design:** Content should reflow in any orientation
288      - **Flexible layouts:** Use CSS Grid and Flexbox for adaptability
289      - **No restrictions:** Avoid forcing specific orientations
290      - **User choice:** Allow users to choose their preferred orientation
291      - **Testing:** Test in both portrait and landscape modes
292 
293      **Implementation Examples:**
294 
295      **Touch-Friendly Button Component:**
296```html
297      <!-- Good: Accessible touch button meeting WCAG 2.5.8 AA -->
298      <button class="touch-button"
299              type="button"
300              aria-label="Submit form">
301        Submit
302      </button>
303 
304      <style>
305        .touch-button {
306          min-width: 24px;  /* WCAG 2.5.8 AA minimum */
307          min-height: 24px;
308          padding: 12px 24px; /* Padding creates larger effective size */
309          font-size: 16px;
310          border: 2px solid #0056b3;
311          background: #0056b3;
312          color: white;
313          border-radius: 6px;
314          cursor: pointer;
315          transition: all 0.2s ease;
316        }
317 
318        .touch-button:hover,
319        .touch-button:focus {
320          background: #004085;
321          border-color: #004085;
322          outline: 3px solid #0056b3;
323          outline-offset: 2px;
324        }
325      </style>
326```
327 
328      **Responsive Touch Grid:**
329```html
330      <!-- Good: Responsive touch-friendly grid -->
331      <div class="touch-grid">
332        <button class="grid-button">Action 1</button>
333        <button class="grid-button">Action 2</button>
334        <button class="grid-button">Action 3</button>
335        <button class="grid-button">Action 4</button>
336      </div>
337 
338      <style>
339        .touch-grid {
340          display: grid;
341          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
342          gap: 16px;
343          padding: 20px;
344        }
345 
346        .grid-button {
347          min-width: 24px;  /* WCAG 2.5.8 AA minimum */
348          min-height: 24px;
349          padding: 16px; /* Padding creates larger effective size */
350          font-size: 16px;
351          border: 1px solid #ddd;
352          background: white;
353          border-radius: 4px;
354          cursor: pointer;
355        }
356 
357        /* Orientation-specific adjustments */
358        @media (orientation: portrait) {
359          .touch-grid {
360            grid-template-columns: repeat(2, 1fr);
361            gap: 12px;
362          }
363        }
364 
365        @media (orientation: landscape) {
366          .touch-grid {
367            grid-template-columns: repeat(4, 1fr);
368            gap: 20px;
369          }
370        }
371      </style>
372```
373 
374      **Touch-Friendly Navigation:**
375```html
376      <!-- Good: Touch-friendly navigation menu -->
377      <nav class="touch-navigation" role="navigation">
378        <ul class="nav-list">
379          <li><a href="/" class="nav-link">Home</a></li>
380          <li><a href="/about" class="nav-link">About</a></li>
381          <li><a href="/services" class="nav-link">Services</a></li>
382          <li><a href="/contact" class="nav-link">Contact</a></li>
383        </ul>
384      </nav>
385 
386      <style>
387        .touch-navigation {
388          padding: 16px;
389        }
390 
391        .nav-list {
392          display: flex;
393          flex-direction: column;
394          gap: 16px;
395          list-style: none;
396          margin: 0;
397          padding: 0;
398        }
399 
400        .nav-link {
401          display: block;
402          min-height: 24px;  /* WCAG 2.5.8 AA minimum */
403          padding: 12px 16px; /* Padding creates larger effective size */
404          text-decoration: none;
405          color: #333;
406          background: #f8f9fa;
407          border-radius: 6px;
408          border: 2px solid transparent;
409          transition: all 0.2s ease;
410        }
411 
412        .nav-link:hover,
413        .nav-link:focus {
414          background: #e9ecef;
415          border-color: #0056b3;
416          outline: none;
417        }
418 
419        /* Landscape orientation adjustment */
420        @media (orientation: landscape) {
421          .nav-list {
422            flex-direction: row;
423            gap: 20px;
424          }
425        }
426      </style>
427```
428 
429      **Testing and Validation:**
430 
431      **Touch Target Testing:**
432      - Use browser dev tools to measure element dimensions
433      - Test with touch devices to verify target sizes
434      - Verify spacing between interactive elements
435      - Check that padding creates adequate touch areas
436      - Test with different screen densities
437 
438      **Orientation Testing:**
439      - Test in both portrait and landscape modes
440      - Verify content reflows properly
441      - Check that functionality remains accessible
442      - Test with different device orientations
443      - Verify touch targets remain accessible
444 
445      **Accessibility Testing:**
446      - Test with screen readers in different orientations
447      - Verify keyboard navigation works in all orientations
448      - Check that focus indicators remain visible
449      - Test with motor impairment simulators
450      - Validate touch target sizes meet WCAG requirements
451 
452      **Common Mistakes to Avoid:**
453      - Touch targets smaller than 24x24px (WCAG 2.5.8 AA minimum)
454      - Not using recommended 44x44px or larger sizes for optimal usability
455      - Insufficient spacing between interactive elements (minimum 8px)
456      - Fixed orientation restrictions
457      - Viewport meta tags preventing orientation changes
458      - CSS that doesn't adapt to different orientations
459      - Touch targets without proper focus indicators
460      - Grid layouts without adequate gaps
461      - Flexbox layouts without proper spacing
462      - Fixed positioning that causes orientation issues
463      - Mobile elements without touch-friendly sizing
464 
465metadata:
466  priority: high
467  version: 1.0
468</rule>
469