Highly condensed notes for the accessibility course on the w3schools website. In my humble opinion, the entire course is worth taking. However, if you have limited capacity, the following pages contain the most practical and/or important information:

• The website for Inclusive Design Principles
• W3Schools’ tutorial on semantic elements
• W3Schools’ tutorial on landmarks
• W3Schools’ tutorial on (not relying on) colours
• W3Schools’ tutorial on writing descriptive image text
• The Youtube video by Rob Dodson at Google, displaying the importance of headers
• W3Schools’ tutorial on visual focus
• W3Schools’ walkthrough of a screen reader UX
• W3Schools’ walkthrough on improving text zoom
• W3Schools’ walkthrough on improving page zoom

Testing accessibility

• Screen readers: NVDA

Elements

• section is not related to content in main
  • Aria-label & use case example: stay connected
• An aside is still connected to main‘s content
  • Aria-label & use case example: share this page
• div and span elements say nothing about the content. Only use these if no other option makes sense
• a links should usually not open in a new tab or window. If it does, make the user aware of this behaviour and ensure you do it with a good reason (like highlighted on the link targets article on Adrian Roselli’s blog, which fully details why new tab/window behaviour is not advisable)
• If you have multiple nav elements, use aria-label to clearly communicate differences (e.g. aria-label="main")
• button elements that (for example) open a modal or a hamburger ùenu, should have an aria-label (e.g. aria-label="Enter zip code to find a dealer nearby" or aria-label="Open menu" respectively)
• If two buttons are made for the same function (e.g. a text button and a icon button to open the same modal), they should be merged into one element

Skip link

Allows the user to quickly go to the most important part of the page. Test it out by pressing tab on WebAIM’s website

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<header>
    <a href="#main" class="skip">Skip to main content</a>
</header>
<main id="main">
</main>

<style>
    .skip {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden; 
    }
    .skip:focus {
        position: static;
        width: auto;
        height: auto;
    }
</style>

Custom controls

If you cannot use elements semantically (technical limitations, framework…):

• role attribute helps assistive technology users understand the purpose of the control. Possible values:
  • "button"
• "aria-label": accessible/clear name for the control
  • name attribute is not enough: this is used for computer code, not human consumption
  • Aria-label should thus be written for people, without e.g. hyphens
  • Slightly edited example from w3schools:

    1	<select name="countryCode" aria-label="Country calling code">…</select>

• value: the value or state of an element, that should be accessible
  • Edited example from w3schools of an accordion element informing whether it is open or closed:

    1	<div role="button" aria-expanded="false">When do I get charged?</div>

Inclusive Design Principles

While the website for inclusive design principles expands all of these, here are the general principles supercondensed

• Ensure comparable UX for every diversity, whether it be for user & device.

• Ensure valuable UX for every situation, whether it be a screen inside or outside, for first time or long time visitors.

• Be consistent in design choices.

• Give full control to the user. Animations & parallax scrolling and infinite load can be obstructive. Users being able to change font size or zooming in can be essential.

• Offer choices for actions. Gestures + menus, different views & layouts.

    Alternative ways of presenting data, such as data tables for info graphics, should be available to all users as an option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.
  

• Prioritise content.

    Progressively reveal features & content when needed, not all in one go
  

• Add value through integration. Vibrations for notifications for deaf/hard of hearing folks. Voice interface for multimedia for those that struggle with other controls. Show password button on inputs.

Colour

• Colour contrast has to be good for all states: hover, focus, active, unvisited, visited, deactivated…
• Do not use colour as the only visual indicator of meaning
  • An example from w3schools: links without an underline become unreadable on grayscale
    
    
  • Add text and/or icons alongside colour to communicate meaning

Links

• Use text-underline-offset and text-decoration-color for improved readability
  Example from w3schools:
  
• If using (for example) a logo as a link, add an aria-label, (e.g. aria-label="Toyota front page")
• Stip down accessible names on links & buttons, remove go to/page. For example, aria-label="Global distributors" is enough

Images: decorative vs meaningful

Can you remove it with no impact? Then it is a decorative image.

Decorative image

Either…

