Merge pull request #220 from bjc-edc/a11y

Accessibility Fixes -- headings / tests
bjc-edc · Sep 25, 2024 · 40da2f8 · 40da2f8
2 parents 9013797 + b8933da
commit 40da2f8
Show file tree

Hide file tree

Showing 110 changed files with 939 additions and 961 deletions.
diff --git a/Gemfile b/Gemfile
@@ -13,6 +13,7 @@ gem 'axe-core-rspec'
 gem 'capybara'
 gem 'capybara-screenshot'
 gem 'nokogiri'
+# TODO: Replace this gem with a better default...
 gem 'rack-jekyll'
 gem 'rspec'
 gem 'selenium-webdriver'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -54,22 +54,22 @@ GEM
     ffi (1.17.0-x86_64-linux-gnu)
     ffi (1.17.0-x86_64-linux-musl)
     forwardable-extended (2.6.0)
-    google-protobuf (4.27.5)
+    google-protobuf (4.27.1)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-aarch64-linux)
+    google-protobuf (4.27.1-aarch64-linux)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-arm64-darwin)
+    google-protobuf (4.27.1-arm64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86-linux)
+    google-protobuf (4.27.1-x86-linux)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86_64-darwin)
+    google-protobuf (4.27.1-x86_64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86_64-linux)
+    google-protobuf (4.27.1-x86_64-linux)
       bigdecimal
       rake (>= 13)
     http_parser.rb (0.8.0)
@@ -138,7 +138,7 @@ GEM
     rb-inotify (0.11.1)
       ffi (~> 1.0)
     regexp_parser (2.9.2)
-    rexml (3.3.6)
+    rexml (3.3.2)
       strscan
     rouge (4.3.0)
     rspec (3.13.0)
@@ -193,7 +193,7 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
-    webrick (1.8.2)
+    webrick (1.8.1)
     websocket (1.2.10)
     xpath (3.2.0)
       nokogiri (~> 1.8)

diff --git a/css/bjc.css b/css/bjc.css
@@ -1,35 +1,59 @@
 @charset "UTF-8";
 
 /** Basic HTML **/
-/* TODO: work sans is not loaded on most pages. */
+body {
+  width: 100%;
+  max-width: 100%;
+}
+
+/** TODO: work sans is not loaded on most pages.
+* .h1...h6 classes are used when you want something to /look/ like a heading,
+* but it shouldn't be an actual heading tag
+*/
 body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6,
+.box-head {
   font-family: "work_sansregular", "Open Sans", sans-serif;
   color: #000;
 }
 
+h3, .h3 {
+  margin-top: 20px;
+  padding-top: 10px;
+}
+
+h4, .h4 {
+  padding: 5px 0px 0px 0px;
+}
+
+/* Roughly visually aligns with the default h4 style
+ * To be used in curriculum boxes which contain subheadings.
+ */
+.box-head {
+  font-weight: bold;
+  font-size: 18px;
+  margin-top: 0px;
+  padding: 5px 0px 0px 0px;
+}
+
 .anchor {
   padding-top: 80px;
   margin-top: -80px;
 }
 
+/* should have >= 3:1 contrast with black, 4.5:1 with white */
 a:visited {
-  color: #106070; /* darkened for a11y. */
-  /* color: #248694; */
+  color: #297694;
 }
 
 a,
 .dialogue a {
-  /* color: #28499F; */
-  color: #3056AA;
-  /* color: #2a6496; */
-  /* TODO-A11Y: We need to find better contrasting colors, or make links visual. */
-  /* text-decoration: underline; */
+  color: #3056AA; /* color: #28499F; */
 }
 
 a.btn,
@@ -60,15 +84,6 @@ a.btn,
   padding-right: 25px;
 }
 
