Skip to content

Commit

Permalink
A11y microsite (#537)
Browse files Browse the repository at this point in the history
* update typos

* fix: Visible label and accessible name do not match

* main page heading h2 -> h1 for themes.md

* Add Harvard University Digital Accessibility Policy link

* add h1 to contact page

* add h1 to the news page

* add h1 to news article page layout

* add h1 to the publications page

* add h1 to publication pages layout

* add h1 to funding page

* add h1 to research projects page

* add h1 to team page

* add h1 to open positions page

* add h1 to team member layout

* add h1 to position layout

* add h1 to project layout

* Fix "Link missing a text alternative" for header

* add alt text for publication page thumbnail links

* add semantic alt text to hubmap project page image links

* update semantic alt text for hubmap project page image links

* Update _projects/hubmap.md

Accepting suggested changes contributing proper spellings of HuBMAP and CCF

Co-authored-by: L Choy <[email protected]>

* Fix empty headings issue on member page when name_degree is undefined (WCAG A 1.3.1: Info and Relationships)

* Fix empty container in header (UL) when there are no secondary links

* fix empty container element (UL) on team member page when the team member has no projects listed

* basic navigation to /research/teams page, and /research/teams/accessibility homepage with sidebar -- based on 4dn-dcic page

* functional sidebar and url-scoped teams subpages

* a11y microsite updates

* alt text for lab member headshots

* incorporating edits for alt texts of lab member headshots

* add team members and AltGosling preprint to a11y microsite. update description.

* update description

* LDubya#8

* Rename "AltGosling Porject" A11Y microsite page to "Accessibility of Genomics visualization" #9

* placeholder template for A11Y microsite home page cover image

* update a11y microsite research page

* update a11y microsite home page image

* updates to a11y microsite draft

* updates to a11y microsite

* updates to microsites templates

* update a11y microsite

* microsite modifications

* don't show "projects" heading on a member page

* list teams on member page

* update member page code for readability

* get-name-degree.html:
- add inline documentation
- more consistent variable names

* update keyboard accessibility page

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* Update _teams/accessibility/research-in-biomedical-accessibility.md

* comment instructions to accessibility statement page

* Add changes on altgosling & mental models to a11y microsite (#16)

* add mental models paper

* update altgosling urls

* update altgosling project description for microsite

* add mental models as page to a11y microsite

* Copy edits

* Update _teams/accessibility/our-accessibility-journey.md

* update hyperlink for accessibility of genomics visualizations

(not just for screenreaders)

* Update _data/teams.yml

* updates

* Update _teams/accessibility/our-accessibility-journey.md

* update footer

* Update _teams/accessibility/our-accessibility-journey.md

* update

* update footer

* update journey, remove all personal hyperlinks after the first

* update description of get-member-url

* fix bug that would show inactive "projects" on team list

* remove redundancy on A11y landing page

* Update sources for Current Accessibility Challenges

* Use "Team Activities" as team microsite navigation title

* add temporary redirect to /research/teams -> /research/themes

* - update location of accessibility statement
- remove contact page for accessibility microsite
- hyperlink to contact from accessibility statement page

* Update _teams/accessibility/our-accessibility-journey.md

* Update _teams/accessibility/our-accessibility-journey.md

---------

Co-authored-by: L Choy <[email protected]>
Co-authored-by: SEHI L'YI <[email protected]>
Co-authored-by: Thomas C. Smits <[email protected]>
Co-authored-by: thomcsmits <[email protected]>
  • Loading branch information
5 people authored Nov 1, 2024
1 parent aaaad3a commit 0425f80
Show file tree
Hide file tree
Showing 21 changed files with 618 additions and 4 deletions.
8 changes: 8 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@ collections:
news:
output: true
permalink: /:collection/:path/
teams:
output: true
permalink: /research/:collection/:path/
defaults:
- scope:
path: ""
Expand Down Expand Up @@ -94,3 +97,8 @@ defaults:
type: themes
values:
layout: theme
- scope:
path: ""
type: teams
values:
layout: team
11 changes: 8 additions & 3 deletions _data/footer.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,14 @@ contact:
address:
<b>HIDIVE Lab</b> /
<a href="https://dbmi.hms.harvard.edu">Department of Biomedical Informatics</a> /
<a href="https://hms.harvard.edu/research/blavatnik-institute">Blavatnik Institute</a> /
<a href="https://hms.harvard.edu">Harvard Medical School</a>

accessibility:
policy:
<b>Harvard University</b> /
<a href="https://accessibility.huit.harvard.edu/digital-accessibility-policy" target="_blank">Digital Accessibility Policy</a>
<div style="text-align:right">
<em>
<a href="/accessibility-statement/">HIDIVE Lab Accessibility Statement</a>
|
<a href="https://accessibility.huit.harvard.edu/digital-accessibility-policy" target="_blank">Harvard Digital Accessibility Policy</a>
</em>
</div>
3 changes: 3 additions & 0 deletions _data/navigation.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,13 @@ primary:
links:
- text: Themes
href: /research/themes/
# href: /research/teams/
- text: Projects
href: /research/projects/
- text: Funding
href: /research/funding/
- text: Accessibility
href: /research/teams/accessibility/
- text: Publications
href: /publications/
- text: Contact
Expand Down
26 changes: 26 additions & 0 deletions _data/teams.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# this file defines the sidebars for each team microsite

teams_base_url: /research/teams

accessibility:
subpages:
- name: Research in Accessibility of Biomedical Resources
slug: research-in-biomedical-accessibility
- name: Accessibility of Genomics Visualizations
slug: accessibility-of-genomics-visualization
- name: Keyboard Accessibility of Data Visualization
slug: keyboard-accessibility-visualization
# - name: Mental Models of Visualization
# slug: mental-models-blv
- name: Our Accessibility Journey
slug: our-accessibility-journey
# - name: Community and Inclusion
# slug: community-and-inclusion
# - name: FAQs
# slug: faq

another_team:
subpages:
- name: Another Team's Page
slug: another-teams-page
# Add more subpages...
6 changes: 6 additions & 0 deletions _includes/get-member-url.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{% comment %}
This file can be included where you want link someone's personal link from another page.
To use: {% include get-member-url.html title="Lawrence Weru" %}, where the title is the member "title"

Do not add any newlines after the end of this comment since this file is included within inline content
{% endcomment %}{% assign member = site.members | where: "title", include.title | first %}<a href="{{ member.url }}">{{ member.title }}</a>
33 changes: 32 additions & 1 deletion _layouts/member.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ <h1>{{ page.name_degree | default: page.title }}</h1>
<a href="/research/projects/"><h3 class="header-link">Projects</h3></a>
<a href="/publications/"><h3 class="header-link">Publications</h3></a>
{% else %}
<h3 id="projects">Projects</h3>

<!-- BEGIN Projects -->
{% comment %}
unfortunately ensuring there are no empty UL elements means double iteration in Liquid
{% endcomment %}
Expand All @@ -43,6 +43,7 @@ <h3 id="projects">Projects</h3>
{% endfor %}

{% if has_matches %}
<h3 id="projects">Projects</h3>
<ul>
{% for project in site.projects %}
{% for member in project.members %}
Expand All @@ -53,7 +54,37 @@ <h3 id="projects">Projects</h3>
{% endfor %}
</ul>
{% endif %}
<!-- END Projects -->

<!-- BEGIN Teams -->
{% comment %}
unfortunately ensuring there are no empty UL elements means double iteration in Liquid
{% endcomment %}
{% assign has_matches = false %}
{% for team in site.teams %}
{% for member in team.members %}
{% if member == id %}
{% assign has_matches = true %}
{% endif %}
{% endfor %}
{% endfor %}

{% if has_matches %}
<h3 id="teams">Teams</h3>
<ul>
{% for team in site.teams %}
{% for member in team.members %}
{% if member == id %}
<li><a href="{{ team.url }}">{{ team.name }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% endif %}
<!-- END Teams -->

{% endif %}


</aside>

Expand Down
160 changes: 160 additions & 0 deletions _layouts/team.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
---
layout: page
---
{% assign id = page.url | split: '/' | last %}
{% assign team_data = site.data.teams[page.team_id] %}

{% if page.name %}
<h1>{{ page.name }}</h1>
{% endif %}

<div class="usa-grid-full">
<div class="usa-width-two-thirds">

{% if page.image and page.image_alt %}
<img alt="{{ page.image_alt }}" src="/assets/img/publications/fullsize/{{ page.image }}">
{% endif %}

{{ content }}

{% if page.gallery.size > 0 %}
<h3>Gallery</h3>
<img src="/assets/img/publications/fullsize/{{ page.gallery.first[0] }}">
<small>{{ page.gallery.first[1] }}</small>
<br>
{% for image in page.gallery %}
<a href="/assets/img/publications/fullsize/{{ image[0] }}"
data-lightbox="lightbox-group"
data-title="{{ image[1] }}"
><img class="thumb"
src="/assets/img/publications/thumbnail/{{ image[0] }}"
alt="{{ image[1] }}"></a>
{% endfor %}
{% endif %}

{% if page.publications.size > 0 %}
<h3>Publications</h3>
{% include list-publications.html %}
{% endif %}

{% if page.members.size > 0 %}
<h3>Team</h3>
{% include list-members.html %}
{% endif %}

{% if page.collaborators.size > 0 %}
<h3>Collaborators</h3>
{% include list-collaborators.html %}
{% endif %}

{% if page.websites.size > 0 %}
<h3>Websites</h3>
<ul>
{% for website in page.websites %}
<li>
<a href="{{ website.url }}">{{ website.name }}</a>
{% if website.description %}
<br>
<small>{{ website.description }}</small>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}

{% capture media_list %}
{% for media in site.data.media %}
{% for project in media.projects %}
{% if project == id %}
<dt>
<b>{{ media.outlet }} ({{ media.date }}) - </b>
<a href="{{ media.url }}">{{ media.title }}</a>
</dt>
<dd>
{{ media.blurb }}
</dd>
{% endif %}
{% endfor %}
{% endfor %}
{% endcapture %}
{% assign media_list = media_list | strip %}
{% if media_list != '' %}
<h3 id="media">Media</h3>
<dl>
{{ media_list }}
</dl>
{% endif %}

{% if page.github_repositories.size > 0 or page.docker_repositories.size > 0 %}
<h3>Software</h3>

{% if page.github_repositories.size > 0 %}
<h6>GitHub</h6>
<ul>
{% for repository in page.github_repositories %}
<li>
<a href="{{ repository.url }}">{{ repository.name }}</a>
{% if repository.description %}
<br>
<small>{{ repository.description }}</small>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}

