|
| 1 | +--- |
| 2 | +description: Guidelines for improving the accessibility of a website to ensure it is usable for everyone, including people with disabilities. |
| 3 | +applyTo: "**/*.{html,css,js,jsx,ts,tsx,svelte,cshtml,php,vue,twig}" |
| 4 | +--- |
| 5 | + |
| 6 | +## Accessibility |
| 7 | + |
| 8 | +Improving the accessibility of a website is essential to ensure it is usable for everyone, including people with disabilities. Here are additional guidelines to make your website more accessible: |
| 9 | + |
| 10 | +### 1. Alt Text |
| 11 | +- Add meaningful `alt` text to all images. Make sure: |
| 12 | + - It is short and descriptive (≤125 characters). |
| 13 | + - Decorative images have an empty `alt` attribute (`alt=""`) so screen readers skip them. |
| 14 | + |
| 15 | + **Example:** |
| 16 | + ```html |
| 17 | + <img src="cat.jpg" alt="A black cat lying on a wooden chair." /> |
| 18 | + <img src="decorative-line.png" alt="" /> |
| 19 | + ``` |
| 20 | + |
| 21 | +### 2. Color and Contrast |
| 22 | +- Ensure text has enough contrast against the background (≥4.5:1 for body text and ≥3:1 for large text). |
| 23 | +- Use tools like Contrast Checker to test this. |
| 24 | +- Avoid using color as the only way to convey information. Use text or symbols alongside colors. |
| 25 | + |
| 26 | +Example (for visually impaired users): |
| 27 | +❌ Bad: "Click the green button to confirm." |
| 28 | +✅ Better: "Click the green button with the checkmark to confirm." |
| 29 | + |
| 30 | +### 3. Logical DOM Order |
| 31 | +- Make sure content in the DOM is logically ordered so screen readers and keyboard navigation interpret it correctly. |
| 32 | +- Use landmarks like <header>, <main>, <nav>, and <footer> to help screen readers navigate. |
| 33 | + |
| 34 | +Example: |
| 35 | +```html |
| 36 | +<header>...</header> |
| 37 | +<nav>...</nav> |
| 38 | +<main>...</main> |
| 39 | +<footer>...</footer> |
| 40 | +``` |
| 41 | + |
| 42 | +### 4. Focus Management and Keyboard Navigation |
| 43 | +- Test keyboard navigation in the browser: |
| 44 | + - Check if a user can navigate the entire page using the Tab key. |
| 45 | +- Correct use of tabindex: |
| 46 | + - Avoid positive tabindex values, as this creates an illogical tab order. |
| 47 | + - Use tabindex="0" to make an element focusable that is not focusable by default. |
| 48 | + - Use tabindex="-1" to make an element accessible via JavaScript without putting it in the tab order. |
| 49 | + |
| 50 | +Example: |
| 51 | +```html |
| 52 | +<button tabindex="0">Confirm</button> |
| 53 | +<a href="#section" tabindex="0">Go to section</a> |
| 54 | +``` |
| 55 | + |
| 56 | +### 5. ARIA Attributes |
| 57 | +- Use ARIA (Accessible Rich Internet Applications) only when semantic HTML is not enough. |
| 58 | +- Avoid excessive use of ARIA; use HTML5 tags with built-in accessibility whenever possible. |
| 59 | + |
| 60 | +ARIA Examples: |
| 61 | +- Use aria-label for buttons or links without text: `<button aria-label="Close">x</button>` |
| 62 | +- Use aria-expanded to indicate the state of a dropdown menu: `<button aria-expanded="false">Menu</button>` |
| 63 | + |
| 64 | +### 6. Responsiveness and Assistive Technologies |
| 65 | +- Make sure the site works correctly on both desktop and mobile devices. |
| 66 | +- Check that the site works well with screen readers like NVDA, JAWS (Windows), and VoiceOver (macOS/iOS). |
| 67 | +- Test with different browsers: Chrome, Firefox, Safari. |
| 68 | + |
| 69 | +### 7. Forms |
| 70 | +- Labels: |
| 71 | + - Add clear label elements to form fields: |
| 72 | + ```html |
| 73 | + <label for="email">Email address</label> |
| 74 | + <input type="email" id="email" /> |
| 75 | + ``` |
| 76 | + |
| 77 | +- Accessible error messages: |
| 78 | + - Use clear error messages when a form is filled out incorrectly. Combine visual indicators (like red highlighted fields) with text. |
| 79 | + ```html |
| 80 | + <span role="alert">Email address is required.</span> |
| 81 | + ``` |
| 82 | + |
| 83 | +### 8. Text and Fonts |
| 84 | +- Use a minimum font size of 16px for base text. |
| 85 | +- Set line height to improve readability, for example 1.5. |
| 86 | +- Ensure text is scalable: |
| 87 | + - Avoid fixed px values and prefer em or rem units. |
| 88 | + |
| 89 | + Example: |
| 90 | + ```css |
| 91 | + body { |
| 92 | + font-size: 1rem; /* 16px base */ |
| 93 | + line-height: 1.5; |
| 94 | + } |
| 95 | + ``` |
| 96 | + |
| 97 | +### 9. Videos and Audio |
| 98 | +- Add subtitles to videos and text transcripts for audio. |
| 99 | +- Make sure videos have controls. |
| 100 | +- Use the aria-describedby attribute to provide alternative descriptions for complex media. |
| 101 | + |
| 102 | + Example: |
| 103 | + ```html |
| 104 | + <video controls aria-describedby="videodesc"> |
| 105 | + <source src="sample-video.mp4" type="video/mp4" /> |
| 106 | + </video> |
| 107 | + |
| 108 | + <p id="videodesc">This video explains accessibility.</p> |
| 109 | + ``` |
| 110 | + |
| 111 | +### 10. Keyboard Accessibility |
| 112 | +- Make sure interactive elements like buttons, links, and form fields have focus state styles: |
| 113 | + |
| 114 | + ```css |
| 115 | + button:focus, a:focus { |
| 116 | + outline: 2px solid #007bff; |
| 117 | + outline-offset: 2px; |
| 118 | + } |
| 119 | + ``` |
0 commit comments