Skip to content

Commit eb1470e

Browse files
minrkminrk
authored
Merge pull request jupyter#105 from willingc/img-alt
Add image alt tags for accessibility with screen readers
2 parents 984540b + d01353a commit eb1470e

File tree

5 files changed

+128
-145
lines changed

5 files changed

+128
-145
lines changed

‎about.html

Lines changed: 100 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h1>About Project Jupyter</h1>
3838
<section>
3939
<div class="about-block">
4040
<div class="container">
41-
<img src="assets/community.svg" class="img-responsive">
41+
<img src="assets/community.svg" class="img-responsive" alt="community graphic with orange circle and network">
4242
<h2>Community</h2>
4343
<p class="supportparagraph" style="display:inline;">Our vibrant community empowers us to create an amazing platform. Dynamic developers, cutting edge scientists as well as everyday users work together to further Jupyter's best-in-class tools.</p>
4444
<p class="supportparagraph hidden-xs hidden-sm" style="display:inline;">Here is a dynamic visualization of our most recent contributors:</p>
@@ -47,110 +47,98 @@ <h2>Community</h2>
4747
<div id="visualization" class="hidden-xs hidden-sm">
4848
</div>
4949
<div id="visualization" class="hidden-md hidden-lg">
50-
<img src="assets/community-replace.png" class="img-responsive">
50+
<img src="assets/community-replace.png" class="img-responsive" alt="community graphic">
5151
<script>
5252