{% if page.docker_repositories.size > 0 %}
<h6>Docker</h6>
<ul>
{% for repository in page.docker_repositories %}
<li>
<a href="{{ repository.url }}">{{ repository.name }}</a>
{% if repository.description %}
<br>
<small>{{ repository.description }}</small>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}

{% endif %}

{% if page.grants.size > 0 %}
<h3>Funding</h3>
{% include list-grants.html %}
{% endif %}

<h3>Status</h3>
{% if page.active %}
Active
{% else %}
Inactive
{% endif %}


</div>

<aside class="usa-width-one-third">

{% if team_data.subpages.size > 0 %}
<h3>Team Activities</h3>
<ul>
<li>
<a href="{{site.data.teams.teams_base_url}}/{{ page.team_id }}">Home</a>
</li>
{% for subpage in team_data.subpages %}
<li>
<a href="{{site.data.teams.teams_base_url}}/{{ page.team_id }}/{{ subpage.slug }}">{{ subpage.name }}</a>
{% if subpage.description %}
<br>
<small>{{ subpage.description }}</small>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}


</aside>
</div>
2 changes: 2 additions & 0 deletions _publications/weru-2024-accessibility-keyboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ type: preprint

publisher: "https://osf.io/3wjsa"

preprint: 'https://osf.io/5v98j'

