Skip to content
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

Jump to bottom

ARIA attribute added to website for accessibility #336

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

ARIA attribute added to website for accessibility #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb1680b
ARIA attribute added to website for accessibility
SisiVero Oct 11, 2024
1770329
aria attributes set within the content area of the cc-resource-archiv…
SisiVero Oct 15, 2024
bc2156a
aria and added space removed from footer and header
SisiVero Oct 15, 2024
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
8 changes: 4 additions & 4 deletions docs/_includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<footer>
<a class="identity-logo" href="https://www.creativecommons.org"
>Creative Commons</a
>Creative Commons</a
>

<nav class="footer-menu">
Expand All @@ -9,8 +9,8 @@
<a href="https://creativecommons.org/about/contact">Contact</a>
</li>
<li>
<a href="https://mail.creativecommons.org/subscribe" target="_blank"
>Newsletter</a
<a href="https://mail.creativecommons.org/subscribe" target="_blank"
>Newsletter</a
>
</li>
<li><a href="https://creativecommons.org/privacy">Privacy</a></li>
Expand Down Expand Up @@ -91,7 +91,7 @@ <h2>Subscribe to our Newsletter</h2>
required=""
/>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px" aria-hidden="true">
<div style="position: absolute; left: -5000px">
<input
type="text"
name="b_fd30364b6577b471373d6076c_4603fe102a"
Expand Down
19 changes: 11 additions & 8 deletions docs/_layouts/listing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,28 @@
{% endif %}
</head>

<body class="listing-page">
<body class="listing-page" role="document">
<!-- The standard CC header, located at docs/_includes/header.html -->
{% include header.html %}

<!-- If the page is all.html, then add a class "filter-grid" to <main>. Else, do not add the class -->
{% if page.title == "All" %}
<main class="filter-grid">
<main class="filter-grid" role="main">
{% else %}
<main>
<main role="main">
{% endif %}
<!-- The main heading for the site -->
<header>
<header role="banner">
<h1>Resources</h1>

{% if page.title == "All" %}
<p>
<p aria-label="Filter and submit resources">
Filter and access the resources below or
<a href="/submit/">submit one here</a>
</p>

{% else %}
<p>
<p aria-label="Resources related to Creative Commons">
The resources related to Creative Commons. You can also
<a href="/submit/">submit one here</a>
</p>
Expand All @@ -64,16 +64,18 @@ <h1>Resources</h1>

<!-- This is the section that shows all the resource cards in the site.
The homepage shows upto 16 'featured' items ordered (1) to (16 or lesser) -->
<ul id="thumbnaillist">
<ul id="thumbnaillist" role="list">
{% for i in (1..16) %} {% for page in site.pages %} {% if page.layout
=='resource' %} {% if page.featured == i %}
<li
class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
role="listitem"
>
<article>
<article role="article">
<img class="thumbnail" src="{{page.image-thumb}}" />
<h3 class="thumbnailtitle">
<a class="thumbnailLink" href="{{ page.permalink }}"
role="link"
>{{ page.title }}</a
>
</h3>
Expand All @@ -96,6 +98,7 @@ <h3 class="thumbnailtitle">
<img class="thumbnail" src="{{page.image-thumb}}" />
<h3 class="thumbnailtitle">
<a class="thumbnailLink" href="{{ page.permalink }}"
role="link"
>{{ page.title }}</a
>
</h3>
Expand Down
36 changes: 21 additions & 15 deletions docs/_layouts/resource.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,72 +24,76 @@
/>
<link rel="stylesheet" type="text/css" href="/_assets/css/style.css" />
</head>
<body class="resource-page">
<body class="resource-page" role="document">
<!-- The standard CC header, located at docs/_includes/header.html -->
{% include header.html %}

<main>
<main role="main">
<!-- The main heading for the resource page -->
<header>
<header role="banner">
<h1>{{page.title}}</h1>
</header>

<!-- If the resource containes embed property, then display the embedded video here -->
{% if page.embed %}
<figure>{{page.embed}}</figure>
<figure role="group">{{page.embed}}</figure>
{% else %}

<!-- else, display the {image-full} image here -->
{% if page.image-full %}
<figure><img src="{{page.image-full}}" /></figure>
<figure aria-label="Resource full image"><img src="{{page.image-full}}" /></figure>
{% else %}

<!-- If the resource doesn't contain embed or image-full, display a placeholder here -->
<figure><img src="/_assets/images/placeholder-500.gif" /></figure>
<figure aria-label="Resource full image"><img src="/_assets/images/placeholder-500.gif" /></figure>
{% endif %} {% endif %}

