11 ways to start your inclusive, accessible design toolkit

Summary

In this engaging and insightful webinar hosted by UXPin, accessibility expert Pier Jeroka shares 11 innovative ways to start building an inclusive, accessible design toolkit. The presentation is divided into chapters covering theoretical aspects, practical demonstrations using UXPin, and insights into global accessibility standards and practices, all aimed at enhancing inclusivity in design. Key highlights include practical advice for designers on implementing accessibility features in digital products, understanding users' diverse needs, and bridging the gap between design and development through UXPin's Merge technology.

Highlights

• Pier Jeroka provides 11 actionable ways to start building an inclusive design toolkit 🎨.
• The presentation includes practical demonstrations using UXPin to show how accessibility features can be integrated 🚀.
• Key discussions on implementing keyboard navigation and semantic structure to improve usability for all users ⌨️.
• Insight into how UXPin's Merge technology enhances consistency between design and development teams 🔄.
• Practical exercises and real-life examples are shared to build empathy and understanding among designers towards diverse user needs 🌈.

Key Takeaways

• Incorporate accessibility into your design process from the start to create more inclusive digital experiences 🌍.
• Understanding users' diverse needs, such as visual, auditory, and cognitive impairments, is crucial for accessible design 👓.
• Using UXPin and its features can effectively bridge the gap between designers and developers, ensuring consistency and collaboration 🔧.
• Building empathy through practical exercises, such as using screen readers or inviting diverse users for testing, is essential ❤️.
• Accessibility is not just ethical but also a legal requirement in many regions, emphasizing its importance in design ⚖️.

Overview

The webinar kicks off by highlighting the significance of incorporating accessibility from the start. Pier Jeroka offers a comprehensive guide with 11 ways to start building an inclusive and accessible design toolkit. The session covers everything from theoretical aspects to practical demonstrations using UXPin, aimed at refining accessibility in design.

Pierre elaborates on the importance of including diverse user needs early in the design process. He shares real-life scenarios to emphasize how various impairments and environmental challenges can affect user interaction and experience. The session highlights the value of empathy and understanding in crafting user-friendly designs.

Finally, Pier introduces UXPin's Merge technology, illustrating how it bridges design and development seamlessly. The technology eliminates traditional handoffs, reducing errors and ensuring the designer's vision aligns with the end product. The session concludes with a call to action for designers to embrace accessibility as a fundamental part of the UX process.

11 ways to start your inclusive, accessible design toolkit Transcription