-body {
-  width: 100%;
-  max-width: 100%;
-}
-
-h3 {
-  margin-top: 20px;
-}
-
 .blockquote {
   width: 90%;
   margin-left: auto;
@@ -112,14 +127,6 @@ h3 {
   height: 2.5em;
 }
 
-h4 {
-  padding: 5px 0px 0px 0px;
-}
-
-h3 {
-  padding-top: 10px;
-}
-
 .full ul,
 .full ol {
   display: block;
@@ -246,9 +253,13 @@ code.break {
   word-wrap: break-word;
 }
 
+/* a11y: TODO: this color matches Snap!, but does not have enough contrast with white. */
 var {
   padding: 0px;
-  color: #f3761d;
+  /* color: #f3761d; */
+  color: #f1661d;
+  font-weight: bold;
+  font-size: 14pt;
 }
 
 .classIndent {

diff --git a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
@@ -55,13 +55,14 @@ <h3>Hagamos que el personaje se mueva</h3>
                   <div class="ap-standard">CRD-2.B.1</div>
                   <p>Este es un programa de computadora, también conocido como <em>software</em>. Aunque este es muy pequeño, pronto se va a poner mucho más interesante.</p>
                 </li>
-                <li>Probemos el programa. Haz clic varias veces en el personaje de Alonzo sobre el escenario. Si el programa funciona, Alonzo debería moverse a una posición aleatoria en el escenario cada vez que se le presiona con un clic.</li>
-                <div class="endnote">Si tu programa no funciona, vuelve a mirar la imagen del código y asegúrate que el tuyo coincida exactamente.
-                    <ul>
-                        <li>Asegúrate que los dos bloques estén unidos entre sí moviendo el bloque <code>cuando me (hagan clic)</code> y comprobando que el bloque <code>ir a</code> se mueve con él.</li>
-                        <li>Asegúrate que el primer bloque diga <code>cuando me (hagan clic)</code> y no otra cosa, y el segundo bloque <code>ir a (cualquier posición)</code> y no otra cosa.</li>
-                    </ul>
-				</div>
+                <li>Probemos el programa. Haz clic varias veces en el personaje de Alonzo sobre el escenario. Si el programa funciona, Alonzo debería moverse a una posición aleatoria en el escenario cada vez que se le presiona con un clic.
+                    <div class="endnote">Si tu programa no funciona, vuelve a mirar la imagen del código y asegúrate que el tuyo coincida exactamente.
+                        <ul>
+                            <li>Asegúrate que los dos bloques estén unidos entre sí moviendo el bloque <code>cuando me (hagan clic)</code> y comprobando que el bloque <code>ir a</code> se mueve con él.</li>
+                            <li>Asegúrate que el primer bloque diga <code>cuando me (hagan clic)</code> y no otra cosa, y el segundo bloque <code>ir a (cualquier posición)</code> y no otra cosa.</li>
+                        </ul>
+                    </div>
+                </li>
 			</ol>
 		</div>
 
@@ -88,10 +89,11 @@ <h3>Hagamos el juego más interesante</h3>
                         </div>
                     </div>
                 </li>
-                <li>Alonzo se mueve muy rápido. Utiliza el bloque <img src="/bjc-r/img/blocks/wait-1-secs.es.png" alt="esperar 1 segundo" title="esperar 1 segundo" /> para hacerlo más lento. Puedes probar tu programa reduciendo o incrementando el tiempo de espera.</li>
-                <div class="endnote">
-                    El lugar donde va el bloque de <code>espera</code> en tu secuencia de comandos es importante. ¿Quieres que el guion espere una vez o cada vez que Alonzo se mueva?
-                </div>
+                <li>Alonzo se mueve muy rápido. Utiliza el bloque <img src="/bjc-r/img/blocks/wait-1-secs.es.png" alt="esperar 1 segundo" title="esperar 1 segundo" /> para hacerlo más lento. Puedes probar tu programa reduciendo o incrementando el tiempo de espera.
+                    <div class="endnote">
+                        El lugar donde va el bloque de <code>espera</code> en tu secuencia de comandos es importante. ¿Quieres que el guion espere una vez o cada vez que Alonzo se mueva?
+                    </div>
+                </li>
                 <li>Antes de continuar, la siguiente página le mostrará cómo guardar un Snap<em>!</em> proyecto para no perder lo que has ganado hasta ahora. Puede utilizar la flecha derecha (en la parte superior derecha o inferior derecha de esta página web) para continuar.</li>
             </ol>
         </div>

diff --git a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html
@@ -53,13 +53,14 @@ <h3>Making a Character Move</h3>
                     <div class="ap-standard">CRD-2.B.1</div>
                     <p>This is a computer program, also known as <em>software</em>.  It's a very short one, but it'll get more interesting soon.</p>
                 </li>
-                <li>Test your program: Click on the Alonzo sprite on the stage several times. If your program works, Alonzo should move to a random position on the stage each time you click him.</li>
-                <div class="endnote">If your program doesn't work, look back at the picture of the code and make sure yours matches exactly.
-                <ul>
-                    <li>Make sure the two blocks are attached to each other by moving the <code>when I am clicked</code> block and checking that the <code>go to</code> block moves with it.</li>
-                    <li>Make sure that the first block says <code>when I am (clicked)</code> and not something else, and make sure that the second block says <code>go to (random position)</code> and not something else.</li>
-                </ul>
-                </div>
+                <li>Test your program: Click on the Alonzo sprite on the stage several times. If your program works, Alonzo should move to a random position on the stage each time you click him.
+                    <div class="endnote">If your program doesn't work, look back at the picture of the code and make sure yours matches exactly.
+                    <ul>
+                        <li>Make sure the two blocks are attached to each other by moving the <code>when I am clicked</code> block and checking that the <code>go to</code> block moves with it.</li>
+                        <li>Make sure that the first block says <code>when I am (clicked)</code> and not something else, and make sure that the second block says <code>go to (random position)</code> and not something else.</li>
+                    </ul>
+                    </div>
+                </li>
             </ol>
         </div>
 

diff --git a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html
@@ -17,7 +17,7 @@ <h2>Guardar proyectos Snap<em>!</em></h2>
 				<li>
 					Hay diferentes formas de guardar los proyectos de Snap<em>!</em> Algunos de ellos implican iniciar sesión o crear una cuenta de Snap<em>!</em> Tu profesor te dirá qué opción usar.
 					<div class="narrower">
-						<h4><strong>Opción A: Guarde su proyecto en tu computadora</strong></h4>
+						<h3 class="box-head">Opción A: Guarde su proyecto en tu computadora</h3>
 						<div class="endnote">
 							<a href="#hint-save-computer" data-toggle="collapse" title="Puedes guardar este archivo en tu computadora, una unidad USB, Google Drive o cualquier otro lugar donde guardes archivos.">Puedes guardar este archivo en tu computadora, una unidad USB, Google Drive o cualquier otro lugar donde guardes archivos.</a>
 							<div id="hint-save-computer" class="collapse">
@@ -28,7 +28,7 @@ <h4><strong>Opción A: Guarde su proyecto en tu computadora</strong></h4>
 							</div>
 						</div>
 
-						<h4><strong>Opción B: Tu profesor te ha creado una cuenta</strong></h4>
+						<h3 class="box-head">Opción B: Tu profesor te ha creado una cuenta</h3>
 						<div class="endnote">
 							<a href="#hint-teacher-setup" data-toggle="collapse" title="Tu profesor te comunicará tu nombre de usuario y contraseña de Snap! Si alguna vez necesitas restablecer tu contraseña, la solicitud irá a tu profesor.">Tu profesor te comunicará tu nombre de usuario y contraseña de Snap<em>!</em> Si alguna vez necesitas restablecer tu contraseña, la solicitud irá a tu profesor.</a>
 							<div id="hint-teacher-setup" class="collapse">
@@ -51,7 +51,7 @@ <h4><strong>Opción B: Tu profesor te ha creado una cuenta</strong></h4>
 							</div>
 						</div>
 
-						<h4><strong>Opción C: Crea una cuenta de Snap<em>!</em> con tu correo electrónico personal</strong></h4>
+						<h3 class="box-head">Opción C: Crea una cuenta de Snap<em>!</em> con tu correo electrónico personal</h3>
 						<div class="endnote">
 							<a href="#hint-personal-email" data-toggle="collapse" title="Se trata de una cuenta de Snap! en la que cualquier solicitud de restablecimiento de contraseña se enviará a tu cuenta de correo electrónico personal.">Se trata de una cuenta de Snap<em>!</em> en la que cualquier solicitud de restablecimiento de contraseña se enviará a tu cuenta de correo electrónico personal.</a>
 							<div id="hint-personal-email" class="collapse">

diff --git a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html
@@ -17,7 +17,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 				<li>
 					There are different ways to save Snap<em>!</em> projects. Some of them involve logging in or creating a Snap<em>!</em> account. Your teacher will let you know which option to use.
 					<div class="narrower">
-						<div class="h4"><strong>Option A: Save your project to your computer</strong></div>
+						<h3 class="box-head">Option A: Save your project to your computer</h3>
 						<div class="endnote">
 							<a href="#hint-save-computer" data-toggle="collapse" title="You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files.">You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files.</a>
 							<div id="hint-save-computer" class="collapse">
@@ -28,7 +28,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 							</div>
 						</div>
 
-						<div class="h4"><strong>Option B: Your teacher has set up an account for you</strong></div>
+						<h3 class="box-head">Option B: Your teacher has set up an account for you</h3>
 						<div class="endnote">
 							<a href="#hint-teacher-setup" data-toggle="collapse" title="Your teacher will let you know your Snap! username and password. If you ever need to reset your password, the request will go to your teacher.">Your teacher will let you know your Snap<em>!</em> username and password. If you ever need to reset your password, the request will go to your teacher.</a>
 							<div id="hint-teacher-setup" class="collapse">
@@ -52,7 +52,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 						</div>
 
 
-						<div class="h4"><strong>Option C: Create a Snap<em>!</em> account with a personal email</strong></div>
+						<h3 class="box-head">Option C: Create a Snap<em>!</em> account with a personal email</h3>
 						<div class="endnote">
 							<a href="#hint-personal-email" data-toggle="collapse" title="This is a Snap! account where any password reset requests will go to a personal email account. Your teacher may ask you to use their email address.">This is a Snap<em>!</em> account where any password reset requests will go to your personal email account. Your teacher may ask you to use their email address.</a>
 							<div id="hint-personal-email" class="collapse">