Making Online Forms More Accessible

Hello! I’ve been testing lots of forms at work, and that means I've been paying more attention to forms I fill in outside of work. I’m here with some tips about how to make forms more enjoyable to fill in. 1. Tell people how long the form is before they start, and do that using facts instead of hopes (“The form has 7 questions.” instead of “This is a quick and simple form.”). 2. If the form is long it might be better to split it into multiple pages. If it’s multiple pages, let people know what’s on each page before they start so they can decide if it’s the right time for them to fill it in. 3. If the form requires info that someone might need to go find (like an ID number or reference code), let them know that at the beginning of the form. 4. Use high color contrast for form field borders and focus indicators. Knowing where to type is important! 5. Try to have consistency of focus indicators across the form. Sometimes I see things like text fields that have custom indicators but the dropdowns have the browser default styling. 6. Add accessible labels to icons like calendar pickers, “i” icons for additional info, or eye icons that show and hide passwords. 7. Make sure radio buttons and check boxes are connected to their field label in the code. 8. If the form uses asterisks to mark required fields, make sure that that’s explained at the top. Or skip the asterisks and just write out required and optional. Not everyone knows what the asterisks mean! 9. Have errors come up on submit if possible. If that isn't possible then have them after someone leaves a field. Lots of us find it frustrating when we get an error that says “Invalid email” after we’ve only typed two letters! 10. Only have forms time out if it’s necessary for security. If the form does time out then make sure there’s a clear message to let them increase the time. And give people a clear message explaining what happened after the form times out so they aren’t left wondering what happened. Small changes add up to forms that are easier to fill out, have fewer errors, and keep people on the happy path longer! What should number 11 be? Feel free to add to this list in the comments! (Also do you say "fill out a form" or "fill in a form"? I switch back and forth, but I tried not to in this post!)

Forms are hard. Whether you are paying your bills or buying clothes online, multi-step forms can be confusing and frustrating. Now, imagine you're applying for critical human services like food assistance with the added stress of providing for your family. In these situations, what can we do to provide people who may also have limited tech literacy with additional clarity, ease of use, and reduced barriers to entry? → How long is this going to take? When you first get started, many forms feel like black boxes, with little understanding about what’s involved in the process. → Where am I? Some forms are either a massive set of fields all stacked up on one page or divided across multiple third-party services and payment gateways, leading to confusion. → Did that work? I know I've experienced forms where I fill out all my information, click submit, and nothing happens. What happens next? Did I get an email? I hope these three form principles can help your team build better experiences for the real human beings that need the services you offer. 💎 Set expectations before getting started → Be clear about what the form is and the types of questions you'll be asking → If additional documents are needed, let folks know before getting started → Let people know before getting started how they will be contacted afterward 💎 Guide users through their journey → Break your form into meaningful sections and chunks → For multi-step forms, show them where they are in the process → In case of stress or limited time, always allow users to save as they go 💎 Tell folks what happens next → Before they submit, let people check their answers → When they do submit, give people a confirmation number if you can → Provide contact information so they can follow up with questions ✌ If you want to learn more about how to equitably deliver forms for people seeking government services, check out Form Fest, hosted by Code for America. You can watch all of the talks from last year. https://lnkd.in/gQhwypcV ✊ You can also continue to reference the 18F Guides on Content and Accessibility via the new mirror the team set up to keep these essential resources available https://lnkd.in/gn5HAH8j https://lnkd.in/gXa_Qc9B

👨🏾💻 How People Use Screen Readers. With behavior patterns, practical insights and things to keep in mind for accessibility. ✅ 253 million people worldwide have a visual impairment. ✅ Screen readers help them translate text to speech or Braille. ✅ They work for websites, PDFs, emails, OS and other documents. ✅ They use the same voice regardless of font size, weight, color. ✅ E.g. Jaws/NVDA (Win, 80% share), VoiceOver (iOS), Talkback (Android). 🤔 Users often listen to screen readers at the 1.5–2.0x speed. ✅ Repetitive labels and hints aren't helpful (image caption, alt). ✅ Content order during tabbing conveys the structure of the page. ✅ Follow a logical linear layout, don't spread content all over a page. 🚫 Auto-playing audio is often an alarming, frustrating experience. 🤔 Users heavily rely on descriptive headings and labels. 🚫 Screen readers can’t extract meaning from images or videos. ✅ Avoid "Click here", "Read more", "View now" for links. ✅ A text box without a label is meaningless to screen readers. ✅ Never rely on visuals alone, they might not even be there. 🤔 Frequent issues with poorly structured forms, navigation, PDFs. ✅ Add UI controls for mouse-precise actions (drag'n'drop, resizing). ✅ Include nav landmarks, so users can jump within the page quickly. ✅ Ensure PDF/UA compliance to generate accessible PDFs. ✅ Always add labels to forms and avoid CAPTCHAs if you can. Where “abled people” use their natural feelings such as sight and hearing, people with disabilities must rely on technologies. Screen reading UX shouldn’t mean a “simplified” experience. It’s just a different experience, one of many. Unfamiliar tools might sound scary. Just start. Get familiar with screen readers. Run accessibility testing with a few screen reader users. Eventually make screen reader testing a part of QA. Many accessibility issues are severe, but solutions can be simple — and impactful for people who need them most. Useful resources: How A Screen Reader User Surfs The Web (video), by Léonie Watson https://lnkd.in/emv9AT-u Designing For Users Of Screen Readers, by Lewis Wake https://lnkd.in/ePTVpBxy Testing With Blind Users: A Cheat Sheet, by Slava Shestopalov https://lnkd.in/e8vBEqHn How And When To Use Alt Text, by Emma Cionca, Tanner Kohler https://lnkd.in/e3ivcPVg How to Conduct Usability Studies for Accessibility, by NN/g https://lnkd.in/egAxJxtW Mobile Accessibility Research With Screen-Reader Users, by Tanner Kohler https://lnkd.in/eb5Y36qZ How To Document Screen Reader UX, by BBC https://lnkd.in/e8KWr-Z6 #ux #accessibility

