43 changes: 14 additions & 29 deletions website/assets/scss/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@
background: hsla(0, 0%, 99%, 0.98);
padding-left: 0;
padding-right: 0;
@media (min-width: 768px) {
padding-bottom: 0;
@include media-breakpoint-up(lg) {
padding-top: 15px;
padding-bottom: 15px;
min-height: 5rem;
padding: 0 2rem 0 0;
}

@media (max-width: 500px) {
padding-bottom: 0;
}
&:after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent);
Expand All @@ -24,7 +20,7 @@
}
// Logo area.
.navbar-brand {
@media (min-width: 768px) {
@include media-breakpoint-up(lg) {
padding-top: 0;
padding-bottom: 0rem;
margin-left: 2rem;
Expand All @@ -40,29 +36,17 @@
// Main nav bar.
.td-navbar-nav-scroll {
margin-top: 0;
@media (min-width: 500px) {
overflow: visible;
}
.navbar-nav {
padding-bottom: 0;
display: flex;
align-items: center;
align-content: center;
@media (max-width: 500px) {
@include media-breakpoint-down(md) {
padding-bottom: 0;
line-height: 3;
background-image: linear-gradient(to right, hsla(0, 0%, 99%, 0.98), hsla(0, 0%, 99%, 0.98)),
linear-gradient(to right, hsla(0, 0%, 99%, 0.98), hsla(0, 0%, 99%, 0.98)),
linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: hsla(0, 0%, 99%, 0.98);
background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
background-attachment: local, local, scroll, scroll;
}

@media (min-width: 500px) {
@include media-breakpoint-up(md) {
overflow: visible;
}

Expand All @@ -71,15 +55,19 @@
font-weight: 600;
padding-right: 0.3rem;
padding-left: 0.3rem;
@media (max-width: 500px) {
@include media-breakpoint-down(md) {
padding: 0 !important;
}
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
letter-spacing: 0.02em;
}
span {
position: relative;
@media (min-width: 501px) {
@include media-breakpoint-up(md) {
padding-left: 2px;
padding-right: 2px;
}
@media (min-width: 1050px) {
padding-left: 6px;
padding-right: 6px;
}
Expand All @@ -89,13 +77,10 @@
left: 0;
right: 0;
bottom: -32px;
@media (max-width: 991px) {
@include media-breakpoint-down(lg) {
bottom: -35px;
}
@media (max-width: 767px) {
bottom: -23px;
}
@media (max-width: 500px) {
@include media-breakpoint-down(md) {
bottom: -12px;
}
height: 4px;
Expand Down
67 changes: 49 additions & 18 deletions website/assets/scss/_home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,19 @@
}
.frontpage {
background-color: rgba(#000000, 0.65);

// calculate .slider + .cta-box
// calculate .slider + .cta-box x 4 rows.
min-height: calc(445px + 100px + 100px + 100px + 100px);
@media (min-width: 700px) {
// calculate .slider + .cta-box x 2 rows.
min-height: calc(445px + 100px + 100px);
}
@media (min-width: 768px) {
// calculate .slider + .cta-box x 1 row.
min-height: calc(445px + 100px);
// Size of nav is 80px.
padding-top: 80px;
}
@media (min-width: 1000px) {
@include media-breakpoint-up(lg) {
min-height: calc(770px - 80px);
}
@media (min-width: 1200px) {
Expand All @@ -38,12 +42,16 @@
}
}
.cta-container {
display: grid;
grid-template-columns: 1fr;
@media (min-width: 700px) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
display: flex;
flex-direction: row;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (min-width: 1200px) {
flex-direction: column;
grid-template-columns: 1fr;
position: absolute;
top: 0;
right: 0;
Expand All @@ -64,33 +72,46 @@
}
@media (min-width: 1200px) {
height: 100%;
padding: 0;
justify-content: center;
}
}
.cta-contributor {
background-color: rgba(#d62293, 0.7);
@media (min-width: 1200px) {
background-color: rgba(#d62293, 0.6);
background-color: rgba(#d62293, 0.8);
}
}
.cta-maintainer {
background-color: rgba(#62a1ff, 0.7);
@media (min-width: 1200px) {
background-color: rgba(#62a1ff, 0.6);
background-color: rgba(#62a1ff, 0.8);
}
}
.cta-mentorship {
background-color: rgba(66, 169, 125, 0.7);
@media (min-width: 1200px) {
background-color: rgba(66, 169, 125, 0.8);
}
}
.cta-accessibility {
background-color: rgba(133, 98, 255, 0.7);
@media (min-width: 1200px) {
background-color: rgba(133, 98, 255, 0.8);
}
}
.cta-link {
font-weight: 300;
line-height: 140%;
color: $white;
font-size: 20px;
@media (min-width: 374px) {
font-size: 22px;
}
@media (min-width: 1200px) {
font-size: 40px;
font-size: 32px;
}
@media (min-width: 1400px) {
font-size: 36px;
}
font-weight: 300;
line-height: 140%;
color: $white;
span {
font-weight: 700;
text-decoration: underline;
Expand Down Expand Up @@ -138,7 +159,9 @@
@media (min-width: 768px) {
padding-left: 50px;
padding-right: 2rem;
bottom: calc(95px + 25px + 60px);
}
@include media-breakpoint-up(lg) {
bottom: calc(65px + 25px + 60px);
}
h2 {
font-weight: 400;
Expand All @@ -148,11 +171,17 @@
@media (min-width: 374px) {
font-size: 36px;
}
@media (min-width: 768px) {
font-size: 60px;
@media (min-width: 600px) {
font-size: 45px;
font-weight: 500;
line-height: 140%;
}
@include media-breakpoint-up(lg) {
font-size: 54px;
}
@include media-breakpoint-up(xl) {
font-size: 60px;
}
}
}

Expand All @@ -174,8 +203,10 @@
width: calc(100% - 25px - 25px);
bottom: 45px;
left: 25px;
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
left: 50px;
}
@include media-breakpoint-up(lg) {
bottom: 95px;
}
li {
Expand Down
105 changes: 105 additions & 0 deletions website/assets/scss/_nav.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
//
// Main navbar
//

.td-navbar-cover {
background: $primary;

@include media-breakpoint-up(md) {
background: transparent !important;

.nav-link {
text-shadow: 1px 1px 2px $dark;
}

}

&.navbar-bg-onscroll .nav-link {
text-shadow: none;
}
}

.navbar-bg-onscroll {
background: $primary !important;
opacity: inherit;
}

.td-navbar {
background: $primary;
min-height: 4rem;
margin: 0;
z-index: 32;

@include media-breakpoint-up(md) {
position: fixed;
top: 0;
width: 100%;
}

.nav-item {
margin-left: 16px;
margin-right: 16px;
@media (min-width: 992px) and (max-width: 1199px) {
margin-left: 10px;
margin-right: 10px;
}
}

.navbar-brand {
text-transform: none;
text-align: middle;

.nav-link {
display: inline-block;
margin-right: -30px;
}

svg {
display: inline-block;
margin: 0 10px;
height: 30px;
}
}

.nav-link {
text-transform: none;
font-weight: $font-weight-bold;
}

.td-search-input {
border: none;

@include placeholder {
color: $navbar-dark-color;
}
}

.dropdown {
min-width: 100px;
}

@include media-breakpoint-down(lg) {
padding-right: .5rem;
padding-left: .75rem;

.td-navbar-nav-scroll {
max-width: 100%;
height: 2.5rem;
margin-top: .25rem;
font-size: .875rem;

.nav-link {
padding-right: .25rem;
padding-left: 0;
}

.navbar-nav {
padding-bottom: 2rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;

}
}
}
}
4 changes: 4 additions & 0 deletions website/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ pygmentsStyle = "tango"
source = "layouts/docs"
target = "layouts/about"

[[module.mounts]]
source = "layouts/docs"
target = "layouts/accessibility"

[[module.mounts]]
source = "layouts/docs"
target = "layouts/contributors"
Expand Down
26 changes: 14 additions & 12 deletions website/content/_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="slider">
<div class="slide background-image-wrapper">
<figure class="background-image-figure">
<img width="1440" height="770"
<img decoding="async" width="1440" height="770" loading="eager"
src="/images/person-working-at-conference.jpg"
alt="A person working on a laptop at a CNCF conference">
</figure>
Expand All @@ -21,7 +21,7 @@ <h2>Contributors <br class="show-over-768" />shape the cloud
</div>
<div class="slide background-image-wrapper">
<figure class="background-image-figure">
<img width="1440" height="770"
<img decoding="async" width="1440" height="770" loading="lazy"
src="/images/people-chatting-at-event.jpg"
alt="People chatting at a CNCF event">
</figure>
Expand All @@ -33,7 +33,7 @@ <h2>Grow flourishing, <br
</div>
<div class="slide background-image-wrapper">
<figure class="background-image-figure">
<img width="1440" height="770"
<img decoding="async" width="1440" height="770" loading="lazy"
src="/images/person-working-on-laptop.jpg"
alt="People chatting at a CNCF community event">
</figure>
Expand All @@ -47,30 +47,32 @@ <h2>And drive
</div>
<div class="cta-container">
<div class="cta-box cta-contributor">
<a class="cta-link" href="/contributors/">I want to be or am
<br />a
<span>contributor</span></a>
<a class="cta-link" href="/contributors/"><span>Contribute</span> to a project</a>
</div>
<div class="cta-box cta-maintainer">
<a class="cta-link" href="/maintainers/">I want to be or am
<br />a
<span>maintainer</span></a>
<a class="cta-link" href="/maintainers/"><span>Maintain</span> a project</a>
</div>
<div class="cta-box cta-mentorship">
<a class="cta-link" href="/about/mentoring/">Join <span>mentorship</span> programs</a>
</div>
<div class="cta-box cta-accessibility">
<a class="cta-link" href="/accessibility/">Work on <span>accessibility</span></a>
</div>
</div>

</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script
<script defer
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="/js/home.js"></script>
<script defer src="/js/home.js"></script>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
linkTitle: About
menu:
main:
weight: 10
weight: 70
---

{{% blocks/lead color="primary" align="left" %}}
Expand Down
119 changes: 119 additions & 0 deletions website/content/about/working-groups/deaf-and-hard-of-hearing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
---
title: "Deaf & Hard of Hearing Working Group"
linkTitle: "Deaf & Hard of Hearing"
url: /about/deaf-and-hard-of-hearing
---

{{% blocks/lead color="primary" align="left" %}}

Want to help empower deaf and hard of hearing individuals? Join our effort!

Read our [Charter](https://github.com/cncf/tag-contributor-strategy/tree/main/deaf-and-hard-of-hearing)

{{% /blocks/lead %}}

<div class="section-group">

{{% blocks/section color="dark" %}}

The CNCF Deaf and Hard of Hearing (deaf/hoh) working group aims to empower and include individuals who are deaf or hard of hearing in the cloud native and open source communities.
Our group's mission is to create a supportive and inclusive environment within the cloud native and open source community.

{{% /blocks/section %}}

</div>
<div class="section-group">

{{% blocks/section color="secondary" %}}

## Goals

<div class="text-left">

* Create pathways for deaf/hoh individuals into cloud native and open source.
* Empower deaf/hoh to become more visible members within the cloud native community.
* Encourage and educate employers to hire deaf/hoh employees.
* Build a deaf/hoh in tech community to network, learn from, and support each other.

</div>

{{% /blocks/section %}}

</div>
<div class="section-group">

{{% blocks/section color="white" %}}

## Benefits

<div class="text-left">

Benefits for deaf/hoh individuals:

* **Inclusion**: Become an active cloud native and open source community member.
* **Career Growth**: Grow your network of hearing and deaf/hoh peers and learn about professional opportunities.
* **Networking**: Connect with a supportive deaf/hoh tech community.
* **Inspiration**: Meet deaf/hoh role models.
* **Educational Resources**: Learn about tools to enhance your tech skills.
* **Visibility**: Find out about and get support for speaking or other public opportunities.

Benefits for the hearing community:

* **Diversity and Inclusion**: Learn how to be more diverse and inclusive, enriching the community with different perspectives and talents.
* **Expanded Talent Pool**: Access to a broader talent pool, including skilled deaf/hoh individuals.
* **Innovation**: Diverse participation fosters innovation and creativity.
* **Education**: Enhanced awareness and understanding of deaf/hoh needs and accommodations.
* **Role Models**: Deaf/hoh role models can inspire and motivate others in the community.
* **Networking**: Building connections and collaboration with the deaf/hoh in tech community.
* **Greater Representation**: Increased representation benefits the overall community's visibility and reputation.

You may find resources of our working group [here](/accessibility/).

</div>

{{% /blocks/section %}}
</div>

<div class="section-group">
{{< blocks/section color="primary" >}}

## How you can contribute

<div class="text-left">

We are happy to see that you are interested in helping with this working group. We would love to:

* have you introduce yourself on our mailing list or in our [Slack channel](https://cloud-native.slack.com/archives/C05BYNK8A3V).
* see you participate in our meetings where you can contribute ideas and take on responsibilities.
* gather your feedback about our guides and documentation.

</div>

{{% /blocks/section %}}
</div>


<div class="section-group">

## Get involved

{{< blocks/section color="primary" >}}

{{% blocks/feature title="Meetings" icon="fas fa-video" %}}

<div>

View our [calendar](https://tockify.com/cncf.public.events/monthly?search=deaf%20and%20hard%20of%20hearing) to see when we meet next.

</div>

{{% /blocks/feature %}}

{{% blocks/feature title="Slack" icon="fab fa-slack" %}}
Reach out for any immediate matters at [#deaf-and-hard-of-hearing](https://cloud-native.slack.com/archives/C05BYNK8A3V) on [CNCF Slack](https://slack.cncf.io)

{{% /blocks/feature %}}

{{< /blocks/section >}}

</div>
20 changes: 20 additions & 0 deletions website/content/accessibility/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: Cloud Native Accessibility
linkTitle: "Accessibility"
menu:
main:
weight: 50
---

## Welcome to the Cloud Native Accessibility Initiative

Our goal is to foster awareness and understanding within the community about the unique needs of individuals with disabilities. We develop recommendations for project owners, conference organizers, and community members who want to be more inclusive. All recommendations come directly from the communities with these disabilities.

Our journey begins with the [deaf and hard of hearing](./deaf-and-hard-of-hearing/). We're committed to educating community members about deaf/hoh specific needs to ensure events and contributor opportunities are accessible to all. But we don't want to stop there — our vision extends to embrace all backgrounds and disabilities, and we hope to see the circle of inclusion grow.

If you share our passion for fostering inclusivity and accessibility, we invite you to participate in this effort. Whether you have insights, suggestions, or the desire to champion accessibility for different communities, we encourage you to get in touch. Join our [TAG Contributor Strategy mailing list](https://lists.cncf.io/g/cncf-tag-contributor-strategy), or connect with us on the TAG Contributor Strategy Slack channel ([#tag-contributor-strategy](https://cloud-native.slack.com/archives/CT6CWS1JN)). Together, we can create an environment where everyone can participate, contribute, and belong.

## Unknown Terms?

If you encounter any unfamiliar terms in this document or on our website, we have a [glossary](/resources/glossary)
available.
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Deaf & Hard of Hearing Working Group
linkTitle: "Deaf & Hard of Hearing"
---

The CNCF Deaf and Hard of Hearing (deaf/hoh) initiative aims to empower and include individuals who are deaf or hard of hearing in the cloud native and open source communities. Our group’s mission is to create a supportive and inclusive environment within the cloud native and open source community.

For more information about the CNCF Deaf and Hard of Hearing initiative, please see our [Working Group page](/about/deaf-and-hard-of-hearing/).
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
---
title: "Best practices for an inclusive and welcoming conference"
linkTitle: "Inclusive conference best practices"
date: 2023-10-01
description: >
This is a living document, so please be sure to check regularly for updates.
---

If you're not familiar with the needs and preferences of deaf and hard of hearing (deaf/hoh) individuals, hosting a conference that is truly inclusive and accessible can feel overwhelming. This document will guide you to ensuring that deaf and hard of hearing attendees can fully participate in your event and have a great overall and complete experience.

The first step of being more inclusive is understanding that deaf/hoh are not a one-size-fits-all group — we have different needs and preferences, so it is important to provide multiple options for deaf/hoh. If we can't participate, we will likely not return, reinforcing the vicious cycle of deaf/hoh individuals not participating in the community.

We also recommend providing attendees, speakers, and sponsors the opportunity to specify their accessibility needs as soon as possible, so you can plan for it in advance. Use your website, registration and call for papers forms to get that information early. Conference organizers often don't budget for accessibility until a request is made. This can create uncomfortable situations for event planners who don't know how to budget for a sudden request. Accessibility is rarely a static budget line item, and it can be hard, especially when planning it for the first time. One of our aims in documenting best practices is to learn and share cost information to make planning more predictable.

To make the process as straightforward as possible, we've listed as much as we could to make a conference truly inclusive to our community but also included alternatives if a particular accommodation is not feasible. If you have any questions or concerns, please get in touch with us at cncf-tag-contributor-strategy@lists.cncf.io.

**Note**: This document is open source. If we missed anything, please submit a pull request or issue so we can update it — thank you!

## DEIA: Diversity + Equity + Inclusion + Accessibility

We encourage you to include the A in your DEI efforts: **Diversity + Equity + Inclusion + Accessibility (DEIA)** — all too often is our community an afterthought. We want to change that and need your support!

## ADA coordinator/specialist role

We recommend appointing a designated Americans with Disabilities Act (ADA) coordinator to handle any prompt communications involving accommodations before and during the conference. This includes communication with attendees, speakers, facilities, and other event organizers.

### Be ADA-compliant

While nearly all buildings in the United States are ADA-compliant, we often see a gap at conferences: risers/stages generally don't have ramps, making them inaccessible for people with physical disabilities. Carpets make it harder for wheelchair users, physically and battery draining. Provide assistance when asked and have charging stations available.

## Website, registration and CFP form, and program information

### Event website

On the registration and call for papers (CFP) pages, state that accommodations will be made for speakers and attendees with disabilities. Clearly and prominently stating that will make us feel welcome and motivate us to participate. Don't bury that important information in a registration form we might never see. Here's some suggested copy:

> Interested in attending or speaking but require special accommodations? Please inform us through the registration or CFP form about your specific needs, and we will make every effort to provide the necessary support. For accommodation-related questions, please reach out to [accommodations@yourevent.com](mailto:accommodations@yourevent.com).
Consider creating a dedicated email address (e.g., accommodations@) to signal you take this seriously.

### Registration and CFP form

Include a field asking if accommodations are needed (yes/no) and a free-form text box to specify. Everyone's needs differ; it's hard to discern from a fixed form/dropdown.

### Program Information

On the program page, include session accessibility information, such as whether captioning will be provided and in which language. Also, mention that interpreters will be available upon request if requested in advance, and specify which sign language (e.g., American Sign Language, International Sign Language, etc.).

## Pre-conference best practices

### Reach out to attendees/speakers before the event

* Set up notifications or monitor registration and CFP forms for accommodation needs and ask for clarification if needed.
* Connect attendees with sign language interpreters to ensure they understand communication needs and style.
* For dedicated interpreters (see the [sign language interpreters](#sign-language-interpreters) section), provide both sides with contact information to communicate directly during the event should they run late or if a meeting place changes.

### Connect us with our peers

Provide a way for deaf and hard of hearing attendees and speakers or people with other disabilities to connect for peer support and potentially pool resources (e.g., an event Slack channel).

## Day of best practices

Needs vary. Interpreters, captions, or both may be necessary for different individuals.

### Reserved seating at the front

Have some reserved seating at the front for deaf and hard of hearing attendees. Many rely on lip-reading, so you want to be sure they can see the speakers well. If speakers are wearing masks, it inhibits many deaf/hoh attendees from reading lips. Opt to provide speakers with clear masks if they prefer to wear a mask when speaking, or provide social distancing opportunities instead so they may speak maskless.

### Sign language interpreters

Provide interpreters upon request and in advance. We also recommend having two sign language interpreters on-call to accommodate last-minute registrants or miscommunications. Ask interpreter agencies about their cancellation policies — these can vary significantly. A week's notice, 48, or even 24 hours with a fee, are all possible, depending on the agency.

Obviously, a big conference like KubeCon has more resources than a local community event — we get that. Since we also want to be included in smaller events, we'll offer various options. To be clear, the more cost-effective options aren't as inclusive, meaning we'll miss out on many opportunities our hearing peers benefit from. Do only go the more cost-effective route if the alternative is no accessibility. We deserve to be included and appreciate your support.

Sign language interpreters are the most valuable but also the most expensive accommodation. Incorporate the cost into the overall conference cost. It should be no different than including audio/video equipment, swag, food, refreshments, etc. into your budget.

#### Include interpreters in recording

If you record your sessions, be sure the interpreters are on screen so deaf attendees can benefit from your accessibility effort even when watching them on-demand.

#### Global or national conferences

If you only have a few deaf individuals attending, provide two interpreters per individual (they always come in tandem for engagements longer than one hour). Wherever the deaf person goes, they'll follow. This will allow deaf individuals not only to attend sessions, but also network with their peers, walk the showfloor and talk with vendors. This is particularly important if they are the only or one of a few deaf people attending, as any interaction is contingent on the availability of an interpreter.

Of course, this approach doesn't scale well. If you have more deaf attendees, you'll need to share accommodations among more individuals.

Before the conference, ask attendees to sign up for sessions in advance so you know which sessions must be staffed by interpreters. But allow for last-minute changes and be prepared to inform interpreters about these. While you'll want to plan ahead, you also want to offer attendees the flexibility to change their minds. Maybe they met someone who's giving a talk, and they'd like to attend that session. If you have multiple deaf attendees, have interpreters at keynotes by default.

##### Accommodation desk

Set up an accommodation desk and/or communication channel where attendees can ask questions, request changes, or get an interpreter spontaneously, if available. Be sure to staff it with people familiar with deaf/hoh needs and have assistive technology available to assist with communication when needed.

##### Networking events

As mentioned in the [conference networking opportunities section](#conference-networking-opportunities) below, networking is one of the key reasons people attend conferences, so be sure interpreters are also available during networking sessions.

When it comes to networking events outside of the official program (e.g., sponsor happy hours), try to find a way to fund interpreters, too. If you can't use the conference budget, consider creating a sponsorship add-on to fund networking interpreter services. Don't underestimate the importance of these valuable opportunities.

#### Regional/single-track conferences

It's easier to share accommodations among speakers and attendees at smaller or single-track conferences. Provide live captions and a pair of sign language interpreters.

If your budget is tight, consider offering an **accessibility sponsorship add-on** and mention throughout the conference that interpreters are made possible thanks to that company. That will motivate them or other companies to participate next time.

#### Local and community events

For local and community events where attendance is free or low-cost, we recommend offering an accessibility sponsorship add-on (see prior section) to try to have interpreters on site. If that doesn't work, live captions are certainly the minimum you should offer. Be sure to let the deaf attendee know before the event that you couldn't raise funds for interpreters and that only captioning will be provided. Also, offer a refund if desired.

You could also try to incentivize the employer of the deaf attendee to pay for the interpreters and offer to list them as an official event sponsor.

### Captions

There is no need to provide interpreters for every session, but captions should be available for all sessions in order to give attendees the flexibility to join a session spontaneously. While there are lots of live captions software options, not all work well. Using a tool with low accuracy can be very confusing for deaf/hoh individuals, so select one that has proven to work for us.

Keep in mind that, for a deaf person whose preferred form of communication is sign language, captions won't help when they want to ask a question or participate in a conversation with the speaker(s). You will need an interpreter to support interactions.

Some caption tools work for virtual events only, others for in-person and virtual. We've created a [list with different vendors](https://docs.google.com/document/d/13rYZIXMlMSpdbu2wYVzgShj7ZwiXEjOX5nwZLp0PV50/edit#heading=h.ngl0kcvzm9ym) for your convenience.

#### Caption use cases beyond deaf/hoh

Some attendees can hear but may be on the autism spectrum and have a hard time processing auditory cues — captioning is incredibly beneficial for them, too. Additionally, non-native speakers who aren't fluent can benefit from having words on the screen.

### Microphones for speakers and Q&A

Provide microphones for speakers and audience questions — even in small rooms. Hard of hearing attendees or speakers will struggle to hear the question without a microphone, and the captions tool won't be able to capture it either. If you can't provide a microphone for audience questions, have the speaker or someone else repeat the question in the microphone, "This person was asking …"

### Meeting point area

Especially at large conferences, if you have multiple deaf and hard of hearing attendees, create a meeting point area where deaf and hard of hearing attendees can find each other, meet with interpreters, and/or coordinate which session they will attend next if they share interpreters.

## Conference networking opportunities

### Interpreters during networking sessions

One of the main reasons people go to conferences is to network. That is no different for deaf and hard of hearing attendees. Yet, most conferences only provide support during sessions, denying us this important event aspect.

Networking is key for job opportunities, professional growth, and learning from peers. It is hard enough for people with disabilities to find or change jobs, making these networking events even more important. It is an important channel for professional growth and shouldn't be overlooked in your inclusion efforts.

Having the opportunity to network with hearing peers is not only important for the individual, it also helps break down prejudices and change attitudes towards us. These one-on-one connections are invaluable for fostering inclusion overall. So please be sure to allow your deaf and hard of hearing attendees and speakers to participate.

Thank you for taking the time to review our best practices recommendations. We hope this was useful and that you'll be able to implement them at your next event. If your conference is accessible to our community, please be sure to add it to this [accessible tech conference list](https://docs.google.com/spreadsheets/d/1kQmhwQc45S6SC2fYsULue4our72TLH86kVD5KA0EC-4/edit#gid=0) so more people from our community find out about it.
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "Tips for deaf/hoh conference attendees"
date: 2023-10-01
description: >
Tips when attending or speaking at a conference that doesn't provide proper accommodations
---

Conference organizers don't always fully understand the needs of deaf and hard of hearing attendees or speakers. As a result, conferences tend to have little to no appropriate accommodations, creating a vicious cycle of fewer deaf and hard of hearing individuals attending and speaking at events.

But to change that, you need to — not only show up — but also be transparent about your needs. As you will see, the lack of accommodations isn't ill-intended. It's just due to a lack of knowledge and, other times, a lack of funds to provide required accommodations. If we don't educate them, who will? To bring change, we all need to embrace **self-advocacy** and show up and speak up.

## Tips for Attendees

1. **Ask for accommodations early**: The sooner organizers know your needs, the more time they have to prepare. Organizing a conference gets increasingly stressful the closer you are to the date, so provide ample time for them to do the research.
2. **Share what works for you with event organizers**: If you have been to another conference where something worked for you (captions on the phone, etc.), use it as a learning opportunity for organizers.

## Tips for speakers

1. **Be transparent and vocal about your needs**: Publicly talk about accommodations on social media or email by replying to all to help initiate conversations. Use the public channels as an opportunity to collaborate and foster good relationships, so offer a solution when you can.
2. **Attend social events and make it clear if you are uncomfortable**: Let them know you are leaving a social event because you can't hear or communicate with other attendees. It's essential to make organizers aware of how this makes you feel.
3. **Don't hide your disappointment**: Don't be bitter, but don't hide your disappointment either. Be sure organizers know so they can do better next time.
4. **Use Google Slides' captions capability**: If the conference doesn't have captions, you can use Google Slides' captions capabilities. While they are far from great, they are better than no captions.
5. **Ask for a microphone for Q&A**: If you are hard of hearing, ensure there is a microphone for questions, and as a speaker, repeat the questions into your mic so the recording will pick up the vocals and captions will pick up the question.
6. **Share your slide links beforehand or at the start of the presentation**: If you have speaker notes, this will help reinforce the content.
7. **Be sure any videos or pre-recorded demos have captions**. If running a command line demo, be sure you have plenty of comments in the demo to explain each steps, what is expected to do, and the intended outcome. They should reinforce your voice over but stand on their own without your voice. ```

There are many small things you can do to help bring change. While it might be frustrating and draining having to do that repeatedly, it is necessary if we want to change the status quo. Conference organizers want to welcome everyone but need to learn how. So don't be afraid to speak up. It's important for you and the next generation.
1 change: 0 additions & 1 deletion website/content/maintainers/_index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

---
title: "Project Guidance"
linkTitle: "Maintainers"
Expand Down
2 changes: 1 addition & 1 deletion website/content/resources/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
title: Resources
menu:
main:
weight: 40
weight: 60
---
8 changes: 4 additions & 4 deletions website/layouts/partials/navbar.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{{ $cover := .HasShortcode "blocks/cover" }}
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-lg-row td-navbar">
<a title="Go to Homepage" class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
</a>
<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
<div class="td-navbar-nav-scroll ml-lg-auto" id="main_navbar">
<ul class="navbar-nav mt-0 mt-lg-0">
{{ $p := . }}
{{ range .Site.Menus.main }}
<li class="nav-item mr-3 ml-3 mb-0 mb-lg-0">
<li class="nav-item mb-0 mb-lg-0">
{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
{{ with .Page }}
{{ $active = or $active ( $.IsDescendant .) }}
Expand Down
3 changes: 2 additions & 1 deletion website/static/js/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ function stretchSliderToFitHeight(){
let slide = $( '.td-home .frontpage .slider .slide' );
slide.css( 'min-height', '' );
let minHeight = $( '.td-main' ).height();
if ( minHeight > 689 ) {
let viewportWidth = $(window).width();
if ( minHeight > 689 && viewportWidth > 768 ) {
slide.css( 'min-height', minHeight );
$( '.slider' ).slick( 'resize' );
}
Expand Down