Merge pull request 8values#134 from doamatto/hover-a11y

Improve accessibility when hovering on buttons

Author: Genora51

Diff for: instructions.html

@@ -19,8 +19,8 @@ <h1>8values</h1>
 <hr>
 <h2 style="text-align:center;">Instructions</h2>
 <p class="question">You will be presented with a series of statements. For each one, click the button with your opinion on it.</p>
-<button class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;">Got it!</button> <br>
-<button class="button" onclick="location.href='index.html';" style="background-color: #f44336;">Wait, nevermind!</button> <br>
+<button class="button" onclick="location.href='quiz.html';">Got it!</button> <br>
+<button class="button disagree" onclick="location.href='index.html';">Wait, nevermind!</button> <br>
 
 <!-- Website visit statistics - no personal information is collected! -->
 <script type="text/javascript">

Diff for: quiz.html

@@ -21,11 +21,11 @@ <h1>8values</h1>
 <hr>
 <h2 style="text-align:center;" id="question-number">Loading...</h2>
 <p class="question" id="question-text"></p>
-<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;">Strongly Agree</button> <br>
-<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;">Agree</button> <br>
-<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;">Neutral/Unsure</button> <br>
-<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;">Disagree</button> <br>
-<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;">Strongly Disagree</button> <br>
+<button class="button stronglyAgree" onclick="next_question( 1.0)">Strongly Agree</button> <br>
+<button class="button agree" onclick="next_question( 0.5)">Agree</button> <br>
+<button class="button neutral" onclick="next_question( 0.0)">Neutral/Unsure</button> <br>
+<button class="button disagree" onclick="next_question(-0.5)">Disagree</button> <br>
+<button class="button stronglyDisagree" onclick="next_question(-1.0)">Strongly Disagree</button> <br>
 <button class="small_button" onclick="prev_question()" id="back_button">Back</button>
 <button class="small_button_off" id="back_button_off">Back</button><br>
 

Diff for: results.html

@@ -52,7 +52,7 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
 <p>You can send these results by copying and pasting the URL at the top of the page or using the image below. Think your matched ideology was wrong? Want to help us calibrate the test? Send the results along with your political ideology to us at [email protected], or send us any comments, questions, or criticism. </p>
 <hr/>
 <img src="" id="banner">
-<button class="button" onclick="location.href='index.html';" style="background-color: #2196f3;">Back</button> <br>
+<button class="button" onclick="location.href='index.html';">Back</button> <br>
 <!-- Website visit statistics - no personal information is collected! -->
 <script type="text/javascript">
 var sc_project=11325211;

Diff for: style.css

@@ -88,6 +88,18 @@ img.center {
     margin: -2px auto;
     cursor: pointer;
 }
+.button:hover, .button:focus { background: #1687e0; }
+.stronglyAgree { background: #1b5e20; }
+.stronglyAgree:hover, .stronglyAgree:focus { background: #154a19; }
+.agree { background: #4caf50; }
+.agree:hover, .agree:focus { background: #29942e; }
+.neutral { background: #949494; }
+.neutral:hover, .neutral:focus { background: #656565; }
+.disagree { background: #f44336; }
+.disagree:hover, .disagree:focus { background: #d6271a; }
+.stronglyDisagree { background: #b71c1c; }
+.stronglyDisagree:hover, .stronglyDisagree:focus { background: #a00e0e; }
+
 .small_button, .small_button_off {
     background-color: #333;
     font-family: 'Montserrat', sans-serif;
@@ -104,6 +116,11 @@ img.center {
     margin: -2px auto;
     cursor: pointer;
 }
+
+.small_button:hover, .small_button:focus {
+    background: #222;
+}
+
 .small_button_off {
     background-color: #ddd;
     color: #888;