<!-- The links to download, view or visit the resource are present here -->
<article class="downloadlinks">
<article class="downloadlinks" aria-labelledby="download-section">
<!-- for pages containing download url -->
{% if page.downloadurl %}

<!-- If the page is website or a course, text should be "Visit" -->
{% if page.medium == "website" or page.medium == "course" %}
<a href="{{page.downloadurl}}">Visit</a>
<a href="{{page.downloadurl}}" aria-label="Visit the resource">Visit</a>
{% else %}

<!-- If the page is not a website or a course, text should be "View in detail" -->
<a href="{{page.downloadurl}}">View in detail</a>
<a href="{{page.downloadurl}}" aria-label="View the resource in detail">View in detail</a>
{% endif %} {% endif %}

<!-- For pages containing repo url, text should View source -->
{% if page.repourl %}
<a href="{{page.repourl}}">View source</a>
<a href="{{page.repourl}}" aria-label="View the source code of the resource">View source</a>
{% endif %}
</article>

<!-- All the content inside the pages following this layout will be present inside this <p>. -->
<p class="description">{{content}}</p>
<p class="description" aria-label="Resource description">{{content}}</p>

<!-- If the page has a license specified -->
{% if page.license %}
<article class="resource-license">
<article class="resource-license" role="article">
<!-- If the page is licensed under CC0 -->
{% if page.license == 'CC0' %}
<a
role="link"
rel="license"
href="http://creativecommons.org/publicdomain/zero/1.0/"
aria-label="View the CCo license details"
>
<img
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
alt="CC0"
aria-label="CC0 image"
/>
</a>
<p>
To the extent possible under law,
<span property="dct:publisher">{{ page.author }}</span> has waived all
copyright and related or neighboring rights to
<a href="{{ page.downloadurl}}" property="dct:title"
aria-label="Details of {{ page.title }}"
>{{ page.title }}</a
>.
</p>
Expand All @@ -99,15 +103,16 @@ <h1>{{page.title}}</h1>
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
>
aria-label="View the {{ page.license }} license details"
>
<img
alt="Creative Commons License"
src="http://i.creativecommons.org/l/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/88x31.png"
/>
/>
</a>
<p>
{% if page.downloadurl %}
<a href="{{ page.downloadurl }}" rel="cc:attributionURL">
<a href="{{ page.downloadurl }}" rel="cc:attributionURL" aria-label="Access {{ page.title }}">
{% endif %}
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"
>{{ page.title }}</span
Expand All @@ -123,6 +128,7 @@ <h1>{{page.title}}</h1>
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
aria-label="Details of the {{ page.license }} license"
>{{ page.license }}</a
>.
</p>
Expand Down
20 changes: 13 additions & 7 deletions docs/_pages/all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
<!-- This is the resourcenavbar, which contains the category filters. The categories are TOPIC, MEDIUM and LANGUAGE. In this there are two different options for displaying a category,
For example - resourcenavtopicknown and resourcenavtopicunknown -->
<!-- If the user has selected a filter, resourcenavtopicknown will be displayed. otherwise resourcenavtopicunknown will be displayed -->
<aside id="resourcenavbar">
<article class="resourcenav resourcenavtopicknown">
<aside id="resourcenavbar" aria-label="Resource Navigation Bar">
<article class="resourcenav resourcenavtopicknown" aria-expanded="true">
<h2>Topic</h2>
<p>
<input
type="checkbox"
onclick="location.href=location.href.replace(/&?topic=([^&]$|[^&]*)/i, '');"
checked
aria-label="Remove Topic Filter"
/>
{% for topic in site.data.topics %}
<script>
Expand All @@ -27,28 +28,30 @@ <h2>Topic</h2>
</p>
</article>

<article class="resourcenav resourcenavtopicunknown topic-list">
<article class="resourcenav resourcenavtopicunknown topic-list" aria-expanded="false">
<h2>Topic</h2>
<ul>
{% for topic in site.data.topics %}
<li>
<input
type="checkbox"
onclick="window.location.search += '&topic={{ topic.string }}';"
aria-label="Select {{ topic.name }}"
/>
<label>{{ topic.name }}</label>
</li>
{% endfor %}
</ul>
</article>

<article class="resourcenav resourcenavmediumknown">
<article class="resourcenav resourcenavmediumknown" aria-expanded="true">
<h2>Medium</h2>
<p>
<input
type="checkbox"
onclick="location.href=location.href.replace(/&?medium=([^&]$|[^&]*)/i, '');"
checked
aria-label="Remove Medium Filter"
/>
{% for medium in site.data.media %}
<script>
Expand All @@ -58,28 +61,30 @@ <h2>Medium</h2>
</p>
</article>

