Merge pull request #271 from beautyjoy/wcag22

WCAG 2.2 Conformance / Added Specs
beautyjoy · Jun 18, 2024 · a99813b · a99813b
2 parents 2343470 + 51d85bb
commit a99813b
Show file tree

Hide file tree

Showing 24 changed files with 120 additions and 85 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -47,6 +47,7 @@ GEM
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     google-protobuf (3.22.0.rc.2)
+    google-protobuf (3.22.0.rc.2-x86_64-linux)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -92,6 +93,10 @@ GEM
     matrix (0.4.2)
     mercenary (0.4.0)
     mini_mime (1.1.5)
+    mini_portile2 (2.8.7)
+    nokogiri (1.16.6)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
     nokogiri (1.16.6-x86_64-linux)
       racc (~> 1.4)
     octokit (4.25.1)
@@ -108,6 +113,7 @@ GEM
       rack (~> 1.5)
     rack-test (2.1.0)
       rack (>= 1.3)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -131,6 +137,9 @@ GEM
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
     safe_yaml (1.0.5)
+    sass-embedded (1.62.1)
+      google-protobuf (~> 3.21)
+      rake (>= 10.0.0)
     sass-embedded (1.62.1-x86_64-linux-gnu)
       google-protobuf (~> 3.21)
     sawyer (0.9.2)
@@ -155,6 +164,7 @@ GEM
       nokogiri (~> 1.8)
 
 PLATFORMS
+  ruby
   x86_64-linux
 
 DEPENDENCIES

diff --git a/_includes/front-page/center-panel.html b/_includes/front-page/center-panel.html
@@ -7,5 +7,5 @@
   />
 </div>
 
-<h3 class="text-center">Snap! Programming Language</h3>
-<p><a href="https://snap.berkeley.edu/">Snap<em>!</em></a> (formerly BYOB) is a visual, drag-and-drop programming language.  It is an extended reimplementation of <a href="https://scratch.mit.edu/" target="_blank">Scratch</a> (a project of the Lifelong Kindergarten Group at the MIT Media Lab) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations.  These added capabilities make it suitable for a serious introduction to computer science for high school or college students.</p>
+<h2 class="text-center">Snap! Programming Language</h2>
+<p><a href="https://snap.berkeley.edu/">Snap<em>!</em></a> (formerly BYOB) is a visual, drag-and-drop programming language.  It is an extended reimplementation of <a href="https://scratch.mit.edu/" target="_blank">Scratch</a> (a project of the Lifelong Kindergarten Group at the MIT Media Lab) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations.  These added capabilities make it suitable for a serious introduction to computer science for high school or college students.</p>
diff --git a/_includes/front-page/left-panel.html b/_includes/front-page/left-panel.html
@@ -1,13 +1,17 @@
 <div class="circle-frame">
   <img
-    src="{{ site.baseurl }}/assets/img/pd18-claremont.jpg" 
+    src="{{ site.baseurl }}/assets/img/pd18-claremont.jpg"
     alt=""
     aria-hidden="true"
   />
 </div>
-<h3 class="text-center">Professional Development</h3>
 
-<h4 class="text-center">2024 PD</h4>
+<h2 class="text-center">
+    Professional Development
+    <br>
+    <small class="text-center">2024 PD</small>
+</h2>
+
 
 <!--suit-and-tie-icon.png-->
 

diff --git a/_includes/front-page/right-panel.html b/_includes/front-page/right-panel.html
@@ -3,5 +3,5 @@
     alt="blown to bits book" class="shrink-height" />
 </div>
 
-<h3 class="text-center">Textbook on Social Implications</h3>
+<h2 class="text-center">Textbook on Social Implications</h2>
 <p>In the non-programming part of our course we try to balance a fundamental optimism about the future of computer technology with an understanding of its limitations and potential for harm. Student readings are taken mainly from the excellent textbook <a href="http://www.bitsbook.com/" target="_blank"><i>Blown to Bits,</i></a> which is available for free online download.</p>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -19,7 +19,7 @@
 
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse navbar-ex1-collapse">
-      <ul class="nav navbar-nav navbar-right list-unstyled">
+      <ul class="nav navbar-nav list-unstyled">
         {% for item in site.data.navbar %}
           {% if item.title %}
             {% assign menu = item %}
@@ -42,4 +42,4 @@
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container -->
   <div class="trapezoid"></div>
-</nav>
+</nav>
diff --git a/_includes/staff-card.html b/_includes/staff-card.html
@@ -2,6 +2,6 @@
     {% include profile-photo.html image=profile.image name=profile.name %}
 </div>
 <div class="caption">
-  <h4>{{ profile.name }}</h4>
+  <div class="h2" style="font-size: 2rem;">{{ profile.name }}</div>
   {{ profile.description | markdownify }}
-</div>
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -14,11 +14,14 @@
 {% assign permalink = page.url | prepend: site.baseurl %}
 
 {% capture section_content %}
-<h2 class="page-header">{{ page.title }}</h2>
+<h1 class="page-header">
+    {{ page.title }}
+    <br>
+    <small class="text-uppercase">{{ page.date | date_to_string }}</small>
+</h1>
 {% if page.subtitle %}
