Venera Aitkul: Must-Have Practices of Web Accessibility

This talk covers the essential practices of web accessibility, as presented by Vera, a team lead at a global fintech company. The speaker discusses the importance of making web applications accessible for all users, including those with visual, auditory, cognitive, and motor impairments. She highlights common UI barriers and presents various tools and resources that assist in improving accessibility, such as semantic HTML and ARIA attributes. Vera emphasizes the role of empathy in design and outlines both the ethical and business incentives for creating inclusive digital products. The session concludes with practical examples and a focus on integrating accessibility into existing projects, underscoring the need for a thoughtful approach throughout the development process.

[Music] ladies and Gentlemen please welcome our next speaker vener at Cole presenting the topic must have practices of web accessibility so hi I'm Vera and today I will talk about must have practices of accessibility but before I would like to inv invite you on the behalf of the experts to participate in our raffle so please scan this C code we will be announcing the giveaway at the

vexer post today there's some people still okay I will show this slide at the end once again so no worries a b a bit about myself so I'm a team lead and Dev experts uh at Dev Experts of global fintech company so for the last three years I've been focusing on accessibility uh I do all kind of uh mentorship inside the experts and I came here from

Port to Portugal so in this presentation I will give a brief introduction to the concept accessibility and then we will check some UI barriers in um uh web I will share with you some tools and resources that I personally use then we will analyze a real life example I prepared for you and at the end just tiny hack how to add accessibility to your existing project so

let's begin poorly designed application can only serve a small subset of total potential audience and that's where UI wax plays a crucial role aiming to make your product more intuitive and user friendly however that's still leaves out a considerable chunk of potential users 300 people 300,000 people only in Lithuania who might find your product hard to use depending on their physical and uh cognitive abilities that's where

accessibility comes in to try to get that percentage as close to 100% and make your product truly inclusive and as uh developers we have an obligation to create products that are perceivable so your content should be visible regardless of the viewer size or Zoom percentage operable so not all of the users my uh May operate in mouth so provide Alternatives such as keyboard based navigation and most

importantly your product should forgiving because we all make mistakes right so offer Second Chances cancellation options instructions and understandable uh use Clear concise language and create a predictable layout using a header body footer kind of structure just keep it familiar and lastly robust So within certain limits your product should work well enough in all of the common devices and browsers it's a water time a bit ASMR

also okay so there are three three major reasons why we should work on accessibility from a business standpoint accessibility expands uh market and um opens up additional Revenue opportunities it um increases user satisfaction and therefore loyalty and um you can't forget that accessible products generally have way better user experience and SE ranking and ethically accessibility is an act of empathy and even though it is the morally

correct thing to do it is in fact becoming a legal requirement all around the world so there are tons of regulations but these are the most famous ones let's say so Americans with disability sex in the USA equality act in the UK and the European accessibility act in the European Union so don't forget to check your local regulations and by the way guys I forgot to mention

that at the end I will provide a cure code with all of the resources that I will share today with you so no need to take pictures okay so now I want to talk about some common UI issues um these easily solvable problems can uh prevent users from effectively interacting with your content and these barriers usually are separated into five major types so visual hearing um cognitive

and learning neurological motor and dexterity and they can also be situational or temporary so let's check one by one users with color blindness can have difficulties in distinguishing between colors making it hard for them to understand color code information especially if the color have no description and the users with visual impairments such as blurred vision uh can feel difficulties seeing details clearly and this kind of visual

uh issues are actually the easiest to solve they can be fixed by simply opting for high contrast colors and providing uh description to your UI elements so the basic example it's Error so you have to choose a correct icon nice description bright uh red background or border and maybe you should make it even the the pop up and here I made a recording of a navigation inside

a typical e-commerce website uh why I did that because not all of the uh users with visual impairments um Can partially see so they rely on assistive Technologies such as screen readers to navigate so they basically focus on elements using uh um a screen reader a keyboard and screen reader will read them it out loud so now imagine trying to navigate this website using only the keyboard

