Skip to content

Commit 87d8f97

Browse files
johnojohno
committed
Merge pull request tachyons-css#24 from tachyons-css/accessibility
Add alt text to images in Components & Docs
2 parents cd21eab + 355b958 commit 87d8f97

File tree

13 files changed

+36
-32
lines changed

13 files changed

+36
-32
lines changed

‎docs/elements/forms/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,10 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-forms</h4>
7676
<div class="ph3 ph5-ns pt4 pb5">
7777
<h2 class="f3 bold">Examples</h2>
7878
<form>
79-
<code class="f6 db">input-reset</code>
80-
<input type="text" class="input-reset">
79+
<label for="inputReset">
80+
<code class="f6 db">input-reset</code>
81+
</label>
82+
<input id="inputReset" type="text" class="input-reset">
8183
</form>
8284
<div class="mt5 cf">
8385
<div class="dib mr4">

‎docs/elements/images/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,13 @@ <h3 class="f5 book pt4 caps">Image</h3>
5555
<p class="measure lh-copy f5 f4-ns">
5656
This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
5757
</p>
58-
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
59-
<img src="/img/over-canvas.jpg" class="w-100">
58+
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land"&gt;</code>
59+
<img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land">
6060
<p class="f5 f4-ns lh-copy measure mt4">
6161
The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
6262
</p>
63-
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
64-
<img src="/img/under-canvas.jpg" class="db mw-100">
63+
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100" alt="night sky over water"&gt;</code>
64+
<img src="/img/under-canvas.jpg" class="db mw-100" alt="night sky over water">
6565
<div class="mt5 cf">
6666
<div class="dib mr4">
6767
<h1 class="f4 ttu tracked fw6">Previous</h1>

‎docs/elements/links/index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,11 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-links</h4>
8080
<div class="ph3 ph5-ns pt4 pb5">
8181
<h2 class="f3 bold">Examples</h2>
8282
<p>
83-
<a href="#" class="db b link pv1 hover-gray black">Black link</a>
84-
<a href="#" class="db b link pv1 hover-black near-black">Near-black link</a>
85-
<a href="#" class="db b link pv1 hover-black dark-gray">Dark-gray link</a>
86-
<a href="#" class="db b link pv1 hover-black mid-gray">Mid-gray link</a>
87-
<a href="#" class="db b link pv1 hover-black gray">Gray link</a>
83+
<a href="#" class="db b link pv1 hover-gray focus-gray black">Black link</a>
84+
<a href="#" class="db b link pv1 hover-black focus-black near-black">Near-black link</a>
85+
<a href="#" class="db b link pv1 hover-black focus-black dark-gray">Dark-gray link</a>
86+
<a href="#" class="db b link pv1 hover-black focus-black mid-gray">Mid-gray link</a>
87+
<a href="#" class="db b link pv1 hover-black focus-black gray">Gray link</a>
8888
</p>
8989
<div class="mt5 cf">
9090
<div class="dib mr4">

‎docs/layout/floats/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ <h3 class="f5 book pt4 caps">Float None</h3>
9898
<h3 class="f5 book pt4 caps">Float With Images</h3>
9999
<p class="f3">Originally floats were used to wrap text around images as in the example below.</p>
100100
<div class="cf">
101-
<img src="/img/example-1.jpg" class="fl w4 mr3">
101+
<img src="/img/example-1.jpg" class="fl w4 mr3" alt="example 1">
102102
<p class="measure mtn">
103103
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
104104
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

‎src/components/articles/title-text-image.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}}}
44
<article class="pa3 pa5-ns">
55
<h1 class="f2">Title Text with Image</h1>
6-
<img src="/img/space.jpg" class="w-100 f5 measure">
6+
<img src="/img/space.jpg" class="w-100 f5 measure" alt="outer space">
77
<p class="measure lh-copy">
88
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
99
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

‎src/components/collections/product-card.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"bodyClass" : "bg-white"
33
}}}
44
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
5-
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top">
5+
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
66
<div class="pa2 ph3-ns pb3-ns">
77
<div class="dt w-100 mt1">
88
<div class="dtc">

‎src/components/headers/circle-avatar-title-subtitle.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"bodyClass" : "bg-white"
33
}}}
44
<header class="tc pv4 pv5-ns">
5-
<img src="/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3">
5+
<img src="/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
66
<h1 class="f5 f4-ns fw6 mid-gray">Jasper Whitehouse</h1>
77
<h2 class="f6 gray fw2 ttu tracked">Los Angeles</h2>
88
</header>