• Set alt="" (note: NOT a lack of an alt attribute, specifically an empty one. Otherwise the filename may get read)
• Set role & aria-label/aria-labelledby. Example from w3schools:

  role="img" aria-label="Private house, modern architecture. Minimalistic with a big garage."

• (Background image) Add the image using css background-image
• (Font icons) Set role="img" & aria-hidden="true"
• (Inline svg) set aria-hidden="true"

Meaningful image

• Modified examples from w3schools, from worst to best:
  4. <img src="output-460aebd-49.svg">
  5. <img src="redpencil-logo.svg">
  6. <img src="redpencil-logo.svg alt="Redpencil Logo>"
  7. <img src="redpencil-logo.svg" alt="Home of Redpencil">

Writing descriptive text

For some good examples, check out the w3schools tutorial on descriptive text. But remember some of the following things:

• The value of the alt attribute should describe the image, or even better: the intention of the image

• Imagine you were to explain a web page over a phone call with a friend, what would you say about an image?

• If zooming in on an image would reveal more info, consider adding it to the alt text
• If an icon has a meaning (e.g. “gold member”), write that meaning (e.g. “Gold member”)

Links

States

A visited state can help a person with short-term memory loss to understand which content has been read. A hover state can help a person with reduced muscle control to know when to click. A focused link helps keyboard users to know which link they are about to activate.

Three tips are described on w3schools:

• Removing the underline is almost always a bad idea (click here to scroll up to the section on colour)
• Contrast and focus
  • The focussed state must sufficiently contrast the unfocussed state
  • The outline (viewable when using tab navigation) must not obstruct the text. Use outline-color & outline-offset
• Make hover very clear. Consider adding (for example) bold text on hover

(The following two gifs and theur alt text are also adapted from w3schools)

Accessible link text

• Makes sense without any context
• Explains clearly what the reader will get by clicking

Bad links –> good links examples adapted from w3schools

• Click here –> Find out more about the HTML language
• Read more –> Read more about how to get healthy
• Buy tickets to Fall Out Boy here –> Buy tickets to Fall Out Boy here

Tip: write your links under eachother and see if it make sense

• Donate
• Read more
• Visit the eshop

The read more can be replaced. On the Red Cross blog site example, it gets replaced with “Law & Policy”

Headings

• Don’t skip headings because of styling reasons: use them sequentially, and change the style with css
• If the design doesn’t call for a header, still make one and position it off-screen

Hidden headings and/or content

Common practice: sr-only class

1
2
3
4
5
6
7
8

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Example:

1

<h2 class="sr-only">Headlines</h2>

Note: a hidden heading could be redundant if a <title> element contains the same content/fulfills the same purpose

Focus

Do not remove or hide focus.

We have two options. Leave it or customize it. Removing it is not an option.

• Do not use outline: 0;
• Be careful with parent divs with overflow: hidden;

Two options

• Default focus: familiar for the user, no coding needed for you
• Customise visual focus: may be needed if default focus has low contrast with your website, or can be used to align better with the site’s colour palette

Forms

<label>

• Read out loud by screen-reader on input focus
• Allows easier clicking on checkbox/radio button
• Ensure that for="input-id"

Required fields

• Form labels often contain * or required
• But make sure to also set required and aria-required="true"

aria-label

• Fields without visual labels still need a label

• Do not rely on placeholder, as these are not valid accessible names
• Use aria-label, e.g. aria-label="Enter search term"

<legend>

• Sometimes a “higher” level label is needed (e.g. date of birth)
• Visually Day, Month and Year labels make sense, but this may not be the case for a screenreader
• Use <fieldset> and <legend>

Example from w3schools:

1
2
3
4
5
6
7
8
9
10

<fieldset>
  <legend>Your date of birth</legend>
  <label for="dobDay">Day</label>
  <select id="dobDay">…</select>
  <label for="dobMonth">Month</label>
  <select id="dobMonth">…</select>
  <label for="dobYear">Year</label>
  <input id="dobYear" type="text" placeholder="YYYY">
</fieldset>

Autocomplete

This is convenient for everybody. This is very helpful for user with motor impairments or cognitive disabilities.

Example autocomplete attributes:

