Skip to content

Commit d033ac9

Browse files
author
kris70lesgo
committed
"Enhance accessibility by adding ARIA attributes to local content sections"
1 parent 7a0b5fa commit d033ac9

30 files changed

+337
-298
lines changed

‎themes/vocabulary_theme/templates/404.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{% extends "layout.html" %}
22
{% block body %}
3-
<div class="container padding-vertical-xxl has-text-centered">
4-
<h1>404</h1>
5-
<h2>Page Not Found!</h2>
6-
<p class="body-big">Sorry. The page you are looking for doesn't exist.</p>
7-
<a class="button is-success margin-vertical-big" href="/">Return Home</a>
3+
<div class="container padding-vertical-xxl has-text-centered" role="main">
4+
<h1 aria-live="polite">404</h1>
5+
<h2 aria-live="polite">Page Not Found!</h2>
6+
<p class="body-big" role="alert">Sorry. The page you are looking for doesn't exist.</p>
7+
<a class="button is-success margin-vertical-big" href="/" role="link" aria-label="Return to homepage">Return Home</a>
88
</div>
99
<!-- Creative commons -->
1010
{% endblock %}

‎themes/vocabulary_theme/templates/author.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@
66
{% block title %}{{ render_author_name(this) }}{% endblock %}
77

88
{% block body %}
9-
<div class="author-posts">
9+
<div class="author-posts" role="main">
1010
<div class="header">
1111
<div class="container">
1212
<div class="columns">
1313
<div class="column is-one-quarter-tablet-only is-2-desktop">
1414
<figure class="image profile">
15-
<img class="profile" src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200&d=mp" alt="gravatar">
15+
<img class="profile" src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200&d=mp" alt="Gravatar image of {{ render_author_name(this) }}" aria-labelledby="author-name">
1616
</figure>
1717
</div>
1818
<div class="column content is-8">
19-
<h2>{{ render_author_name(this) }}</h2>
19+
<h2 id="author-name">{{ render_author_name(this) }}</h2>
2020
{% if this.about %}
21-
<div class="about">{{ this.about }}</div>
21+
<div class="about" aria-describedby="author-about">{{ this.about }}</div>
2222
{% endif %}
23-
<a class="button small" href="{{ this.parent|url }}">See all authors</a>
23+
<a class="button small" href="{{ this.parent|url }}" aria-label="See all authors">{{ this.parent.title }}</a>
2424
</div>
2525
</div>
2626
</div>
2727
</div>
28-
<div class="posts container">
28+
<div class="posts container" role="region" aria-labelledby="author-name">
2929
{{ render_author_posts(this.children) }}
3030
</div>
3131
</div>

‎themes/vocabulary_theme/templates/authors.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
{% block title %} Authors {% endblock %}
66

77
{% block body %}
8-
<div class="all-authors">
8+
<div class="all-authors" role="region" aria-labelledby="authors-list">
9+
<h2 id="authors-list" class="visually-hidden">List of Authors</h2>
910
<div class="header">
1011
<h1 class="container">Authors</h1>
1112
</div>
@@ -18,3 +19,4 @@ <h1 class="container">Authors</h1>
1819
</div>
1920
</div>
2021
{% endblock %}
22+

