Being an Inclusive Developer

It’s 2024. Inclusivity is preached and its value held high. It’s a badge of honour for a company or an entity to be labelled ‘inclusive’. University of Sunderland was honoured “University of the Year for Social Inclusion” in 2021, and you can still see banners of this achievement around campus in 2024. It’s cool to be inclusive. So why is accessibility not a priority when building websites?

Accessible websites are inclusive websites. People living with disabilities and/or sensory issues should not be deprived of the experience the able bodied receive. Thus, building an accessible website should be a matter of importance; more developers should at least think about accessibility when building their sites. Developers need to be more aware of accessibility. One critical way to improve this is improving the educational content.

I am currently a junior developer. I still have fresh memories of following along tutorials, learning how to build different interfaces and connecting them to a backend. What I don’t have a memory of, is the tutorials explaining accessibility, or even using the simplest semantic HTML to build the UI. Even back in university, accessibility was just glazed over. “Just use semantic HTML!”

You might be thinking, “Oh it’s just a poopy tutorial!” or “Your uni is just crap!”. Wrong - my YouTube algorithm is goated. In addition, I talked about this with my colleagues and they felt similar. If you suggest looking up specific accessibility tutorials, this just further proves my point that accessibility is seen as something separate when building UI - an afterthought. It would be so much better if most of the UI tutorials include accessibility features built in, so most starting devs have a better understanding of the thinking process when building accessible websites even with no experience. I recognise that this is anecdotal evidence, however I dread doing research for a more concrete evidence and decided to just write this opinion piece.

A lot of aspiring developers learn from the free content on YouTube. If these tutorial videos intertwine accessibility concepts when building interfaces, I believe this will increase the awareness of accessibility in the web. Simple things such as using correct semantic HTML, and knowing that a screenreader reads the document from top-to-bottom.

I have learned the importance of accessibility and how to implement basic accessibility features through my senior developer at work. During code reviews of a client project, the topic of accessibility comes up all the time, and suggestions on how to improve my code. Take this card for example:

How would you create the markup of this card? Visually, the image will be marked up first, then the title, author, etc. However, if a screen reader was to read it, it reads the markup from top-to-bottom. Hence, marking up the title and author of the card first would make more sense, using flex-direction: column-reverse to visually put the image on top.

On my first draft, the card is a “div soup” - the markup contains no semantic meaning. After multiple reviews, it is now an <article>, containing a <header>, with the image wrapped in <aside> as its mostly a decorative image; not essential to the context of the card.

My senior developer also put us through a semantic HTML exercise. The task is to recreate the LinkedIn post element here. What surprised me is how wrong the markup feels when inspecting the elements. For example, paragraphs in the post are marked as <span> instead of <p>, while the WCAG spec clearly states <p> is used to denote paragraphs.

While LinkedIn might have a good reason on why these decisions are made, this exercise made me realise how much better we can do on making the web more accessible, even just a little bit. Even just the use of the correct semantic HTML elements would go a long way. My next project (and post) would be about changing this very website you are currently on to be more semantically correct and accessible.