When should you use Radio Buttons, Checkboxes ,or Toggle Switches? 🤔 🔘 Use Radio Buttons when the user can select only 1 option from a list. ✅ Use Checkboxes when the user can select multiple, independent options. 🔄 Use Toggle Switches for immediate updates.

What does a user-friendly Radio Button look like? 📏 It's clear which button goes with which label. 🎯 A default option is selected. 👆 You can select an option by clicking the button or label.

What does a user-friendly Checkbox look like? 📏It’s clear which checkbox goes with which label. 👆You can select an option by clicking the checkbox or the label. 🏁 The label starts with the keyword. Users read less than you think. #UXDesign #uxui

What does a user-friendly Toggle Switch look like? 🔄 Flipping the switch takes effect immediately. ✅ The text label describes what happens when the switch is active. 🎨 The toggle uses a high-contrast color when it's active.

Both a Toggle Switch and a Single checkbox can be used if the user needs to make an on/off selection. So what’s the difference? 🔁 Use a Toggle Switch if the selection takes effect immediately ✅ Use a Single Checkbox if the selection takes effect upon clicking a submit button

How should you design a Terms & Conditions/Privacy Statement checkbox? ✅ Clearly indicate what the user is agreeing to. 🔗 Add hyperlinks to the checkbox label that links to the full legal text. 📍Put the checkbox close to the submit button.

🔁 If possible, replace Dropdown menus with Radio Buttons. Radio buttons make it easier to compare all options, because they are all permanently visible 👀. Users needs to think less to get to their goal 🎯.

⌨️ Make functionality available for a keyboard. Many people, including blind and mobility impaired people, rely on it. If you can click it, your should be able to tab to it and press enter ↩️. If you can drag and drop it, you should be able to cut and paste it.

Not everyone has a perfect sight or hearing 👀👂. Make your website available to them by providing text alternatives for non-text content. Add a text label next to icons 📕, provide transcripts for video and audio 📽️, and fill in the HTML alt attribute for an image 🖼️.

❗Did you know assistive technology can read text aloud, show it visually or even convert it to braille? This makes it even more important to provide text alternatives for audio 👂 and video 📹 content. Let EVERYONE enjoy your content. 👨‍👩‍👧‍👦

Creating visual relationships through color and grouping is essential in design 🎨. However, remember to provide text alternatives for screenreader users 🔤. For example, add "optional" to required fields instead of only changing it's border color.

People with low vision often have issues reading text that doesn't contrast with it's background 👓. Use contrast ratio calculators like buff.ly/4e5604u or webaim.org/resources/cont… to make sure sufficient color contrast is used in your design 🎨 .

🔍 Have you ever tested your design while resizing the text up to 400%? Not everyone uses you site with the tiny text you designed. People with low vision often resize text, or change text spacing ↔️. No information should be lost when the your design is used in this way.

🖼️ The easiest way to make images of text accessible is to avoid them altogether. If that’s not an option, make the image resizable and provide a text alternative.

🔦 If any flashing content is used in your design, make sure you provide a warning to users to avoid seizures. Also try to provide options to switch off animations and avoid any flashing content.

Try using your website with just a keyboard ⌨️. You’ll quickly learn why it’s important to make the keyboard focus visible to users and that providing a logical order for tabbing ➡️ through the elements is a must.

📃 Structure a page with clear headings and subheadings. The purpose of a section might be obvious to you, but keep in mind that people might have low vision, be colourblind, or use your website through a screenreader.