Creating an Accessible Web for Everyone with Anuradha on Girl Code Coffee Chat #9
Tags: girlcode, webdev, codenewbie, a11y
Published: 2023-07-06 12:28:18


For our 9th edition of Girl Code Coffee Chat, [Arisa](https://twitter.com/arisa_dev), [Alba](https://twitter.com/dawntraoz) and [Josefine](https://twitter.com/JsfnSchfr) had their friend, fellow GDE (among many other certifications she’s got) and amazing human being [Anuradha Kumari ](https://twitter.com/miracle_404)on the stream to talk about all things Web Accessibility. Anu shared some practical tips, her story of how she got into Web Accessibility (and Web Development) in the first place and we had lively discussions and laughter. If you are curious, what [GirlCode](https://www.girl-code.co.uk/) or our [Coffee Chats ](https://www.meetup.com/girlcodemeetups/)are, you can read all about that here. For now, let’s dive into this month’s topic: Web Accessibility. 

If you would rather check out the recording of our conversation, you can find it here ⬇️

{% youtube V4i9-eyl0EQ %}

If you don’t know Anuradha, she’s a senior frontend engineer based in Amsterdam who loves talking about Web Accessibility. She is also a Microsoft MVP, Cloud Ambassador, Google Developer Expert (and basically really got all the titles a Developer can get - well deserved). 

You can find her on [Twitter](https://twitter.com/miracle_404 ) or read more about her journey on her [website](https://www.anuradhakumari.com/). 


## What is Web Accessibility and why is it important?

Web Accessibility basically means making websites, resources and services accessible to everyone, also people with disabilities. As Anuradha points out, the web was actually made to be accessible. If you looked at the first websites, they were actually relatively accessible (especially compared to today's websites). Nowadays, with Javascript and all these advanced frameworks, we are introducing a lot of complexity. Because of that, we need to make sure to not leave anybody out of this experience. 

Consider interactive elements, all these “fancy” things we all like to include in modern websites to make them more fun. We need to be mindful of those, and double-check all divs and spans to make sure we include meaningful elements so that they are also accessible for screen reader users and via keyboard. Of course, this is just one of the many examples in which Web Accessibility is important for users. 

Users are so diverse, and we need to consider all the different kinds of disabilities and limitations - how are people using the web? It can help to create personas to consider from a UI / UX perspective and when testing; there are also tools like [Cards for Humanity](https://cardsforhumanity.frog.co/), which deal you cards of different users’ attributes to open our minds to all sorts of different perspectives. It also show that many things we may not consider disabilities or limitations can change the way we interact with the web, like for example anxiety. 

> Include all users and make sure they can access the web

### How did you get into Web Accessibility? 

When Anuradha started around 3 years ago, everything was new to her and she felt like she had been “doing it all wrong” before. It wasn’t a topic in her “bubble” before. According to her, there is still not enough awareness. That’s also why she likes to talk about this Web Accessibility: to raise awareness and get folks to dive in deeper. People can only explore if they are aware that something like Web Accessibility exists. 

While of course, the responsibility lies with developers, it’s also about mentors, companies and governments - a shift can only be accelerated, if leadership supports the transition and when there are laws in place to enforce accessibility guidelines. We all share this responsibility to create an inclusive experience online. 

### What are Invisible Disabilities?

Some disabilities are visible - for example if someone is using a wheelchair or a cane to move, has glass or a visible hearing aid. Other disabilities are invisible: You can’t tell for example whether someone is neurodivergent, color blind, or deaf. Of course, people can disclose these disabilities, but they may decide not to to not face even more discrimination still. 

For some things, Anuradha describes the Covid-19 as a tipping point: as everyone was forced to do everything online and was hardly able to leave their house, she perceived a shift in awareness of how “broken” the web was in terms of Accessibility. 

One really interesting source for diving into common Web Accessibility challenges and pitfalls is the WebAIM one Million report. In there, the most common issues on the one million most popular websites in English are documented. In there, you see for example that the most common issues in Accessibility audits are for example insufficient color contrast, missing link or button labels and missing alternative texts for images. 

> It’s undeniable: Accessibility is Everywhere and affects everyone 

While it’s taking some effort to create a shift in culture at companies and in general, Anuradha shared some thoughts on making it happen: 

- Reflect on how many people are affected and how much money they could spend on your product or service
- Consider the laws applicable in your region
- Use cases to showcase how accessibility can be implemented make it easier for everybody involved to estimate how much effort is needed and what potential solutions can look like. 


> Accessibility should be the default, not the exception. 

→ One great idea is to follow the most critical user journey: what is the most common user journey? Fix that! Go for relatively low-hanging fruit to start with and tackle more complex issues afterward. 

Near the end of the [stream] (https://youtu.be/V4i9-eyl0EQ?t=2703) Anuradha shares testing tools and how to visualize the accessibility tree in the DevTools. She also showcases some [great examples on her own blog](https://explore-a11y.netlify.app/animation). 


![Shared sreen on the video cast while Anuradha shows some Accessibility Testing Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shst5hnf5t0lpxdka6g3.png)
Some of the Accessibility Testing Tool recommended: 

- [Axe Dev Tools](https://www.deque.com/axe/devtools/ )
- [Lighthouse Dev Tools](https://developer.chrome.com/docs/lighthouse/overview/)
- [Linters for Accessibility](https://www.deque.com/axe/devtools/linter/ )
- [Pa11y](https://pa11y.org/)
- [Polypane Browser](https://polypane.app/ )

To wrap up, in this fun and educational conversation, we have learned a lot about the different aspects of Web Accessibility and how it is our responsibility as developers to educate ourselves and continue learning about how we can make the web a more inclusive place. 

**Resources:**

- Anuradha's Twitter: https://twitter.com/miracle_404 
- Anuradha's Website: https://www.anuradhakumari.com/
- WebAIM one Million : https://webaim.org/projects/million/
- Cards for Humanity: https://cardsforhumanity.frog.co/