<article class="resourcenav resourcenavmediumunknown medium-list">
<article class="resourcenav resourcenavmediumunknown medium-list" aria-expanded="false">
<h2>Medium</h2>
<ul>
{% for medium in site.data.media %}
<li>
<input
type="checkbox"
onclick="window.location.search += '&medium={{ medium.string }}';"
aria-label="Select {{ medium.name }}"
/>
<label>{{ medium.name }}</label>
</li>
{% endfor %}
</ul>
</article>

<article class="resourcenav resourcenavlanguageknown">
<article class="resourcenav resourcenavlanguageknown" aria-expanded="true">
<h2>Language</h2>
<p>
<input
type="checkbox"
onclick="location.href=location.href.replace(/&?language=([^&]$|[^&]*)/i, '');"
checked
aria-label="Remove Language Filter"
/>
{% for language in site.data.languages %}
<script>
Expand All @@ -90,14 +95,15 @@ <h2>Language</h2>
</p>
</article>

<article class="resourcenav resourcenavlanguageunknown language-list">
<article class="resourcenav resourcenavlanguageunknown language-list" aria-expanded="false">
<h2>Language</h2>
<ul>
{% for language in site.data.languages %}
<li>
<input
type="checkbox"
onclick="window.location.search += '&language={{ language.string }}';"
aria-label="Select {{ language.name }}"
/>
<label>{{ language.name }}</label>
</li>
Expand Down
15 changes: 11 additions & 4 deletions docs/_pages/submission.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h1>Submit A Resource</h1>
</header>

<!-- The content of the page, about submitting of resources -->
<h3>
<h3 aria-label="Introduction to submitting a resource">
Come across an interesting, useful resource about Creative Commons ?
</h3>
<p>
Expand All @@ -50,33 +50,36 @@ <h3>
<a
href="https://github.com/creativecommons/cc-resource-archive/"
target="_blank"
aria-label="Submit a resource to the CC resource archive repository on GitHub"
>creativecommons/cc-resource-archive</a
>
repository on GitHub.
</p>

<!-- Guide to submit the resources for new github users -->
<h3>How to Submit</h3>
<h3 aria-label="How to submit resources to Creative Commons">How to Submit</h3>
<p>
You can follow the detailed step-by-step guide documented below to have
your resources submitted and published at
<a href="https://resources.creativecommons.org/"
aria-label="Visit Creative Commons resources page"
>https://resources.creativecommons.org/</a
>
:
</p>

<!-- Steps for the guide to submit resources -->
<ol>
<ol aria-label="step-by-step guide for submitting resources">
<li>
Make sure you have an account on
<a href="https://github.com/" target="_blank">github.com</a>.
<a href="https://github.com/" target="_blank" aria-label="Create a Github account">github.com</a>.
</li>
<li>
Go to
<a
href="https://github.com/creativecommons/cc-resource-archive"
target="_blank"
aria-label="Go to the CC resource archive on GitHub"
>creativecommons/cc-resource-archive</a
>.
</li>
Expand All @@ -87,6 +90,7 @@ <h3>How to Submit</h3>
<img
src="/_assets/images/guide_fork.png"
alt="guiding image for forking"
aria-describedby="forking-guide"
/>
</figure>
</li>
Expand All @@ -97,6 +101,7 @@ <h3>How to Submit</h3>
<img
src="/_assets/images/guide_resourcetemplate.png"
alt="guiding image for resource template file"
aria-describedby="template-guide"
/>
</figure>
</li>
Expand All @@ -119,6 +124,7 @@ <h3>How to Submit</h3>
<img
src="/_assets/images/guide_sections.png"
alt="guiding image for sections in file"
aria-describedby="sections-guide"
/>
</figure>
</li>
Expand All @@ -144,6 +150,7 @@ <h3>How to Submit</h3>
<a
href="https://github.com/creativecommons/cc-resource-archive"
target="_blank"
aria-label="Open a pull request on the CC resource archive repository"
>creativecommons/cc-resource-archive</a
>
repository.
Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
Also, The title for this page is Home. On the deployed site, this will look like, Home | Creative Commons Resource Archive -->

<!-- The link to display all the resources. The homepage contains the top 16 resources by default. -->
<a id="see-all" href="/all">See All Resources</a>
<a id="see-all" href="/all" aria-label="View all resources">See All Resources</a>