and with closed eyes so the focus starts on that blue rectangle the first right and then instead of logically going to the next row it jumps to the row above then it goes It goes instead of going to this second row it goes to the third dra so this kind of erratic navigation can be extremely confusing and frustrating to the users who use screen readers so that's

one of the reasons why we should keep um a logical navigation and the familiar uh layouts and users with auditor sensitivity can be overwhelmed by um sudden uh sounds and the loud audio in your web applications and websites they can even feel pain uh so it is very important to ensure that any audio can be muted or adjusted and users who are Dev or hard of hearing

may miss out on some very important information if your video audio don't provide any transcripts or subtitles and as you can see in this image subtitles are very important to have some context but to have full experience is not enough you have to be able to describe everything that's happening in your video right so that's why we need close caption and uh sensory sensitivity is an increased

sensitivity of central nervous system and users with such sensitivities can um be very overwhelmed and confused by too much information or too many details in a web page so I believe it already happened to some of you when you open a page and then you're bombarded with information and you just close it it and then you never look back so users with dyslexia can have hard time

reading uh and the understanding takes heavy uh heavy content and while users with autism um Can struggle with unpredictable layout and navigation users with Aphasia can struggle with understanding complex languages and instructions so in this um image you can see another typical buy e-commerce website so you should play with WID space try to create a very obvious layout and hide all of the unnecessary information avoid flashing

colors and fast animations and as I sted previously users with visual impairment uh require high contrast colors but those colors might uh worsen migraine symptoms so to improve that you should provide dark mode option and anyone here whoever suffered from migraine I think uh agrees with me that dark mode sometimes can be a lifesaver and lastly motor and dexterity difficulties so these users can have uh muscle

weakness and generally decrease body control they can feel Tremors or lack of coordination or even pain that impacts movement and in these situations you can increase interactive areas and ideally it should be something like 44x 44 pixels um also you can create keyboard shortcuts or keyboard navigations and when you are creating keyboard navigation um try to opt for Onkey up event in JavaScript instead of Onkey down

because IM mention a use case where a user just clicks on a button and stays pressing it what will happen is that the logic attached to the on key down we will will be triggered like several times but the logic attached to on key up will be triggered only once when the key is released so it's a tiny but it can change experiences and a lot of

times when we think about accessibility we tend to imagine people with permanent and very obvious disabilities and even though these uh individuals are crucial part of our user base they are not the only ones who benefit from accessible software um according to the results of this state of HTML 2023 survey it's very fresh I think it's from the last week and uh even though the sample is

not uh too big it's around 12,000 people we can see that roughly one in five developers have some sort of uh impairment and without experiences those challenges personally let's be honest we all accessibility every day so when you came to this shopping and you park your car you use parking sensors you entered through automatic doors right you have iPhones and Androids you have Siri and I believe

some of you have Alexis at home and we are in Tech obviously have Smart light bulbs so you use zoom in and zoom out and eternally turned on Netflix subtitles and now that we learned about the importance and impact of accessible design I want to share with you the tools and resources that I use so here I made a list and as a developer I can say

that these tools are game changer for me they make my work interesting and easy let's start so whenever you are working on accessibility you will inevitably stumble upon this web content accessibility guidelines and the W AI area specifications so these guidelines and specifications are created and maintained by worldwide Web Consortium and International Community founded by the inventor of worldwide web team Bernar Lee so the guidelines basically

dictate The Experience how a web should feel like and specifications basically the are tools that you use to uh realize so those guidelines and the W AI area stands for web accessibility initiative and area um reach internet accessible reach so they uh include attributes that you can attach to your HTML elements uh which makes them um easier to be interpreted by assisted Technologies such as screen readers

so this attributes can Define roles like button menu and alerts they can Define States like disabled or checked uh or even past properties like a value label description and starting out might be very challenging that's why a cool girls and guys from world Web Consortium created an incredible practical guide was ready to go examples code and great explanation that you can basically copy paste to your project