-<h4>{{ page.subtitle }}</h4>
+<h2>{{ page.subtitle }}</h2>
 {% endif %}
-<h6 class="text-uppercase">{{ page.date | date_to_string }}</h6>
 
 {{ content }}
 

diff --git a/announcements.html b/announcements.html
@@ -5,28 +5,31 @@
 {% for post in site.posts %}
 
 {% capture section_content %}
-<h6 class="article-subheading">{{ post.date | date: "%Y-%m-%d" }}</h6>
-<a href="{{ post.url | prepend: site.baseurl }}">
-  <h3>{{ post.title | escape }}</h3>
-</a>
-<p>
-  {{ post.excerpt }}
-</p>
-{% endcapture %}
-{% include section.html %}
+<article>
+  <a href="{{ post.url | prepend: site.baseurl }}">
+    <h2>{{ post.title | escape }}</h2>
+  </a>
+  <div class="article-subheading">{{ post.date | date: "%Y-%m-%d" }}</div>
 
-{% endfor %}
+  <p>
+    {{ post.excerpt }}
+  </p>
+  {% endcapture %}
+  {% include section.html %}
 
-{% capture section_content %}
-<div>
-    <a class="twitter-timeline"
-       href="https://twitter.com/CSPBJC"
-       data-width="500"
-       data-height="500"
-       data-chrome="transparent nofooter">
-        Tweets by CSPBJC
-    </a>
-    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-</div>
+  {% endfor %}
+
+  {% capture section_content %}
+  <div>
+      <a class="twitter-timeline"
+         href="https://twitter.com/CSPBJC"
+         data-width="500"
+         data-height="500"
+         data-chrome="transparent nofooter">
+          Tweets by CSPBJC
+      </a>
+      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+  </div>
+</article>
 {% endcapture %}
-{% include section.html %}
+{% include section.html %}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -4,6 +4,7 @@
 // Color scheme: https://color.adobe.com/Collioure-late-evening-color-theme-8618292/
 $_dummy: ''; // this line is included so vscode renders next variable correctly
 $dark-color: #0C3559;
+$lighter-blue: #18568C;
 $primary-color: $dark-color;
 $accent-color: #F2E205;
 $accent-dark: #BF7E04;