53-
//basic tuning parameters
54-
var width = 600,
55-
height = 500,
56-
radius = 15,
57-
distance = 70,
58-
gravity = .09,
59-
charge = -550;
60-
61-
//scale for icon classes
62-
var scale = new Array();
63-
scale["contributor"] = 1;
64-
scale["repo"] = 1.4;
65-
scale["center"] = 4.5;
66-
67-
//Whether to show label
68-
var showLabel = new Array();
69-
showLabel["contributor"] = true;
70-
showLabel["repo"] = true;
71-
showLabel["center"] = false;
72-
73-
var svg = d3.select("#visualization").append("svg")
74-
.attr("width", width)
75-
.attr("height", height);
76-
77-
var force = d3.layout.force()
78-
.gravity(gravity)
79-
.distance(function (d) {return d.value * distance})
80-
.charge(charge)
81-
.size([width, height]);
82-
83-
d3.json("graphData.json", function(error, json) {
84-
if (error) throw error;
85-
86-
force
87-
.nodes(json.nodes)
88-
.links(json.links)
89-
.start();
90-
91-
var link = svg.selectAll(".link")
92-
.data(json.links)
93-
.enter().append("line")
94-
.attr("class", function(d) {return "link" + d.value});
95-
96-
var node = svg.selectAll(".node")
97-
.data(json.nodes)
98-
.enter().append("g")
99-
.attr("class", "node")
100-
.call(force.drag);
101-
102-
svg.append("clipPath")
103-
.attr("id", "clipCircle-contributor")
104-
.append("circle")
105-
.attr("r", radius * scale["contributor"]);
106-
107-
//uncomment to enable circle clipping for repo icons
108-
/*
109-
svg.append("clipPath")
110-
.attr("id", "clipCircle-repo")
111-
.append("circle")
112-
.attr("r", radius * scale["repo"]);
113-
114-
svg.append("clipPath")
115-
.attr("id", "clipCircle-center")
116-
.append("circle")
117-
.attr("r", radius * scale["center"]);
118-
*/
119-
120-
node.append("svg:image")
121-
.attr("xlink:href", function(d) {return d.image;})
122-
.attr("x", function(d) {return -radius * scale[d.type]})
123-
.attr("y", function(d) {return -radius * scale[d.type]})
124-
.attr("width", function(d) {return radius * 2 * scale[d.type]})
125-
.attr("height", function(d) {return radius * 2 * scale[d.type]})
126-
.attr("clip-path", function(d) {return "url(#clipCircle-" + d.type + ")" });
127-
128-
node.append("text")
129-
.attr("dx", 20)
130-
.attr("dy", ".35em")
131-
.text(function(d) { return (showLabel[d.type]) ? d.name : ""});
132-
133-
force.on("tick", function() {
134-
node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
135-
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
136-
137-
link.attr("x1", function(d) { return d.source.x; })
138-
.attr("y1", function(d) { return d.source.y; })
139-
.attr("x2", function(d) { return d.target.x; })
140-
.attr("y2", function(d) { return d.target.y; });
141-
142-
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
143-
});
144-
});
145-
146-
</script>
53+
//basic tuning parameters
54+
var width = 600,
55+
height = 500,
56+
radius = 15,
57+
distance = 70,
58+
gravity = .09,
59+
charge = -550;
60+
61+
//scale for icon classes
62+
var scale = new Array();
63+
scale["contributor"] = 1;
64+
scale["repo"] = 1.4;
65+
scale["center"] = 4.5;
66+
67+
//Whether to show label
68+
var showLabel = new Array();
69+
showLabel["contributor"] = true;
70+
showLabel["repo"] = true;
71+
showLabel["center"] = false;
72+
73+
var svg = d3.select("#visualization").append("svg")
74+
.attr("width", width)
75+
.attr("height", height);
76+
77+
var force = d3.layout.force()
78+
.gravity(gravity)
79+
.distance(function (d) {return d.value * distance})
80+
.charge(charge)
81+
.size([width, height]);
82+
83+
d3.json("graphData.json", function(error, json) {
84+
if (error) throw error;
85+
86+
force
87+
.nodes(json.nodes)
88+
.links(json.links)
89+
.start();
90+
91+
var link = svg.selectAll(".link")
92+
.data(json.links)
93+
.enter().append("line")
94+
.attr("class", function(d) {return "link" + d.value});
95+
96+
var node = svg.selectAll(".node")
97+
.data(json.nodes)
98+
.enter().append("g")
99+
.attr("class", "node")
100+
.call(force.drag);
101+
102+
svg.append("clipPath")
103+
.attr("id", "clipCircle-contributor")
104+
.append("circle")
105+
.attr("r", radius * scale["contributor"]);
106+
107+
node.append("svg:image")
108+
.attr("xlink:href", function(d) {return d.image;})
109+
.attr("x", function(d) {return -radius * scale[d.type]})
110+
.attr("y", function(d) {return -radius * scale[d.type]})
111+
.attr("width", function(d) {return radius * 2 * scale[d.type]})
112+
.attr("height", function(d) {return radius * 2 * scale[d.type]})
113+
.attr("clip-path", function(d) {return "url(#clipCircle-" + d.type + ")" });
114+
115+
node.append("text")
116+
.attr("dx", 20)
117+
.attr("dy", ".35em")
118+
.text(function(d) { return (showLabel[d.type]) ? d.name : ""});
119+
120+
force.on("tick", function() {
121+
node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
122+
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
123+
124+
link.attr("x1", function(d) { return d.source.x; })
125+
.attr("y1", function(d) { return d.source.y; })
126+
.attr("x2", function(d) { return d.target.x; })
127+
.attr("y2", function(d) { return d.target.y; });
128+
129+
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
130+
});
131+
});
132+
133+
</script>
134+
</div>
147135
</div>
148136
</div>
149137
</section>
150138
<section>
151139
<div class="about-block steering-council gray">
152140
<div class="container">
153-
<img src="assets/steering.svg" class="img-responsive">
141+
<img src="assets/steering.svg" class="img-responsive" alt="steering committee icon">
154142
<h2>Steering Council</h2>
155143
<p class="supportparagraph">Our team is primarily led by 10 steering committee members who ultimately make the final decisions.</p>
156144
<div class="col-md-12">
@@ -205,38 +193,38 @@ <h2>Steering Council</h2>
205193
<section>
206194
<div class="about-block">
207195
<div class="container">
208-
<img src="assets/sponsors2.svg" class="img-responsive">
196+
<img src="assets/sponsors2.svg" class="img-responsive" alt="sponsors">
209197
<h2>Sponsors</h2>
210198
<p class="supportparagraph">Project Jupyter receives direct funding from the following foundations and companies:</p>
211-
<div class="col6"><a href="http://helmsleytrust.org"><img src="assets/helmsley.svg" class="customerLogo"></a></div>
212-
<div class="col6"><a href="http://www.sloan.org/"><img src="assets/alfred.svg" class="customerLogo"></a></div>
213-
<div class="col6"><a href="https://www.moore.org/"><img src="assets/moore.svg" class="customerLogo"></a></div>
214-
<div class="col6"><a href="https://www.google.com/"><img src="assets/google-color.svg" class="customerLogo"></a></div>
215-
<div class="col6"><a href="http://www.microsoft.com/"><img src="assets/microsoft-color.svg" class="customerLogo logo-fix"></a></div>
216-
<div class="col6"><a href="http://developer.rackspace.com/"><img src="assets/rackspace-color.svg" class="customerLogo logo-fix"></a></div>
217-
<div class="col6"><a href="https://www.fastly.com/"><img src="assets/fastly.svg" class="customerLogo"></a></div>
199+
<div class="col6"><a href="http://helmsleytrust.org"><img src="assets/helmsley.svg" class="customerLogo" alt="helmsley trust logo"></a></div>
200+
<div class="col6"><a href="http://www.sloan.org/"><img src="assets/alfred.svg" class="customerLogo" alt="sloan logo"></a></div>
201+
<div class="col6"><a href="https://www.moore.org/"><img src="assets/moore.svg" class="customerLogo" alt="moore foundation logo"></a></div>
202+
<div class="col6"><a href="https://www.google.com/"><img src="assets/google-color.svg" class="customerLogo" alt="google logo"></a></div>
203+
<div class="col6"><a href="http://www.microsoft.com/"><img src="assets/microsoft-color.svg" class="customerLogo logo-fix" alt="microsoft logo"></a></div>
204+
<div class="col6"><a href="http://developer.rackspace.com/"><img src="assets/rackspace-color.svg" class="customerLogo logo-fix" alt="rackspace logo"></a></div>
205+
<div class="col6"><a href="https://www.fastly.com/"><img src="assets/fastly.svg" class="customerLogo" alt="fastly logo"></a></div>
218206
</div>
219207
</div>
220208
</section>
221209
<section>
222210
<div class="about-block gray" id="institutional">
223211
<div class="container">
224-
<img src="assets/institutional_partners2.svg" class="img-responsive">
212+
<img src="assets/institutional_partners2.svg" class="img-responsive" alt="institutional partners">
225213
<h2>Institutional Partners</h2>
226214
<p class="supportparagraph">Institutional Partners are companies and universities that support the project by employing Steering Council members.
227215
Current Institutional Partners include:</p>
228-
<div class="col6"><a href="http://continuum.io/"><img src="assets/continuum-color.svg" class="customerLogo" height="60" width="200"></a></div>
229-
<div class="col6"><a href="http://www.bloomberg.com/"><img src="assets/bloomberg-color.svg" class="customerLogo logo-fix"></a></div>
230-
<div class="col6"><a href="http://developer.rackspace.com/"><img src="assets/rackspace-color.svg" class="customerLogo"></a></div>
231-
<div class="col6"><a href="http://www.calpoly.edu/"><img src="assets/poly-color.svg" class="customerLogo"></a></div>
232-
<div class="col6"><a href="http://www.berkeley.edu/"><img src="assets/berkeley-color.svg" class="customerLogo"></a></div>
216+
<div class="col6"><a href="http://continuum.io/"><img src="assets/continuum-color.svg" class="customerLogo" height="60" width="200" alt="continuum.io logo"></a></div>
217+
<div class="col6"><a href="http://www.bloomberg.com/"><img src="assets/bloomberg-color.svg" class="customerLogo logo-fix" alt="bloomberg logo"></a></div>
218+
<div class="col6"><a href="http://developer.rackspace.com/"><img src="assets/rackspace-color.svg" class="customerLogo" alt="rackspace logo"></a></div>
219+
<div class="col6"><a href="http://www.calpoly.edu/"><img src="assets/poly-color.svg" class="customerLogo" alt="cal poly logo"></a></div>
220+
<div class="col6"><a href="http://www.berkeley.edu/"><img src="assets/berkeley-color.svg" class="customerLogo" alt="UC Berkeley logo"></a></div>
233221
</div>
234222
</div>
235223
</section>
236224
<section>
237225
<div class="about-block institutional">
238226
<div class="container">
239-
<img src="assets/governance-icon2.svg" class="img-responsive" id="governance">
227+
<img src="assets/governance-icon2.svg" class="img-responsive" id="governance" alt="governance icon">
240228
<h2>Governance</h2>
241229
<p class="supportparagraph">Robust, community driven development with institutional backing.</p>
242230
<div class="menu col-md-12">

