Merge pull request #860 from ksen0/main

Add an Issue template for reporting accessibility issues

Author: ksen0

.github/ISSUE_TEMPLATE/4.accessibility.yml

@@ -0,0 +1,155 @@
+name: "Accessibility Issue"
+description: Report accessibility issues found on the site.
+labels: [ Accessibility ]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please ensure this issue hasn't been reported already by checking [existing issues](https://github.com/processing/p5.js-website/issues).
+    
+  - type: input
+    attributes:
+      label: Title
+      description: |
+        Provide a concise, descriptive summary of the issue in the format “[Component] Brief description”.
+        For example: “[Navbar] Menu items not reachable via keyboard” or “[Form] Labels missing for input fields”.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: |
+        Explain the problem in detail. Describe what is happening and why it is a barrier to accessibility.
+        Include any relevant context such as user scenarios or error messages.
+      placeholder: |
+        For example:
+          - “When a keyboard user navigates to the ‘Submit’ button, the screen reader only announces ‘button’ without indicating its purpose.”
+          - “The modal dialog opens but focus is not moved into the dialog, making it impossible for screen reader users to interact with its content.”
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        List each step to reproduce the issue so other contributors can follow them exactly.
+        Include:
+        1. Element location (CSS selector, XPath, or visible text).
+        2. Interaction method (pointer hover, keyboard focus, or touch).
+        3. A screenshot or a snippet of the accessibility tree (e.g., from browser DevTools), if available.
+      placeholder: |
+        Example:
+        1. Go to `/index.html`.
+        2. Locate the “Search” icon (CSS selector: `button.search-toggle`).
+        3. Use the Tab key to focus the icon.
+        4. Press Enter to open the search field.
+        5. Observe that no visible focus indicator appears on the input.
+        
+        Element location examples:
+        - CSS selector: `#search-input`
+        - XPath: `//button[@aria-label="Search"]`
+        - Visible text: “Search” link in the footer
+        
+        Interaction methods examples:
+        - Pointer hover (mouse over)
+        - Keyboard focus (Tab / Shift + Tab)
+        - Touch (tap on mobile)
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      description: |
+        Describe exactly what happens when you follow the steps above.
+        Include any unexpected behavior, missing feedback, or incorrect announcements.
+      placeholder: |
+        For example:
+        - "When the input appears, focus remains on the toggle button instead of moving to the search field."
+        - "A screen reader announces ‘button’ but does not announce 'Open search' or any label."
+        - "The color contrast on the ‘Submit’ button is 2:1, below WCAG 2.2 AA requirements."
+    validations:
+      required: true
+      
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: |
+        Describe what should happen instead, from an accessibility standpoint.
+      placeholder: |
+        For example:
+        - “When the search field appears, focus should move into the input, and a screen reader should announce ‘Search input field’.”
+        - “The button should have an aria-label so that screen readers announce its purpose.”
+        - “Text color and background color should have at least a 4.5:1 contrast ratio for normal text.”
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: |
+        - Add steps to reproduce bugs or add information on the place where the feature should be implemented.
+        - Add links to a sample deployment or code.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Environments
+      description: |
+        Provide specific environment details to help identify the problem.
+        * **Browser & Version:** e.g., Chrome 114, Firefox 118, Safari 16.4
+        * **Operating System & Version:** e.g., Windows 11 Pro 24H2, macOS 12.5, iOS 18.1
+        * **Evaluation Tool / Assistive Technology:** e.g., NVDA 2025.1, VoiceOver, Android 16, WAVE
+        * **Screen Resolution:** e.g., 1366×768
+        * **Additional Details:** e.g., Zoom level 200%, High-contrast mode
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Suggested Fix
+      description: |
+        If you have a clear recommendation for how to resolve the issue, outline it here.
+        For example:
+        - “Add `aria-label="Search user"` to `button#user-search`.”
+        - “Update CSS to ensure the focus outline is visible on high-contrast backgrounds.”
+    validations:
+      required: false
+
+
+  - type: textarea
+    attributes:
+      label: Reference
+      description: |
+        List any relevant WCAG 2.2 success criteria, ARIA Authoring Practices Guide, or Techniques for WCAG.
+        Include specific IDs or links when possible. For example:
+        * WCAG 2.2 SC 1.3.1 Info and Relationships
+        * ARIA Authoring Practices Guide - Dialog (Modal) pattern
+        * Techniques for WCAG ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
+    validations:
+      required: false
+
+
+  - type: dropdown
+    attributes:
+      label: What is your operating system?
+      options:
+        - Windows
+        - Mac OS
+        - Linux
+        - Android
+        - iOS
+        - Other (specify if possible)
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Web browser and version
+      description: |
+        In the address bar, on Chrome enter `chrome://version`, on Firefox enter `about:support`. On Safari, use `About Safari`.
+    validations:
+      required: false
+