@@ -31,17 +32,31 @@ body {
   margin-top: $body-margin-top; // Push body below navbar height
   height: auto;
   min-height: 100%;
-  background-color: $primary-color;
+  background-color: $lighter-blue;
   // Suppress default 100% height, otherwise we end up
   // with min page height exceeding screen height,
   // causing scrolling even on short pages
+
+  // Increse BS3's base font size for better accessibility
+  font-size: 16px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h2, .h2 {
+  padding-top: 8px;
+  margin: 8px 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: $header-font-stack;
   font-weight: 900;
   margin-bottom: 20px;
 
+  // Override BS3's lighter color
+  & small {
+    color: inherit;
+  }
+
   & a {
     text-decoration: none;
   }
@@ -170,7 +185,7 @@ blockquote {
 }
 
 .navbar-inverse {
-  margin: 0;
+  margin-left: 1em;
   padding: 0;
   background-color: $dark-color;
   font-family: $header-font-stack;
@@ -179,6 +194,7 @@ blockquote {
   .navbar-brand {
     color: $inverted-text-color;
     padding: 10px 15px;
+    margin: auto 0.5rem;
     height: auto; // Making the BJC logo larger than the template default
 
     > img {
@@ -190,6 +206,7 @@ blockquote {
     // all links
     li a,
     li button {
+      text-decoration: none;
       color: $inverted-text-color;
       font-weight: bold;
       line-height: 1.8;
@@ -255,7 +272,7 @@ blockquote {
   min-height: 150px; // Fixed height on all headers
   display: inline-table; // For vertical alignment
   width: 100%;
-  background: $primary-color;
+  background: $lighter-blue;
   box-shadow: none;
   background-position: center;
   background-size: cover;
@@ -328,7 +345,7 @@ blockquote {
   .jumbotron & {
     border: 2.5px white solid;
     border-radius: 6px;
-    // background: rgba(255, 255, 255, 0.4);
+    -webkit-backdrop-filter: blur(4px) brightness(0.4);
     backdrop-filter: blur(4px) brightness(0.4);
   }
 
@@ -355,7 +372,7 @@ blockquote {
   left: 40px;
   border-top-style: solid;
   border-top-width: 12px;
-  border-top-color: $primary-color;
+  border-top-color: $lighter-blue;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   height: 0;

diff --git a/curriculum.html b/curriculum.html
@@ -42,7 +42,7 @@
 {% include section.html %}
 
 {% capture section_content %}
-<h3>Computer Science Principles</h3>
+<h2>Computer Science Principles</h2>
 
 <p>The College Board <a
         href="https://advancesinap.collegeboard.org/stem/computer-science-principles" target="_blank">
@@ -149,7 +149,7 @@ <h3>Computer Science Principles</h3>
 
 {% capture section_content %}
 <a class="anchor" id="visual"></a>
-<h3>Visual Programming</h3>
+<h2>Visual Programming</h2>
 
 <p><a href="https://snap.berkeley.edu" target="_blank">Snap<i>!</i></a>, the programming
     language designed to support this course, starts with the <a
@@ -271,7 +271,7 @@ <h3>Visual Programming</h3>
 
 {% capture section_content %}
 <a class="anchor" id="social"></a>
-<h3>Social Implications of Computing</h3>
+<h2>Social Implications of Computing</h2>
 
 <div class="side-by-side">
     <p>
@@ -336,7 +336,7 @@ <h3>Social Implications of Computing</h3>
 {% include section.html %}
 
 {% capture section_content %}
-<h3>About Snap<i>!</i></h3>
+<h2>About Snap<i>!</i></h2>
 
 <p class="pull-right hidden-xs">
     <img src="{{ site.baseurl }}/assets/img/partners/snap.png" class="img-responsive"

diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@ <h1>The Beauty and Joy of Computing</h1>
 <div class="jumbotron headlines">
   <div class="background-overlay"></div>
   <div class="container">
-    <h3><a href="{{ site.baseurl }}{% post_url 2015-01-01-bjc-for-new-york %}">We're bringing BJC to New York City!</a></h3>
+    <h2><a href="{{ site.baseurl }}{% post_url 2015-01-01-bjc-for-new-york %}">We're bringing BJC to New York City!</a></h2>
     <a href="{{ site.baseurl }}{% post_url 2015-01-01-bjc-for-new-york %}" class="btn">Learn More</a>
   </div>
 </div>

diff --git a/news.html b/news.html
@@ -3,54 +3,54 @@
 title: News
 ---
 {% capture section_content %}
-<a href="{{ site.baseurl }}/announcements" class="unstyled-link"><h3>Announcements</h3></a>
+<a href="{{ site.baseurl }}/announcements" class="unstyled-link"><h2>Announcements</h2></a>
 
 <ul class="list-unstyled articles-list">
     {% for post in site.posts limit: 5 %}
     <li>
         <a href="{{ post.url | prepend: site.baseurl }}" class="article-title">{{ post.title | escape }}</a>
-        <h6 class="article-subheading">{{ post.date | date: "%Y-%m-%d" }}</h6>
+        <div class="article-subheading">{{ post.date | date: "%Y-%m-%d" }}</div>
     </li>
     {% endfor %}
 </ul>
 
-<a href="{{ site.baseurl }}/announcements">More >></a>
+<a href="{{ site.baseurl }}/announcements">More →</a>
 {% endcapture %}
 {% include section.html %}
 
 {% capture section_content %}
-<a href="{{ site.baseurl }}/research" class="unstyled-link"><h3>Research</h3></a>
+<a href="{{ site.baseurl }}/research" class="unstyled-link"><h2>Research</h2></a>
 
 <ul class="list-unstyled articles-list">
     {% for article in site.data.publications limit:5 %}
     <li>
         <a href="{{ site.baseurl }}/documents/{{ article.filename }}" target="_blank" class="article-title">{{ article.title }}</a>
-        <h6 class="article-subheading">
+        <div class="article-subheading">
             {{ article.authors }}. ({{ article.year }}).
             {% if article.external_link %}<a href="{{ article.external_link }}" target="_blank">{% endif %}
             {{ article.journal }}.
             {% if article.external_link %}</a>{% endif %}
-        </h6>
+        </div>
     </li>
     {% endfor %}
 </ul>
 
-<a href="{{ site.baseurl }}/research">More >></a>
+<a href="{{ site.baseurl }}/research">More →</a>
 {% endcapture %}
 {% include section.html %}
 
 {% capture section_content %}
-<a href="{{ site.baseurl }}/press" class="unstyled-link"><h3>In the Press</h3></a>
+<a href="{{ site.baseurl }}/press" class="unstyled-link"><h2>In the Press</h2></a>
 
 <ul class="list-unstyled articles-list">
     {% for article in site.data.press-articles limit:5 %}
     <li>
         <a href="{{ article.url }}" target="_blank" class="article-title">{{ article.title }}</a>
-        <h6 class="article-subheading">{{ article.source }}, {{ article.date | date: "%Y-%m-%d" }}</h6>
+        <div class="article-subheading">{{ article.source }}, {{ article.date | date: "%Y-%m-%d" }}</div>
     </li>
     {% endfor %}
 </ul>
 
-<a href="{{ site.baseurl }}/press">More >></a>
+<a href="{{ site.baseurl }}/press">More →</a>
 {% endcapture %}
-{% include section.html %}
+{% include section.html %}
diff --git a/payment/canceled.html b/payment/canceled.html
@@ -18,7 +18,7 @@
     </header>
     <div class="sr-payment-summary completed-view">
       <h1>Your payment was canceled.</h1>
-      <h4>Checkout Session ID: <span id="session"></span></h4>
+      <div>Checkout Session ID: <span id="session"></span></div>
       <p>To try again, please go back to the <a href="/payment/">Payment page</a>.</p>
     </div>
   <div class="sr-content">