Structured Headings (Accessibility best practice) (#544)

* Improve heading structure for project page * improve heading structure for news page * Improve heading structure for publication page * Improve heading structure for funding page * Improve heading structure for projects page * Improve heading structure for team page * Improve heading structure for themes page * Improve heading structure for members page * Improve heading structure for member page * Improve heading structure for open positions page * Improve heading structure for news page * Improve heading structure for home page
hms-dbmi · Nov 14, 2024 · 6b73c26 · 6b73c26
1 parent 14bdbbb
commit 6b73c26
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 45 deletions.
diff --git a/_layouts/member.html b/_layouts/member.html
@@ -25,8 +25,8 @@ <h1>{{ page.name_degree | default: page.title }}</h1>
     </div>
 
     {% if page.title == 'Nils Gehlenborg' %}
-      <a href="/research/projects/"><h3 class="header-link">Projects</h3></a>
-      <a href="/publications/"><h3 class="header-link">Publications</h3></a>
+      <a href="/research/projects/"><p class="header-link">Projects</p></a>
+      <a href="/publications/"><p class="header-link">Publications</p></a>
     {% else %}
 
       <!-- BEGIN Projects -->
@@ -43,7 +43,7 @@ <h1>{{ page.name_degree | default: page.title }}</h1>
       {% endfor %}
 
       {% if has_matches %}
-        <h3 id="projects">Projects</h3>
+        <h2 id="projects">Projects</h2>
         <ul>
         {% for project in site.projects %}
           {% for member in project.members %}
@@ -70,7 +70,7 @@ <h3 id="projects">Projects</h3>
       {% endfor %}
 
       {% if has_matches %}
-        <h3 id="teams">Teams</h3>
+        <h2 id="teams">Teams</h2>
         <ul>
         {% for team in site.teams %}
           {% for member in team.members %}
@@ -89,8 +89,8 @@ <h3 id="teams">Teams</h3>
   </aside>
 
   <div class="usa-width-two-thirds">
-    <h3 id="biography">Biography</h3>
-    <h6>{{ page.job_title }}</h6>
+    <h2 id="biography">Biography</h2>
+    <h3>{{ page.job_title }}</h3>
 
     {{ content }}
 
@@ -105,7 +105,7 @@ <h6>{{ page.job_title }}</h6>
     {% endcapture %}
     {% assign news_list = news_list | strip %}
     {% if news_list != '' %}
-      <h3 id="news">News</h3>
+      <h2 id="news">News</h2>
       <ul>
         {{ news_list }}
       </ul>
@@ -130,7 +130,7 @@ <h3 id="news">News</h3>
     {% endcapture %}
     {% assign media_list = media_list | strip %}
     {% if media_list != '' %}
-      <h3 id="media">Media</h3>
+      <h2 id="media">Media</h2>
       <dl>
         {{ media_list }}
       </dl>
@@ -148,7 +148,7 @@ <h3 id="media">Media</h3>
     {% endcapture %}
     {% assign publications_list = publications_list | strip %}
     {% if publications_list != '' %}
-      <h3>Publications</h3>
+      <h2>Publications</h2>
       <ul>
         {{ publications_list }}
       </ul>

diff --git a/_layouts/news.html b/_layouts/news.html
@@ -14,7 +14,7 @@ <h1>
     {{ content }}
 
     {% if page.publications.size > 0 %}
-      <h3>Publications</h3>
+      <h2>Publications</h2>
       {% include list-publications.html %}
     {% endif %}
   </div>

diff --git a/_layouts/project.html b/_layouts/project.html
@@ -7,11 +7,11 @@ <h1>{{ page.name }}</h1>
 
 <div class="usa-grid-full">
   <div class="usa-width-two-thirds">
-    <h3>Description</h3>
+    <h2>Description</h2>
     {{ content }}
 
     {% if page.gallery.size > 0 %}
-      <h3>Gallery</h3>
+      <h2>Gallery</h2>
       <img src="/assets/img/publications/fullsize/{{ page.gallery.first[0] }}">
       <small>{{ page.gallery.first[1] }}</small>
       <br>
@@ -26,12 +26,12 @@ <h3>Gallery</h3>
     {% endif %}
 
     {% if page.publications.size > 0 %}
-    <h3>Publications</h3>
+    <h2>Publications</h2>
     {% include list-publications.html %}
     {% endif %}
 
     {% if page.websites.size > 0 %}
-    <h3>Websites</h3>
+    <h2>Websites</h2>
     <ul>
       {% for website in page.websites %}
         <li>
@@ -69,10 +69,10 @@ <h3 id="media">Media</h3>
     {% endif %}
 
     {% if page.github_repositories.size > 0 or page.docker_repositories.size > 0 %}
-    <h3>Software</h3>
+    <h2>Software</h2>
 
     {% if page.github_repositories.size > 0 %}
-    <h6>GitHub</h6>
+    <h3>GitHub</h3>
     <ul>
       {% for repository in page.github_repositories %}
         <li>
@@ -87,7 +87,7 @@ <h6>GitHub</h6>
     {% endif %}
 
     {% if page.docker_repositories.size > 0 %}
-    <h6>Docker</h6>
+    <h3>Docker</h3>
     <ul>
       {% for repository in page.docker_repositories %}
         <li>
@@ -104,7 +104,7 @@ <h6>Docker</h6>
     {% endif %}
 
     {% if page.grants.size > 0 %}
-    <h3>Funding</h3>
+    <h2>Funding</h2>
     {% include list-grants.html %}
     {% endif %}
   </div>

diff --git a/_layouts/publication.html b/_layouts/publication.html
@@ -17,18 +17,18 @@ <h1>{{ page.title }}</h1>
 
     {% assign stripped = content | strip %}
     {% if stripped != '' %}
-      <h3>Abstract</h3>
+      <h2>Abstract</h2>
       {{ content }}
     {% endif %}
 
-    <h3>Citation</h3>
+    <h2>Citation</h2>
     {% capture doi %}{% if page.doi and page.publisher %} doi:[{{ page.doi }}]({{ page.publisher }}){% endif %}{% endcapture %}
     {% capture citation %}{{ page.cite.authors }}. "{{ page.title }}", {{ page.cite.published }} ({{ page.year}}).{{ doi }}{% endcapture %}
     {{ citation | markdownify }}
     <!-- If we markdownify just one field, it is wrapped by <p> -->
 
     {% if page.pdf %}
-      <h3>PDF</h3>
+      <h2>PDF</h2>
       <a href="http://pdfs.gehlenborglab.org/{{ page.pdf }}">http://pdfs.gehlenborglab.org/{{ page.pdf }}</a>
     {% endif %}
   </div>

diff --git a/_layouts/team.html b/_layouts/team.html
@@ -18,7 +18,7 @@ <h1>{{ page.name }}</h1>
     {{ content }}
 
     {% if page.gallery.size > 0 %}
-      <h3>Gallery</h3>
+      <h2>Gallery</h2>
       <img src="/assets/img/publications/fullsize/{{ page.gallery.first[0] }}">
       <small>{{ page.gallery.first[1] }}</small>
       <br>
@@ -33,22 +33,22 @@ <h3>Gallery</h3>
     {% endif %}
 
     {% if page.publications.size > 0 %}
-    <h3>Publications</h3>
+    <h2>Publications</h2>
     {% include list-publications.html %}
     {% endif %}
 
     {% if page.members.size > 0 %}
-    <h3>Team</h3>
+    <h2>Team</h2>
     {% include list-members.html %}
     {% endif %}
 
     {% if page.collaborators.size > 0 %}
-    <h3>Collaborators</h3>
+    <h2>Collaborators</h2>
     {% include list-collaborators.html %}
     {% endif %}
 
     {% if page.websites.size > 0 %}
-    <h3>Websites</h3>
+    <h2>Websites</h2>
     <ul>
       {% for website in page.websites %}
         <li>
@@ -79,14 +79,14 @@ <h3>Websites</h3>
     {% endcapture %}
     {% assign media_list = media_list | strip %}
     {% if media_list != '' %}
-      <h3 id="media">Media</h3>
+      <h2 id="media">Media</h2>
       <dl>
         {{ media_list }}
       </dl>
     {% endif %}
 
     {% if page.github_repositories.size > 0 or page.docker_repositories.size > 0 %}
-    <h3>Software</h3>
+    <h2>Software</h2>
 
     {% if page.github_repositories.size > 0 %}
     <h6>GitHub</h6>
@@ -121,11 +121,11 @@ <h6>Docker</h6>
     {% endif %}
 
     {% if page.grants.size > 0 %}
-    <h3>Funding</h3>
+    <h2>Funding</h2>
     {% include list-grants.html %}
     {% endif %}
 
-    <h3>Status</h3>
+    <h2>Status</h2>
     {% if page.active %}
     Active
     {% else %}

diff --git a/assets/main.scss b/assets/main.scss
@@ -71,7 +71,7 @@ table.publications td, table.projects td, table.positions td {
   padding-right: 0.2em;
   padding-left: 0.2em;
   vertical-align:top;
-  h4 {
+  h3, h4 {
     margin-top: 0; // So top of title matches top of image.
   }
   img.thumb {
@@ -198,6 +198,11 @@ ul.members-rows {
 
 .header-link{
   margin-top: 5px;
+  font-weight: 700;
+  clear: both;
+  font-family: "Inter";
+  line-height: 1.3;
+  margin-bottom: 0.5em;
 }
 
 #services{

diff --git a/funding.md b/funding.md
@@ -13,8 +13,8 @@ permalink: /research/funding/
 {% assign grants = grants | sort: "start_year" | reverse %}
 {% for grant in grants %}
 <div class="funding">
-<h3>{{grant.name}}</h3>
-<h4>{{grant.funder}}</h4>
+<h2>{{grant.name}}</h2>
+<h3>{{grant.funder}}</h3>
 {% if grant.url %}
 <a href="{{grant.url}}" class="link-title">{{grant.number}}</a>
 {% else %}

diff --git a/index.md b/index.md
@@ -21,9 +21,11 @@ intro: |
   The most recent results of our work can always be found on [bioRxiv](http://biorxiv.org/search/author1%3ANils%2BGehlenborg), [medRxiv](https://www.medrxiv.org/search/author1:Nils+Gehlenborg), [arXiv](https://arxiv.org/search/?query=gehlenborg&searchtype=author&source=header), [osf Preprints](https://osf.io/search?q=gehlenborg&resourceType=Preprint&sort=-dateModified), and on [GitHub](https://github.com/search?utf8=%E2%9C%93&q=topic%3Agehlenborglab&type=Repositories).
 ---
 
+# HIDIVE Lab
+
 <div class="usa-grid-full">
   <div class="usa-width-one-third">
-  <h3>Latest News</h3>
+  <h2>Latest News</h2>
   </div>
   <div class="usa-width-two-thirds">
   {% assign latest_news = site.news | reverse | slice: 0,5 %}

diff --git a/members.md b/members.md
@@ -31,7 +31,7 @@ subnav:
 
 {% for role in roles %}
 {% assign pair = role | split: ':' %}
-<h3 id="{{pair[0]}}">{{pair[1]}}</h3>
+<h2 id="{{pair[0]}}">{{pair[1]}}</h2>
 <ul class="ul-no-bullets members-rows">
 {% for member in site.members %}
 {% if member.role == pair[0] %}
@@ -56,7 +56,7 @@ subnav:
 </ul>
 {% endfor %}
 
-<h3 id="alumni">Alumni</h3>
+<h2 id="alumni">Alumni</h2>
 <ul class="collaborators-and-alumni-lists members-rows">
 {% for member in site.members %}
 {% if member.role == "alumni" %}
@@ -65,7 +65,7 @@ subnav:
 {% endfor %}
 </ul>
 
-<h3 id="collaborators">Collaborators</h3>
+<h2 id="collaborators">Collaborators</h2>
 <ul class="collaborators-and-alumni-lists members-rows">
 {% for member in site.data.collaborators %}
 <li><a href="{{member[1].url}}">{{ member[1].title }}</a><br>{{member[1].affiliation}}</li>

diff --git a/news.md b/news.md
@@ -15,7 +15,7 @@ permalink: /news/
 
   <div class="usa-grid-full">
     <div class="usa-width-one-third">
-      <h3>{{ year }}</h3>
+      <h2>{{ year }}</h2>
     </div>
     <div class="usa-width-two-thirds">
 

diff --git a/open-positions.md b/open-positions.md
@@ -17,7 +17,7 @@ permalink: /team/open-positions/
 {% for position in site.positions %}
 <tr>
 <td markdown="1">
-#### [{{ position.title }}]({{ position.url }})
+## [{{ position.title }}]({{ position.url }})
 </td>
 </tr>
 {% endfor %}

diff --git a/projects.md b/projects.md
@@ -8,7 +8,7 @@ permalink: /research/projects/
 <p class="usa-font-lead">The following list is a sample of research projects that the lab is involved in.</p>
 
 
-<h3>Active</h3>
+<h2>Active</h2>
 <table class="projects">
 
 {% for project in site.projects %}
@@ -22,7 +22,7 @@ permalink: /research/projects/
 {% endif %}
 </td>
 <td markdown="1">
-#### [{{ project.name }}]({{ project.url }})
+### [{{ project.name }}]({{ project.url }})
 {% if project.blurb %}
   {{ project.blurb }}
 {% else %}
@@ -36,7 +36,7 @@ permalink: /research/projects/
 </table>
 
 
-<h3>Inactive</h3>
+<h2>Inactive</h2>
 <table class="projects">
 
 {% for project in site.projects %}
@@ -50,7 +50,7 @@ permalink: /research/projects/
 {% endif %}
 </td>
 <td  markdown="1">
-#### [{{ project.name }}]({{ project.url }})
+### [{{ project.name }}]({{ project.url }})
 {% if project.blurb %}
   {{ project.blurb }}
 {% else %}

diff --git a/themes.md b/themes.md
@@ -8,10 +8,10 @@ permalink: /research/themes/
 <p class="usa-font-lead">Our research cuts across a diverse set of themes. We are interested in answering fundamental questions in both biology and data visualization.</p>
 
 {% for theme in site.themes %}
-### {{ theme.name }}
+## {{ theme.name }}
 {{ theme.content }}
 {% if theme.projects.size > 0 %}
-<h6>Projects</h6>
+<h3>Projects</h3>
 <ul>
 {% for project in theme.projects %}
 {% for site_project in site.projects %}