be-a11y/index.html at develop · BeAPI/be-a11y · GitHub

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
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <link rel="icon" href="./src/favicon.png" type="image/png">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Be a11y</title>
    </head>

    <body>
        <main class="wrapper">
            <aside class="sidebar">
                <p>Be a11y</p>
                <nav>
                    <ul>
                        <li><a href="examples/accessible-accordion/index.html">Accordion</a></li>
                        <li><a href="examples/accessible-dialog/">Dialog</a></li>
                        <li><a href="examples/accessible-dropdown/">Dropdown</a></li>
                        <li><a href="examples/accessible-link/index.html">Link</a></li>
                        <li><a href="examples/accessible-modal/index.html">Modal</a></li>
                        <li><a href="examples/accessible-slider/index.html">Slider</a></li>
                        <li><a href="examples/accessible-tabs/index.html">Tabs</a></li>
                        <li><a href="examples/accessible-toggle/index.html">Toggle</a></li>
                        <li>
                            <a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
                                rel="noopener noreferrer">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
                                    fill="currentColor" aria-hidden="true" focusable="false">
                                    <path
                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                                </svg>
                                GitHub
                            </a>
                        </li>
                    </ul>
                </nav>
            </aside>
            <div class="content">
                <h1>Be a11y</h1>

                <p>This project is a comprehensive collection of accessible and reusable components designed to enhance
                    the user experience of your web applications. The components included in this repository are built
                    with accessibility in mind, ensuring that they are usable by a wide range of users, including those
                    with disabilities.</p>

                <p>The collection currently includes a variety of components such as tabs, accordions, and modal
                    dialogs. These components are designed to be flexible and customizable, allowing you to easily
                    integrate them into your existing projects or create new ones.</p>

                <p>Whether you're building a simple website or a complex web application, this repository provides a
                    valuable resource for improving the accessibility and usability of your project. By using these
                    components, you can ensure that your application is inclusive and easy to use for all users.</p>
            </div>
        </main>

        <script type="module">
            import { Link } from './be-a11y.ts'
            import './src/css/index.css'

            Link.init('a.github-button')
        </script>
    </body>

</html>