‎community.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h1>Community Resources</h1>
1818
<div class="row">
1919
<div class="col-sm-6 col-md-12 community-section">
2020
<div class="col-md-2">
21-
<img src="assets/mail-list.svg" class="com-image">
21+
<img src="assets/mail-list.svg" class="com-image" alt="mailing list icon">
2222
</div>
2323
<div class="col-md-8 community-text">
2424
<h2>Jupyter General Mailing List</h2>
@@ -30,7 +30,7 @@ <h2>Jupyter General Mailing List</h2>
3030
</div>
3131
<div class="col-sm-6 col-md-12 community-section">
3232
<div class="col-md-2">
33-
<img src="assets/mail-education.svg" class="com-image">
33+
<img src="assets/mail-education.svg" class="com-image" alt="education mailing list icon">
3434
</div>
3535
<div class="col-md-8 community-text">
3636
<h2>Jupyter in Education Mailing List</h2>
@@ -42,7 +42,7 @@ <h2>Jupyter in Education Mailing List</h2>
4242
</div>
4343
<div class="col-sm-6 col-md-12 community-section">
4444
<div class="col-md-2">
45-
<img src="assets/github.svg" class="com-image">
45+
<img src="assets/github.svg" class="com-image" alt="github icon">
4646
</div>
4747
<div class="col-md-8 community-text">
4848
<h2>Jupyter on <br id="github-break">GitHub</h2>
@@ -54,7 +54,7 @@ <h2>Jupyter on <br id="github-break">GitHub</h2>
5454
</div>
5555
<div class="col-sm-6 col-md-12 community-section">
5656
<div class="col-md-2">
57-
<img src="assets/gitter.svg" class="com-image">
57+
<img src="assets/gitter.svg" class="com-image" alt="gitter icon">
5858
</div>
5959
<div class="col-md-8 community-text">
6060
<h2>Jupyter Developer Chatroom</h2>
@@ -66,7 +66,7 @@ <h2>Jupyter Developer Chatroom</h2>
6666
</div>
6767
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3 col-md-offset-0 col-md-12 community-section">
6868
<div class="col-md-2">
69-
<img src="assets/stack-overflow.svg" class="com-image">
69+
<img src="assets/stack-overflow.svg" class="com-image" alt="stack overflow icon">
7070
</div>
7171
<div class="col-md-8 community-text">
7272
<h2>Jupyter on Stack Overflow</h2>

