Auston Stamm’s Post

Accessibility Tip of the Day 290: Accessible collapsible sections and accordions: Collapsible sections are another great way to limit the amount of information shown on the screen. Users can easily scan the content by looking at the section headings, and they can choose to expand the sections that they want to read. This has the benefit of not just faster reading time but also faster screen reader navigation and keyboard navigation time. The interactive clickable section header is the part that's easiest to get wrong. You need to combine both the functionality of a header and a button. We should not just add a click handler to the header like what you see below, because that doesn't work for keyboard and screen reader users: <h2 onClick={toggleSection}>Section heading here</h2> To compensate for that, you might see someone add a tabIndex={0} and a role="button" to the heading like what you see next, but that's also incorrect because now we lose the semantic meaning of the heading since we've overridden it to be a button: <h2 onClick={toggleSection} tabIndex={0} role="button">Section heading here</h2> Instead, we need to use both a heading element and a <button> element. Here's the correct way to do this (note that we've also added the aria-expanded attribute to indicate to screen readers if the section is expanded or collapsed): <h2> <button type="button" onClick={toggleSection} aria-expanded="false">Section heading here</button> </h2> Much better! If you'd like to learn more about creating accessible collapsible sections, Heydon Pickering wrote an awesome post on this in his Inclusive Components blog: https://lnkd.in/gUUBsD3T #accessibility #a11y #accessibilityTipOfTheDay

Biggest technical pet peeve? Improperly configured input fields. Web, native, desktop, mobile, whatever. Set the content type, autocorrect style, autocapitalization style, and keyboard. Nothing says amature or lack of attention to detail like an email field that autocapitalizes or a number field that displays the alphanumeric keyboard. This is #softwareCraftsmanship and the absolute bare minimum #userExperience design.

I'm excited to share my latest blog post, which explores a subtle yet intriguing layout bug encountered in Google Search. This issue arises when CJK (Chinese, Japanese, Korean) text-wrapping interacts with floating elements, leading to unexpected display problems. In this post, I delve into the technical details of the bug, its implications for web design, and potential solutions to enhance user experience. For anyone interested in web development, typography, or search engine technology, this analysis offers valuable insights. Read the full article here: https://ift.tt/jyuhTHK

Day 2 of celebrating Global Accessibility Awareness Day (GAAD). Our Accessibility expert Keith S. shares 11 things you can do today to improve your website’s accessibility without a developer: https://lnkd.in/eNMphdYn If you found that helpful and want to know more about how to be accessible pop me a DM. I would love to chat! #accessibility #accessibilityAudit #accessibilityExpert #accessibilityChampion

How important is font size in web accessibility? Learn why picking the right size matters for users with visual impairments. Read more:

If you’re at the beginning of the accessibility journey for your website, it might feel like something that’s going to need developer time to tackle. It’s true, there are some aspects of accessibility that need access to your website’s codebase to implement but there are also things you can do right now using your CMS that will improve its accessibility. Our Senior User Experience Consultant, Keith S., shares 11 things you can do today to improve your website’s accessibility: https://lnkd.in/eNMphdYn #Accessibility #ClearLanguage #AltText #AccessibleDesign #Inclusion #DigitalExperience Carousel Image Descriptions: ID 1 - On a lilac background in black is the text "Accessibility tips for the web. 11 things you can do to improve the accessibility of your website that don't need a developer by Keith Symonds" Above the text is a white lozenge with the word 'insight' inside it. On the bottom right is an arrow pointing right ID 2 - Text: 1. Use plain language ID 3 - Text: 2. Use headings for structure and meaning ID 4 - Text: 3. Provide alternate text for images ID 5 - Text: 4. Avoid images of text ID 6 - Text: 5. Use descriptive link text ID 7 - Text: 6. Don't convey meaning using colour alone ID 8 - Text: 7. Check your font size and styling ID 9 - Text: 8. Use unique, descriptive page titles ID 10 - Text: 9. Provide transcripts and captions ID 11 - Text 10. Check your text alignment ID 12 - Text 11. Avoid using pdfs

🚀 Exciting News! Introducing Advanced Text Editor App 🖋️🎨 I'm thrilled to share new Advanced Text Editor app, designed to revolutionize the way you create and edit content. This innovative tool comes packed with features to make your editing experience smooth, creative, and highly customizable. 🌟 **Key Features:** - **Rich Text Editing**: Bold, italic, underline, and more. - **Dynamic Font Selection**: Choose from a wide range of font styles powered by Google Fonts. - **Font Size Options**: Easily adjustable from 1 to 32. - **Color Customization**: Change text color and background color with ease. - **Image Insertion**: Add images to your content effortlessly. - **Undo/Redo**: Never lose track of your changes. - **Beautiful UI**: Sleek, modern design with gradients and animations. Goal is to provide a seamless and enjoyable editing experience, whether you're crafting a blog post, designing an invitation, or just jotting down notes. Believe in putting creativity and functionality at your fingertips. GitHub Link:- https://lnkd.in/gdV-CEar Check it out and let me know what you think! 🌐 https://lnkd.in/gh9Y3wJ6 #TextEditor #Innovation #Productivity #UIUX #WebApp #Creativity #ContentCreation