‎themes/vocabulary_theme/templates/blocks/featured-projects.html

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
1-
<section class="featured-projects">
1+
<section class="featured-projects" aria-labelledby="featured-projects-title">
22
<div class="container">
33
<div class="level">
4-
<h2 class="is-paddingless level-left">
4+
<h2 class="is-paddingless level-left" id="featured-projects-title">
55
{{ this.title }}
66
</h2>
77
<span class="level-right">
8-
<a class="project-page-link" href="/contributing-code/projects/">See all available projects <i class="icon angle-right"></i></a>
8+
<a class="project-page-link" href="/contributing-code/projects/" aria-label="See all available projects">
9+
See all available projects <i class="icon angle-right"></i>
10+
</a>
911
</span>
1012
</div>
1113
<div class="project-list columns is-multiline">
1214
{% for repo in bag('repos.repos') %}
1315
{% if repo.featured %}
1416
<div class="column is-one-third">
15-
<article class="card entry-post vertical project-index">
17+
<article class="card entry-post vertical project-index" role="article">
1618
<div class="card-content">
17-
<h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}</a></h4>
18-
<a class="button is-text tiny site-link" href="{{ repo.website or repo.url }}">
19+
<h4 class="card-title b-header">
20+
<a href="{{ repo.url }}" aria-labelledby="repo-title-{{ loop.index }}">
21+
{{ repo.english_name }}
22+
</a>
23+
</h4>
24+
<a class="button is-text tiny site-link" href="{{ repo.website or repo.url }}" aria-label="Visit the project website">
1925
<span>Visit site</span>
2026
<i class="icon external-link"></i>
2127
</a>
22-
<div class="content">
28+
<div class="content" aria-describedby="repo-description-{{ loop.index }}">
2329
{{ repo.description }}
2430
</div>
2531
<div class="labels">
2632
{% for technology in repo.technologies %}
27-
<button class="button tag">{{ technology }}</button>
33+
<button class="button tag" aria-label="Technology: {{ technology }}">{{ technology }}</button>
2834
{% endfor %}
2935
</div>
3036
<div class="external-links">
31-
<a class="button is-text tiny" href="{{ repo.url }}">
37+
<a class="button is-text tiny" href="{{ repo.url }}" aria-label="Github repository for {{ repo.english_name }}">
3238
<i class="icon github"></i>
3339
<span class="link-content">Github Repository</span>
3440
</a>
3541
{% if repo.slack %}
3642
<br>
37-
<a class="button is-text tiny" href="https://creativecommons.slack.com/channels/{{ repo.slack }}">
43+
<a class="button is-text tiny" href="https://creativecommons.slack.com/channels/{{ repo.slack }}" aria-label="Slack channel for {{ repo.english_name }} (#{{ repo.slack }})">
3844
<i class="icon slack"></i>
3945
<span class="link-content">Slack channel (#{{ repo.slack }})</span>
4046
</a>
@@ -44,7 +50,7 @@ <h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}
4450
</article>
4551
</div>
4652
{% endif %}
47-
{% endfor %}
53+
{% endfor %}
4854
</div>
4955
</div>
5056
</section>

‎themes/vocabulary_theme/templates/blocks/get-involved.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
<section class="get-involved">
1+
<section class="get-involved" aria-labelledby="get-involved-title">
22
<div class="container">
33
<div class="column is-9 is-paddingless">
4-
{{ this.title }}
4+
<h2 id="get-involved-title">{{ this.title }}</h2>
55
</div>
66

77
<div class="columns get-involved-links">
8-
<div class="column is-one-third">
8+
<div class="column is-one-third" aria-labelledby="product-links">
9+
<h3 id="product-links" class="visually-hidden">Product Links</h3>
910
{{ this.links_product }}
1011
</div>
11-
<div class="column is-one-third">
12+
<div class="column is-one-third" aria-labelledby="integrate-links">
13+
<h3 id="integrate-links" class="visually-hidden">Integrate Links</h3>
1214
{{ this.links_integrate }}
1315
</div>
14-
<div class="column is-one-third">
16+
<div class="column is-one-third" aria-labelledby="plugins-links">
17+
<h3 id="plugins-links" class="visually-hidden">Plugins Links</h3>
1518
{{ this.links_plugins }}
1619
</div>
1720
</div>
1821
</div>
19-
</section>
22+
</section>

‎themes/vocabulary_theme/templates/blocks/hero.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<section class="hero">
1+
<section class="hero" role="region" aria-labelledby="hero-title">
22
<div class="container">
33
<div class="hero-title column is-12 is-paddingless">
4-
<h1>
4+
<h1 id="hero-title">
55
{{ this.title }}
66
</h1>
77
</div>
@@ -12,6 +12,6 @@ <h1>
1212
</div>
1313
</div>
1414
<div class="level-right hero-image">
15-
<img class="image" src="./github.svg" />
15+
<img class="image" src="./github.svg" alt="Hero image" />
1616
</div>
17-
</section>
17+
</section>

‎themes/vocabulary_theme/templates/blocks/recent-posts.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
{% from "macros/posts.html" import render_post_summary %}
22

