From 182b0d0e8d3fbeb21743a23318bddbbf8aeffd2b Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 29 May 2025 18:08:45 +0200 Subject: [PATCH] add index.html and .gitignore for initial project setup --- .gitignore | 1 + index.html | 314 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 13 +++ 3 files changed, 328 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b2c382f --- /dev/null +++ b/index.html @@ -0,0 +1,314 @@ + + + + + + Accessible HTML: Native vs JavaScript + + + +

🚀 Accessible HTML: Native Elements vs JavaScript Hacks

+

TL;DR: Stop reinventing the wheel with JavaScript when HTML already solved the problem better, faster, and more accessibly.

+ +
+ +
+

💀 Old School: JavaScript Collapsible

+ +
+ ⚠️ Accessibility Issues: No ARIA support, keyboard navigation broken, screen readers confused, focus management missing. +
+ + + +
+ Web accessibility ensures that websites and digital tools are usable by people with disabilities. This includes visual, auditory, motor, and cognitive impairments. +
+ + +
+ WCAG (Web Content Accessibility Guidelines) provides the framework for making web content accessible. It's not just legal compliance - it's about inclusive design. +
+ + +
+ Missing alt text, poor color contrast, keyboard traps, missing focus indicators, and recreating native functionality with JavaScript. +
+ +
+ <button onclick="toggleContent('id')">Click</button> + <div id="content" style="display:none"> + Hidden content + </div> + + <script> + function toggleContent(id) { + const content = document.getElementById(id); + if (content.style.display === 'none') { + content.style.display = 'block'; + content.classList.add('active'); + } else { + content.style.display = 'none'; + content.classList.remove('active'); + } + } + </script> +
+ +
+

❌ Problems:

+
    +
  • No semantic meaning
    • +
  • Screen readers can't understand state
    • +
  • No keyboard navigation
    • +
  • Requires JavaScript to function
    • +
  • No ARIA attributes
    • +
  • Poor SEO (hidden content not indexed)
    • +
  • Inline event handlers (security risk)
    • +
+
+
+ + +
+

✨ Modern: Native HTML Elements

+ +
+ 🎯 Accessibility Win: Built-in ARIA, keyboard support, semantic meaning, screen reader friendly, works without JavaScript. +
+ + +
+ What is Web Accessibility? +
+ Web accessibility ensures that websites and digital tools are usable by people with disabilities. This includes visual, auditory, motor, and cognitive impairments. The native HTML approach provides this functionality with zero JavaScript. +
+
+ +
+ Why WCAG Matters +
+ WCAG (Web Content Accessibility Guidelines) provides the framework for making web content accessible. It's not just legal compliance - it's about inclusive design. Native elements follow these guidelines by default. +
+
+ +
+ Common Accessibility Mistakes +
+ Missing alt text, poor color contrast, keyboard traps, missing focus indicators, and recreating native functionality with JavaScript. This one starts open to show the 'open' attribute. +
+
+ +
+ <details> + <summary>Click to expand</summary> + <div> + Content that's hidden by default, + but accessible to screen readers + and searchable by search engines. + </div> + </details> + + <!-- That's it. No JavaScript needed. --> +
+ +
+

✅ Benefits:

+
    +
  • Semantic HTML5 element
    • +
  • Built-in ARIA support
    • +
  • Keyboard accessible (Space/Enter)
    • +
  • Works without JavaScript
    • +
  • Screen reader compatible
    • +
  • SEO friendly (content indexed)
    • +
  • Progressive enhancement ready
    • +
  • Animatable with CSS
    • +
+
+
+
+ +
+

🧠 The Bigger Picture

+

This pattern extends beyond collapsibles. Consider native alternatives for:

+ + +

Remember: The best accessibility feature is the one that's built-in and works by default. HTML isn't just markup - it's a semantic contract with browsers, assistive technologies, and search engines.

+
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..e211e0c --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "dhbw-html", + "version": "0.0.0", + "description": "", + "license": "ISC", + "author": "", + "type": "commonjs", + "main": "index.html", + "scripts": { + "start": "npx serve . -p 1312 --cors", + "test": "echo \"Error: no test specified\" && exit 1" + } +}