Acessibilidade no design de interfaces | Bootcampinho UI/UX Design

Tell me, Mai, how can I make my layout accessible? This is a good question, right? Because it is very important for us to think about accessibility in our layouts.

When I say "thinking about accessibility" it's not just thinking about the person who has a disability. But it's thinking about everyone. When you make your site accessible it becomes accessible to more people.

That is, the more accessibility requirements you manage to meet on your. . .

It's not just a website, right? It could be your product, your service and so on, more people will be able to use it. Even for yourself.

I, for example, am already wearing glasses. Maybe when I'm older, that prescription will increase even more. So I'm going to want an accessible website even more.

You might break your arm. It could be that, for example, "Ah, I'm in a situation where I have to hold the cell phone with one hand and I can only use my other hand". All of this can be very difficult if your website is not accessible.

Sometimes it's something that seems simple, but it's not. So, that's what we're going to talk about today. When we talk about accessibility, it's impossible for us not to talk about this little friend here, which is WCAG, that is, Web Content Accessibility Guidelines.

However, these here, see, these are rules, guys. There are several norms, they bring excellent accessibility guidelines and that is what will determine whether the site A, two AA, three AAA, and so on. These are the accessibility criteria that can be met.

I'm not going to go too deep into these guidelines and norms, because I believe that mainly for us who are. . .

many of us who are starting, it's more important for us to learn to think about accessibility before we learn like "Oh, you have to follow such and such norms" and guys, following norms is also understanding contexts. There is no point in applying the norm without considering the context because it may not work, it may be that when you apply the norm in one place it breaks the norm in another, and so on. If you are going to go deep into norms, it is important that you know a little more.

And so, I'm not saying don't read, don't see it. See if you have time, read it, understand a little, research a little more, accessibility is an extremely broad topic and I would also easily teach a whole course on the topic, okay? For today we are going to talk a little bit about these little friends here, which are the 7 Principles of Inclusive Design.

These are 7 principles that aim to put people first, that is, it's designing for people's needs, it's about thinking about accessibility. I'm going to talk a little bit about them, bring some examples, try to help you think a little better about how we can understand accessibility, okay? The first principle talks about providing an equivalent experience.

I'll even read you what it says, "Offer equal experiences for everyone by getting tasks done in a way that meets all needs without sacrificing the understanding of the content. " When we talk about an equivalent experience, it's not just "Oh, I just did the accessibility there for the sake of it", it's you trying to make the other person able to follow the content in the same way that, for example, I who don't have any disabilities, can see a video, I can see an image, but for someone who may have a disability, they might not be able to see the video. So, many times an equivalent experience is for you to describe an image, many times an equivalent experience is for you to add alternative texts.

Look at the example here on my website, if you scroll down a little bit. Yeah, guess who? Of course, Alfred is featured on my website.

If I press here, F12 to inspect the code on my website and click on Alfredzinho here, I will see that in this image here, there is this "alt". That "alt" is the alt text. For someone who can't see, if they access my website and somehow get here at Alfred, they'll hear this text: "cow flying", that is, this is the description of my image.

It could even be an even more detailed description. It's good to be careful, because if you write a giant text here, the person may spend a thousand hours there listening to the text describing the image and it won't always make sense. For example, in the context of my website, there is a lot of other information that is more important, so I preferred not to use such a descriptive image.

But for example, an Instagram image, for a social network and so on, it might be worth your while to describe this image with more detail, but always being careful to be, above all, objective and tell the necessary details of the image, okay? And it's just a decorative image, you don't even need to put the alt text. You, as a designer, will hardly be the responsible for putting this alternative text.

However, the developer, when transforming your design into code, they need to put these alternative texts and it's important for you as a designer to know this and even to talk to the developer, understand if it's being added, in what way and so on. You can do this work together. It's very easy for us to shift the responsibility to the other, "Ah, accessibility.

. . leave it to the dev".

And the dev thinks "Leave it to the designer" and in the end nobody adds it because nobody thought of it, okay? In addition, you can, for example, allow the subtitle to be customized. YouTube has a good example of this.

I'm going to play this video, just so you can see. It has the subtitles here, but if the user wants it, they can come here in settings and in subtitles, it even has more options. That is, you can change the color of the typography, you can change the background color.

You can change several things so that the caption is better for the user to see. Another way to offer an equivalent experience is, for example, through the use of sign language, descriptive links, this is very important. Check out my website example again.

Here at the beginning there is this button "Let's talk". Imagine if that button was "Click here", it's written here. "Click here", "Learn more" and a user comes to this button.

. . the blind user is not seeing anything on my website, he can browse by pressing "Tab", if I press "Tab" I will reach the button "Let's talk".

When I get to this "Let's talk" button, the user will only hear "Let's talk". So he understands that he's probably going to get in touch with me somehow. Now, if it were a "Click here" button, they wouldn't even know where it's going to or "Learn more", learn more about what, you know?

So it's important that the links on your page are always descriptive, for example, even the links in the header here, if my user clicks, they'll easily understand where he's going on each of these pages, ok? So this is a very important precaution to take. The second principle of inclusive design is about considering the situation.

It says this: "People use your interface in different situations. Provide equivalent experiences for people, regardless of the circumstances of use. " Imagine, for example, that the person is using the cell phone and they're using it under the sunlight.

If it is in the sun and your text is a little grey, on a grey background, it will probably be very difficult to use. If the text is difficult to read in normal situations, when the user puts it under the sun, when changing, when you see it while running, or anything like that, it will be even more difficult. For example, you're on the subway and you're watching a video, maybe you're watching it without audio.

