
Made the theme button toggable by keyboard Added aria-label to many <a> without any text (usually, they contains Font Awesome icons) Added aria-hidden whenever necessary Labelled the "Copy URL and Description" contained in footer Added an hidden label for the menu toggle for mobile accessibility Changed some colors to meet the Color Contrast AA level: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
25 lines
1.2 KiB
HTML
25 lines
1.2 KiB
HTML
{% if include.link %}
|
|
<a href="{{ include.link }}" class="badge badge-{{ include.color | default: " info" }}" {% if include.tooltip %} {% if
|
|
include.text == null or include.text == "" %} aria-label="{{include.tooltip}}" {% endif %} data-toggle="tooltip"
|
|
data-original-title="{{ include.tooltip }}"><i aria-hidden="true" class="{{ include.icon | default: " far
|
|
fa-question-circle"}}"></i> {{ include.text }}
|
|
{% else %}
|
|
{% if include.text == null or include.text == "" %}
|
|
aria-label="{{include.link}}"
|
|
{% endif %}
|
|
><i aria-hidden="true" class="{{ include.icon | default: " fas fa-external-link-alt"}}"></i> {{ include.text }}{%
|
|
endif %}
|
|
</a>
|
|
{% else %}
|
|
<span class="badge badge-{{ include.color | default: " info" }}" {% if include.tooltip %}
|
|
{% if include.text == null or include.text == "" %} aria-label="{{include.tooltip}}" {% endif %}
|
|
data-toggle="tooltip" data-original-title="{{ include.tooltip }}"> <i
|
|
class="{{ include.icon | default: " far fa-question-circle"}}"></i> {{include.text}}
|
|
{% else %}
|
|
{% if include.text == null or include.text == "" %}
|
|
aria-label="{{include.link}}"
|
|
{% endif %}
|
|
> {% if include.icon %}<i class="{{ include.icon }}"></i>{% endif %} {{include.text}}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %} |