‎src/components/headers/rounded-avatar-title-subtitle.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"bodyClass" : "bg-white"
33
}}}
44
<header class="tc pv4 pv5-ns">
5-
<img src="/img/logo.jpg" class="br3 ba b--black-10 h3 w3">
5+
<img src="/img/logo.jpg" class="br3 ba b--black-10 h3 w3" alt="avatar">
66
<h1 class="f5 f4-ns fw6 black-70">Jasper Whitehouse</h1>
77
<h2 class="f6 black-70 fw2 ttu tracked">Los Angeles</h2>
88
</header>

‎src/components/layout/four-column-collapse-two.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"bodyClass" : "bg-white"
33
}}}
44
<section class="cf">
5-
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/1.jpg"></div>
6-
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/2.jpg"></div>
7-
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/3.jpg"></div>
8-
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/4.jpg"></div>
5+
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/1.jpg" alt="night sky over house"></div>
6+
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/2.jpg" alt="night sky over water"></div>
7+
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/3.jpg" alt="bay bridge at night"></div>
8+
<div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/4.jpg" alt="night sky over land"></div>
99

1010

1111
</section>

‎src/templates/docs/floats/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h3 class="f5 book pt4 caps">Float None</h3>
6262
<h3 class="f5 book pt4 caps">Float With Images</h3>
6363
<p class="f3">Originally floats were used to wrap text around images as in the example below.</p>
6464
<div class="cf">
65-
<img src="/img/example-1.jpg" class="fl w4 mr3">
65+
<img src="/img/example-1.jpg" class="fl w4 mr3" alt="example 1">
6666
<p class="measure mtn">
6767
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
6868
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

‎src/templates/docs/forms/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,10 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4040
<div class="ph3 ph5-ns pt4 pb5">
4141
<h2 class="f3 bold">Examples</h2>
4242
<form>
43-
<code class="f6 db">input-reset</code>
44-
<input type="text" class="input-reset">
43+
<label for="inputReset">
44+
<code class="f6 db">input-reset</code>
45+
</label>
46+
<input id="inputReset" type="text" class="input-reset">
4547
</form>
4648
<div class="mt5 cf">
4749
<div class="dib mr4">

‎src/templates/docs/images/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ <h3 class="f5 book pt4 caps">Image</h3>
1919
<p class="measure lh-copy f5 f4-ns">
2020
This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
2121
</p>
22-
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
23-
<img src="/img/over-canvas.jpg" class="w-100">
22+
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land"&gt;</code>
23+
<img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land">
2424
<p class="f5 f4-ns lh-copy measure mt4">
2525
The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
2626
</p>
27-
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
28-
<img src="/img/under-canvas.jpg" class="db mw-100">
27+
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100" alt="night sky over water"&gt;</code>
28+
<img src="/img/under-canvas.jpg" class="db mw-100" alt="night sky over water">
2929
<div class="mt5 cf">
3030
<div class="dib mr4">
3131
<h1 class="f4 ttu tracked fw6">Previous</h1>

‎src/templates/docs/links/index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4444
<div class="ph3 ph5-ns pt4 pb5">
4545
<h2 class="f3 bold">Examples</h2>
4646
<p>
47-
<a href="#" class="db b link pv1 hover-gray black">Black link</a>
48-
<a href="#" class="db b link pv1 hover-black near-black">Near-black link</a>
49-
<a href="#" class="db b link pv1 hover-black dark-gray">Dark-gray link</a>
50-
<a href="#" class="db b link pv1 hover-black mid-gray">Mid-gray link</a>
51-
<a href="#" class="db b link pv1 hover-black gray">Gray link</a>
47+
<a href="#" class="db b link pv1 hover-gray focus-gray black">Black link</a>
48+
<a href="#" class="db b link pv1 hover-black focus-black near-black">Near-black link</a>
49+
<a href="#" class="db b link pv1 hover-black focus-black dark-gray">Dark-gray link</a>
50+
<a href="#" class="db b link pv1 hover-black focus-black mid-gray">Mid-gray link</a>
51+
<a href="#" class="db b link pv1 hover-black focus-black gray">Gray link</a>
5252
</p>
5353
<div class="mt5 cf">
5454
<div class="dib mr4">

0 commit comments

Comments
 (0)