|
| 1 | +name: "Accessibility Issue" |
| 2 | +description: Report accessibility issues found on the site. |
| 3 | +labels: [ Accessibility ] |
| 4 | +body: |
| 5 | + - type: markdown |
| 6 | + attributes: |
| 7 | + value: | |
| 8 | + Please check [existing issues](https://github.com/processing/p5.js-website/issues) to ensure this issue hasn't been reported already. Thank you! |
| 9 | + |
| 10 | + - type: input |
| 11 | + attributes: |
| 12 | + label: Title |
| 13 | + description: | |
| 14 | + Provide a concise, descriptive summary of the issue in the format “[Component] Brief description”. |
| 15 | + For example: “[Navbar] Menu items not reachable via keyboard” or “[Form] Labels missing for input fields”. |
| 16 | + validations: |
| 17 | + required: true |
| 18 | + |
| 19 | + - type: textarea |
| 20 | + attributes: |
| 21 | + label: Description |
| 22 | + description: | |
| 23 | + Explain the problem in detail. Describe what is happening and why it is a barrier to accessibility. |
| 24 | + Include any relevant context such as user scenarios or error messages. |
| 25 | + placeholder: | |
| 26 | + For example: |
| 27 | + - “When a keyboard user navigates to the ‘Submit’ button, the screen reader only announces ‘button’ without indicating its purpose.” |
| 28 | + - “The modal dialog opens but focus is not moved into the dialog, making it impossible for screen reader users to interact with its content.” |
| 29 | + validations: |
| 30 | + required: true |
| 31 | + |
| 32 | + - type: textarea |
| 33 | + attributes: |
| 34 | + label: Steps to Reproduce |
| 35 | + description: | |
| 36 | + List each step to reproduce the issue so other contributors can follow them exactly. |
| 37 | + Include: |
| 38 | + 1. Element location (CSS selector, XPath, or visible text). |
| 39 | + 2. Interaction method (pointer hover, keyboard focus, or touch). |
| 40 | + 3. A screenshot or a snippet of the accessibility tree (e.g., from browser DevTools), if available. |
| 41 | + placeholder: | |
| 42 | + Example: |
| 43 | + 1. Go to `/index.html`. |
| 44 | + 2. Locate the “Search” icon (CSS selector: `button.search-toggle`). |
| 45 | + 3. Use the Tab key to focus the icon. |
| 46 | + 4. Press Enter to open the search field. |
| 47 | + 5. Observe that no visible focus indicator appears on the input. |
| 48 | + |
| 49 | + Element location examples: |
| 50 | + - CSS selector: `#search-input` |
| 51 | + - XPath: `//button[@aria-label="Search"]` |
| 52 | + - Visible text: “Search” link in the footer |
| 53 | + |
| 54 | + Interaction methods examples: |
| 55 | + - Pointer hover (mouse over) |
| 56 | + - Keyboard focus (Tab / Shift + Tab) |
| 57 | + - Touch (tap on mobile) |
| 58 | + validations: |
| 59 | + required: false |
| 60 | + |
| 61 | + - type: textarea |
| 62 | + attributes: |
| 63 | + label: Actual Behavior |
| 64 | + description: | |
| 65 | + Describe exactly what happens when you follow the steps above. |
| 66 | + Include any unexpected behavior, missing feedback, or incorrect announcements. |
| 67 | + placeholder: | |
| 68 | + For example: |
| 69 | + - "When the input appears, focus remains on the toggle button instead of moving to the search field." |
| 70 | + - "A screen reader announces ‘button’ but does not announce 'Open search' or any label." |
| 71 | + - "The color contrast on the ‘Submit’ button is 2:1, below WCAG 2.2 AA requirements." |
| 72 | + validations: |
| 73 | + required: true |
| 74 | + |
| 75 | + - type: textarea |
| 76 | + attributes: |
| 77 | + label: Expected Behavior |
| 78 | + description: | |
| 79 | + Describe what should happen instead, from an accessibility standpoint. |
| 80 | + placeholder: | |
| 81 | + For example: |
| 82 | + - “When the search field appears, focus should move into the input, and a screen reader should announce ‘Search input field’.” |
| 83 | + - “The button should have an aria-label so that screen readers announce its purpose.” |
| 84 | + - “Text color and background color should have at least a 4.5:1 contrast ratio for normal text.” |
| 85 | + validations: |
| 86 | + required: true |
| 87 | + |
| 88 | + - type: textarea |
| 89 | + attributes: |
| 90 | + label: Environments |
| 91 | + description: | |
| 92 | + Provide specific environment details to help identify the problem. |
| 93 | + * **Browser & Version:** e.g., Chrome 114, Firefox 118, Safari 16.4 |
| 94 | + * **Operating System & Version:** e.g., Windows 11 Pro 24H2, macOS 12.5, iOS 18.1 |
| 95 | + * **Evaluation Tool / Assistive Technology:** e.g., NVDA 2025.1, VoiceOver, Android 16, WAVE |
| 96 | + * **Screen Resolution:** e.g., 1366×768 |
| 97 | + * **Additional Details:** e.g., Zoom level 200%, High-contrast mode |
| 98 | + validations: |
| 99 | + required: false |
| 100 | + |
| 101 | + - type: textarea |
| 102 | + attributes: |
| 103 | + label: Suggested Fix |
| 104 | + description: | |
| 105 | + If you have a clear recommendation for how to resolve the issue, outline it here. |
| 106 | + placeholder: | |
| 107 | + For example: |
| 108 | + - “Add `aria-label="Search user"` to `button#user-search`.” |
| 109 | + - “Update CSS to ensure the focus outline is visible on high-contrast backgrounds.” |
| 110 | + validations: |
| 111 | + required: false |
| 112 | + |
| 113 | + |
| 114 | + - type: textarea |
| 115 | + attributes: |
| 116 | + label: Reference |
| 117 | + description: | |
| 118 | + List any relevant WCAG 2.2 success criteria, ARIA Authoring Practices Guide, or Techniques for WCAG. |
| 119 | + Include specific IDs or links when possible. |
| 120 | + placeholder: | |
| 121 | + For example: |
| 122 | + * WCAG 2.2 SC 1.3.1 Info and Relationships |
| 123 | + * ARIA Authoring Practices Guide - Dialog (Modal) pattern |
| 124 | + * Techniques for WCAG ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls |
| 125 | + validations: |
| 126 | + required: false |
| 127 | + |
| 128 | + |
| 129 | + - type: dropdown |
| 130 | + attributes: |
| 131 | + label: What is your operating system? |
| 132 | + options: |
| 133 | + - Windows |
| 134 | + - Mac OS |
| 135 | + - Linux |
| 136 | + - Android |
| 137 | + - iOS |
| 138 | + - Other (specify if possible) |
| 139 | + validations: |
| 140 | + required: false |
| 141 | + |
| 142 | + - type: input |
| 143 | + attributes: |
| 144 | + label: Web browser and version |
| 145 | + description: | |
| 146 | + In the address bar, on Chrome enter `chrome://version`, on Firefox enter `about:support`. On Safari, use `About Safari`. |
| 147 | + validations: |
| 148 | + required: false |
| 149 | + |
0 commit comments