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 1 commit
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
20 changes: 14 additions & 6 deletions docs/_includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<footer>
<a class="identity-logo" href="https://www.creativecommons.org"
>Creative Commons</a
aria-label="Creative Commons Homepage"
>Creative Commons</a
>

<nav class="footer-menu">
<nav class="footer-menu" aria-label="Footer navigation">
<ul>
<li>
<a href="https://creativecommons.org/about/contact">Contact</a>
</li>
<li>
<a href="https://mail.creativecommons.org/subscribe" target="_blank"
>Newsletter</a
aria-label="Subscribe to Creative Commons Newsletter"
>Newsletter</a
>
</li>
<li><a href="https://creativecommons.org/privacy">Privacy</a></li>
Expand All @@ -31,14 +33,15 @@ <h2>Contact Us</h2>
</p>
<p><a href="tel:+14154296753">+1-415-429-6753</a></p>

<nav class="social-menu">
<nav class="social-menu" aria-label="Social media links">
<ul>
<!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
<li>
<a
class="icon-replace fa-twitter"
href="https://twitter.com/creativecommons"
target="_blank"
aria-label="Follow Creative Commons on Twitter"
>Twitter</a
>
</li>
Expand All @@ -47,6 +50,7 @@ <h2>Contact Us</h2>
class="icon-replace fa-mastodon"
href="https://mastodon.social/@creativecommons"
target="_blank"
aria-label="Follow Creative Commons on Mastodon"
>Mastodon</a
>
</li>
Expand All @@ -55,6 +59,7 @@ <h2>Contact Us</h2>
class="icon-replace fa-facebook"
href="https://www.facebook.com/creativecommons"
target="_blank"
aria-label="Follow Creative Commons on Facebook"
>Facebook</a
>
</li>
Expand All @@ -63,6 +68,7 @@ <h2>Contact Us</h2>
class="icon-replace fa-linkedin"
href="https://www.linkedin.com/company/creative-commons/"
target="_blank"
aria-label="Follow Creative Commons on LinkedIn"
>LinkedIn</a
>
</li>
Expand All @@ -89,6 +95,7 @@ <h2>Subscribe to our Newsletter</h2>
id="mce-EMAIL"
placeholder="Your email"
required=""
aria-required="true"
/>
<!-- 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">
Expand All @@ -115,6 +122,7 @@ <h2>Support Our Work</h2>
class="donate icon-attach cc-heart-filled"
href="https://www.classy.org/give/313412/#!/donation/checkout?c_src=website&c_src2=top-of-page-banner"
target="_blank"
aria-label="Donate to Creative Commons"
>Donate Now</a
>
</div>
Expand All @@ -129,10 +137,10 @@ <h2>Support Our Work</h2>
<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.
</p>

<svg>
<svg role="img" aria-label="Creative Commons logo">
SisiVero marked this conversation as resolved.
Show resolved Hide resolved
<use href="/_assets/vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
</svg>
<svg>
<svg role="img" aria-label="Creative Commons BY icon">
SisiVero marked this conversation as resolved.
Show resolved Hide resolved
<use href="/_assets/vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
</svg>
</div>
Expand Down
17 changes: 12 additions & 5 deletions docs/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="/">Resource Archive</a></h1>
<h1><a class="identity-logo product" href="/" aria-label="Resource Archive">Resource Archive</a></h1>
SisiVero marked this conversation as resolved.
Show resolved Hide resolved

<nav class="ancilliary-menu">
<nav class="ancilliary-menu" role="navigation" aria-label="Main menu">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This label is incorrect, it should bw Ancillary Menu

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is a current open issue on this, pr has been created to address this issue from vocabulary repo.

<ul>
<!-- uncomment below line, if translation functionality is present on site -->
<!-- <li><button class="locale icon-attach fa-globe">English</button></li> -->
Expand All @@ -13,30 +13,33 @@ <h1><a class="identity-logo product" href="/">Resource Archive</a></h1>
class="donate icon-attach fa-heart"
href="https://www.classy.org/give/313412/#!/donation/checkout?c_src=website&c_src2=top-of-page-banner"
target="_blank"
aria-label="Donate to Creative Commons"
>Donate</a
>
</li>
<li><button class="explore">Explore CC</button></li>
<li><button class="explore" aria-label="Explore Creative Commons">Explore CC</button></li>
</ul>
</nav>
</div>
<div class="explore-panel">
<!-- (optional main CC logo, p, link on non-home site back to main site) -->
<aside>
<a class="identity-logo" href="https://www.creativecommons.org"
aria-label="Creative Commons Homepage"
>Creative Commons</a
>
<h2>Our Work Relies On You!</h2>
<p>Help us keep the internet free and open.</p>
</aside>

<nav class="explore-menu">
<nav class="explore-menu" role="navigation" aria-label="Explore menu">
<ul>
<li>
<a
id="global-header-link"
href="https://network.creativecommons.org/"
target="_blank"
aria-label="Join the Creative Commons Global Network"
>Global Network</a
>
<p>Join a global community working to strengthen the Commons</p>
Expand All @@ -46,6 +49,7 @@ <h2>Our Work Relies On You!</h2>
id="global-header-link"
href="https://certificate.creativecommons.org/"
target="_blank"
aria-label="Creative Commons Certificate Program"
>Certificate</a
>
<p>
Expand All @@ -55,25 +59,28 @@ <h2>Our Work Relies On You!</h2>
</li>
<li>
<a href="https://summit.creativecommons.org/" target="_blank"
aria-label="Attend the Global Summit"
>Global Summit</a
>
<p>Attend our annual event, promoting the power of open licensing</p>
</li>
<li>
<a href="https://chooser-beta.creativecommons.org/" target="_blank"
aria-label="Get help with licenses"
>Chooser</a
>
<p>Get help choosing the appropriate license for your work</p>
</li>
<li>
<a href="https://search.creativecommons.org/" target="_blank"></a>
<a href="https://search.creativecommons.org/" target="_blank" aria-label="Search for openly licensed material"></a>
<p>
Find engines to search openly licensed material for creative and
educational reuse
</p>
</li>
<li>
<a href="https://opensource.creativecommons.org/" target="_blank"
aria-label="Learn about Open Source"
>Open Source</a
>
<p>Help us build products that maximize creativity and innovation</p>
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
Loading