3-
<section class="recent-posts">
3+
<section class="recent-posts" aria-labelledby="recent-posts-title">
44
<div class="container">
55
<div class="level">
6-
<h2 class="is-paddingless level-left">
6+
<h2 id="recent-posts-title" class="is-paddingless level-left">
77
{{ this.title }}
88
</h2>
99
<span class="level-right">
10-
<a class="posts-link" href="/blog/entries">See all posts <i class="icon angle-right"></i></a>
10+
<a class="posts-link" href="/blog/entries" aria-label="See all blog posts">
11+
See all posts <i class="icon angle-right"></i>
12+
</a>
1113
</span>
1214
</div>
13-
<div class="columns">
15+
<div class="columns" role="list">
1416
{% for post in site.query('/blog/entries') %}
1517
{% set post_loop = loop %}
1618
{% if post_loop.index <= 3 %}
17-
{{ render_post_summary(post) }}
19+
<div role="listitem">
20+
{{ render_post_summary(post) }}
21+
</div>
1822
{% endif %}
1923
{% endfor %}
2024
</div>

‎themes/vocabulary_theme/templates/blog-categories.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
{% block title %}Categories{% endblock %}
66

77
{% block body %}
8-
<div class="all-categories">
8+
<div class="all-categories" role="region" aria-labelledby="categories-title">
99
<div class="header">
10-
<h1 class="container">Categories</h1>
10+
<h1 id="categories-title" class="container">Categories</h1>
1111
</div>
1212
<div class="categories-list container">
1313
{{ render_categories(this) }}
1414
</div>
1515
</div>
16-
{% endblock %}
16+
{% endblock %}

‎themes/vocabulary_theme/templates/blog-category.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@
55
{% block title %}{{ this.name }}{% endblock %}
66

77
{% block body %}
8-
<div class="all-categories">
8+
<div class="all-categories" aria-labelledby="all-categories-title">
99
<div class="header">
1010
<div class="container">
11-
<h1>All posts categorized "{{ this.name }}"</h1>
12-
<a class="button small margin-top-bigger" href="{{ this.parent|url }}">See all categories</a>
11+
<h1 id="all-categories-title">All posts categorized "{{ this.name }}"</h1>
12+
<a class="button small margin-top-bigger" href="{{ this.parent|url }}" aria-label="See all categories">See all categories</a>
1313
</div>
1414
</div>
15-
<div class="categories-list container">
15+
<div class="categories-list container" role="list">
1616
{{ render_posts(this.children) }}
1717
</div>
1818
</div>
1919
{% endblock %}
20+

‎themes/vocabulary_theme/templates/blog-post.html

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,29 @@
66
{% block title %}{{ this.title }}{% endblock %}
77