‎donate.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ <h1>Donate to Project Jupyter</h1>
1717
<div class="architecture">
1818
<div class="container">
1919
<div class="architecturedescription col-md-12">
20-
<h2><img src="assets/donations-icon2.svg" id="arcicon1"> Donations</h2>
20+
<h2><img src="assets/donations-icon2.svg" id="arcicon1" alt="donations icon"> Donations</h2>
2121
<p id="donate-paragraph">Jupyter will always be 100% open source software, free for all to use and
2222
released under the liberal terms of the modified BSD license. If you have found Jupyter to be useful in your work, research or company, please consider making a donation to the project commensurate with your resources. Any amount helps!
2323
All donations will be used strictly to fund the development of Project Jupyter's open source software, documentation
2424
and community.
2525
</p>
2626
</div>
2727
<div class="col-md-12 donate-box">
28-
<a href="http://numfocus.org"><img src="assets/numfocus_logo.png" class="img-responsive"></a>
28+
<a href="http://numfocus.org"><img src="assets/numfocus_logo.png" class="img-responsive" alt="numfocus logo"></a>
2929
<p>Our donations are managed by the NumFOCUS Foundation, which is the legal and fiscal umbrella for the project.
3030
NumFOCUS is a 501(c)3 non-profit foundation, so if you are subject to US Tax law, your contributions will be tax-deductible.</p>
3131
<div id="donate-formatting">

0 commit comments

Comments
 (0)