Accessability pass

README.md

@@ -8,16 +8,16 @@ It does not implement every feature found in other carousel libraries. Instead,
 Mouse-drag behavior closely follows native touch scrolling in the browser, including inertia and snapping to a slide. Thus dragging with the mouse feels pretty identical to native scrolling on a touch device or using a trackpad.
 
 
-| File       |    Size |
-| ---------- | ------: |
-| snappy.js  | 6,17 kB |
-| snappy.css | 1,11 kB |
+| File       |    Size |   gzip |
+| ---------- | ------: | -----: |
+| snappy.js  | 7.5k kB | 2.2 KB |
+| snappy.css |   0.9 B | 0.4 KB |
 
 
 ## Usage
 
 
-### CSS only for a basic scroll container
+### Only CSS for a basic scroll container
 
 You can use Snappy without JavaScript. This gives you a simple CSS-only scroll container with snapping slides.
 
@@ -26,13 +26,14 @@ You can use Snappy without JavaScript. This gives you a simple CSS-only scroll c
 <link rel="stylesheet" href="dist/snappy.css">
 
 <!-- add this structure -->
-<div class="snappy-carousel">
-    <div class="scroll-container">
-        <div class="slide">1</div>
-        <div class="slide">2</div>
+<section class="snappy-carousel" aria-labelledby="carousel-heading">
+    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>
+    <ul class="scroll-container">
+        <li class="slide">1</li>
+        <li class="slide">2</li>
         ...
-    </div>
-</div>
+    </ul>
+</section>
 ```
 
 Snappy is mostly unstyled, leaving the appearance up to you.   
@@ -51,10 +52,6 @@ Options
 data-direction="x" (default)
 data-direction="y" 
 
-data-gap="var(--size-1)"
-data-gap="10px"
-data-gap="1rem"
-
 data-snap-stop="always"
 data-snap-stop="normal" (default)
 
@@ -62,17 +59,18 @@ data-snap-align="center" (default)
 data-snap-align="start"
 data-snap-align="end"
 -->
-<div class="snappy-carousel"  
-    data-gap="1rem"
+<section class="snappy-carousel" aria-labelledby="carousel-heading"
+    data-direction="y" 
     data-snap-align="start">
+    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>
 
-    <div class="scroll-container">
-        <div class="slide">1</div>
-        <div class="slide">2</div>
+    <ul class="scroll-container">
+        <li class="slide">1</li>
+        <li class="slide">2</li>
         ...
-    </div>
-</div>
-
+    </ul>
+</section>
+```
 
 ### Add JavaScript for a carousel
 
@@ -83,17 +81,20 @@ Including the JavaScript adds the following features:
 - Mouse dragging
 
 ```html
-    <div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
-        <div class="scroll-container">
-            <div class="slide">1</div>
-            <div class="slide">2</div>
-            ...
-        </div>
+<section class="snappy-carousel" aria-labelledby="carousel-heading"
+    data-direction="y" 
+    data-snap-align="start">
+    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>
+    <ul class="scroll-container">
+        <li class="slide">1</li>
+        <li class="slide">2</li>
+        ...
+    </ul>
 
-        <button class="prev">❮</button>
-        <button class="next">❯</button>
-        <div class="pagination"></div>
-    </div>
+    <button class="prev">❮</button>
+    <button class="next">❯</button>
+    <ul class="pagination"></ul>
+</section>
 
 <script src="dist/snappy.js" defer></script>
 ```