1
2
3
4
5
6

<input
    autocomplete="email"
    autocomplete="bday-day"
    autocomplete="bday-month"
    autocomplete="bday-year"
/>

Errors

Errors have to be perceivable & understandable to people who are colour blind, blind or low visioned, or who have limied cognitive abilities.

Accessible error messages:

• Written in text. Color & icons can be used, but not alone. Ideally:
  • Written in text
  • Warning icon
  • Red border
• Close to the element that has failed

  • Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

    • Nielsen Norman Group, Proximity Principe in Visual Design
  • Errors close to failing fields
  • Big margin between fields
• Informative, helping the user
  • The more informative and precise, the better
  • Ask the users if they udnerstand what is wrong. If not, write the error more precise
• Associated to the failed element in the code

  1 2 3 4

  <!-- Add aria-invalid="true" once the the form control fails --> <input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error" aria-invalid="true"> <p id="firstName-length-error" role="alert">Your first name must have at least two letters and no unusual characters</p> <!-- role="alert" makes the screen reader read the content, even if it's not in focus -->

  Aside note: when the user submits a form, the focus moves to the first invalid field

Zoom - Text Size

Some people need larger text to perceive letters

• font-size: Use rem; you can convert px to it
• line-height: avoid using absolute units. For example, use 1.2; instead of 22px;
• height: avoid using absolute heights (e.g. 66px;), and instead letting line-height & font-size run

Original

Original, zoomed in

With rem font-size

With rem font-size, line-height, and with height and -webkit-line-clamp: 3 removed

Zoom - Page

Ensure that…

• Horizontal scrolling is avoided
• All content is available (not clipped, truncated or obscured)
• All functionality is available
• Avoid text in images
• Provide space for key content

Page zoom often triggers mobile view on responsive sites, which is good.

Note: the examples provided on the W3Schools Page Zoom Accessibility page are great illustrations as to the importance of supporting page zoom, but there is barely any way to condense them. Below will be a general list of tips for reference, but I highly advice checking out the page.

• Set viewport (<meta name="viewport" content="width=device-width, initial-scale=1">)
• Make the site responsive
• Minimize buttons for other features (e.g. chat, cookie consent). Use minimized as default where possible
• Vector graphics/SVG > raster graphics/PNG
• Avoid text in images. When zoomed, it gets pixelated, clips out of the browser window/view (requiring (horizontal) scrolling to read it all) and is not translatable nor searchable
• Ensure mobile ads only appear on mobile devices
• When using position fixed/sticky, ensure it doesn’t cover content when zoomed

(Appendix) Assistive technologies and those that use them

• People with hand tremors/not able to grip a mouse –> Keyboard navigation
• People with mobility disabilities –> Voice control, eye tracking, switch devices
• People who are blind –> Screen readers, braille displays, speech recognition
• People with low vision –> Screen magnification

Thanks to standard methods we don’t need to code for specific technologies, and it’ll be accessible for all

Important things to additionally note:

• Keyboards are also used on mobile devices (thus stuff like keyboard focus remains important)

This is the second time writing this, as I did not commit and instead removed the original. It hurts.

Note: the commits listed are of the initial imports, and the final product may differ. For the final product, see github.com/Denperidge-Redpencil/du-project

01: How and why (pt1 & 2)

These contained the design philosophy of semantic.works! I added this in the following format:

1. The core values of the semantic.works stack and their benefits (e.g. the desire for efficient development, maximum freedom and longevity)
2. How our design decisions reflect those values (e.g. the decision for using micro services, standard api’s, semantic models, centralised communication…)
3. What this resulted in: (e.g. the general proejct layout, using HTTP/JSON:API/SPARQL, Docker (Compose), the categories of repositories…)

Related commit: 2079fcef1724540b7ee95dc5e084ff423f2b7370@github.com/Denperidge-Redpencil/du-project

01: How and why (pt3)

Information about possible/future expansions for semantic.works. A nice watch, but nothing that should be in the permanent documentation.

Related commit: N/A

02: A shared foundation (pt1)

The beginning of this video is a quick overview of Docker Compose, which is not imported.