• 00:00 - 00:30 hello world thanks for tuning in my name is natalie and i'm one of the ux pin experts um so we are so happy to have you here today and to join us for such an uh a webinar with such an important topic of designing for accessibility our topic today is 11 ways to start your inclusive accessibility accessible design toolkit and our amazing speaker
• 00:30 - 01:00 design professional pier jeroka will be speaking today and he is an accessibility speak um expert ux strategist and the ceo of kino ola and we're so lucky to have him today so before we get started i would like to go over a couple housekeeping items so you know how to participate in today's event please drop your questions in the q a section and we'll ask them at the end of the webinar and we would like to ask you to hang around after the q a sec um session to learn more about ux
• 01:00 - 01:30 pins merge technology which is our efforts to help bridge the gap between design and development i know the audience is really excited for the webinar with pjort so i'll stop talking and i'll pass it over to you welcome fjord thank you so much good morning uh jindable from jordan uh hello guys um so i'm really really excited to be here and this is a great honor to
• 01:30 - 02:00 speak on this stage about accessibility a little bit about the topic now i'm switching to presentation yes we are here so 11 ways to start your eclipse accessibility design toolkit i split this presentation into three chapters a little bit uh boring theory then we will go to the ux pin i will show you in the practice how you can build accessible
• 02:00 - 02:30 digital product and how you can serve the inclusiveness and of course i will go into google and we will try to check how it's really built in terms of the accessibility and i'd like to welcome the bernard and the coronet who agreed to speech today in the sign language so we're having a polish language and
• 02:30 - 03:00 international one and raise their hands the guys who are deaf and join this event it will be very interesting to to hear and see how many of you just joined this event you can pause it and you can use the chat i really encourage you to use it because there's also a way to communicate between between us so welcome guys and conrad uh bernard enjoy okay uh so
• 03:00 - 03:30 do do thanks everyone okay okay let me we having some i think i need to share the right screen and now it should be much better always there's always some technical issue the webinar without a technical issue is not webinar so go go go once again bernard and conrad on the full screen let's go
• 03:30 - 04:00 my name is pierre jeroka thank you natalie for introducing me and i'd like to visit you in the cali and soon so there's a few logos that i help build accessible and usable product i'm still working with some of them so let's back to the our main topic what is the inclusive design um i will not
• 04:00 - 04:30 tell this now let's jump in the world of the disabled people one more than one billion people around the globe are serving some environment one of them is the visual impairment is the vision the blind people the people who are not seeing the colors like approximately 10 of the population not seeing the proper colors on the other hand
• 04:30 - 05:00 other side we have we can also say about a temporary exclusion you see a driver who and there is a bright light and the in the one moment i cannot see for example a somebody who passed a street so this is a temporary one let's go down further our empirement still lack of the hands
• 05:00 - 05:30 because you lost them during the war or you're just born but on the other hand we're having a temporary exclusion that for example your daddy or mommy i'm the dad and i discovered that there is a lock button on the washing machine guys the lock button on the washing machine have you ever used it before you uh were parents this is amazing and then the hearing environment
• 05:30 - 06:00 uh on the other side we're having a bartender there's a quite noisy place and this is temporary you need a shout something i need something to drink please and ordering that and cognitive ability imagine that you are speaking english and you're going to scotland try to speak with those guys wow so we of course this is uh accessibility inclusive international
• 06:00 - 06:30 i cover a topic related to um empirement which is related to to us to our body but also there is something above that that also impact our life as you see like location make might be involving the reduce our
• 06:30 - 07:00 normal cognitive ability to go education the gender even the age is something that might change our perspective to see exactly the same thing welcome chicago welcome germany and we as the designers we this is my hypothesis that we excluding many people when we building the digital
• 07:00 - 07:30 system why are we doing this and why are we designing the disability and uh and this is a real picture like oh i have idea let's do build a startup and you find your personas and you think oh this person will be fit my business because he's young he has money and i will focus my attention on this person
• 07:30 - 08:00 but our sciencity is a little bit bigger we're having older people we're having a disabled people we haven't got people who are not speaking exactly the same language and here is the the first toolkit which might help you to build the inclusiveness inside your dna or company dna and there is an impact map and on the
• 08:00 - 08:30 beginning and every digital product should have this impact you don't redesign the page because it's the athlete you redesign this page because you want to change something you want to change the conversion you want to change the satisfaction and then going further i really love this concept because it helps to define people based on their attitudes based on the character and for example
• 08:30 - 09:00 we're having a socializer who really love the people we're having a spontaneous guy who wants to you know we're trying to build a application to travel so spontaneous oh i'd like to go tomorrow to usa and we're having a prize conscious person who really perhaps don't have a money or and wants to also travel and
• 09:00 - 09:30 of course further i don't want to go with the ux uh things because today we're talking about the accessibility i would like to focus on the price conscious people because usually saying okay there is a student oh students that have a money or maybe the regular family who wants to travel once in the year on florida in jamaica or perhaps to poland why not but on this other side we're having for
• 09:30 - 10:00 example older people who also jump into price conscious characteristic because okay maybe we don't have too much money but i would like to go in the la to san francisco why not on the other side we're having the people who um using the wheelchair on the daily basis so we're having a different perspective and why we as the ux designers
• 10:00 - 10:30 forgot because this is my observation usually we forgot to include those people and i make us one step back to the presentation and i don't like the personals personalizes like bad because we focus we tend to focus on the demographic we don't focus on the the people who want to achieve something and this is really one a really nice concept of uh understanding and putting
• 10:30 - 11:00 inclusiveness inclusiveness into your company focus on the characteristics rather under some demographic data and you can say oh it's really hard we don't have a money to involve the people who are deaf we don't have a money to invite the people who are blind it's not true it's it's really cheap this is like including additional person or maybe you can replace
• 11:00 - 11:30 your standard person that you invited and say okay we already have five people you know you remember you are the ux designers perhaps all of you or maybe not but there is uh the chart saying that six eight people is enough to define the usability problem and this example that you can invite and those people are not sitting in their homes they are active they're using the computer on the
• 11:30 - 12:00 daily basis and you can see the live session of the usability session with the person the blind person and also the div person because i as you see here we also having the interpreters to translate the language that we don't know and is also my inclusion exclusiveness because i'm not speak exactly the same language as other people yeah the recording will be sent out so
• 12:00 - 12:30 it's really really cheap just invite them let's invite because exactly there's a wukash wukash is a black person from poland and he traveling on the regular basis through poland to czech republic from one city to another so our responsibility as designer is to help them to make this process smoother easier usable
• 12:30 - 13:00 and closed caption like for example we're having a closed caption this example of the youtube video with that subtitle that with the closed caption and perfect there is a people who english is for example the second language so i can slowly understand what the teacher sang in tutorial imagine that your speaker just broken and you don't hear and you want
• 13:00 - 13:30 to watch something oh you can benefit from the accessibility because you can see you can understand the context and for sure for people having a story guys hard of hearing is also helping because i can understand the context and now i drink the water yes we come back
• 13:30 - 14:00 and how we can start to bring the inclusive inclusiveness into our company start small it's i don't recommend to go big there is every year there is a global accessibility day that you can start and you can ask your developers on the right there is inco libra that we spent entire day to understand would this be understand be what is
• 14:00 - 14:30 inclusiveness be it means to have a problem with the visual impairment and don't percive the callers as others we also build the accessibility awareness cards so based on the cards everyone need to put up their shoes into a blind person in the person who having their dislike cell and understand the co how to use them digital product
• 14:30 - 15:00 and this is another case with the workshop that the people with no vision they're trying to build together a house and that helps to put a little bit empathy for those people to understand okay this is the case of course inviting the real person who using the screen doors it's also fantastic choice just invite this person and oh please show us how you're using
• 15:00 - 15:30 the software on the daily basis and then this is about the web accessibility so let's jump into wchd which is a global standard who explain how to build digital software which will be accessible for everyone there is a three levels this is a double a and triple a and based on the law that is available
• 15:30 - 16:00 in the us and europe single and double a is something that you should met and now i will give you a 10 advice how you can build in those requirements into your digital prototype using the ux pin and the first thing is the keyboard you know perhaps are we we're having the keyboard we're putting our
• 16:00 - 16:30 passwords usernames and maybe we haven't look oh there is a focus because oh we always this input we just type but some people need the focus even we need sometimes focus if we having a big amount of the data that okay where i am on the screen where is my mouse there should be the wcg also stated that it should be logical order so somehow those data when
• 16:30 - 17:00 i'm using the keyboard should follow some rules there is also bypass blocks so ability to skip the content that is repeatable on the page and of course avoid the keyboard trap because if you jump and you are not able to and go away this is a small problem and now i will be practicing the switching at different screens so
• 17:00 - 17:30 i have a usgolf page and what i'm doing now i'm just starting to use the keyboard only for using the keyboard without the screen reader you can use the tab so go to one step to the first active element on the page and if you want to back you click shift tab okay and now i'm uh on the usgov and what happened oh this is something skip the main
• 17:30 - 18:00 content it only appears for the people who using the keyboard when i click the enter what happen i once i skip the things that are repeatable on the every page so i just land on this page perfect so i can go new york times the same focus focus now is visible on the hamburger icon now i am clicking the tab search icon
• 18:00 - 18:30 and then the skip to content wow the next fantastic alignment that helps me to jump from here because you see there's a plenty of the alignments that if i don't hit the enter button i need go go go go go go go go go go go go go go go go go go approximately 20 clicks to go to the content that i'm interested in and now we build
• 18:30 - 19:00 the ux pin landing page that you perhaps sell it once you register on the page and let's imagine there's your work you just build this beautiful crafted page and you say okay voila it's finished but this is really finished i would say no there's still a lot to do because how you translate for the developers that there should be a keyboard logic on
• 19:00 - 19:30 this page so for that and of course there is my idea how we can mark keyboard logic on the digital software you can find your own but you need to somehow communicate guys there should be a keyboard logic this is a quite easy page that we can do but if you have a complex solution you we need to think what does the
• 19:30 - 20:00 keyboard logic really mean so based on the definition keyboard should be accessible on the active alignments so the first active element that i designer as the designer i design is the logo so there is a first alignment the next one we having a some social media so perfect let's go further too so and we are in the western culture and we
• 20:00 - 20:30 reading from left to right if we design something for arabic there's a revert of course we need to adapt our design so one two three so this is a one three we starting here and just follow some some rules then we designed some battle
• 20:30 - 21:00 save my spout so this is the next logical element works then we go there's the text text text text badge of the text and here we having a form so we should define what is the focus on the form so either there will be this first form or we can decide it will be entire component which cover all those fields i would say okay
• 21:00 - 21:30 this is a field don't worry this is the first alignment that we should allow user to jump and then i will use the arrow where is my arrow i just lost my arrow okay okay go voila so we're having six we're going further and there's the bottom it's a quite easy example but let's give you a question mark let's imagine
• 21:30 - 22:00 there is a model so model window which is a display um on the page you click just and this is a model so pop-up and my question so uh my question will be of course the field the first active alignment will be entire and the question is where should the focus go when i open this form it should go directly on this model or should go on the first visible
• 22:00 - 22:30 active element so what do you guys think the model title okay there's a ryan saying the model title who say something different who built title first visual element okay and and i really love that you're having the exit button perfect you're having a different perspective andrew is really good oh somebody's saying the cancel button first active alignment input out of
• 22:30 - 23:00 focus i don't know i also don't know maybe we need to expand and do some research on that but i would say the focus should be on the entire box this is my statement then i'm going to the the first active element and my question is free for what should be first cancel or save my spot i'm giving the one dollar
• 23:00 - 23:30 for for first person who put save cancel save save puzzle okay one dollar really encourage people so serve person i will send you the the amazon gift card and we need to save that and yes i totally agree that it should go on the first battle and you see on the previous screen i told you we're reading from left to right but here the logical choice because
• 23:30 - 24:00 we want to encourage user to go with the happy path so i'm very interested to just save my spot and then go on the cancel button perhaps it should be also the close icon here but this is uh that have the happy path and then the cancel so remember always logical order and you uh like yes save my spot primary action correct
• 24:00 - 24:30 cancel secondary action perfect but you need designers because if you forgot has this information for your amazing development team they can forgot because they can build this page how is in the dome structure and by accident only they can say oh cancer is the first one so we need to be careful and we as the people who building the digital structure are
• 24:30 - 25:00 responsible for that and now i will go to the page which you should have everyone everyone should know it there is a list how we should use the interaction keyboard versus our digital elements on the page and this it should be like the bible sorry for putting uh religion on that
• 25:00 - 25:30 but it should be every designer bible like the nissan heritage stick you should know like the baton it's activate by enter and the space and uh candy putting very interesting there is a revert option save and cancel this is also ux because in some cases we can revert the cancel because why people don't can't and usually we just are clicking the first button on the right and then oh nothing happened and then we
• 25:30 - 26:00 clicking again and for example from time to time we can revert to buttons in order to enforce user please read the message because we know that people don't read messages and this is a bible and also here is a sentence that you can close the model dialog using the escape so if i'm in model i can use it of course this decision the ux designer decision if we
• 26:00 - 26:30 should allow it for example if you're putting very important data in the model and you don't want to um lose them there is a question okay you can use the escape but maybe that should be a are you sure dear user you want to close this model but this is a sentence so if somebody state differently send him just a cheat chat and let me
• 26:30 - 27:00 send this to the [Music] old people and this is like written in the stone so it's not changeable and there's information tap shift tab so you should know it and sometimes you can put this information in the accessibility design system i really love i know what is the time uh oh it's it's good it's good um i really love the carbon
• 27:00 - 27:30 design from ibm and they spend a lot of attention on accessibility because there is a button and if i uh if i go here there is a behavior section and maybe i will make this little bit bigger for accessibility purpose and there is this statement that baton is activated by enter and or space and also the context of the um link in baton
• 27:30 - 28:00 is crucial you know i really love the discussion with my team what is the difference between link and the bathroom this is very good question but we don't have the time to take it online then go to the ux pin and let's back to our page so fantastic we just define the keyboard order there is really good so i'm usually what i'm doing
• 28:00 - 28:30 i'm working on the different groups and this is for me works if you have a better idea just send me those information on the twitter on linkedin in the in the end of the session then um very important from the user perspective is to split the entire page in the lab marks what does the landmarks mean tweak the landmarks like the boxes which are
• 28:30 - 29:00 keeping familiar functionality and us golf and i really love the u.s golf because the us golf is a quite accessible digital software and i'm using the landmark plugin which is available on the google chrome and firefox so if you using the different browser there is still chance to use it and as you see i have a different boxes the file the first box is the navigation
• 29:00 - 29:30 then i have a main navigation then i have a box the main one and you can watch i really encourage you to watch the previous webinar about accessibility there is a more about the landmarks but for this purpose every ux designer should define the boxes for the page a lot more landmark just landmark there's a plugin so how you should tweet it so i just um define on my page oh there
• 29:30 - 30:00 is a navigation so there's the first bar which keeping some let's see the navigation it's literally the pity because there is only let's say the ux pin logo which is applicable but uh our webinar on the ux pin so if you go on the webinar on the ux pin there is uh you type accessibility and you find uh accessibility webinar i don't remember the name sorry for that
• 30:00 - 30:30 and then i have my folder page so how should i define this context and i would say this everything is the main this is the main content of this page and i will just change this main okay this is the main so we're having the navigation region then there is a main one and the last one
• 30:30 - 31:00 i would say this is like the footer this is some additional information something promotion maybe some privacy security terms and blah blah blah and footer perfect and this is like your architect of building the page you know if you're building your house and you hire the architect doing the exactly the same starting to slowly drew okay how this
• 31:00 - 31:30 page should look like from my perspective every page should start from that it is like information architecture how we want to go now to split this page of course it might change and then if you speak exactly the same language as your developer and you say oh man please put those information in the navigation landmark they say ooh this guy speaking exactly the same language as i
• 31:30 - 32:00 as a developer developer language so you will gain a lot in blob team but still is building architectural function if you're going to change the page and you're going to put some additional information like for example on the right side you're going to build additional navigation it will be also easier to build this structure from development perspective
• 32:00 - 32:30 okay so you explain so we having a keyboard uh keyboard topic uh keyboard focus and you know uh i used to work in this in this case just in the car and it's really sometimes hard to use the mouse or touchpad so keyboard is like blessing so this is also usability then oh you would happen the page told
• 32:30 - 33:00 page title it's very important when you building a digital solution the web solution you should define the paid title usually usually we forgot about it oh we just developed beautiful crafted page but also there's something that there's a co there's a marketing purpose because you can be higher on the list on the google but
• 33:00 - 33:30 it's also very important why because there's a first information that will be read by screen reader so this is like the identity of your page you should define it of course you can use the design system for that to define that information or just you know go on this page put here ux pin [Music]
• 33:30 - 34:00 accessibility webinar make it of course the color and to do to do and of course i did some typo uh uxbean please uh introduce the correction and voila very fancy and i really love this functionality from ux pin because this is available in every uh software that it's helped to ask as the ui designers
• 34:00 - 34:30 to build a digital system but this functionality in unix pin is built in so you don't need to install any plugin of course in the adobe photoshop sorry for saying the competition but you know we should be equal for for everything i really love this because it's showing me when something will match the minimum contrast for elements i will back to this uh in the uh in a moment that the page title
• 34:30 - 35:00 is quite important you can just inform this and you can put this in the specification hey guys remember about the page title okay so and then we having the pals and stop it's super important if you building the ecommerce pages you and you have a something that is a
• 35:00 - 35:30 changing over the time it might be even the stock exchange everyone should have a possibility to switch off so and you are able to read this content and understand so pop spouses stop is a super super so if you have on the page something that is changing even if you have some animation consider to build
• 35:30 - 36:00 this option i really love the walmart page and i will show you the and i forgot about the one thing uh but let's come back walmart simple page and you have this carousel that's showing automatically the the next picture i can just pause and i can just see this picture i can
• 36:00 - 36:30 read whatever is here and among the landmarks quite important things is the heading structure heading structure is like the table of the content if you open the book you're having a table or content and you just read okay i won't go to the page number 10 if you open the magazine is exactly the same experience so
• 36:30 - 37:00 headings is something that help the people to for example using the screen readers to jump very quickly to the section that they are interested in so i'm using for that the headings map plugin this is the name of that maybe i'll make all zoom it headings map this is a plugin and i can very quickly jump to the headings that i'm interested in and i
• 37:00 - 37:30 will show you the shortcut that is a use for the nvda and it's very important to understand that the people who using the screen readers might use the scrinders in a different way so if there is a jake and samantha jake mike for example used um headings jump by steady headings but samantha used the region
• 37:30 - 38:00 landmark shortcut and this for example you can see if you're using the nvda nvda is the one of the very popular screen reader who read the content which is display on the page you can very quickly for example jump to the heading number one using the number one on your keyboard if you want to jump to the next active landmark you can use the d
• 38:00 - 38:30 shortcut so this is a different perspective of using the screen readers and let's jump to the walmart what's the most important here heading level one only one on the single page so don't put it more than one um heading number one on the page then follow the structure and i really encourage you to build
• 38:30 - 39:00 less is more a functionality in the poland we haven't noticed this issue that everyone putting the headings everywhere really everywhere but also from the ux perspective you we need think a smart there is a information architecture on our page and so headings map guys this is a plugin so if you type the headings map so and i would say this structure is lovely
• 39:00 - 39:30 i really love it for example like make me a little bit um bigger and now smaller shop by category and this is a heading level two so sambada if somebody wants to jump and understand those stuff he type h2a2 shortcut four times and he's here
• 39:30 - 40:00 and then he can use the arrows to jump for the next active element very clever so if i go to the my design what is that h1 on this page guys what is i will put the headings in the end of the session so what is a heading level one on this page yes 11 fantastic so
• 40:00 - 40:30 and here i really love the design system from a ux pin that i can very quickly define define and and at baba ba it's adding something so define automatically the heading structure and now i can go to the design system
• 40:30 - 41:00 and i having my typography type for example i can define this is heading [Music] heading 1 and voila that's it then i would say what will be next one do you suggest me that i should have the
• 41:00 - 41:30 heading level 2 or not register for uh webinar yes i totally agree with you because this is a name of the talk there is some date so definitely it is not the table of the content of this page but yes register for webinar is the h2 and that's it and that's end this is like very short less is more two levels and this is
• 41:30 - 42:00 fantastic because oh if i want to read a little bit more i have an opportunity below the heading level one if i want to register i have a level two which i can add and i can define that in the design system that's it in terms of the sizes i would say today you don't care about the sizes even i will tell you more are you able to find on this page
• 42:00 - 42:30 walmart.com save money live better where is this sentence hidden yes hidden exactly nowhere yeah and point for you this heading is hidden and we can hide some headings to help people to understand the context no no it's on the top it's hidden somewhere
• 42:30 - 43:00 if we go on the structure on the page now very technical one but the heading ah walmart no i will put this in this way oh you see this is and this is a below oh let me hide this h1 this is skip and this level having is
• 43:00 - 43:30 somewhere here so it's totally hidden uh yeah the top top is exactly in the same way uh the same but we shouldn't put the h1 on the title the title and the h1 is totally different one uh also very important the accessibility is a
• 43:30 - 44:00 if i have a word document i can go to magic option properties there is a summary and there is also title there's a title so page title reference to the web system and here if i want to define h1 guys there is also opportunity i having those ties and there is exactly the same rules apply for the word documents and for the pdf documents because those should be also accessible
• 44:00 - 44:30 yeah it's just visual hidden and google can read it or even the screen reader okay so we just cover a few rules and let's go further so we covered the oh my gosh what happened now okay i'm back the headings so headings build this side structure and the follow-up hierarchy this is the most important thing one h1 h2 h3
• 44:30 - 45:00 sometimes there is a discussion with the designers if i having the model window let's jump let's assume this is a model should i put the h1 on the model and there is a lot of discussion i really from my perspective model is a new content because i am on the page i hit the
• 45:00 - 45:30 button and something appear so it sometimes have a different context is somebody using the age structure heading structure i can very quickly jump to the component and understand okay what is there but sometimes no and wcg is also very general there is no like the one um sentence saying yes you should always use it yeah you should use it on the
• 45:30 - 46:00 model it's based on the context and base what you want to achieve on the page okay and then my favorite topic is the images and not only images everything which is not the text non-text content this is a proper way to say that so if we're having a text it's very easy by screen reader to read
• 46:00 - 46:30 this information but if i want to allow the screen to error that the image will be read we can do some magic so we can define the alternative text and let's do switch and if we look on this page what is a non-text content first of all logo i twitter facebook linkedin
• 46:30 - 47:00 so what we can do we should start to define the description of those information and we need to be um smart in this definition one pro tip if for example you're having the link adding and you define this information this link should open in the new tab you should also describe that in the html unfortunately this
• 47:00 - 47:30 unfortunately this icon might be a image but it might be also the cs svg or it might be a css there is a different methods to define the alternative text or define the those information that you want to pass for for the user but it's also a very important to pass the entire
• 47:30 - 48:00 information if this is open in the new tab you need to communicate this for the user leave it in it will be open in the new tab and also very i haven't prepared that but on the facebook every time when you upload your picture facebook automatically using the artificial intelligence scan a picture and putting alternative text on behalf of you of course you're having a possibility
• 48:00 - 48:30 to define the alternative text on every picture that you put on facebook it's applied on the linkedin it's applied on the twitter so today if you managing the social media it's very beneficiary to put this alternative text not only for the people who are using the screen either imagine that you having a big repository of every picture that you put on the web
• 48:30 - 49:00 so facebook which having a little bit of data privacy problem but um i'm welcome all facebook employee uh we can very quickly find the picture based on the text it's even on the your iphone and google play is exactly the same if you upload the picture sometimes you can put i'm looking for the outdoor so you can find those pictures
• 49:00 - 49:30 so this is also a little bit scary but this is a future and your responsibility as the ux designer is to define those alternative tags those those information that you want to pass because developer okay he can put all link at it facebook or if you don't put the right information scrinder will read entire url information and for example i i can ask the question
• 49:30 - 50:00 is this icon with the accessible sign is important or not there is your decision because if you decide this information for example is only decorative purpose and don't pass there any meaningful information for the people who using the alternative text my info you can mark this like the empty alt this
• 50:00 - 50:30 attribute from html and there is the information for the developer that okay i need to build this in this way from screener screener screen reader perspective it means skip this alt so it will not exist of course if not passed any right information okay yes you can use the area hidden true
• 50:30 - 51:00 there is another option to hide this content as i mentioned or maybe i will show you because you are very eager to learn the new things so you're my guest so if i go to wcag and there is more option no text content uh so this is i would say like the steve jobs is available today
• 51:00 - 51:30 for free for everyone so this is a wcg web content accessible guideline this 2.1 is available for free everyone has access just type in the google click non-text content so this is information about those which those information with not passing text and you can see there is a plenty option how you can
• 51:30 - 52:00 address those information one of them is here using the alt attributes on the image element so if you are of course willing to learn a little bit of technicality there is a possibility but also there is a pdf so if you have a pdf there is a short description i a functionality on the adobe acrobat nine so a little bit oldie but still there is a way how you can also put the alternative
• 52:00 - 52:30 text on that in the pdf or even the keynotes there is a possibility to define the alternative text also so there is a technology and here as i mentioned result yes and some others say yeah this area hidden yeah you know i really like uh first rule of arya don't use arya torodora i totally agree with you you can use the arya but you need a defined guidelines how
• 52:30 - 53:00 you go not to use it because if everyone starts to use the arya metal language it will be a mess in the end you need to have a really really guideline so better even i would say you can use for the people who are technical i can you can use spam class okay make this
• 53:00 - 53:30 little bit bigger and i will just put the class which will be only there is a very popular bootstrap class screen reader only and of course i need to put something on the beginning and here i can put some text and this is of course uh how we can address images
• 53:30 - 54:00 and only image oh yeah yeah it's here so i can put here the logo ux pin as you see even if this short webinar there's a plenty option how we can address the same thing and for the us as the non-technical ux designers we should define this and this might be
• 54:00 - 54:30 a good discussion with the development team hey guys how do you want to address this alternative tax if they will be out or do you want to use the um class screen reader only or maybe arya hidden you can be a partner with your developer to understand that and i can just see this almost a running run of the time and the same thing for the links so if you have a link you need to notify the user what happened and the most obvious
• 54:30 - 55:00 back or issue is with the read more read more read more i really don't like those elements but if you are push to use them you need add the context of those read more so for example you can add additional information read more about something so when i jump to the link screen there will read also the information that is hidden in the html
• 55:00 - 55:30 and little bit of speed up the language the language is super and important and every time when you're building the page you should define the main language that this page will go not to speak and this is something that is a define oh it's not here oh funny uh let's go to the walmart
• 55:30 - 56:00 oh and there is attribute which is called language are trying to make and it states the english so for example if you support the plenty languages like the spanish the polish you should have put those information here and remember or change it why because screen there automatically change to this language and for example if you're having a some sentence in the middle like like something
• 56:00 - 56:30 spanish you're having entire pages in english but you're having a short sentence in spanish you should have put a proper language attribute on the spanish language running running time so i don't i know don't bother language oh you see the technical um issues is okay and um i haven't put too much attention
• 56:30 - 57:00 on the ux pin perspective but it's very important from wcg to build the responsive page mobile first there is a success criteria saying that this page should be available to see in the horizontal and vertical perspective and this means responsiveness of course wcg defines some exception like games because there is one one of you
• 57:00 - 57:30 but remember responsiveness is also something that helps to others because not everyone somebody wants to make a zoom somebody wants to see the page in the different orientation and the colors i lit a bit put that but the colors is and the color contrast is quite important so once you're designing some something the digital or the pdf or the word you need to take care about the colors
• 57:30 - 58:00 of course you can use the ux pin functionality which help you to identify and say oh now you met that triple a in terms of the color contrast of course if i starting to a little bit play it might be not readable but it's very useful to have this functionality and all design tools having plugins please install them or just go to the ux pin
• 58:00 - 58:30 you can have built in [Music] okay colors so guys your ux designers you know the exactly 11 guidelines to control your design control control you must learn the control so this is your big privilege to build accessible solution in the and inclusiveness for the other people's
• 58:30 - 59:00 remember about it and my gold rules accessibility is ux must have every ux designer should understand the basic of the accessibility also from other hand to build the culture of the inclusiveness in the company your quality insurance folks should also understand that so not only oh it works but verify that using the keyboard
• 59:00 - 59:30 maybe speech the screen reader i don't like to test with the screen leaders because there is a lot one disadvantages if i still have a time and there is a really nice page which is called the power mapper and the testing almost every year the screen readers and they also showing the reliability of the different screener and the browser
• 59:30 - 60:00 so if you switch the page for example using the jos and chrome you can have the 85 rear ability even if you build um this page correctly you still might miss a few elements and yes i will build i will promise to build the excel file with this checklist and it will be public summer on the ux pin community page so i promise i will do
• 60:00 - 60:30 this so don't test with the screen there's screen there is only verification point to see if there's a good or not good and also with the aria and same others say the first rule arya don't use it i will totally agree there is a different components with the arya and [Music] maybe here yeah and this is for example if you use the aria with something not
• 60:30 - 61:00 necessary every browser and screen there we read this correctly so be careful i really agree with somebody who write down this information on the on the chat window and back qa criteria if you don't have uh too much your compound and don't count count accessibility yet build a proof of concept build something small like for example in this year we will
• 61:00 - 61:30 focus on the keyboard and focus that's it or maybe the headings also from the business perspective i would say the u.s market is a quiet matcher this should be a requirement so if you have a requirement user should be able to log in on the page please add the additional requirement users should be able to log in with the keyboard only and that's helped the build the accessible solution i really encourage you all to around the
• 61:30 - 62:00 accessibility awareness day which is every third may in your company invite the people who are older who having some visual impairment on other people to see their perspective um and accessibility what this really mean for me we're building the better services for everyone everyone can really use it even in december the zoom
• 62:00 - 62:30 was sued by the people who don't have a possibility to switch how to make out automated transcription in the zoom so zoom might appear fine even other other cases is the pizza aluminium which is also suited by the applied person who were not able to order pizza we are and this is something that is ultimate gold because we are the use designers we building the empathy and we're building a digital product for everyone but also
• 62:30 - 63:00 from the perspective of the money sometimes we can reach the wider audience if we saying there's a 50 percent of the people around the globe that having some empirement those people having uh they want to have the bank account they want to go on the walmart or amazon and buy some stuff think about it and usability we are
• 63:00 - 63:30 designers and accessibility might help to build the better usability for all of us and i really like this from the business perspective because if access accessibility is some standards if we follow those standards it's the less development and maintenance time in the future because everyone who joined the company he can say oh there is some guidelines there is no like oh somebody using arya
• 63:30 - 64:00 hidden or somebody using the alt or somebody using the screen reader only class there is some rules how to build the digital software and is the law guys sorry to saying that but it's a law in the european union we'll be having the european accessibility act and all public companies should follow the wcg on the level double you as the same you're having the section 508
• 64:00 - 64:30 and you're trying to do this uh also sorry to saying that but in the europe we're having this that american people sue for everything and this is true because dummy pizza zoom we want that this will be equal for everyone thank you very much sorry for keeping the six minutes after the time it is my twitter link again if you want to click on it please of course there is a moment for some question uh i
• 64:30 - 65:00 will try to answer them i also invite you and i promise to build this uh 11 cheat sheet and we put somewhere you can join to the community there will be a special tag that you can also ask additional question uh related to accessibility uh okay uh so so so so so there is some questions [Music]
• 65:00 - 65:30 that you see there is a big section of the mobile that you help you build the mobility and for mobile is exactly the same there should be a heading it should be uh some structure of the page are the accessibility awareness cards available as the resource to use honestly i'm planning to do this and still don't have a time but maybe if you encourage me enough i will really build them and
• 65:30 - 66:00 share with others because there's fancy things to show people a different perspective um [Music] difference accessibility designing for mobile apps and okay the question is sorry for not reading the question there's also some way the accessibility can you talk about some difference in terms of accessibility we should be aware when designing for mobile apps and desktop is the same
• 66:00 - 66:30 for the desktop we having different rules there is a different software to verify the accessibility so it is possible we also i also personally doing the desktop application accessible and the windows and the apple there's a great example that the building the accessibility from beginning which one speech reader do you recommend for testing it depends what you want to test jobs is the perfect for microsoft product i would say it's really readable
• 66:30 - 67:00 on the u.s market is cost like 90 bucks f120 in the europe 1000. the cheap one is the nvda um so you can just download on the windows voiceover is already built in on the on the mac uh i know that is uh rerunning the time and the question to natalie or do we have a still time or or we should i just stop um you know here i have a couple questions
• 67:00 - 67:30 for you um you have already um answered them just now but um i had jotted them down on the side but first of all before we jump into the q a wow that was just you know so informative thank you so much for sharing all the resources and all your knowledge um and a huge thank you to our interpreters conrad and bernard for really making this more inclusive um so the chat as you saw and the q and a section
• 67:30 - 68:00 section it was just going off and really great really great presentation so um a question that i we wanted to a question that we saw was magdalena she found they found it hard to find prototype software which is accessible and lets them conduct usable usability access accessible tests is there do you recommend any products for testing these or for
• 68:00 - 68:30 such software i would say um one screen there i would say that every of us should have a understanding on the screen there and just the contact with the people who are using this on the daily basis there are the best testers evers in terms of the if i understand could you repeat this first sentence related would magdalena really looking for this
• 68:30 - 69:00 the screener or the prototype the prototype so um they find it hard to they they found it hard to find prototype software which is accessible and yeah so um yeah this is your heart i would say but if you have even the prototype in the ux pin on different design tool is you still can verify that with the div people with the older people yes there is a huge problem with
• 69:00 - 69:30 let's say the prototype which not html based because without that it's really hard to to build you can still what we usually did we built the bootstrap template very quickly to simulate uh some main action this additional cost or the framework that you're using for example if you're using the react you can build very quickly if you're working in the agile environment something that you can test with the
• 69:30 - 70:00 community but yes there's a tough there is no like one obvious answer for that okay thank you thank you for that um another question from sw is can you talk about some differences in terms of accessibility we should be aware of when designing for mobile apps versus desktop not on this talk so there's a big lag maybe we should run a different one there is some similarity as i assure you the headings also on the
• 70:00 - 70:30 mobile native application you're defining the heading but there is no structure you just define okay this will be the heading one also on the i don't know if my camera allowed me but let's switch the voice over okay oh
• 70:30 - 71:00 this is uh voiceover and i can switch between a different uh components there's a headings you see the codings headings the links so it's exactly the same you need to have a different knowledge to build that in the software and the same is applied for the desktop but this is totally different conversation it's yeah sorry for that and
• 71:00 - 71:30 you know through your through your talk he shared many resources and there are um many questions about the resources as well so i would like to just sum up this webinar with the last question here of are there any accessibility resources you would recommend for um um just in general or maybe native motive native mobile apps or non-web content yeah so this is my resources accessibility splitting in the different sections so you can see there is a lot
• 71:30 - 72:00 of them and there is also some articles i think we can make a challenge accepted to make together with the ux pin place that we put those links in the one one thing because there's many topics challenge accepted ux pin yes yeah yeah okay perfect so we agree so guys we will find a place that we can put those information into one packet awesome thank you so much and again thank you for sharing your
• 72:00 - 72:30 knowledge with us and for your time bernard and conrad thank you it's been a real pleasure and huge thank you to everyone who is tuning in to join us today on the webinar the chat was very engaging so thanks for your attention and your great questions and for engaging with us with us all right so that sums up our webinar for today but for those of you who are interested in hearing about ux pins latest release i'll be doing a short five minute demo
• 72:30 - 73:00 of merge technology and how to simplify and improve communication between your design and development so i'll go ahead and share my screen now and get this set up all right
• 73:00 - 73:30 all right do you see my present mode okay here we go okay so um a little bit about us ux pen is a code based design platform that provides designers the ability to build low to high fidelity prototypes so basically everything you'd want from a vector-based tool but with the additional benefits of code and that means that teams can design in
• 73:30 - 74:00 code without knowing how to code they can build powerful interactive designs by implementing logic variables and states and most importantly ux also strives to help with design and development teams connect much deeper as they share the same design system and have a single source of truth in one system so this flow may look very familiar to you the chart reflects the ideal design process for many teams
• 74:00 - 74:30 you have your business requirements you design it lock it up with a low fidelity wireframe collect feedback and then you'll create a higher for deliberate prototype and then test and iterate and then the prototype is handed off to developers to code and it's finally pushed to production and that would be in a perfect world right well now this flow is probably more familiar and more relatable because teams are working in silos
• 74:30 - 75:00 and this leads to less communication and more room for errors and friction in every stage of the process so as you know the intended design can get lost in translation and design doesn't always translate to code properly so it's our mission to simplify this communication between designers and developers and one of the most effective ways is to build robust prototypes so designers can make their prototypes
• 75:00 - 75:30 look realistic like the final product and they can ensure that the vision and the experience is properly implemented into the design another way to another another possible way is to have consistency through design systems like how pierre mentioned in the presentation today this will reduce the risk of drift and any more misinterpretation by developers
• 75:30 - 76:00 so because uspn is a code-based design platform that means that everything within the editor will look familiar to designers but the back end is rendered in html css and javascript and since everything behind the scenes is encode ux pin will significantly reduce the drift between um they'll reduce reduce the drift and really simplify the handoff so it'll make it much easier for both designers and developers and it'll make it friendly
• 76:00 - 76:30 for both so we recently just launched a new product called ux pin merge and this truly bridges the gap between design and development um by including developers in the design process we're really excited about this because it's a product we've co-created with other product teams based on their feedback and on design and development communication challenges
• 76:30 - 77:00 so the way merge works is that it syncs your react.js coded components from your git repositories with the ux pin editor and with merge designers can create realistic experiences faster than ever so while developers can use the power of this allows them to use the reuse components right so if you have hard-coded components they'll be able to import it into the editor for example a robust pattern like
• 77:00 - 77:30 a sortable table will already be built out for the designers to prototype with and you all may know how difficult or advanced that is to build the power of reusing common hard code components will keep the design and the development teams in complete sync so it'll connect the two designers and developers by integrating development into your design ops process
• 77:30 - 78:00 and the immediate impact can of merge can be seen in three ways so the first is velocity uxp merge eliminates the traditional design handoff process because the designs were built using the exact same coded components as in the end product and the second is consistency finding a single source of truth is always a challenge and with merge your code will be the single source of truth
• 78:00 - 78:30 and the third piece is collaboration so ux pin will um ux merge takes away any friction between design designers and developers and it solves a lot of the collaboration challenges at times that teams face by providing both a single source of truth and a design platform that spans across both teams so really communication can happen in many ways and why not have a platform and process that does it
• 78:30 - 79:00 for you so that sums up my deck here and now i'm going to jump into ux pins merge and just give you a quick demo let me just delete some of these here all right so on the left hand side you can see that there's a full list of ui components these components are from my are different repositories so i'm
• 79:00 - 79:30 using the ux pen boilerplate for now but you can see that these here are all connected to the repositories that your team imports okay so with these you can quickly build a prototype that already meets the production standards from the beginning and everything starts with a simple drag and drop so i'll just go ahead and bring out a button here
• 79:30 - 80:00 and all the elements can be quickly adjusted with a specific screen size so here i have a medium size i can switch this over to large make it stretched or not stretched and next i'll bring in a credit card and you can see that when you're working with merge components um the key difference here is that you're really doing more of an
• 80:00 - 80:30 adaptation job for your specific requirements rather than styling or building everything from scratch and from the code these are the prop types on the right i can go ahead and just override this and adapt for the experience or design that i'm working on now
• 80:30 - 81:00 all right and you can see that we have different cards here available that are already designed and next i'll bring out a sortable table like how i mentioned earlier so i have this table here and this is already hard coded so i don't have to add any interactions or states for sorting this i just simply brought it to the canvas i can go ahead and add another category
• 81:00 - 81:30 here let's say a triangle player we can add that and then now we have that column added how simple was that right um so you have these preliminary boundaries that follow your company's style guide or design system and it just helps you ensure overall consistency of your design let's say that you folks have a library that's already tested
• 81:30 - 82:00 with accessibility standards you'll already have it in the library and the code so you can easily make a prototype and design your experience with that um what's also great is that you can um you can mix your elements with non-merge components and with the ux pin classical elements like a we can draw a simple box and make it a button first for example
• 82:00 - 82:30 so we have that here um i'll bring out a bar chart as well and it has all the animations built in as um too so from here um i'll go ahead and add an interaction to this box that i brought on and we can we can have the interactions um affect properties on a merge component
• 82:30 - 83:00 so if i click on this i can um say add an interaction and say when i click this let's change the property of this um of my bar chart and let's just change the fill okay let's just make this pink and like that you can easily mix and match and combine your components and the interaction
• 83:00 - 83:30 so here with this merge component i can also add an interaction and i can say when we click on this let's also just set the property of our bar chart let's do the fill again and then let's just make it um black great and so um now without really adding much more to this i can go into our preview mode and you can see that everything is
• 83:30 - 84:00 interactive all right so we can see that this table is sortable and we can click this that turns it to black i can click this and that should turn into pink and i forgot to mention to you that um these are your merge components will already have the states and everything
• 84:00 - 84:30 built in the code so we can change the type here to make it maybe a secondary or a warning and you wouldn't have to design those states it'll just be there available for you now going into the spec mode of our prototype the you'll see that the jsx code is already generated because it's coming from the repository so if i were to click this developers would be able to just
• 84:30 - 85:00 copy this and implement it in their process as it's the jsx code that they've already written all right and so to sum it all up um everything's here that you've worked with is already coded and it mimics the end product perfectly and you wouldn't really need to explain to your devs how to code something from scratch anymore but rather building but rather it's like building blocks for the team that they need to
• 85:00 - 85:30 use in specific scenarios and that's sums up my demonstration of merged technology and if you would love to see more or learn more about it please get in contact with us i'll go ahead and we'll go ahead and paste the link in the in the chat but other than that thank you so much for your time today um hope you have a great rest of your week and thank you so much for joining
• 85:30 - 86:00 us