doi: "10.31219/osf.io/3wjsa"
zotero-key: "D8YCD6QT"
cite:
Expand Down
39 changes: 39 additions & 0 deletions _teams/accessibility/accessibility-of-genomics-visualization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
# make sure to add page to _data/teams.yml

name: Accessibility of Genomics Visualization
team_id: accessibility
active: true

image: altgosling-structure.png
image_alt: A schematic showing how AltGosling interacts with the Gosling Spec and Gosling.js to construct alt text, long descriptions, and Tree-structured descriptions from Gosling Spec features and Gosling Renderer data.

publications:
- smits-2024-altgosling-osf

# gallery:
# smits-2024-S4RH9GKM-2.png: 'The 4DN DCIC data portal page lists available datasets and their associated metadata'
# needs an alt text

---

## Overview

The AltGosling Project focuses on developing accessible genomics visualization tools. It aims to bridge the gap in genomic data interpretation for individuals with visual impairments. The project adds screen reader support to the Gosling, extracting information from the Gosling specification and leveraging a collapsible tree to create intuitive, user-friendly interfaces, ensuring that genomics research is inclusive and accessible to a broader audience. This project not only advances scientific inclusivity but embodies HIDIVE Lab's commitment to accessible science. You can read more about this project on the publication page that is linked below.

## Highlights
- As a first of its kind, AltGosling creates automatic text descriptions for genomic data visualizations, which are characterized by large datasets and importance of interactions such as zooming and panning for data exploration.

- Using a collapible tree structure, we allow users to easily navigate long descriptions and decide on their level of details.

- To showcase its features, we created a [demonstration](https://gosling-lang.org/alt-gosling/) with ten examples, of which five single charts and and five compositve visualizations.

- We compared AltGosling to state-of-the art models such as GPT-4o and show that AltGosling outperforms these models in accuracy, completesness, and method of delivery.

- We are happy to receive feedback and work on new features. Feel free to [submit issues on GitHub](https://github.com/gosling-lang/altgosling/issues) or reach out via [email](mailto:[email protected]).

## Call To Action

[Access the GitHub Repo](https://github.com/gosling-lang/altgosling)

[Try the demonstration](https://gosling-lang.org/alt-gosling/)
7 changes: 7 additions & 0 deletions _teams/accessibility/community-and-inclusion.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
# make sure to add page to _data/teams.yml

name: Community and Inclusion
team_id: accessibility
active: true
---
7 changes: 7 additions & 0 deletions _teams/accessibility/faq.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
# make sure to add page to _data/teams.yml

name: Frequently Asked Questions
team_id: accessibility
active: true
---
Loading

0 comments on commit 0425f80

Please sign in to comment.