Skip to content

Add accessibility features to the Rig #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
petulla wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add accessibility features to the Rig #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc4344e
Started updating with accessibility features
petulla Oct 23, 2018
1410a75
Access updates
petulla Nov 30, 2018
48c3d34
Merge branch 'master' of https://github.com/nprapps/dailygraphics
petulla Nov 30, 2018
2a09586
Add more upgrades
petulla Nov 30, 2018
8604a7e
Upgrades
petulla Nov 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions graphic_templates/_base/base_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<head>
<title>Graphic : NPR</title>

<meta name="title" content="{{ COPY.labels.headline }}">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
Expand Down Expand Up @@ -47,24 +48,28 @@
</head>
<body>
<!-- Analytics -->
{{ JS.push('js/helpers.js') }}
{{ JS.push('js/analytics.js') }}
{{ JS.render('js/graphic-header.js') }}
<header>
{{ JS.push('js/helpers.js') }}
{{ JS.push('js/analytics.js') }}
{{ JS.render('js/graphic-header.js') }}
</header>
<section>
{% block content %}

{% block content %}
The child template content goes here!

The child template content goes here!

{% endblock content %}

<script type="text/javascript" src="{{ PYM['pym_url'] }}"></script>
{% block js %}
{{ JS.push('js/lib/underscore.js') }}
{{ JS.push('js/lib/d3.min.js') }}
{{ JS.push('js/lib/modernizr.svg.min.js') }}
{{ JS.push('js/base.js') }}
{{ JS.push('js/graphic.js') }}
{{ JS.render('js/graphic-footer.js') }}
{% endblock js %}
{% endblock content %}
</section>
<footer>
<script type="text/javascript" src="{{ PYM['pym_url'] }}"></script>
{% block js %}
{{ JS.push('js/lib/underscore.js') }}
{{ JS.push('js/lib/d3.min.js') }}
{{ JS.push('js/lib/modernizr.svg.min.js') }}
{{ JS.push('js/base.js') }}
{{ JS.push('js/graphic.js') }}
{{ JS.render('js/graphic-footer.js') }}
{% endblock js %}
</footer>
</body>
</html>
2 changes: 1 addition & 1 deletion graphic_templates/_base/css/base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ rect {
shape-rendering: crispEdges;
}

.bars rect { fill: @teal3; }
rect.bars { fill: @teal3; }

