Skip to content

Commit

Permalink
[#162] Validate Lighthouse accessibility home.html
Browse files Browse the repository at this point in the history
- Increase contrast between the Home breadcrumb and the background
- Add area lable to logo link
- Make h tags sequential
	modified:   static/assets/css/style.css
	modified:   string_rota/templates/string_rota/home.html
	modified:   templates/base.html

Add accessibility result for home.html to readme
	modified:   README.md
	new file:   readme_assets/images/validation/lighthouse/
        string-rota.png
mikerae committed Sep 27, 2023
1 parent e01da56 commit 371bc70
Showing 5 changed files with 16 additions and 11 deletions.
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -98,7 +98,6 @@ Boostrapmade presented an approximated solution.
- [Office Project](/readme_assets/images/office-project.png)
- [Office Player Data](/readme_assets/images/ofice-player-data.png)


### Surface
[Back to Top](#contents)
The NiceAdmn Boostrap template provided a good choice of fonts, images and colours.
@@ -346,6 +345,10 @@ Once this change was made, all html passed validation without issue.
The W3C CSS Validator was used. There were multiple issues presented, all of which were caused by BootstrapMade css.
Bootstrapmade will not be used in future projects.
- [W3C CSS Validator](/readme_assets/images/wc3-css.png)

### Accessibility: Lighthouse
The Chrome Developer Tools Lighthouse was used to validate the accessibility of each page. Each page scored 100%.
- [The String-Rota Page scored 100%](/readme_assets/images/validation/lighthouse/string-rota.png)
# Resources
[Back to Top](#contents)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions static/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -324,12 +324,14 @@ h6 {
.breadcrumb {
font-size: 14px;
font-family: "Nunito", sans-serif;
color: #899bbd;
/* color: #899bbd; */
color: #2f4a7b;
font-weight: 600;
}

.breadcrumb a {
color: #899bbd;
/* color: #899bbd; */
color: #2f4a7b;
transition: 0.3s;
}

14 changes: 7 additions & 7 deletions string_rota/templates/string_rota/home.html
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ <h1>Project: {{project.name}}</h1>
<div class="card info-card sales-card">

<div class="card-body">
<h4 class="card-title">Repertoire<span></h4>
<h2 class="card-title">Repertoire<span></h2>

<div class="d-flex align-items-center">
<div class="ps-3">
@@ -71,14 +71,14 @@ <h4 class="card-title">Repertoire<span></h4>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<h2 class="card-title">
Seating Plan for {{seating_plan.section}} Section
Status: {{seating_plan.get_plan_status_display}}
</h5>
</h2>
<p>This project needs <strong>{{ strength }}</strong> players.</p>
{% if not rota_manager %}
{% if seating_plan.get_plan_status_display == "Draft" %}
<h4>The Seating Plan for {{ project.name }} is not ready yet.</h4>
<h3>The Seating Plan for {{ project.name }} is not ready yet.</h3>
<h5>Please contact your Rota Manager</h5>
{% endif %}
{% endif %}
@@ -140,7 +140,7 @@ <h5>Please contact your Rota Manager</h5>
<div class="col-xxl-5 col-md-6">
<div class="card info-card sales-card">
<div class="card-body">
<h4 class="card-title">Reserve Player<span></h4>
<h2 class="card-title">Reserve Player<span></h2>

<div class="d-flex align-items-center">
<div class="ps-3">
@@ -169,7 +169,7 @@ <h4 class="card-title">Reserve Player<span></h4>
<div class="col-xxl-5 col-md-6">
<div class="card info-card sales-card">
<div class="card-body">
<h4 class="card-title">Reduced Rep Player(s)<span></h4>
<h2 class="card-title">Reduced Rep Player(s)<span></h2>

<div class="d-flex align-items-center">
<div class="ps-3">
@@ -192,7 +192,7 @@ <h4 class="card-title">Reduced Rep Player(s)<span></h4>
<div class="col-xxl-5 col-md-6">
<div class="card info-card sales-card">
<div class="card-body">
<h4 class="card-title">Players Not Available<span></h4>
<h2 class="card-title">Players Not Available<span></h2>
<div class="d-flex align-items-center">
<div class="ps-3">
<ul>
2 changes: 1 addition & 1 deletion templates/base.html
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@

<div class="d-flex align-items-center justify-content-between">
<a href="https://www.rsno.org.uk/" class="logo d-flex align-items-center" target="__blank"
rel="external">
rel="external" aria-label="Explore the RSNO website">
<img src="{% static 'assets/img/logo.png' %}" alt="">
<span class="d-none d-lg-block">String Rota</span>
</a>

0 comments on commit 371bc70

Please sign in to comment.