Writing Accessible Website Content for All Users

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  

Alt text isn't optional - it's a requirement for accessible content! When we add text alternatives to images, audio, and video we're not just following WCAG 1.1.1. We're also building a web that includes everyone. In this carousel, I break down the essentials of WCAG 1.1.1 - what it covers, how to write better alt text, and when to skip it entirely. Swipe through 👉 #Accessibility #AltText #InclusiveDesign #WCAG #A11y If you prefer your content as text, read on: 1. Alt text isn't optional. Understanding WCAG 1.1.1. Slide includes an image of two people sitting at a table using laptops. One is using a refreshable braille display, the other is using a screen reader. 2. What is WCAG 1.1.1? Any content that isn't text needs a text alternative. That's what 1.1.1 is all about. 3. Why it matters. Text alternatives make digital content usable by screen reader users, people with slow internet, users with cognitive disabilities, and even search engines. 4. How to write better alt text. Be clear and accurate, but concise. Describe the meaning of the image, not just its appearance. Skip "Image of...". Use empty alt attributes for decorative images. 5. Alt text example. Slide includes an image of a line chart with a good and bad example of alt text. The bad example simply reads "graph". The good example reads "Line graph showing sales increasing from 19 in January to 38 in May" 6. Alt text example. Slide includes a photo of a dog with good and bad example alt text. The bad example is "dog". The good example is "Golden retriever puppy lying in the grass with a ball" 7. What about decorative images? Some images don't add meaning, they're just there for flair. In that case, use an empty alt attribute so screen readers skip them. Slide includes a decorative blue spiral image with empty alt text next to it indicating that's how it should appear in the HTML. 8. Don't forget audio and video! Audio? Provide a transcript. Video? Provide captions or a transcript. 9. Complex visuals need more than alt text. For infographics, diagrams, complex charts and other complex visuals, use brief alt text and a detailed description nearby. 10. An infographic showing the water cycle is shown with the alt text "Infographic describing the water cycle. Full description below". Below, that we can see a heading that reads "The water cycle" and a paragraph of text starts that reads "The water cycle describes how water moves through the environment. Water evaporates from oceans, lakes, and rivers..." 11. Make forms accessible too. Every input needs a label. Make sure it's programmatically connected. 12. Accessible email field. Shows a screenshot of a form field labeled "Email address" followed by the correct HTML for marking up the form field. 13. Alt text = inclusion. Alt text helps real people. Small effort, big impact. 14. Learn more. Want more clear and actionable WCAG breakdowns? WCAG in Plain English is coming soon! Follow me for news and updates.

It doesn't matter how great your website messaging is if nobody can read it. Here are some tips 🔻 Open your website on a desktop computer, laptop, tablet, and phone and make SURE everything (yes everything) is easy to read. Better yet, ask someone older (someone who will be honest with you). Some things to watch out for: 👉 If you're going to place text over an image or pattern, make sure there is a LOT of contrast between the image and the text color. Readability is WAY more important than using a cool image. 👉 Choose a font that is easy to read – in it's normal state, but also in bold and italics. Again, readability is more important than showing off a creative font. 👉 Use all-caps in moderation. Nobody wants to try to read a full paragraph of all-caps copy. 👉 Pay attention to contrast. Do not use a light color on white, or a dark color on black. There are contrast testers that will tell you if your text color is legible based on its background color. Link in the comments! 👉 Don't use complimentary colors (colors across from one another on the color wheel) on top of one another. It causes an odd vibration that is extremely uncomfortable to read. 👉 Give your text a LOT of room to breathe. Make sure that it's not running into the edges of your page or into images or other blocks of text. 👉 Use a font size that's large enough for older people or those with visual impairments to read. Again, clarity over design. 👉 Don't replace real text with images. Images won't work with screen readers, and can't be enlarged as easily with accessibility settings. * * * Did I miss anything? Is there anything that annoys YOU when you're trying to read a website?

Accessibility should be seen as necessary, mandatory, and crucial. Here are 8 tips for Global Accessibility Awareness Day (GAAD). Before I dive into these simple tips, let’s quickly learn about GAAD. The main purpose of GAAD is to get everyone talking, thinking, and learning about digital access and inclusion, and the 1 Billion+ people with disabilities. GAAD is celebrated annually on the third Thursday of May, so this year it's on May 15th (today!). A disabled person should be able to experience the internet, apps, social media, and all digital spaces like anyone else, but unfortunately, many websites and digital spaces are still inaccessible. So here are 8 easy tips for digital accessibility: 1. Color Contrast Accessible content generally has high contrast between the background and text colors, which makes it easier to read. For example, using a black background with white text will be accessible for most people. There are exceptions to this guidance as those with colorblindness and conditions like Irlen Syndrome may have other needs. 2. Closed Captions When hosting virtual meetings, always provide closed captions. Also, provide captions for content that you produce online. Please provide fully accurate captions instead of relying on automatically-generated ones. 3. Image Descriptions (IDs) Write IDs to help blind and low vision people learn what an image looks like. This is especially important when an image conveys information, such as an event flyer. You can add IDs within a post or in the comments. 4. Audio Description (AD) Audio description is helpful for those with vision disabilities. AD describes visual content in enough detail so that people don't miss out on information. Include AD in videos and verbally describe images in presentations. 5. Transcripts Transcripts are wonderful for business because they allow you to improve your SEO rankings since your audio or video content has been turned into words. Transcripts also help make content accessible for the D/deaf and hard of hearing, those with other disabilities, and more. 6. Label Buttons Unlabeled buttons on apps and websites create access issues. This is very important for screen reader users. Each user needs to be able to easily determine what a button does and also find the buttons. 7. Pascal Case Hashtags Capitalize each word within a hashtag to ensure a screen reader can understand it. Example: #DisabilityAwareness 8. Include Diverse Images Many times, disabled people don't see themselves represented in the world. This is especially true for disabled people of color. Use diverse images in media representation, advertisements, images on social media, and more. Did you know about Global Accessibility Awareness Day? Will you use these tips? cc: GAAD (Global Accessibility Awareness Day) Foundation PS: For more accessibility tips, check out my free accessibility ebook (linked at the top of my profile)! #Accessibility #GAAD