1 00:00:00,360 --> 00:00:01,440 Hey and welcome back. 2 00:00:01,680 --> 00:00:04,210 We're going to talk about visual patterns for accessibility. 3 00:00:04,620 --> 00:00:08,610 There's several things we can do as designers to really make our designs accessible. 4 00:00:08,970 --> 00:00:15,450 And also there's things that we can do as designers and to influence developers to ensure that our products 5 00:00:15,450 --> 00:00:17,490 or live products are actually accessible. 6 00:00:17,730 --> 00:00:18,660 So let's jump right in. 7 00:00:18,940 --> 00:00:21,300 The first thing is color contrast. 8 00:00:21,540 --> 00:00:26,310 Now, this is the first step towards an accessible UI and it's to get the color contrast for your product. 9 00:00:26,310 --> 00:00:26,610 Right. 10 00:00:27,270 --> 00:00:31,020 Color contrast is a really, really important part when it comes to visual impairments. 11 00:00:31,020 --> 00:00:36,540 So getting this right will help those with visual impairments to see and to discern information on the 12 00:00:36,540 --> 00:00:37,010 screen. 13 00:00:37,320 --> 00:00:41,550 You'll notice over here there's a little screenshot I took from a tool that I use called Color Shape 14 00:00:41,970 --> 00:00:47,280 that actually shows you the current ratio of your contrast and the goal ratio. 15 00:00:47,310 --> 00:00:55,290 So this is a compliant and all these colors can help you pick a palette that would actually be compliant. 16 00:00:55,890 --> 00:00:59,610 So what is that contrast ratio mean now? 17 00:00:59,610 --> 00:01:05,980 The recommended contrast is three to one for large text and four point five to one for small text. 18 00:01:06,300 --> 00:01:10,380 This is the real ability from the difference between the foreground and background color. 19 00:01:10,920 --> 00:01:17,610 Larger font is categorized by any font larger than 18 pixels when bold or larger than twenty four pixels 20 00:01:17,610 --> 00:01:18,960 for regular font weight. 21 00:01:19,740 --> 00:01:22,830 Small text is anything smaller than 18 pixels. 22 00:01:23,550 --> 00:01:27,630 So you'll notice over here you could do it with UI components as well. 23 00:01:27,840 --> 00:01:34,200 And we'll get into the different areas where we can essentially use these as guidelines rather than 24 00:01:34,200 --> 00:01:40,050 rules, because sometimes so in contrast, ratios don't necessarily work as well as we would think they 25 00:01:40,050 --> 00:01:40,350 do. 26 00:01:40,530 --> 00:01:42,650 But it's totally up to you. 27 00:01:42,690 --> 00:01:47,680 Use your best intuition and test, test, test. 28 00:01:48,390 --> 00:01:50,520 So here are some of the tools that I actually use. 29 00:01:50,850 --> 00:01:52,140 Color Safe is a great tool. 30 00:01:52,140 --> 00:01:56,670 If you're starting a project fresh and you want to choose colors and check the contrast ratios before 31 00:01:56,670 --> 00:01:57,720 you actually make a palette. 32 00:01:58,410 --> 00:02:02,640 And in some products that have an established color system or set up brand colors, you'll need to find 33 00:02:02,640 --> 00:02:05,640 contrast ratios that work from the product's palette. 34 00:02:05,880 --> 00:02:08,670 And what I usually use for that is another site called Colorable. 35 00:02:08,670 --> 00:02:14,840 I'll just input the colors there and it'll tell me if they are compliant with those standards. 36 00:02:15,570 --> 00:02:20,790 There are some sigma plugins as well that are really, really helpful if you don't want to use a browser 37 00:02:21,000 --> 00:02:22,540 and I'll show you those later. 38 00:02:23,250 --> 00:02:28,770 Now, there are alternate ways to improve contrasts and sometimes it can be a really large task to check 39 00:02:28,770 --> 00:02:31,350 each of your foreground and background color combinations. 40 00:02:31,560 --> 00:02:36,180 An easy way to run through a test to find any issues with your designs is to use a chrome tool called 41 00:02:36,180 --> 00:02:37,760 Color Contrast Analyzer. 42 00:02:38,070 --> 00:02:39,960 So this is another tool that I use. 43 00:02:39,990 --> 00:02:45,990 There are multiple types of chrome extensions out there, but I like this one best because what it does 44 00:02:45,990 --> 00:02:50,190 is it essentially identifies areas that will require work on the screen. 45 00:02:50,400 --> 00:02:56,370 Areas outlined in white maintain good contrast in areas with poor contrast, have subtle outlines that 46 00:02:56,370 --> 00:02:57,330 aren't as prominent. 47 00:02:57,720 --> 00:03:02,770 So this is a good way to get a good understanding if your current design is accessible at all. 48 00:03:03,450 --> 00:03:05,270 The next thing we can do is proper labeling. 49 00:03:05,280 --> 00:03:10,080 I know it sounds kind of boring and rudimentary, but labeling can go a long way, especially with screen 50 00:03:10,080 --> 00:03:11,940 readers as they're jumping around the screen. 51 00:03:12,330 --> 00:03:17,910 Your developers probably know a lot about this already, but the designers don't adhere to proper labeling 52 00:03:18,090 --> 00:03:21,150 and it's an easy thing that we can all do to make things a bit more accessible. 53 00:03:21,630 --> 00:03:26,760 And what I mean by that is that when you're designing a form, rather than having a placeholder inside 54 00:03:26,760 --> 00:03:34,620 the input and which possibly acts as the inputs label, just have your label be a label. 55 00:03:34,860 --> 00:03:39,240 You could have a placeholder that then unfocussed acts as a label. 56 00:03:39,240 --> 00:03:45,540 But a placeholder that goes away upon focus is a huge no no, not only for user experience, but for 57 00:03:45,540 --> 00:03:46,350 accessibility. 58 00:03:46,680 --> 00:03:53,250 So labels on top like this and as a separate element are a really great way to go and achieve that. 59 00:03:53,250 --> 00:03:56,040 And then there's also menu labels. 60 00:03:56,460 --> 00:03:58,710 So think about like a hamburger menu. 61 00:03:58,960 --> 00:04:03,300 A lot of people use hamburger menus for hiding menus on mobile, which makes a lot of sense. 62 00:04:03,540 --> 00:04:10,290 If you're going to use a menu icon, then you should have some other indicator because the icon alone 63 00:04:10,290 --> 00:04:16,380 isn't necessarily accessible unless it's being properly coded and things like icons, even though you 64 00:04:16,380 --> 00:04:22,710 can put a title in the code to help screen readers actually read them, it's a better practice to put 65 00:04:22,710 --> 00:04:25,740 a label beside an icon or any sort of menu. 66 00:04:25,740 --> 00:04:29,820 Icon knows jump into Sigma to talk a little bit about the tools I use.