and besides that Mozilla developers documentation it's also great um to consult about anything related web but especially HTML and accessibility so these guidelines and specific ifications are used for the legal legal regulations that I mentioned on the first slides so the they are a source of Truth they are actually uh documents and HTML is the foundation of the web and while uh semantic HTML TX come in

come with built-in accessible accessibility information that may makes them uh easy to be interpreted by screen readers um non-semantic HTML elements don't come with such information and should be used only for stylistic purposes so a very fun fact that the first rule of area specifications actually is to not use area uh it means that if there is an HTML semantic tag that will get you the behavior

you're looking for you should opt for that tag instead of trying to recreate the wheel so obviously you can recreate any semantic tag uh using a plain div but you will have to add tons of attributes CSS classes and be very careful to control it with JavaScript so and also when you use semantic tags it makes your code more beautiful easy to understand and maintain and uh

when you're inspecting an element inside of a browser especially the semantic elements you can find all the accessibility information related to that element inside accessibility tab of any modern browser and for some reason if you if you're using some um this new uh gaming browsers they might not have accessibility tab but they will always provide uh Alternatives and accessibility information so all the browsers have this and

inside you can find accessibility tree which is accessible representation of your uh Tom tree so in this situation uh I created input type submit which is basically a button so you can see inside accessibility tree says is a button and I also uh passed some are disabled attribute for the sake of example so you can find it there and inside properties you can see the value and

the disabled State and labels you can also see uh the access tree for your entire web page you can do that by just enabling that enable full page accessibility tree checkbox and then clicking on that tiny man icon and it will transform your elements into accessibility tree uh it is very useful because this way you can have a rough idea how your page will be interpreted by

assistive Technologies Lighthouse can also be useful you can choose accessibility category run the analyzer and it will generate a report based on your page and accessibility score which will affect your SE rankings and these are extensions that are always with me they go with me from one browser to another from my one Mac so uh xde tools it's an incredible extension very similar to the lighthouse example

but the advantage here is that the UI is way better I like it and it will also generate report based on your entire page but it also will provide with very nice solutions for your errors it has also highlighting feature so you can just click on um an error and it will highlight where exactly that error happening uh this extension by IBM can be used as this

alternative for X tools it does basically the same stuff so generates a report uh provides Solutions and highlights the errors so as we stated high contrast colors are important but when you're developing or creating uh Mups uh it can be very boring and tedious going around and comparing one foreground color with another background color so this extension basically go through your page collects all of the colors

and generates uh contrast uh ratio report so it is useful also for the designers and this one it it's another one that can be used for uh by designers so it's a color blindness and vision loss simulator so here for example you can simply add your uh open your figma inside browser or drag and drop your mockup and see if your colors and layout make any sense

you can start testing accessibility while still coding so for that purposes eink has a great plugin that will throw errors and uh warnings whenever you're are messing up with your code a story book also has a great add-on it will generate report based on the St story books iframe uh it also provides Solutions and you can highlight the errors and Screen readers are basically atic technologies that

help mainly users with visual impairments to navigate through your page so they um translate a digital content into audible uh content uh sometimes send it to a bra display so here you can see a list of the most commonly used screen readers in the market and at Dev experts we use mvda and voice over because to cover all of common operative systems and the user market so

using screen reader can be actually quite easy you can just turn it on and start navigating using your keyboard and the next shortcut tab is used to jump from one interactive element to another one like from button to a button and the combo of shift and tab is used to a reverse jump and the interor space is used to to interact with your element and arrow keys

can be used as a complimentary uh navigation keys so this is a recording I made uh using a voice over so I'm jumping from one button to a button and voice over is basically reading the the label or content of a button and the type and lastly this is an official uh markup validator by worldwide web Consortium this is amazing because you can basically copy and paste

