More accessibility improvements

This commit is contained in:
Raphael Michel
2018-05-10 10:21:01 +02:00
parent 44a792583c
commit b09a92a264
5 changed files with 41 additions and 12 deletions

View File

@@ -230,9 +230,11 @@
</a> </a>
{% endif %} {% endif %}
<div class="product-description {% if item.picture %}with-picture{% endif %}"> <div class="product-description {% if item.picture %}with-picture{% endif %}">
<a href="#" data-toggle="variations"> <h4>
<strong>{{ item.name }}</strong> <a href="#" data-toggle="variations">
</a> {{ item.name }}
</a>
</h4>
{% if item.description %} {% if item.description %}
<div class="product-description"> <div class="product-description">
{{ item.description|localize|rich_text }} {{ item.description|localize|rich_text }}
@@ -273,9 +275,11 @@
{% for var in item.available_variations %} {% for var in item.available_variations %}
<div class="row-fluid product-row variation"> <div class="row-fluid product-row variation">
<div class="col-md-8 col-xs-12"> <div class="col-md-8 col-xs-12">
<label for="variation_{{ item.pk }}_{{ var.pk }}"> <h5>
{{ var }} <label for="variation_{{ item.pk }}_{{ var.pk }}">
</label> {{ var }}
</label>
</h5>
{% if var.description %} {% if var.description %}
<div class="variation-description"> <div class="variation-description">
{{ var.description|localize|rich_text }} {{ var.description|localize|rich_text }}
@@ -358,7 +362,9 @@
</a> </a>
{% endif %} {% endif %}
<div class="product-description {% if item.picture %}with-picture{% endif %}"> <div class="product-description {% if item.picture %}with-picture{% endif %}">
<label for="item_{{ item.pk }}"><strong>{{ item.name }}</strong></label> <h4>
<label for="item_{{ item.pk }}">{{ item.name }}</label>
</h4>
{% if item.description %} {% if item.description %}
<div class="product-description"> <div class="product-description">
{{ item.description|localize|rich_text }} {{ item.description|localize|rich_text }}

View File

@@ -47,7 +47,9 @@
</a> </a>
{% endif %} {% endif %}
<div class="product-description {% if item.picture %}with-picture{% endif %}"> <div class="product-description {% if item.picture %}with-picture{% endif %}">
<strong>{{ item.name }}</strong> <h4>
{{ item.name }}
</h4>
{% if item.description %} {% if item.description %}
<div class="product-description"> <div class="product-description">
{{ item.description|localize|rich_text }} {{ item.description|localize|rich_text }}
@@ -74,9 +76,11 @@
{% for var in item.available_variations %} {% for var in item.available_variations %}
<div class="row-fluid product-row variation"> <div class="row-fluid product-row variation">
<div class="col-md-8 col-xs-12"> <div class="col-md-8 col-xs-12">
<label for="variation_{{ item.id }}_{{ var.id }}"> <h5>
{{ var }} <label for="variation_{{ item.id }}_{{ var.id }}">
</label> {{ var }}
</label>
</h5>
{% if var.description %} {% if var.description %}
<div class="variation-description"> <div class="variation-description">
{{ var.description|localize|rich_text }} {{ var.description|localize|rich_text }}
@@ -150,7 +154,9 @@
</a> </a>
{% endif %} {% endif %}
<div class="product-description {% if item.picture %}with-picture{% endif %}"> <div class="product-description {% if item.picture %}with-picture{% endif %}">
<label for="item_{{ item.id }}"><strong>{{ item.name }}</strong></label> <h4>
<label for="item_{{ item.id }}">{{ item.name }}</label>
</h4>
{% if item.description %} {% if item.description %}
<div class="product-description"> <div class="product-description">
{{ item.description|localize|rich_text }} {{ item.description|localize|rich_text }}

View File

@@ -0,0 +1,5 @@
@media speech {
.fa {
display: none;
}
}

View File

@@ -53,6 +53,17 @@
&.variation label { &.variation label {
font-weight: normal; font-weight: normal;
} }
h4 {
font-size: inherit;
margin: 0;
line-height: inherit;
}
h5 {
font-size: inherit;
font-weight: inherit;
margin: 0;
line-height: inherit;
}
} }
.radio .variation-description { .radio .variation-description {
padding-left: 20px; padding-left: 20px;

View File

@@ -220,3 +220,4 @@ body.loading .container {
} }
@import "_iframe.scss"; @import "_iframe.scss";
@import "_a11y.scss";