Website Accessibility Issues and Reference File Download Link
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder7/7360/1656292981_nyc_war_appendix_3_content_changes_-_Standar_Format.xls
2026-05-31 02:14:04 - Admin
<style> body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; margin: 0; padding: 0 1rem; background-color: #f9f9f9; color: #333; } h1, h2, h3 { color: #2c3e50; } a { color: #2980b9; } nav { background-color: #fff; padding: 0.5rem 0; border-bottom: 1px solid #ddd; margin-bottom: 1rem; } nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; } nav a { text-decoration: none; font-weight: bold; } .section { margin-bottom: 2rem; } .example { background-color: #fff; border-left: 4px solid #3498db; padding: 0.5rem 1rem; margin: 1rem 0; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } </style> <header> <h1>Understanding Website Accessibility Issues</h1> <nav aria-label="Primary navigation"> <ul> <li><a href="#why">Why Accessibility Matters</a></li> <li><a href="#common">Common Issues</a></li> <li><a href="#wcag">WCAG Principles</a></li> <li><a href="#testing">Testing & Tools</a></li> <li><a href="#resources">Further Resources</a></li> </ul> </nav> </header> <main> <section id="why" class="section"> <h2>Why Accessibility Matters</h2> <p> Over a billion people worldwide live with some form of disability. For them, the web can be a powerful source of information, employment, education, and social connection*if* it is built with accessibility in mind. Inaccessible sites create barriers that can exclude users from essential services, violate legal requirements (such as the ADA in the United States or the EN 301 549 in the EU), and damage a brands reputation. Beyond compliance, accessibility improves usability for everyone; clear navigation, readable text, and wellstructured content benefit users on mobile devices, older adults, and people in lowbandwidth situations. </p> </section> <section id="common" class="section"> <h2>Common Accessibility Issues</h2> <h3>1. Missing or Poorly Written Alt Text</h3> <p> Images that convey meaning must have alternative text (alt attributes) that describes the content for screenreader users. Purely decorative images should have an empty alt attribute (`alt=""`) so they are ignored. Overly generic descriptions such as image1 or picture provide no value. </p> <h3>2. Insufficient Color Contrast</h3> <p> Text that does not contrast enough with its background makes reading difficult for users with low vision or colourblindness. The WCAG 2.1 AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. </p> <h3>3. Inadequate Keyboard Navigation</h3> <p> Many users navigate with a keyboard alone. Interactive elements must be reachable via <kbd>Tab</kbd>, and the focus order should follow a logical sequence. Missing `tabindex` attributes, hidden focus outlines, or custom controls that do not respond to <kbd>Enter</kbd> or <kbd>Space</kbd> break this flow. </p> <h3>4. Improper Use of Semantic HTML</h3> <p> Using generic `<div>` or `<span>` tags for headings, lists, or navigation strips the page of structure that assistive technologies rely on. Proper elements (`<h1>``<h6>`, `<nav>`, `<section>`, `<article>`, `<ul>`, `<li>`) convey meaning and enable screen readers to create an outline of the page. </p> <h3>5. Unclear Form Labels</h3> <p> Form controls without associated `<label>` elements or with labels that are not programmatically linked (`for` attribute matching the inputs `id`) leave users guessing the purpose of a field. Grouping related controls with `<fieldset>` and `<legend>` also improves comprehension. </p> <h3>6. Automatic Media Playback</h3> <p> Audio or video that starts without user interaction can be disorienting, especially for screenreader users or those with cognitive disorders. Provide clear controls to pause, stop, or mute media, and avoid autoplaying content unless it is essential. </p> <h3>7. Lack of ARIA (Accessible Rich Internet Applications) Considerations</h3> <p> While native HTML should be the first choice, ARIA roles and properties can fill gaps for custom widgets. However, misuse of ARIA (e.g., adding `role="button"` to a plain `<div>` without keyboard support) can cause more harm than good. </p> </section> <section id="wcag" class="section"> <h2>WCAG Principles POUR</h2> <p> The Web Content Accessibility Guidelines organise requirements into four overarching principles, often remembered by the acronym **POUR**. </p> <h3>Perceivable</h3> <p> Users must be able to perceive information through at least one sensory channel. This includes providing text alternatives for nontext content, captions for audio, and ensuring color is not the sole means of conveying information. </p> <h3>Operable</h3> <p> Interface components must be operable. Keyboard accessibility, ample time for interaction, and avoidance of content that could trigger seizures (e.g., flashing animations) fall under this category. </p> <h3>Understandable</h3> <p> Content should be readable and predictable. Use clear language, consistent navigation, and provide error messages that explain how to fix problems. </p> <h3>Robust</h3> <p> Web pages must work reliably across current and future user agents, including assistive technologies. Valid markup, proper ARIA usage, and graceful degradation of scripts support robustness. </p> </section> <section id="testing" class="section"> <h2>Testing & Tools</h2> <p> Detecting accessibility problems requires a combination of automated checks and manual evaluation. </p> <h3>Automated Scan Tools</h3> <ul> <li><a href="https://wave.webaim.org/">WAVE</a> Highlights contrast issues, missing alt text, and ARIA errors.</li> <li><a href="https://axe.deque.com/">axe</a> Browser extension that integrates with dev tools for rapid testing.</li> <li><a href="https://developers.google.com/web/tools/lighthouse">Lighthouse</a> Generates an accessibility score and suggests improvements.</li> </ul> <h3>Manual Checks</h3> <p> <strong>Keyboard navigation:</strong> Tab through the page and verify focus visibility and logical order.<br> <strong>Screen reader trial:</strong> Use NVDA (Windows) or VoiceOver (macOS) to listen to page structure and see if announcements make sense.<br> <strong>Color contrast analysis:</strong> Tools like <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a> let you test specific colour pairs. </p> <h3>Inclusive Design Practices</h3> <p> Incorporate accessibility early in the design process: create wireframes that include focus states, involve users with disabilities in usability testing, and write content with plain language guidelines. </p> <div class="example"> <strong>Quick keyboard test:</strong> Press <kbd>Tab</kbd> to move focus, <kbd>Shift+Tab</kbd> to go back, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate buttons. If you encounter hidden or unexpected jumps, the focus order needs correction. </div> </section> <section id="resources" class="section"> <h2>Further Resources</h2> <ul> <li><a href="https://www.w3.org/WAI/">W3C Web Accessibility Initiative (WAI)</a> The definitive source for standards and guidelines.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN Web Docs Accessibility</a> Practical advice for developers.</li> <li><a href="https://www.a11yproject.com/">The A11Y Project</a> Communitydriven checklist and patterns.</li> <li><a href="https://www.accessibility.com/">Accessibility.com</a> Articles, webinars, and consultancy services.</li> </ul> </section> </main>