The fact that the video has subtitles is also a way for you to consider the situation. The third principle is about being consistent. It reads like this: "Use familiar protocols and apply them consistently.

" For example, design patterns, guys. Your link needs to look like a link, for example, you see the button here, it looks like a button. As I'm using the header on the page here, this looks like the header of a page.

I'm not putting the header down there. I'm not inventing much in terms of buttons. Here, where there are links, they all have an underline, in short, all of this helps to convey the idea that they are links, that they are those elements that the user already knows.

That is, we already have patterns formed in our heads, from accessing other websites so often, we already expect some things, for example, I expect that the header is at the top of my page, that navigation, I expect that if there is a footer, that it's at the bottom of my page, I hope that links look like links, that buttons look like buttons, that something is clickable, that I somehow know I can click on. And if that changes, it might confuse me. So, it's important for you to understand this and be consistent when you build your design, okay?

This will help your user. And the fourth principle talks about giving control. It says it like this: "Make sure people are in control.

Users should be able to access and interact in the way they prefer. " For example, a user might prefer to browse as I am browsing, scrolling down the page. It may be that another user prefers to navigate using the keyboard and they have to be able to go to all the links on my site.

It may also be, for example, that the user wants to zoom in on the page or not. And they have to be able to do that consistently. You have to give the user control to be able to do whatever they want with your interface.

It may be that they are navigating via voice. It may be that, for example, the user wants to pause a video, or not, it may be that they want to mute the sound, put the sound on, you have to let the user have this control, and be able to choose what they want to do in your interface. The more options you give, the better this accessibility will be on your.

. . I'm talking about the website all the time here, but it's the website, the app and everything else, okay?

The fifth principle talks about offering choices. Provide different ways for people to complete tasks, especially complex or non-standard ones. Who does this very well, for example is Notion.

For example, here it has a table, this table is the same data, it can be seen in the form of a calendar, it can be seen in this form here of progress charts, it can be seen in the form of a table. That is, it allows the user to view the same data in different ways, that is, the user has the choice of being able to do something in different ways, this is offering choice to the user, it is letting the user choose which way they prefer to interact with your interface. And principle number six talks about prioritizing content.

It reads like this: "Help people focus on key tasks, functions, features and information by prioritizing them in content and layout. " For example, you entered the Google homepage. What's the first thing you're going to look at?

Are you going to look at these elements here in the corner? Are you going to look at this little pencil here in the corner? No, you are going to look exactly at this center here, which is content, which is the most important thing that Google Chrome, as an example, has to offer, which is Google search.

And here are some of my favorites, some elements that I always access. So, it already prioritized this content for me. If you have it on a page, for example, on a website, it may be a matter of avoiding using more than one primary button on each page.

It may be up to you, putting an image that deserves to be highlighted, it has a lot to do with that issue of contrast that we already talked about. If an image deserves attention, it deserves a lot of attention. So make it big.

Put there, for example, an action button, but don't put five action buttons, because if everything draws attention, people, nothing will draw attention. Precisely when we also work with the typographic scale, when one text is much larger than the other, it helps to prioritize content. It helps to bring the user's gaze to where the user should be looking at.

The seventh and final principle talks about adding value. It says it like this: "Consider the value of features and how they enhance the experience for different users. " For example, you allow integration with other devices, you have responsiveness, for example, the user can access my site on a computer, on a cell phone, on a mobile, they can also access it through voice resources and so on.

When you offer choices, when you add value to your product, you allow your user to have even more ways of interacting with it. It, for example, integrates with Alexa, it has consistent shortcuts, the user can navigate through shortcuts and so on. All this helps to add value, okay?

And we won't leave without a challenge from our little friend Alfred. Today Alfred whispered in my ear that you guys have to review that style guide you created. Remember that you created a style guide last time?

And from that style guide, try to take a look at a few things. First, take a look at the color contrast, guys. I didn't mention it here, but there are several tools that help to test the color contrast.

I'm going to leave some links on the site for you to take a look at, okay? So, take a look at the color contrast, typography size is also very important, usually for desktop avoid using less than 16px and for mobile less than 12px, okay? I like to work on desktop with 20px or 16px, it depends a little bit on the type of material I'm working on and mobile if I can I work with 16px up to 12px, I mean.

. . Seriously don't do anything below 12px.

Only if it's a question of life or death, alright? And I'm saying it here but there is no rule that cannot be broken. Question everything I'm saying, criticize everything I'm saying, ok guys?

Try to review that style guide of yours, see if it is within accessibility standards, see if you think it will pass, if the contrast is good, if the images are good, if what you created will be consistent, if the spaces. . .

if it will draw attention to the page, if it will help to prioritize the content. Try to think about when you are going to use, for example, a primary button, a secondary button and so on. And after you've done that, I suggest you create a screen or two of your layout.

After you make these screens, give them one more look. Are the screens accessible? Always try to think of a user in extreme conditions, who has many difficulties.

Will they be able to read that very small text? Will they be able to see that color there that almost blends in with the background? If the answer is no, check it out, try to improve, maybe you can increase the space, or change the color a little, all of this makes your layout more accessible.

After you make these screens, go there, review your style guide again, if you need to change one thing or another, add it to your prototyping program, add it to the assets there, which typography sizes you are going to use , what are the default colors, and so on. Start your project by being organized because when you create the other layout screens it will be much easier, okay? And if you want to see an example of how I apply all these things from the prototyping part in a real layout, click on this next card and that's where I'll show you.