Afterwards, however, the information about services as well as how to add it into the project is given and imported.

Related commit: c57348f8c09ec2062f951f915da85d1408f05050@github.com/Denperidge-Redpencil/du-project

02: A shared foundation (pt2)

This video explains linked data and writing turtle. While eventually a written introduction in the semantic.works docucmentation should be made or linked, it is out of the scope for the current import.

Related commit: N/A

02: A shared foundation (pt3)

This video explains Ember.js, and has the same problem as pt2.

However, it should be noted that in the beginning Aad opens this one by saying “The hamster” and that made me very happy.

Related commit: N/A

03: Docker for real (pt1-3)

This video series explains Docker, and has the same problem as A shared foundation pt2-3

04: Templates and conventions

FILLED with information! Templates was expanded, the applications category added, and a bunch of naming conventions written down, including of the docker-compose files!

Related commit: fee309f545f22f01866c5532e8762799cd1b284d@github.com/Denperidge-Redpencil/du-project

05: Common microservices (pt1-2)

This part highlights the importance of identifier, dispatcher and virtuoso. This has been put into a quickstart how-tos/creating-applications. Some information (like the info about accept headers) and extra configuration options for dispatcher have not been imported, as to keep the how-to to the point.

Related commit: 5a637878d108af7e761e2b50d4ed701312093975@github.com/Denperidge-Redpencil/du-project

05: Common microservices (pt3)

This part mostly talks about implementing mu-cl-resources. It has been added in the form of linking to the documentation.

Related commit: 5a637878d108af7e761e2b50d4ed701312093975@github.com/Denperidge-Redpencil/du-project

05: Common microservices (pt4)

This is about the file service, login services… and documentation generation. I sent a message to check the up-to-dateness of the documentation generator, but aside from that, nothing was imported due to a grander amount of specificity.

Related commit: N/A

06: Intro virtuoso and sparql + 07: SPARQLing

These are tutorials for using virtuoso and SPARQL, and thus are out of scope for the current import.

Related commit: N/A

Extra notes

We should make and/or link (a) tutorial(s) for the following things:

• Docker & Docker Compose
• Linked data & SPARQL
• Ember.js
• Accept headers

That’s it for now!

Now, onto the next step: polishing, refactoring, and deprecating!

aka how to ruin your life by trying to put your favicon in a subdirectory

Related projects:

• My ember-cli-favicon fork on GitHub
• semantic.works rework repository on GitHub
• app-mu-info-rework repository on GitHub

Mission

So, one of the things I wanted to fix in the semantic.works rework was the lack of a favicon.

Now, you may say

oh simple, convert to an .ico and add a head tag!

But this is not entirely accurate. PWA’s and pinning websites onto your browser ha necessitated multiple favicon definitions as well as files. “apple-touch-*“, “android-chrome-*“, fun fun.

Now, you could use an online generator, but then you have to manually update it if the logo changes.

I don’t want to do that.

ember-cli-favicon

Luckily, ember-cli-favicon exists! A tool that you can point towards an image, and it will automatically convert it into multiple files and add the head tags. A dream.

I implement this, and it works perfectly locally. For those of you familiar with development and/or torment, that sentence structure will send chills down your spine.

Because when hosting it, its served with app-mu-info through the mu-dispatcher (see dispatcher-with-emberjs.ex in the app-mu-info-rework repo). This configuration does not allow assets to be put in root, instead serving them from the assets subdirectory.

This is where it begins.

Configuring ember-cli-favicon

Now, this addon has a path setting. I set it to /assets/, and lo and behold: the html tags now point to /assets/favicon*!

The html tags.

The files are still in root.

Now there don’t seem to be any options in terms of output aside from that. So…

Call me jerry by the way I rig

1. onSuccess callback function from ember-cli-favicon
2. Take the resulting html from that callback, write a regular expression to fetch the favicon hrefs
3. Use those hrefs together with node.js’ fs to move the files

Nope. Didn’t work. Well, it did. If you ran it twice without clearing your build, it would move the previously generated favicons. But ember-cli-favicon’s onSuccess thus seems to call before the files get moved. Bummer.

in-repo-addon

