-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
113 lines (100 loc) · 6.59 KB
/
Copy pathdocs.html
File metadata and controls
113 lines (100 loc) · 6.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation - AccessWidget</title>
<meta name="description" content="Official documentation for AccessWidget: How to install, why use it, and features.">
<link rel="stylesheet" href="docs.css">
</head>
<body>
<nav class="doc-navbar">
<div class="logo">
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
AccessWidget Docs
</a>
</div>
</nav>
<aside class="doc-sidebar">
<h3>Getting Started</h3>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#why-use">Why Use AccessWidget?</a></li>
<li><a href="#how-to-use">How to Install</a></li>
<li><a href="#configuration">Configuration</a></li>
</ul>
<h3>Reference</h3>
<ul>
<li><a href="#features">Features Available</a></li>
<li><a href="#privacy">Privacy & Data</a></li>
</ul>
</aside>
<main class="doc-main">
<section id="introduction" class="doc-section">
<h1>AccessWidget Documentation</h1>
<p>Welcome to the official documentation for AccessWidget. This guide will show you how to integrate the widget into your website, explain why it's beneficial for your users, and detail all the features it provides.</p>
</section>
<section id="why-use" class="doc-section">
<h2>Why Use AccessWidget?</h2>
<p>Web accessibility is crucial for ensuring that all users, regardless of their physical or cognitive abilities, can interact with your content. AccessWidget helps bridge the gap by providing user-facing tools that empower visitors to customize their own browsing experience.</p>
<ul>
<li><strong>Inclusivity:</strong> Makes your content readable for users with visual impairments, dyslexia, or color blindness.</li>
<li><strong>Zero Hassle:</strong> Unlike rebuilding your entire site for specific high-contrast edge cases, this widget provides an immediate set of tools that users can toggle at will.</li>
<li><strong>Safe to Use:</strong> Our Shadow DOM architecture ensures that the widget's internal CSS will <em>never</em> conflict with your website's design.</li>
<li><strong>Privacy First:</strong> The widget does not load tracking scripts, analytics, or send any user data to external servers.</li>
</ul>
</section>
<section id="how-to-use" class="doc-section">
<h2>How to Install</h2>
<p>Installing AccessWidget is designed to be as simple as possible. There are no npm packages to install or build steps required. Simply copy the following script tag and place it just before the closing <code></body></code> tag on your website.</p>
<pre><code><script src="https://accessibility.dippan.com.np/accessibility.js" defer></script></code></pre>
<p>By using the <code>defer</code> attribute, the widget will load without blocking the rest of your website's content, ensuring optimal performance.</p>
</section>
<section id="configuration" class="doc-section">
<h2>Configuration</h2>
<p>You can customize the visual appearance of the widget's trigger button using <code>data-*</code> attributes directly on the script tag.</p>
<h3>Positioning</h3>
<p>Change where the widget button floats using <code>data-position</code>. Available options: <code>bottom-right</code> (default), <code>bottom-left</code>, <code>top-right</code>, <code>top-left</code>.</p>
<pre><code><script src="..." data-position="bottom-left" defer></script></code></pre>
<h3>Accent Color</h3>
<p>Match the widget to your brand using <code>data-color</code>. Accepts any valid CSS color hex code.</p>
<pre><code><script src="..." data-color="#ff0000" defer></script></code></pre>
</section>
<section id="features" class="doc-section">
<h2>Features Available</h2>
<p>AccessWidget bundles numerous tools categorized into logical sections for the user.</p>
<div class="feature-list">
<div class="feature-item">
<h4>Smart Profiles</h4>
<p>1-click presets for specific needs: Better Visibility, Less Motion, Focus Mode, and Dyslexia Friendly.</p>
</div>
<div class="feature-item">
<h4>Text & Typography</h4>
<p>Adjust font size up to 200%, increase letter spacing, and switch to highly readable or Dyslexia-specific system fonts.</p>
</div>
<div class="feature-item">
<h4>Color Adjustments</h4>
<p>High contrast modes, dark modes, monochrome filters, and specialized color blindness filters (Protanopia, Deuteranopia, etc.).</p>
</div>
<div class="feature-item">
<h4>Reading Guides</h4>
<p>A horizontal reading line or a focused reading mask that dims the rest of the screen to help users maintain focus.</p>
</div>
<div class="feature-item">
<h4>Highlighting</h4>
<p>Options to aggressively highlight all interactive links or emphasize the currently focused element for keyboard navigators.</p>
</div>
<div class="feature-item">
<h4>Read Aloud (TTS)</h4>
<p>Integrated text-to-speech. When active, clicking on any text paragraph will read it aloud using the native browser speech engine.</p>
</div>
</div>
</section>
<section id="privacy" class="doc-section">
<h2>Privacy & Data</h2>
<p>The <code>accessibility.js</code> widget operates entirely on the client-side. User preferences are saved in the browser's <code>localStorage</code> under the key <code>accesswidget:prefs</code>. No external network requests are made, and no tracking analytics are bundled within the script.</p>
</section>
</main>
</body>
</html>