the link to your uh web page or even copy and paste HTML markup and it will generate a report based on the latest guidelines so now that we saw the importance of web design and we have all of the tools I think it's time to uh apply it to a real life example I you so I chose a Color Picker like one these uh for that purpose

because I think color picker picker touches uh several problems at once and I believe you've seen these ones all over the Internet especially in the online closing stores they are basically just a basic list of dozens of dozens of colors you can't uh focus on them using a keyboard even if you can they don't have a visual uh Focus or hover state so you don't know if

you're actually focused they don't have any descriptions or tool tips so they are dummy so for the sake of example I removed all of the unnecessary elements I left just and I also created uh a typical HTML code of a typical front end developer for such case do we have front end developers here today ah quite a lot so dear colleagues don't we have a tendency of

overusing div for everything so this is actually a normal code in a normal sense so but this is actually and accessibility nightmare so let's check why so as I st stated previously this list doesn't have any descriptions right so this is how users with color blindness will see it actually do we have users with color blinders here no okay great um otherwise you would have like a

meta experience but you can see in all of the examples actually it's quite impossible distinguishing between certain colors right especially in the situation with acopia and here I made a recording uh of a simulation how users with visual impairment would perceive our list using a voice over so let's check it code pen demo image image image so for the users with visual impairments this list might as

well not exist because it doesn't bring any useful information right and the first foremost important uh step here to improve our situation is to use sematic HTML so I improved a bit our quotes I replaced some of the TS with uh an ordered list and list item tags it's a tiny change so let's see how it will affect the experience so here's another recording code pen Dev

days vus code example improved code list eight items image one of8 image 2 of8 image 3 of8 image four of eight well Hallelujah we have a list here and it has eight items but this still is not enough because what kind of list is this right so the next and the final step here is to add all of the uh attributes so here's the final code it's

it became quite bigger just take a brief look here uh I will show this code once again uh in a bit okay continue uh TP index is used for uh to define a focus order uh of a element when user is navigating using a key so uh tab indic zero means that your element is uh visible for keyboard navigation therefore for uh screen readers and if you

want to hide it you just pass type index minus one if you want to create some sophisticated order pass tab index one two 3 and so forth and so it's very important for users with visual impairments to have context of a list right because we cited users we just open a page and we see the list of colors great we don't need any explanation there but here

it is uh very very important so that's why I'm creating a label or list of colors it's just example and I'm connecting this label through area label by attribute to list where I'm passing the ID of that label so whenever a screen reader is focused on that list it will read our list and one uh tiny warning um some situations when you using a label by a

label or a redescribed by attributes on an element a screen reader will give preference to the content of this attribute instead of the content of actual the element so um have that in mind so lists can be different it could be an simple informational list it could be a menu but in our situation is it's an A List that you can interact with so that's the reason

why I'm passing a r list box here and you can um check all of the available roles in the specification uh I'm also adding a roll option for each one of the list items so this way I'm telling uh screen readers this element can be selected can be interacted with and to uh give more information um passing area selected true or false to each one of the

items depending on its selected state so um in some situations you might want to hide options from your your list right sometimes it's disabled so you can use area disabled true and area selected false to Omit that option from the list and it is as if it never existed there a reactive descendant is used to uh Define the currently uh focused item inside of that specific list

so this way we don't have to uh actually change browser Focus which can be very expensive performance- wise so uh and this way uh screen reader will have predictable Behavior so here is a recording of an inspector I'm jumping from one list item to another one and as you can see the content of area active descendant is being replaced by the ID of currently focused element and

you might also notice that I'm passing a CSS class to a item because um not all of the users with visual impairments as we stated are uh totally blind so they can have blur Vision or tunnel vision so they still need to see the uh UI so this way I'm passing for each one of the elements a brighter background and the very bright colored outline so it

can be visible um clearly that it is focused currently and lastly area hidden through is very useful to hide all of the auditory and informational pollution so um and in this situation I'm hiding our list of colors because otherwise screen reader will read it duplicated and we don't need that so it is last auditory pollution and I'm also hiding the label using uh CSS class because as