1. Create an in-repo-addon
2. Run a function on the postBuild hook
3. Read the directory, use a filter to check if its a favicon file, if so, move it to assets. See the commit on GitHub here
4. Everything gets moved back after the addon is done WHY

So, I go to digging

Implement the favicons library

ember-cli-favicon uses the favicons library at its core. So if I just make a replica for myself that writes to the assets subdirectory, I’d be set.

Now, this is a bad idea. Half because duplicate work is wack. Half because it requires a LOT of config and manual writing and I would have to replace & insert into the generated html file and no ew yucky. But, this repo proves at least that you should be able to let your favicon generate elsewhere.

Modify ember-cli-favicon

What if I checked the code and patched the project? Well, it doesn’t seem to handle the writing exactly itself. It turns out its a wrapper around broccoli-favicon!

broccoli-favicon

And lo and behold (to do: don’t use lo and behold twice in one post) a pull request on GitHub by miguelcobain with a patch that allows writing to other folders. Thank you Miguel!

However, this is broccoli-favicon.

Modify ember-cli-favicon for real this time

Install broccoli-favicon from the fork. Clean one-line implementation of the new option. Document the change in README.md. Yes. Install ember-cli-favicon from the fork in semantic.works. And that’s that.

Now open dev.info.mu.semte.ch and watch it in all its glory. Or use it for yourself! You can check it out at github.com/Denperidge-Redpencil/ember-cli-favicon/tree/write-to-path.

Hopefully, the original broccoli-favicon & ember-cli-favicon get patched. But until then, a solution has been found! Yay.

Have a nice day!
- Denperidge (she/they)

Truthfully, I’m not entirely sure if the current blog I’m writing it on has any readers, let alone if it will. Maybe the text might be properly edited and published down the road, who knows. Get ready for me to get horridly personal about the experience of having a job.

• Part 1: cause
• Part 2: consequence
• Part 3: solution

Part 1: cause.

Or, You (or well, me)

You’re ? years old. Your parents notice that you are hesitant to go outside and barely want to do anything.

You’re 10 years old, and - at least to your current knowledge - the first document gets drafted. Alongside some neurodivergencies, a note is made about your depressive moods.

You’re 12 years old, and you can’t help but worry that the extra care you get from your parents is a burden. Maybe it’d be easier for them if you weren’t there in the first place. Maybe it’d be easier for them if you weren’t there anymore, at least.

You’re 16 years old. You try to take care of your peers. You spend a few month-long spans struggling with disassociation and feelings of emptiness and demotivation.

You’re 17 years old. You start to break out of your shell a little bit.

You’re 17 years old. The prolonged, untreated brainwaves get more and more the better of you. You present your end project progress in December, and even though you already have more than most would have at the end of the year, you can’t help but present it with a request for a do-over. You repeat this a few months later, until the stress builds up at you waking up in panicks.

You’re 17 years old. Your teacher takes you aside and asks if you’re okay. You attempt to explain, and she listens. With your permission, she convinces your parent to make an appointment with the psychiatrist and a therapist. The former convinces her that both anti-depressants and rilatin might help me.

You’re 18 years old. The anti-depressants start helping. For the first time you notice the beauty in your environments.

You’re 18-19 years old. The people who employed you obscured and closed in deadlines, withheld payments, and were not strangers to yelling at you through the phone. You work on the bus to school, in the lunch breaks, on the bus back and your evenings. You lose touch with your loved ones and your grades plummet. Your identity is wrong, but you don’t have the environment to work on it. You notice that your food stops having taste.

You’re 19 years old. You explain to your parents that you want to drop out. The monotomy of bussiness-focused programming has got to you, and you have become disillusioned due to toxic environments, privacy destroying performance marketing and business-first classes.

You’re 19 years old. You find a new college course. It’s in Antwerp. You move into a dorm, and are suddenly surrounded by new and open people. Someone mistakes you for a girl. You realise you wish they were right. You realise that that means going home would never be the same.

You’re 21 years old. You quit your old job after they refuse to pay multiple hundreds of euros for multiple projects over multiple months. You change your name, hair and wardrobe. You fuck up constantly as you re-learn everything. But you’re surrounded by amazing people that motivate you to keep improving.