“Designers may sometimes overlook the fact that their designs need to function within the ‘laws of physics’ that govern web and native platforms.“ Read “Component Spec: the design system component delivery“ by Matan Rosen on Medium: https://lnkd.in/dAk42HaP

Did you hear about the new  𝐄𝐔 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐛𝐢𝐥𝐢𝐭𝐲 𝐀𝐜𝐭, effective from 2025? 👨💻 ➡ The law requires both public and private websites to adhere to accessibility standards like  𝐖𝐂𝐀𝐆 (Web Content Accessibility Guidelines). All websites must be accessible to individuals with disabilities, including those with visual impairments. This includes scalable fonts, high-contrast colours, alternative text for images, keyboard navigability, and transcripts for audio and video content. 📲 Mobile apps are also subject to these requirements. Ensure your website is ready for 2025. Contact ProCoders today to make your online presence inclusive and compliant. Why ProCoders? 🤔 𝐀𝐬 𝐚 𝐥𝐞𝐚𝐝𝐢𝐧𝐠 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐜𝐨𝐦𝐩𝐚𝐧𝐲, 𝐏𝐫𝐨𝐂𝐨𝐝𝐞𝐫𝐬 𝐞𝐱𝐜𝐞𝐥𝐬 𝐢𝐧: ☑ 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐛𝐢𝐥𝐢𝐭𝐲 𝐀𝐮𝐝𝐢𝐭𝐬: Comprehensive analysis of your website to identify areas that need improvement. ☑ 𝐖𝐂𝐀𝐆 𝐂𝐨𝐦𝐩𝐥𝐢𝐚𝐧𝐜𝐞: Implementing WCAG 2.1 AA standards to ensure your site meets legal requirements. ☑ 𝐃𝐞𝐬𝐢𝐠𝐧: Enhancing usability with scalable fonts, high-contrast colors, and intuitive navigation. ☑ 𝐂𝐨𝐧𝐭𝐞𝐧𝐭 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐛𝐢𝐥𝐢𝐭𝐲: Adding alternative text for images and providing transcripts for audio and video content. Don't wait until the last minute! Contact me today, and let's make your website according to the new laws. #ProCoders #WordPress #EUAccessibilityAct #WebAccessibility #WCAGCompliance #InclusiveDesign #AccessibilityAudits #UIUXDesign #ContentAccessibility #ProCoders #AccessibilityStandards #DigitalInclusion

In 2022, I made a post asking if anyone had seen results from simply labeling the icons in their site/app. Then I went to research and found an article by Steve McCarthy titled “Do Icons Need Labels?” (Link to it in comments). To test the theory he had heard that ‘users are familiar with icons and what they represent and so do not need labels’, he created a game with 19 icons. Provided multiple choice options for each and asked participants to match the icon to what they are/represent. “Of the 144 people who played the game (at the time of writing), 61.81% managed to identify between 4–7 of the icons. A further 22.92% managed to get between 8–13. But no one was able to identify 14 or more icons, let alone the whole 19.” In addition, after a client of Steve’s added a menu label to the icon on his site, he saw a 42.09% increase in click activity on it cos it was now more obvious to visitors. What this shows is how valuable descriptions are to users. People don’t want to have to think, guess, or worse off if they use screen readers, struggle, and risk exclusion. — For sighted users, labels are important to help show/remind/inform them what a thing does and how to use it. Imagine a blank button without a CTA on it. Even without the labels, there are icons that many can get on their own either because of familiarity or cos they can see the context of their use. But what of users who need a screen reader to navigate your site/app? Those who can’t see the icon with their eyes and can’t understand the context of its use? Those who can’t even find its location on a page to get things done? Part of a good digital experience includes the design of icons. Those symbols that represent an action or a destination. When we talk about alt texts, we focus our efforts only on images, forgetting that icons are a type of image too. Important ones that serve as signs or guides that screen readers can’t read except we provide that information. — It’s another #AltTuesday and today, I want you to go back to your digital products and run a test to see if your icons have alt texts and are well-labeled. This is important because these tiny icons make up a huge part of the experience. Imagine driving on a road with no signs, no guides, nothing. How frustrating will that be? You don’t know where you’re going to, how close you are, if you’ve missed it. That’s how it could feel for users using a screen reader to navigate your product when you haven’t added alt texts to your icons. For sighted users, a lack of label could feel like driving through a country where every state and city is only represented by an image of their location on the map. Nothing else. Imagine that. — Quick exercise, how many of the icons in the attached image can you identify? #digitalaccessibility #accessibility #a11y #alttexts #AltTuesdays