How to Ensure Website Accessibility and Inclusivity

Nearly everyday, I unfollow folks here, because of content that is either inaccessible for me, or content that physically causes me pain.  Let me explain each one in a bit more detail. I am colorblind.  If graphics or images are shared without an image description, I may very well not be able to see what others see.  Colorblind folks don't use screen readers... so even if you are entering alt text in your graphics online, I can't see them. I am neurodivergent.  I don't often get sarcasm unless it is directly a quote from a movie or show that I regularly watch.  While I am quite possibly the BIGGEST gigglebox that you'll ever meet and I thrive on laughing, I'm often left feeling confused by posts that are sarcastic, or covertly making fun of something or someone. I am physically disabled with multiple rare diseases that cause pain and damage to my joints and physical movement in general.  These posts that are SUPER long due to unneccessary spacing are brutal on my hands.  The more mouse clicks and scrolling I need to do in a day means the less time I can hold off on my pain medication... and that means the less I can do the things I would like to do before I have to listen to my body and stop.  And yes - my pain is bad enough that I am in pain management for relief. What can you do to be more accessible?  Let's use my examples, as accessibility is such a vast field: 1. Always provide both alt text and image descriptions.  An image description goes into more detail than alt text.  It explains the image and its relation to a post.  It can include emotions, actions, or intentions you are trying to convey.  If it's a graphical representation of data, it should be a readable format of the data presented. 2. If you're using humor or sarcasm in your content, include some context for folks that may not understand what you mean.  Whether you add a quick note at the end of the post to explain your humor or sarcasm, or you explain within the post, it's so helpful... for not only neurodivergent folks but also folks who don't speak English as their first language or are from a different country and/or culture than you. 3. There is absolutely no need to write one sentence per line.  I know it may look cool, or some marketing bro said to do it.  But think about how much additional effort that is for folks to consume your content.  You may think I'm exaggerating, but I did an experiment before.  It took me like 9 scrolls to read content that, when I reformatted it similar to this post, it only took like 1 scroll.  That shit adds up in a day.  Find a good balance between avoiding HUGE walls of text, but also not 5 words per line. I hate to unfollow cool folks, but I have to protect my mental and physical health.  It's like a slap to the face if I am repeatedly being told [visually] that I don't belong, that spaces aren't welcoming me. Much love, friends. 💜 #Accessibility #DisabilityInclusion #ChronicPain #Neurodivergent #Belonging  

Did you know that following WCAG to the letter still might not create a truly accessible experience? I see this all the time. A team runs their automated scans, fixes every violation, and checks "accessibility" off their project list. But then a real user with a disability tries to complete a task on their site and hits barriers that no compliance tool flagged. Here's what I've learned about the difference between compliance and true accessibility: Compliance asks: "Does this pass the test?" True accessibility asks: "Can everyone actually use this?" That might mean: • A form that's technically compliant but confusing to navigate with a screen reader. • A video player that meets contrast requirements but is impossible to control with voice commands. • A checkout process that passes automated scans but takes someone with cognitive disabilities 20 minutes to complete. Don't get me wrong - WCAG compliance matters. It's your foundation. But it's not your finish line. The gap between "technically accessible" and "actually usable" is where the real work happens. That's where you test with people who actually use assistive technology. That's where you ask hard questions about user experience, not just code compliance. True accessibility isn't about avoiding lawsuits (though that's important too). It's about respecting the civil right of equal access to information and services. It's about ensuring that anyone, regardless of ability, can interact with your digital spaces with dignity. Every barrier we remove opens a door. Every improvement you make could be the change that makes it possible for someone to apply for a job, access medical care, or get the help they need. WCAG is your starting point, not your finish line. True accessibility is about people, not just rules. #Accessibility #Inclusion

At work I've started posting an "Accessibility Tip of the Day", just small tidbits of knowledge for our engineering/product/design/QA folks. For the non-Webflow-specific things that can be shared in public, I figured I'd share them here on LinkedIn as well. So here's your first one! Accessibility Tip of the Day: Not sure when to use a button (<button>) vs. an anchor tag (<a>) (link)? Buttons are for actions, and links are for navigating. Sometimes developers are tempted to use an anchor tag as a button by setting the href="javascript:void(0)" and adding an onClick handler. They usually do this because they want their button to look like a link. But please don't do that! Why is this important? For keyboard users: Buttons respond to the Enter and Space keys. Anchor tags respond to only the Enter key. Try pressing Space on an anchor tag, and you'll just scroll the page down, which is the default behavior in the browser when you press Space. For screen reader users: The ARIA role of each element is typically read when navigating with a screen reader. So a button with the text "Click me" would be read as "Click me, button". A link with the text "Click me" would be read as "Click me, link". Imagine using a screen reader and thinking you're clicking a button but it's actually a link, or vice versa. How confusing. Additionally, when using shortcut navigation menus like the "web rotor" from VoiceOver, content is grouped into categories like "form controls" or "links". Using the wrong elements will mean that your content is placed in the wrong menu, which is unhelpful. The solution: Use the correct semantic HTML element that you need. Then, style it up to look however you need it to. Most design systems make it easy for you to use a button but make it look like a link or to use a link but make it look like a button. #accessibility #a11y #accessibilitytipoftheday

Almost every Product leader I speak to shares about being interested in having an impact. It's fascinating to note that impactful changes don't always necessitate grand visions. They can be achieved through incremental steps, one customer at a time, by fostering inclusivity in our product development processes. Annie Jean-Baptiste shares "Product Inclusion is the practice of applying an inclusive lens throughout the entire product design and development process to create better products and accelerate business growth." In my journey, I've found that significant enhancements often result from incremental adjustments: 💡 Inclusive Research: Ensure our research is inclusive and we are learning from diverse customers. Even incorporating one additional dimension of diversity into our research approach can render our products a tad more inclusive. 💡 Harms Modelling: Prior to commencing product development, conducting a pre-mortem exercise focused on mitigating potential harm to our customers can significantly enhance inclusivity in our products. 💡 Diverse teams: Cultivating diverse teams fosters a rich diverse set of perspectives, thereby enriching our product development process and ensuring inclusivity is woven into the fabric of our product development. 💡 Testing with diverse customers: Leveraging diverse customer cohorts for testing enables us to identify and rectify potential biases or exclusions, resulting in products that cater to a broader audience. 💡 Building with diverse customers: Involving diverse customers in the co-creation process empowers us to tailor our products to their unique needs and preferences, fostering a sense of ownership and inclusivity. 💡 Accessibility Integration: Incorporating features such as screen reader compatibility, keyboard navigation, and adjustable font sizes can significantly improve accessibility and inclusivity. I found that testing accessibility before launching is a great way to minimize negative impact. #productinclusion #productmanagement #productleadership