I said previously cited users don't need any context so it will be less visual pollution and also um to help users with color blindness I'm uh passing a label for each one of the colors and uh obviously now that I'm passing labels a text we need to change a bit A visual representation of our color so instead of being a GRE as it was before it will

become literally a list of colors and the purpose here the idea is so screen reader whenever it focus on an item it should read simply the name of the element we don't need to know if there is an icon or anything else inside so that's reason why I'm hiding the svgs also so let's see the final code once again I run this code through the validator by

worldwi Web Consortium it is accessible trust me so couple more moments okay and this is how our list will look now on the left side you can see a recording of me navigating using a uh the all uh focused item has a brighter background on the and the bright colored outline as I said previously and our list now became like actually a vertical list so let's hear

how a voice over will read it now entering our list of colors list box red selected one of eight pumpkin two of eight non photo blue 3 of8 ceran four of8 sorry for the fancy colors I used coolors to find out how they are called so uh so now we have finally accessible list of colors that has a name we know how it it's called the context

we know that it's a list that you can interact with we know the amount of the items inside we know that each one of the items can be selected and each one of the colors has a name so this list of colors will create a nice accessible and now I understand that I know that if you have uh web accessibility in mind on the early stages of

web development uh it will be quite easier but it's never too late to work on accessibility but you remember that um more later you add accessibility to your project uh more difficult it becomes so there are different ways but this way is tested one so you should start uh with reorganizing your code and um preferably if you can delete Legacy code delete them and update your Li

libraries versions you can opt for more model approach and organizing your component into U literally atomic structure like atoms molecules and organisms so start start working on accessibility of smaller components and then go to the bigger ones because this way you can uh track the process and have more control over your code and avoid the temptation of creating uh excessively abstract components um I understand in some

situations two components might um look and feel quite similar but that they might have different set of attributes maybe some visual differences um will require different keyboard navigation and just don't create excess abstraction uh otherwise it will be very difficult for you and just summing up everything I talked today give um priority to HTML semantic tags use attributes only when it's strictly necessary otherwise you can mess

up actually with a a natural experience of your uh product so be productive try to make your life easier use all of the available tools so describe your UI it's not only important for users with visual impairments but also this way your UI will look uh very clear and easy to with in some situations it might be enough to navigate us a tab key but in other

situations you might need to use a combination of tab and arrow keys home and end keys so adapt for each use case at the experts we don't only test inside of a browser we test using different operative systems uh different screen readers all the common browsers we test with keyboard navigation so and also inside a browser using extensions so test it it's it is very important so

I believe in the future we will have technologies that can solve easily web accessibility issues and even though AI is becoming very powerful it is not deterministic because machine learning is fundamentally based on probability rather than certainly so we don't rely on it on critical business operations like handling uh sensitive personal data or U trading stock options so and I believe the way how we develop web

accessibility will remain the same for a really long time and the key to create a truly inclusive experience is uh human attention and following and adapting so once again here is the cure code that I showed at the beginning of the presentation don't forget that we are doing a giveaway at the experts Booth today at 3:40 I will give a couple of more moments so thank you

very much you have here a ke code with all of the resources that I shared today please scan them so this is it from my side thank you thank you my dear so giveaways will be at what time you said uh 3:40 and actually uh guys I will be here during the all the entire day so if you want to ask any questions come to me at

theer Booth I will be very Happ 40 your giveaway and 355 we will start a cahoot challenge with the Fantastic prizes so please after your giveaways come back here uh we almost now have time for questions but uh let's try first one um why you create span with label ID then hide it and pass it to area labeled by you can just write label there as text

what is the benefit of span element okay so it was for the sake of example because uh you can uh this way you can control uh your labels uh if you want to add uh some more sophisticated bigger label um so basically for the sake of example yeah