You’re 21 years old. The rift you were afraid would happen has happened, and your life has changed 5 billion times in the span of a few months and years. But you walk back to your tram, and for the first time feel like you’re in a place where you belong, and can become happy.

You’re 22 years old. You dropped out of college again as your stress keeps you up more and more. The constant thoughts of “you could be studying for your finals right now” at every hour of the every day breaks you. You start looking for a job. You start looking for a permanent place to live.

You’re 22 years old. Your uncle, who - while always supportive - you have been bonding with more since you came out, passes away. The stress of your money & possible incoming homelessness impedes all your relationships. The changes that are making you happy make it harder to be with your family for long stretches of time.

You’re 22 years old. You have a job. You rent an appartment. You even have renters insurance. Every week can contain a single or multiple days wherein you struggle to work, communicate, or eat. But, you’re allowed and able to be yourself, and you’re beginning to understand how your brain works. You hope.

Part 2: consequence.

Or, How it affects your (mine) work

It sucks. Because the first thing that you have to do here is split everything up in two categories. Things that will directly affect your work, and things that affect your personhood, and can thus be argued into infinity whether it’s “actually a problem”. Concentration problems, complete loss of appetite, inability to communicate, brain fog. But fuck, when I can’t speak to the people closest to me, to partners nor friends nor family, it’s hard to make an exception for work. But, you’ve got these things, so how do you fix them?

Part 3: solution

Or, How you (me) and your (my) employers are minimising the aftermaths

I’ve been granted the ability to have flexible hours. I try to still be on time for any meetings I’m expected

Part 2: consequence

Or, a disservice

The above ignores one of my hardest symptoms is a bit of a wildcard. It does a disservice to how much stress has an effect on me. I wish I was exaggerating when I say that it has caused me to need to go to professionals in their fields. One condition I accrued during college was one that “only appears on people undergoing chemo-therapy or 60 years and older”. At the time I was still eating consistently and healthy and everything. As of most recent, a different condition of which the strongest effect of it had laid dormant for over a decade has flared up again, causing a span of 3 days where I consistently could barely breathe or move. I’ll feel guilty for my lack of performance and feel like I don’t deserve to eat.

So what do you do? Not work to avoid stress?

I’m a perfectionist. One that likes to do all their work to get an empty queue. But this is impossible. As a programmer, code could always be optimised and new technologies always used. As an “artist”, one word or frequency can always be changed. As an adult, there is always a chore to do. Even if I did not need to work to survive, I would go crazy from not working or creating in some capacity.

Part 3: solution

Or, try?

My life is currently a bit of a juggling act. A meditation technique that I swear I learned from a book and not a way more comparatively asinine location that I use symbolises your brain as an anxious kitten to guide no jokes about my name here. Contextualising that in my work-health balance, it is currently guiding my mind into work to get things done, and then guiding it away so I don’t overtly stress.

So, lets try, I guess. I’m restarting therapy. A psychiatrist appointments incoming. I’m contacting organisations to possibly help.

Its worth a shot, right?

(To be updated)

As some of you may know, I am trans! Sadly, as the current social/political climate mandates, a portion of the time since I knew has been spent in the closet. But luckily that time has been over for a good second! I’m happy with my gender, my body, and the amazing people around me who have supported and stuck with me through a lot of it.

Now, a couple of days ago I was talking to one of my partners. One of their colleagues had discovered they were trans by accident.

I don't exactly hide it, but I also don't want to have to get up in front of my co-workers and do an announcement of "hey, I'm trans!"
[...]
And, well, [the co-worker who knows] still calls me [by the incorrect pronouns]. But it's something I guess.

The fact that coming out would require a draw of attention and thus possible scrutiny, sucks. It’s a fact that most queer people begrudgingly accept. Unless the place has measures of protection and/or accomodation in place, the results are up in the air. And losing your source of food and a roof above your head is less of a detriment of the exhaustion and dysphoria of being spoken to and often treated as the gender that isn’t yours. But that’s a gigantic conversation about a topic that will only better with increased understanding and acceptation of non-traditional gender stuff. My silly little blog post is not exactly the activistic masterpiece that’s gonna change that. I might do a writeup sometime of my personal POV on how it could be improved, but that’s currently out of scope.