.labels {
position: absolute;
Expand Down
30 changes: 16 additions & 14 deletions graphic_templates/ai2html_graphic/child_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,30 @@

{% block content %}

{% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
<header id="meta">
{% if COPY.labels.headline %}<h1 class="hed">{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2 class="dek">{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
</header>

<div id="graphic" class="graphic">
{% include 'ai2html-graphic.html' %}
</div>
<figure id="ai2html-graphic" class="graphic" role="img" aria-describedby="meta">
{% include 'ai2html-graphic.html' %}
</figure>

{% if COPY.labels.footnote %}
<div class="footnotes">
{% if COPY.labels.footnote %}
<div class="footnotes">
<h4>Notes</h4>
<p>{{ COPY.labels.footnote|smarty }}</p>
</div>
{% endif %}
{% endif %}

<div class="footer">
{% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
{% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
</div>
<footer class="footer" role="contentinfo">
{% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
{% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
</footer>

{% endblock content %}

{% block js %}
{{ JS.push('js/graphic.js') }}
{{ JS.render('js/graphic-footer.js') }}
{{ JS.push('js/graphic.js') }}
{{ JS.render('js/graphic-footer.js') }}
{% endblock js %}
6 changes: 3 additions & 3 deletions graphic_templates/animated_photo/child_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

{% block content %}

<div id="graphic" class="photo"></div>
<figure id="graphic" class="photo" role="img" aria-describedby="caption"></figure>

{% if COPY.labels.caption or COPY.labels.credit %}
<div class="caption">
<footer class="caption" id="caption" role="contentinfo">
{% if COPY.labels.caption %}<p>{{ render(COPY.labels.caption)|smarty }}</p>{% endif %}
{% if COPY.labels.credit %}<p class="credit">{{ COPY.labels.credit|smarty }}</p>{% endif %}
</div>
</footer>
{% endif %}

<script type="text/javascript">
Expand Down
13 changes: 7 additions & 6 deletions graphic_templates/archive_graphic/child_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
{% extends 'base_template.html' %}

{% block content %}
<header id="meta">
<h1>Headline</h1>
<h2>Subhed</h2>
</header>

<h1>Headline</h1>
<h2>Subhed</h2>

<div id="graphic"><img src="fallback.png" alt="[Chart]" class="fallback" /></div>
<figure id="graphic" role="img" aria-describedby="meta"><img src="fallback.png" alt="[Chart]" class="fallback" /></figure>

<!-- <div class="footnotes">
<h4>Notes</h4>
<p>Footnote</p>
</div> -->

<div class="footer">
<footer class="footer" role="contentinfo">
<p>Source: TK TK TK</p>
<p>Credit: TK TK TK</p>
</div>
</footer>

{% endblock content %}

Expand Down
35 changes: 18 additions & 17 deletions graphic_templates/bar_chart/child_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,28 @@

{% block content %}

{% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
<header id="meta">
{% if COPY.labels.headline %}<h1 class="hed">{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2 class="dek">{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
</header>

<div id="bar-chart" class="graphic">
<img src="fallback.png" alt="[Chart]" class="fallback" />
</div>
<figure id="bar-chart" class="graphic"><img src="fallback.png" alt="[Chart]" class="fallback" /></figure>

{% if COPY.labels.footnote %}
<div class="footnotes">
<h4>Notes</h4>
<p>{{ COPY.labels.footnote|smarty }}</p>
</div>
{% endif %}
{% if COPY.labels.footnote %}
<div class="footnotes">
<h4>Notes</h4>
<p>{{ COPY.labels.footnote }}</p>
</div>
{% endif %}

<div class="footer">
{% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
<footer class="footer" role="contentinfo">
{% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
{% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
</div>
</footer>

<script type="text/javascript">
var DATA = {{ COPY.data.json() }};
</script>
<script type="text/javascript">
var DATA = {{ COPY.data.json() }};
var ariaData = {{ COPY.labels.json() }};
</script>

{% endblock content %}
93 changes: 60 additions & 33 deletions graphic_templates/bar_chart/js/graphic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ var renderBarChart = function(config) {

var margins = {
top: 0,
right: 15,
right: 35,
bottom: 20,
left: (labelWidth + labelMargin)
};
Expand All @@ -101,11 +101,17 @@ var renderBarChart = function(config) {
var chartWrapper = containerElement.append('div')
.attr('class', 'graphic-wrapper');

var chartElement = chartWrapper.append('svg')
var svg = chartWrapper.append('svg')
.attr('role', 'img')
.attr('aria-labelledby', 'svg-title svg-desc')
.attr('width', chartWidth + margins['left'] + margins['right'])
.attr('height', chartHeight + margins['top'] + margins['bottom'])
.append('g')
.attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')');

svg.append('title').attr('id', 'svg-title').text(ariaData.headline);
svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed);

var chartElement = svg.append('g')
.attr('transform', makeTranslate(margins['left'], margins['top']));

/*
* Create D3 scale objects.
Expand Down Expand Up @@ -142,6 +148,7 @@ var renderBarChart = function(config) {
*/
chartElement.append('g')
.attr('class', 'x axis')
.attr('role', 'presentation')
.attr('transform', makeTranslate(0, chartHeight))
.call(xAxis);

Expand All @@ -154,38 +161,47 @@ var renderBarChart = function(config) {

chartElement.append('g')
.attr('class', 'x grid')
.attr('role', 'presentation')
.attr('transform', makeTranslate(0, chartHeight))
.call(xAxisGrid()
.tickSize(-chartHeight, 0, 0)
.tickFormat('')
);

/*
* Render bars to chart.
*/
chartElement.append('g')
.attr('class', 'bars')
.selectAll('rect')
.data(config['data'])
.enter()
.append('rect')
.attr('x', function(d) {
if (d[valueColumn] >= 0) {
return xScale(0);
}
* Render bars to chart.
*/
var dataGroup = chartElement.append('g')
.attr('aria-label','bar graph')
.attr('class', 'data');

var rects = dataGroup.selectAll('g.rects')
.data(config.data)
.enter()
.append('g').attr('class', 'rects');

rects
.append('title').text(function(d) {
return d[labelColumn];
})

return xScale(d[valueColumn]);
})
.attr('width', function(d) {
return Math.abs(xScale(0) - xScale(d[valueColumn]));
})
.attr('y', function(d, i) {
return i * (barHeight + barGap);
})
.attr('height', barHeight)
.attr('class', function(d, i) {
return 'bar-' + i + ' ' + classify(d[labelColumn]);
});
rects
.append('rect')
.attr('role', 'presentation')
.attr('x', function(d) {
if (d[valueColumn] >= 0) { return xScale(0); }
return xScale(d[valueColumn]);
})
.attr('width', function(d) {
return Math.abs(xScale(0) - xScale(d[valueColumn]));
})
.attr('y', function(d, i) {
return i * (barHeight + barGap);
})
.attr('height', barHeight)
.attr('class', function(d, i) {
return 'bars bar-' + i + ' ' + classify(d[labelColumn]);
});

/*
* Render 0-line.
Expand Down Expand Up @@ -213,6 +229,7 @@ var renderBarChart = function(config) {
.data(config['data'])
.enter()
.append('li')
.attr('role', 'listitem')
.attr('style', function(d, i) {
return formatStyle({
'width': labelWidth + 'px',
Expand All @@ -232,12 +249,22 @@ var renderBarChart = function(config) {
/*
* Render bar values.
*/
chartElement.append('g')
.attr('class', 'value')
.selectAll('text')
.data(config['data'])
.enter()
var textLabels = dataGroup.append('g')
.attr('class', 'value')
.selectAll('g.textg')
.data(config.data)
.enter()
.append('g')
.attr('class','textg');

textLabels.append('title')
.text(function(d) {
return d[valueColumn];
})

textLabels
.append('text')
.attr('role','listitem')
.text(function(d) {
return d[valueColumn].toFixed(0) + '%';
})
Expand Down
16 changes: 9 additions & 7 deletions graphic_templates/block_histogram/child_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{% extends 'base_template.html' %}

{% block content %}
<header id="meta">
{% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
</header>

{% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
{% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}

<div id="block-histogram" class="graphic">
<figure id="block-histogram" class="graphic" role="img" aria-describedby="meta">
<img src="fallback.png" alt="[Chart]" class="fallback" />
</div>
</figure>

{% if COPY.labels.footnote %}
<div class="footnotes">
Expand All @@ -16,14 +17,15 @@ <h4>Notes</h4>
</div>
{% endif %}

<div class="footer">
<footer class="footer" role="contentinfo">
{% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
{% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
</div>
</footer>

<script type="text/javascript">
var DATA = {{ COPY.data.json() }};
var LABELS = {{ COPY.labels.json() }};
var ariaData = {{ COPY.labels.json() }};
</script>

{% endblock content %}
Loading