Improve web accessibility

- Add associated label to form elements.
- Add discernible name to links.
This commit is contained in:
Cotes Chung 2020-10-27 16:20:22 +08:00
parent 57a4bfdb82
commit 8d4c1deb15
7 changed files with 42 additions and 40 deletions

View file

@ -21,11 +21,14 @@
# Uncomment and complete the url below to enable more contact options # Uncomment and complete the url below to enable more contact options
# - # -
# type: mastodon
# icon: 'fab fa-mastodon' # icons powered by <https://fontawesome.com/> # icon: 'fab fa-mastodon' # icons powered by <https://fontawesome.com/>
# url: '' # Fill with your mastodon account page # url: '' # Fill with your mastodon account page
# - # -
# type: linkedin
# icon: 'fab fa-linkedin' # icons powered by <https://fontawesome.com/> # icon: 'fab fa-linkedin' # icons powered by <https://fontawesome.com/>
# url: '' # Fill with your Linkedin homepage # url: '' # Fill with your Linkedin homepage
# - # -
# type: stack-overflow
# icon: 'fab fa-stack-overflow' # icon: 'fab fa-stack-overflow'
# url: '' # Fill with your stackoverflow homepage # url: '' # Fill with your stackoverflow homepage

View file

@ -10,17 +10,15 @@
<ul class="pagination mt-4 mb-0 pl-lg-2"> <ul class="pagination mt-4 mb-0 pl-lg-2">
<!-- left arrow --> <!-- left arrow -->
{% if paginator.previous_page %} {% if paginator.previous_page %}
<li class="page-item"> {% assign prev_url = paginator.previous_page_path | relative_url %}
<a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}"> {% else %}
{% assign prev_url = "#" %}
{% endif %}
<li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
<a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
<i class="fas fa-angle-left"></i> <i class="fas fa-angle-left"></i>
</a> </a>
</li> </li>
{% else %}
<li class="page-item disabled">
<a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
</li>
{% endif %}
<!-- endof left arrow -->
<!-- page numbers --> <!-- page numbers -->
{% assign left_ellipsis = false %} {% assign left_ellipsis = false %}
@ -73,16 +71,15 @@
{% endfor %} {% endfor %}
<!-- right arrow --> <!-- right arrow -->
{% if paginator.next_page %} {% if paginator.next_page_path %}
<li class="page-item"> {% assign next_url = paginator.next_page_path | relative_url %}
<a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}"> {% else %}
{% assign next_url = "#" %}
{% endif %}
<li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
<a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
<i class="fas fa-angle-right"></i> <i class="fas fa-angle-right"></i>
</a> </a>
</li> </li>
{% else %}
<li class="page-item disabled">
<a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
</li>
{% endif %}
</ul> <!-- .pagination --> </ul> <!-- .pagination -->

View file

@ -16,7 +16,7 @@
{% for share in site.data.share.platforms %} {% for share in site.data.share.platforms %}
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %} {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
<a href="{{ link }}" data-toggle="tooltip" data-placement="top" <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
title="{{ share.type }}" target="_blank" rel="noopener"> title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
<i class="fa-fw {{ share.icon }}"></i> <i class="fa-fw {{ share.icon }}"></i>
</a> </a>
{% endfor %} {% endfor %}

View file

@ -81,7 +81,7 @@
{% endcapture %} {% endcapture %}
{% if url != '' %} {% if url != '' %}
<a href="{{ url }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}> <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
<i class="{{ entry.icon }}"></i> <i class="{{ entry.icon }}"></i>
</a> </a>
{% endif %} {% endif %}

View file

@ -41,7 +41,8 @@
<i id="search-trigger" class="fas fa-search fa-fw"></i> <i id="search-trigger" class="fas fa-search fa-fw"></i>
<span id="search-wrapper" class="align-items-center"> <span id="search-wrapper" class="align-items-center">
<i class="fas fa-search fa-fw"></i> <i class="fas fa-search fa-fw"></i>
<input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}..."> <input class="form-control" id="search-input" type="search"
aria-label="search" placeholder="{{ site.data.label.search_hint }}...">
<i class="fa fa-times-circle fa-fw" id="search-cleaner"></i> <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
</span> </span>
<span id="search-cancel" >Cancel</span> <span id="search-cancel" >Cancel</span>

View file

@ -48,7 +48,7 @@ layout: compress
<div id="mask"></div> <div id="mask"></div>
<a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button"> <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
<i class="fas fa-angle-up"></i> <i class="fas fa-angle-up"></i>
</a> </a>

View file

@ -64,7 +64,8 @@ type: categories
<!-- arrow --> <!-- arrow -->
{% if sub_categories_size > 0%} {% if sub_categories_size > 0%}
<a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true" <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
class="category-trigger hide-border-bottom"> class="category-trigger hide-border-bottom">
<i class="fas fa-fw fa-angle-down"></i> <i class="fas fa-fw fa-angle-down"></i>
</a> </a>