Form errors that are effective and accessible

*UPDATE* Creating an Accessible Accordion Block

WordPress now has an accordion block in core! Read the full blog post: https://kineticiris.com/creating-an-accessible-accordion-block/ Original Solution: https://open.spotify.com/episode/00AG3gZPifjAaASBSGvNbo?si=77642913ac4b4df1

Help me make this! (My conversation with a future overlay provider.)

I recently had a conversation with someone doing research for a company looking to offer an accessibility overlay to their customers. And since I’m not sure my thoughts will have the impact I hope, I’m going to share them with you.

Form error summaries for better user experience

Effective form errors play a huge part in overall form usability and accessibility. Once you get someone to want to contact you, it's important to make sure they can complete that process with as little friction as possible. But one of the most helpful aspects of creating accessible forms is also one that I don't see mentioned enough: error summaries. -- Blog version: https://kineticiris.com/form-error-summaries/ [https://kineticiris.com/form-error-summaries/]

Form errors that are effective and accessible

You did it. You got someone to want to reach out to you. They submit your form but forget to fill out a field or don't input things correctly. If it's not easy to find and fix those errors, people aren't always going to seek you out somewhere else, if they even knew there was a submission issue in the first place. Errors that are properly written and displayed are good for screen reader users, people with cognitive differences, and — as always — everyone else. -- Blog Version: https://kineticiris.com/form-errors/ [https://kineticiris.com/form-errors/] Autocomplete Values: https://www.w3.org/TR/wcag/#input-purposes [https://www.w3.org/TR/wcag/#input-purposes]

Accessible empty top level nav items

What do you do if you need a top level navigation item without a link? Here's a quick rundown on an easy javascript solution and why we need it in the first place.- Code snippet on GitHub: https://gist.github.com/queerdevperson/e49821ee3675a8d73dabbd8b5f7a5e98- (Untested) Beaver Builder solution: https://snippetnest.com/snippet/enhancing-accessibility-for-beaver-builder-menus/——Learn more about how to make your website more accessible with The Weekly Accessibility email course: https://kineticiris.com/weekly-accessibility/——Blog version of this video: https://kineticiris.com/accessible-empty-top-level-nav-items/