88
{% block body %}
9-
<div class="single-post">
9+
<div class="single-post" role="article">
1010
<header class="single-post-header">
1111
<div class="container">
1212
<h4>CC Open Source Blog</h4>
13-
<h2 class="title">{{ this.title }}</h2>
13+
<h2 class="title" id="post-title">{{ this.title }}</h2>
1414
<div class="author columns is-marginless">
15-
{{ render_author_gravatar(this)|trim }}
16-
<p class="padding-small">
15+
<div role="img" aria-label="Author Gravatar">
16+
{{ render_author_gravatar(this)|trim }}
17+
</div>
18+
<p class="padding-small" aria-live="polite">
1719
{{ render_authors_byline(this)|trim }}
1820
</p>
1921
</div>
2022
{% if this.series|length %}
2123
{% set series = this.parent.parent.children.get('series').children.get(this.series) %}
2224
<div class="series-header">
2325
<span>This blog is part of the series:</span>
24-
<a href="#series">{{ series.name }}</a>
26+
<a href="#series" aria-label="Go to {{ series.name }} series">{{ series.name }}</a>
2527
</div>
2628
{% endif %}
2729
</div>
2830
</header>
29-
<div class="single-post-body content container">
31+
<div class="single-post-body content container" aria-labelledby="post-title">
3032
{{ this.body }}
3133
</div>
3234
<footer class="single-post-footer container">
@@ -37,32 +39,32 @@ <h4 class="category-title">Categories</h4>
3739
{% for category in this.categories %}
3840
{% set current_category = this.parent.parent.children.get('categories').children.get(category) %}
3941
{{ check_file('content' + this.parent.parent.path + '/categories/' + category + '/contents.lr') }}
40-
<a class="button tag" href=" {{ current_category|url }} ">{{ category }}</a>
42+
<a class="button tag" href="{{ current_category|url }}" aria-label="Category: {{ category }}">{{ category }}</a>
4143
{% endfor %}
4244
{% else %}
4345
none
4446
{% endif %}
4547
</div>
4648
</div>
4749
{% if this.series|length %}
48-
<div class="series-posts" id="series">
49-
<h5 class="title">Posts in the {{ series.name }} series</h5>
50+
<div class="series-posts" id="series" aria-labelledby="series-posts-title">
51+
<h5 class="title" id="series-posts-title">Posts in the {{ series.name }} series</h5>
5052
<ul class="posts">
5153
{% for post in series.children.order_by('pub_date') %}
5254
{% if post.path==this.path %}
5355
<li class="has-color-dark-slate-gray">
54-
<i class="icon circle-filled"></i>{{ post.title }}
56+
<i class="icon circle-filled" aria-hidden="true"></i>{{ post.title }}
5557
</li>
5658
{% else %}
5759
<li>
58-
<i class="icon circle-filled"></i><a href="{{ post|url }}">{{ post.title }}</a>
60+
<i class="icon circle-filled" aria-hidden="true"></i><a href="{{ post|url }}" aria-label="Read {{ post.title }}">{{ post.title }}</a>
5961
</li>
6062
{% endif %}
6163
{% endfor %}
6264
</ul>
6365
</div>
6466
{% endif %}
65-
<div class="comments">{{ render_disqus_comments() }}</div>
67+
<div class="comments" aria-live="polite">{{ render_disqus_comments() }}</div>
6668
</footer>
6769
</div>
6870
{% endblock %}

‎themes/vocabulary_theme/templates/blog-series-list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
{% block title %}All Series{% endblock %}
66

77
{% block body %}
8-
<div class="all-series">
8+
<div class="all-series" role="region" aria-labelledby="series-title">
99
<div class="header">
10-
<h1 class="container">All Series</h1>
10+
<h1 id="series-title" class="container">All Series</h1>
1111
</div>
1212
<div class="series-list container">
1313
{{ render_series(this) }}
1414
</div>
1515
</div>
16-
{% endblock %}
16+
{% endblock %}

‎themes/vocabulary_theme/templates/blog-series.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
<div class="header">
1010
<div class="container">
1111
<h1>All posts in series "{{ this.name }}"</h1>
12-
<a class="button small margin-top-bigger" href="{{ this.parent|url }}">See all series</a>
12+
<a class="button small margin-top-bigger" href="{{ this.parent|url }}" aria-label="See all series">{{ this.parent.name }}</a>
1313
</div>
1414
</div>
15-
<div class="series-list container">
15+
<div class="series-list container" role="list" aria-label="List of posts in the series">
1616
{{ render_posts(this.children) }}
1717
</div>
1818
</div>

‎themes/vocabulary_theme/templates/blog.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@
66
{% block title %}{{ this.title }}{% endblock %}
77

88
{% block body %}
9-
<div class="blog-page">
9+
<div class="blog-page" role="main">
1010
<div class="header">
1111
<div class="container">
1212
<h1>{{ this.title }}</h1>
13-
<div class="description column is-9 is-paddingless">{{ this.description }}</div>
13+
<div class="description column is-9 is-paddingless" aria-describedby="blog-description">{{ this.description }}</div>
1414
</div>
1515
</div>
1616
<div class="container blog-page-posts">
17-
{{ render_posts(this.pagination.items) }}
18-
<div class="pagination-wrapper">
17+
<section aria-labelledby="blog-posts">
18+
<h2 id="blog-posts" class="sr-only">Blog Posts</h2>
19+
{{ render_posts(this.pagination.items) }}
20+
</section>
21+
<div class="pagination-wrapper" aria-live="polite">
1922
{% if this.pagination.pages > 1 %}
2023
{{ render_pagination(this.pagination) }}
2124
{% endif %}

0 commit comments

Comments
 (0)