But I guess I wanted to talk about what it’s been like in my professional career, specifically with Open Summer Of Code and of course the OSOC collaborator and my current employer, Redpencil!

Open Summer Of Code

I entered Open Summer Of Code as an anxious little goofball.

I signed up, and near-immmediately asked the organisational staff “hey, all my paperwork will be under beep, but if you could like not address me not as a guy and also not using beep that would rule”.

And they did?!

The only goof was a powerpoint with some automatic text having my old name in it. Which they as soon as I texted them about it, they immediately changed.

This was the first time I’ve ever professionally used my chosen name and presented alternatively. But luckily my nerves were able to crystallise into me being very hyperactive and all over the place. A lot of people did their remote group photo using a screenshot of a videocall, but I photoshopped our team into Voltron. I posted music and then we (especially Chris, our coach who I adore and if you are reading this HI!) started a fake cult about the audio recording software that wouldn’t remove the audio watermark even though a legit license was bough- I’m getting off track.

If I remember correctly, I used my Discord nickname to write my pronouns: she/they. And noone made a single issue out of it. I was Cat! And I even heard that Julia was actively coming out during OSOC and ended up coming forward to the organisers to have her name changed in OSOC itself. And then the following year she came back, super open and also with an amazing alternative style and I was screaming.

Oh yeah, the next year!

The next year was also incredible. Getting to see a lot of people again, walking in with a monster energy so I could stay afloat. But this year, the new communications person (Lotte, who I also adore and if she is here HI TOO!) had her pronouns in her e-mail signature, which is amazing. I even ended up getting interviewed by one of my colleague-teams about diversity/gender for their project! I think the application form also had some improvements in terms of accomodation, but it’s been a second. Honestly, if it wasn’t for that year in OSOC, I would have quit programming. But that’s a story for a different time!

Thank you, everyone at OSOC. A special shoutout to the following people: Chris, Miet, Lotte and Julia! OH and my teammates. And Indi and Niels. You all dealt with my chaos and were incredible to work with and/or be around.

Redpencil & ABB

And then I got hired! The people at Redpencil took that goofball. I had to do the same song and dance as before. “My papers say a name but that name is evil”, etc. But this time with a neat addition (well, for me mainly) that it would change down the road! I said this as both clarification and a heads-up. They have made not a single problem of it, even mentioning that they had already done the name-change paperwork before, and that I could just give the word once I was changing it. In the Rocket.Chat instance, I added (she/they) to the top of my profile description, and every Microsoft Teams meeting would have my name decorated with the same brackets for those that did not know me. With the exception of one conversation of someone not understanding what the they was about, I don’t think I can recall a single problem. (Note: the conversation I had with that person seemed very much in good faith, and seemed more akin to some inexperience with non-binary/trans people as opposed to malice!)

We work closely with ABB, a Flanders government instance thing. I walked in with two of my friends/colleagues (hi Lenny and Senne!) and we got greeted with (loosely translated) “gentlemen and lady” which felt amazing.

I’ve been able to go to Redpencil and ABB events in alternative clothing (albeit sometimes a little toned down as to not pop out more than I usually do) and that has not been a problem either! As far as I’m aware.

GitHub added the pronouns field for profiles as well, and Senne listed his and hey, that bangs.

And now I’ve been working here for oh gods almost a year, one of my colleagues has added pronouns to their profile too! Which absolutely overjoyed me to see. It’s also two sets of pronouns and lets be real, people with multiple pronoun sets are super cool and what do you mean “I’m biased”

So, thank you, everyone at Redpencil & ABB! And once more a special shoutout to Aad, Claire, Lenny, Senne, Jodi, Johan and Laurent.

Conclusion-ish

I’ve been lucky. Both in in the people I got surrounded with, and the working conditions that allowed me to unmistakingly have my pronouns visible. Here’s to hoping other workplaces and industries grow in this aspect.

And finally, a note from one of my partners looking at the short-thought-on-being-trans filename:

Rename it to short-to-medium thoughts on being trans