accessibility-resources/about.html at main · codelikeagirlau/accessibility-resources · 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
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
114
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600&family=Inter:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>About Accessibility Resources</title>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="logo">CLG Community Accessibility Resources</div>
      </div>
    </header>
    <main>
      <div class="container main-content">
        <!-- NOTE: If you update the navigation, please also update it on all other pages  -->
        <nav class="sidebar-nav">
          <ul>
            <li><a href="accessibility-resources/index.html">Home</a></li>
            <li><a href="accessibility-resources/tools-and-resources.html">Tools & Resources</a></li>
            <li><a href="#">Applying Accessibility</a></li>
            <li><a href="accessibility-resources/accessibility-resources/manifesto.html">Manifesto</a></li>
            <li><a href="accessibility-resources/accessibility-resources/about.html" class="active">What is this thing?</a></li>
            <li><a href="accessibility-resources/people-to-follow.html">People to follow</a></li>
            <li class="btn">
              <a href="accessibility-resources/accessibility-resources/sub-page/web-developer-pledge.html">Take the pledge!</a>
            </li>
          </ul>
        </nav>
        <article>
        <h1>If you're building anything for the WWW, here's hoping The Accessibility Project* is your new best friend</h1>

        <section>
          <p>Welcome to the The Accessibility Project* by the Code Like a Girl Community</p>

          <p>Accessibility is important for the web so that everyone can access, use and enjoy the beauty that is the Wide World Web!</p>

          <p>It’s our feeling that within all digital teams, it’s often the case that all involved want their work to be accessible—they want every piece of the puzzle to be viewed, used, read, and enjoyed by all that come across it. We think accessibility is a valued part of all digital products but it’s commonly left to the last minute or not held responsible by one set team or perhaps even just assumed that it’s accessible. </p>

          <p>We don’t want accessibility to be a burden or an afterthought so we’ve created The Accessibility Project* to to help piece together the many great resources our community has found and used into one neat place. Not only that but we’re guided by <a href="/manifesto.html">principles</a>, we’ve written a <a href="/manifesto.html">manifesto</a>, and we ask those who are part of WWW to <a href="/web-developer-pledge.html">pledge alongside us</a>, the CLG community, to make accessibility a priority.</p>
        </section>
        <section>
          <h2>Wait, what is accessibility though?</h2>

          <p>On the web, accessibility ensures that users with disabilities are able to use all facets of a website. The <a href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a> defines accessibility standards and guidelines that all website designers and developers should comply with.</p>

          <p>Accessibility is often pooled together with other web standards like performance, usability and security at the end of developing a web project though our aim is to make it a priority throughout all stages of web development.</p>
        </section>
        <section>
          <h2>Meet the makers</h2>

          <ul class="makers-list">
            <!-- TODO: If interested, we can duplicate list items and add contributors to this list -->
            <li>
              <div class="maker-image">
                <!-- Either upload an image of yourself or we can choose an avatar from somewhere. For example -->
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64">
                  <path d="M 32 6 C 13.377 6 5 22.373 5 34 C 5 38.302 6.407 40.338531 8 41.269531 L 8 54 L 12 54 L 12 41.845703 C 14.069 41.293703 15.461719 39.397437 15.636719 39.148438 L 12.363281 36.849609 C 12.045281 37.302609 11.265906 38 10.878906 38 C 10.222906 38 9 38 9 34 C 9 16.516 23.107 10 32 10 C 40.893 10 55 16.516 55 34 C 55 38 53.777094 38 53.121094 38 C 52.752094 38 52.016719 37.377563 51.636719 36.851562 L 48.363281 39.150391 C 48.538281 39.399391 49.932953 41.293703 52.001953 41.845703 L 52.001953 54 L 56.001953 54 L 56.001953 41.269531 C 57.593953 40.338531 59 38.302 59 34 C 59 22.373 50.623 6 32 6 z M 23 21 C 19.134 21 16 24.134 16 28 C 16 30.830776 17.68395 33.262367 20.101562 34.365234 C 18.783435 36.502402 18 38.843064 18 41.021484 C 18 48.970484 20.019 53 24 53 C 24.707 53 25.836641 52.774234 26.931641 51.615234 C 28.159641 52.277234 29.963 53 32 53 C 34.037 53 35.840359 52.277234 37.068359 51.615234 C 38.163359 52.774234 39.293 53 40 53 C 43.981 53 46 48.970484 46 41.021484 C 46 38.843064 45.216565 36.502402 43.898438 34.365234 C 46.31605 33.262367 48 30.830776 48 28 C 48 24.134 44.866 21 41 21 C 37.402104 21 34.442613 23.716325 34.048828 27.208984 C 33.376347 27.085089 32.69505 27 32 27 C 31.30495 27 30.623653 27.085089 29.951172 27.208984 C 29.557387 23.716325 26.597896 21 23 21 z M 23 24 C 24.657 24 26 25.343 26 27 C 26 28.02069 25.487652 28.919044 24.708984 29.460938 C 24.687944 29.475668 24.667454 29.491022 24.646484 29.505859 C 24.173607 29.817183 23.608559 30 23 30 C 21.343 30 20 28.657 20 27 C 20 25.343 21.343 24 23 24 z M 41 24 C 42.657 24 44 25.343 44 27 C 44 28.657 42.657 30 41 30 C 40.391073 30 39.826369 29.817183 39.353516 29.505859 C 39.332546 29.491022 39.312056 29.475668 39.291016 29.460938 C 38.512406 28.919044 38 28.02069 38 27 C 38 25.343 39.342 24 41 24 z M 32 31 C 37.056 31 42 36.738484 42 41.021484 C 42 46.729484 40.8635 48.891094 40.0625 48.996094 C 39.202426 48.420734 38.223324 44.620108 38.007812 41.017578 A 6.97 4 0 0 0 32 35 A 6.97 4 0 0 0 25.992188 41.027344 C 25.775245 44.627315 24.79859 48.419408 23.939453 48.994141 C 23.137453 48.890141 22 46.729484 22 41.021484 C 22 36.738484 26.944 31 32 31 z M 29.861328 42.802734 A 6.97 4 0 0 0 32 43 A 6.97 4 0 0 0 34.138672 42.804688 C 34.350154 44.997745 34.707105 46.737298 35.154297 48.095703 C 34.358297 48.523703 33.212 49 32 49 C 30.788 49 29.640703 48.52275 28.845703 48.09375 C 29.293823 46.73496 29.650096 44.996684 29.861328 42.802734 z"></path>
                </svg>
              </div>
              <h3>Lara Salameh</h3>
              <p>UX Designer & Frontend Developer, CLG</p>
            </li>


            <li>
              <div class="maker-image">
                <!-- Either upload an image of yourself or we can choose an avatar from somewhere. For example -->
				<img src="https://avatars.githubusercontent.com/u/4270573?v=4" alt="SarahEsbie's github avatar" />

              </div>
              <h3>Sarah Brown</h3>
              <p>Lead Technologist & full stack developer, CLG</p>
            </li>

            <li>
              <div class="maker-image">
                <!-- Either upload an image of yourself or we can choose an avatar from somewhere. For example -->
                <img src="https://avatars.githubusercontent.com/u/112836795?v=4" alt="Yellow and white cube pattern" />
              </div>
              <h3>Shann Roberts</h3>
              <p>Developer, CLG Career Track Scholarship</p>
            </li>


            <li>
              <div class="maker-image">
                <!-- Either upload an image of yourself or we can choose an avatar from somewhere. For example -->
                <img src="https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Library shelf of books" />
              </div>
              <h3>Your name</h3>
              <p>Title/Bio/Prospective career</p>
            </li>

        </section>

        <section>

          <h2>Got something useful? Anything we missed? Just want to chat?</h2>
          <p>This is an <a href="https://github.com/codelikeagirlau/accessibility-resources/" target="_blank">open source project</a>, all started via the <a href="https://hacktoberfest.com/" target="_blank">Hacktoberfest</a> initiative and we'd love your help to make it the go-to for making your online projects accessible. Start a <a href="https://github.com/codelikeagirlau/accessibility-resources/discussions" target="_blank">discussion</a> with us or even better, open up an <a href="https://github.com/codelikeagirlau/accessibility-resources/issues" target="_blank">issue</a> and go right ahead by <a href="https://github.com/codelikeagirlau/accessibility-resources/pulls" target="_blank">contributing via a PR</a>! </p>

          <br />
          <p><em>*name TBC</em></p>

        </section>
    </main>
  </body>
</html>