Accessibility in development isn’t about adding extras, it’s about writing better code from the get-go. Simple habits that can help are: ✅ Use button elements for buttons → <button> works everywhere, while <div role="button"> needs extra work (and often breaks). A button being a better button if it's a button, wow can you imagine? ✅ Label form fields properly → <label for="email"> ensures everyone knows what they’re filling out, including screen readers and autofill. ✅ Make clickable areas big enough → Small touch targets frustrate everyone, especially on touch screens. ✅ Don’t remove focus styles → If you hide focus indicators, keyboard users get lost. Instead, make them your own: design them to fit your UI and brand design. Don't forget that they still need to pass 3:1 color contrast. ✅ Test with a keyboard → Speaking of focus indicators: Can you navigate your site without a mouse? Well, have you tried? This is where the custom focus indicator will either shine or embarrass you. Good code isn’t just functional, it’s usable. And that’s what sets great developers apart. Accessibility isn’t an add-on, it’s what makes you great at your job.

Your form might look clean, but if it's missing proper labels, it's unusable for a lot of people. WCAG 3.3.2 is one of the most commonly failed accessibility criteria, but it's also one of the easiest to fix. Every form field needs a clear label or instruction that explains what information is expected. Not just visually - in the code too. Without proper labels, people who use screen readers can't tell what you're asking for. People with cognitive disabilities struggle to understand the form. Keyboard-only users get lost. And honestly, everyone benefits from clarity. The good news? Fixing this doesn't require advanced accessibility knowledge. It just requires being intentional about how you build forms. • Use real labels, not just placeholder text • Code required fields properly • Provide instructions upfront when formatting matters • Test with a screen reader to catch what you might miss visually I put together a quick breakdown in the carousel attached. If you build forms or audit websites, this one's worth a few minutes. #Accessibility #WCAG If you prefer your content as text, see the comments for a link to the text file (it was way too long to include in my post this time).

Inclusive UX isn’t always about big builds. Sometimes, it’s a few small tweaks that quietly improve the experience for everyone. Over the years, I’ve learned that accessibility isn’t some separate track. It’s in the everyday decisions: → Persistent labels (not just placeholders) → Clear, left-aligned text → Generous touch targets → Skip links, semantic headings, zoom support → Supporting “reduce motion” settings These things don’t take much—but they go a long way. And honestly? Most of us have relied on these features at some point: • Captions when watching a video in public • Voice-to-text while multitasking • High contrast on a sunny screen It’s not just “accessibility.” It’s thoughtful UX. So I put together 20+ low-lift, high-impact ways to make your designs more inclusive—without slowing your team down. If your product team wants better UX for more people, this is a good place to start. What’s been your favorite UX tweak that brings more accessibility to your projects? (Comment “PDF” if you'd like me to send you this file.) #uxdesign #inclusiveux #accessibility #a11y #productdesign #uxstrategy #designcraft ⸻ 👋 Hi, I’m Dane—I love sharing design insights. ❤️ Found this helpful? 'Like’ it to support me. 🔄 Share to help others (& save for later). ➕ Follow me for more like this, posted daily.

A small copy tweak changed how hundreds of people filled out their profiles on our platform. 🤯 And it completely shifted how personal - and accessible - they felt. This was one of my most surprising lessons building ND Connect this week. Here’s the change: Old copy: "Note: You can use bullet points by starting sentences with a - . We recommend members use bullets to improve accessibility - especially for lists like interests." New copy: "Note: If you’d like, you can use bullet points by starting sentences with a - . You’re welcome to fill out prompts in the way that lets you express yourself best!" We initially thought that having members all use bullets would create more accessible profiles by making them more skimmable. But this also had the unintended consequence of making profiles feel ... the same. That's the opposite of what we want on a platform for neurodivergent people where we embrace and celebrate our differences (including communication ones). 😅 It also had accessibility trade offs - while skimming in some ways may have been more readable/less overwhelming to some, the similarity and lack of novelty across profiles was less accessible to other readers. And there are trade offs from a reader vs writer perspective too - some folks have an easier time writing longer form content and distilling things into shorter sentences can be challenging. Profiles now feel more human because they're more in people's own authentic voices, and in some ways that's helpful information when deciding to connect with someone too. I'm excited to keep reflecting on competing access needs and implementing things that work for all sorts of different neurodivergent folks but if there's one takeaway I have it's that small details really shape a lot. ♾️ When you’re designing for neurodivergent folks with vastly different access needs, there’s rarely a perfect answer. But language and features that give people agency to choose what works for them is a great place to start. Have you ever made a small design or wording change that ended up making a huge impact? Would love to hear your favorite small-change-big-impact stories 👇 #Neurodiversity #InclusiveDesign #UXWriting #Accessibility #Startups