00:00:00.160
Our next speaker is Eeva-Jonna Panula, also known as Evis. I will help with the typing in the chat. Evis is a front-end-focused software developer who wants to make the web a better place for all of us.
00:00:07.839
She is an IAP certified professional in web accessibility and is on a continuous journey to learn more about accessibility. She wrote her first lines of code when she was a teenager, but the lack of role models initially led her away from programming. She got a degree in the Russian language but eventually returned to coding and became a software developer instead of a translator.
00:00:22.880
When she is not coding or talking about coding, she spends her time playing ultimate frisbee or exploring the world with a kayak. How exciting! Today, Evis is asking if you, as a developer, are maybe unconsciously developing sites for users just like yourself.
00:00:38.399
This often means a sighted mouse user with good fine motor skills who is proficient with computers. However, not every user is like that. Many projects have automated accessibility checkers, which is a good start. However, they don't catch most accessibility issues.
00:00:56.879
There are some straightforward checks to ensure a better experience for your users. In this talk, you’ll learn how to perform these checks, and most importantly, why they are essential.
00:01:13.199
So, don't develop just for yourself—a developer's checklist to accessibility.
00:01:17.520
We as developers often tend to develop sites for users like ourselves. This often means a sighted mouse user who has good fine motor skills and could be described as a power user. However, not all users are like that, which can create usability and accessibility problems. Sometimes these issues overlap.
00:01:35.680
We need to take action regarding this issue. Therefore, today, I want to provide you with some simple checks that can help us ensure our sites are at least somewhat more accessible for our users.
00:01:53.680
This talk has been tailored for those who are at the beginning of their accessibility journey. You might know that accessibility is an important topic but may not know how to start, or it might all feel overwhelming. That's perfectly okay.
00:02:01.280
The fact that you are here, listening, shows that you're on the right path and I hope you will learn something valuable from this talk. My name is Eeva-Jonna Panula, or Evis.
00:02:09.840
I'm a software developer at a company called Futurist in Finland, and I'm also a certified professional in web accessibility. When I started to learn to code again, I began with HTML, CSS, and some basic JavaScript, but the first actual framework I used was Ruby on Rails. I still maintain this history, even though nowadays I focus primarily on front-end development, mainly using React and TypeScript.
00:02:30.400
Today, we'll touch on automated testing briefly before presenting these essential checks. Let's start with automated accessibility testing and establish some definitions around what I mean when discussing this topic.
00:02:48.640
Automated testing tools take a piece of code and programmatically check it for accessibility failures or issues. A couple of good examples of such failures could be missing the alt attribute on an image tag or not having the 'lang' attribute in the HTML document.
00:03:15.200
These tools can easily find these issues because they are programmatically identifiable. However, studies have shown that automated tools typically only find about 15% to 50% of accessibility failures, depending on the specific tool and methodology used. This means that even when the results are promising—such as finding 50% of the issues—half of the problems might still go undetected.
00:03:39.039
This highlights the necessity for manual checks as well, which brings us to the essential checks I promised to share.
00:03:48.639
The first thing to check is to navigate your site using only a keyboard. Avoid using your mouse entirely. This way, you can check if you always know where you are, where the focus is, and confirm that you can use everything available with a mouse using just a keyboard.
00:04:05.679
This is critical for users who navigate using a keyboard, keyboard emulators, or screen readers, as those users also rely on the keyboard for navigation.
00:04:26.480
Next, I'll demo some potential problems you may find as well as provide information on how to fix them. Let’s start by navigating a website using the keyboard. I will primarily use a tab key to navigate and will announce when I reach an element of focus.
00:04:47.040
As I tab through the site, I can see that the focus is on a link. There is a visible focus indicator, which is a red border. Now that I’m on a checkbox, I would expect the next focus to go to a button after this. However, let’s test it.
00:05:05.120
As I tab again, I find that the focus is lost. Searching for the button, I can see it, but the focus isn’t directly moving to it. The reason for this issue is that the list of links is hidden. It wasn’t hidden using ‘display: none;’ in CSS, but instead positioned out of view.
00:05:24.000
This method is common for navigation menus, and when content is just repositioned out of view, it doesn't get removed from the DOM or focus order. This can be especially frustrating for keyboard-only users who may feel lost when navigating.
00:05:45.760
Now moving on to the next link that says 'I have no focus indicator', I expect to jump from the button that says 'I am also visible'. However, again, I lose focus. The reason is that the 'I have no focus indicator' link lacks any visible focus indicator.
00:06:04.400
I had previously removed that with CSS using 'outline: none;' which is problematic. It is important not to remove focus indicators entirely.
00:06:24.959
If designers want to improve the visibility of focus indicators, they should add additional styles rather than remove the default outlines.
00:06:44.480
Another usability concern is controls that do not function correctly with keyboard navigation. For example, there’s a button-like element styled with a div that has a click event associated with it.
00:07:02.239
While it works well with a mouse, keyboard users might skip over it as they can't interact with it like a real button. Therefore, whenever a button or interactive element is needed, it is crucial to use the appropriate native HTML element—like the <button> tag—rather than a <div> styled like a button.
00:07:23.920
In a nutshell, prioritize using native semantic elements to ensure functionality for all users.
00:07:39.360
We also need to check whether color alone is used to convey information. Relying solely on color can exclude many users, particularly those with color blindness or visual impairments.
00:07:58.560
For example, if information is communicated using color, users who can’t distinguish those colors won’t be able to perceive the information.
00:08:15.040
To illustrate this, let me share an example based on a table I created, categorizing different courses I attended during my studies in Russian language and culture.
00:08:34.240
Using different colors to represent my feelings toward each course could lead to misunderstandings for someone else who interprets those colors differently. We need to ensure that information is communicated using more than just color—like text labels or shapes—as well.
00:08:54.080
Additionally, we should consider the ability to zoom on mobile devices. In the past, responsive design often meant that mobile designs were made unscalable or non-zoomable. This typically involved setting 'user-scalable=no' in the meta tags.
00:09:13.760
This can pose a problem for users with low vision who might rely on zooming in to effectively view a website.
00:09:32.080
In general, avoid disabling zooming on mobile devices or anywhere else, as users rely on this capability for accessibility.
00:09:52.720
When checking for zoom functionality, use a mobile device to navigate your site and ensure the zoom feature works properly.
00:10:11.840
Captions and transcripts are also vital for accessibility. For instance, if you’re watching a video but can’t have the sound on, captions can help you understand what's happening.
00:10:29.280
If you have a podcast or an audio-only offering, providing a transcript is essential as it captures all spoken content for those who are hard of hearing or completely deaf.
00:10:49.520
Whenever you have any multimedia element, check if captions are available for video and if transcripts exist for audio. Additionally, consider adding audio descriptions to video content for people who are visually impaired.
00:11:09.040
In summary, when you test your site, navigate it using a keyboard to check for usability and accessible interactions.
00:11:25.440
Make sure you aren't relying solely on color to communicate information, ensure that zooming is possible on mobile devices, and check for available captions and transcripts.
00:11:39.760
I’m on Twitter, my handle is @eevispanula, and you can find my blog at eevis.codes/blog, where I recently published a blog post with these accessibility checks and more.
00:11:58.000
Thank you all for your attention!
00:12:01.200
Thank you, Evis! Please take a moment to breathe while I talk to the audience. For those who arrived late today, you can find the stream chat on the left-side panel navigation. Click on 'Stream' to reopen the window, and there you can engage in discussions with our speakers.
00:12:50.040
We appreciate your support for our speakers through emojis, love, and questions. We’ve all experienced technical problems, so let’s not worry too much about it. Life as a speaker can be quite exciting, especially when things go wrong during a presentation.
00:13:22.240
Let's go through the questions now. There are many reminders from the chat. Some people have expressed appreciation for talks on accessibility. They note that these talks change perspectives and include new points of view that enrich their daily work as developers.
00:13:45.760
One question raised is about focus indicators: There are guidelines on how they should be presented. How prominent should they be defined? What is too simple? There’s a struggle to make them effective without disrupting site layout.
00:14:07.680
Yes, there are guidelines for focus indicators in the Web Content Accessibility Guidelines, ensure that such indicators follow a minimum level of contrast. However, I would say that while the default browser styles are often insufficient, emphasis should be placed on improving visibility.
00:14:17.920
Another comment highlights that while automated testing is helpful for identifying issues like missing alternative text or color contrast concerns, it doesn't guarantee that a site or application is truly inclusive, meaning developers need to go beyond just automating checks.
00:14:46.880
It is essential to be ambassadors for accessibility, to elevate the conversation around it, especially during events like this—creating awareness is vital for making the web better for everyone.
00:15:07.760
I appreciate all of you engaging with the topic of accessibility. Please share your country’s situation regarding accessibility standards; our experiences can resonate and support awareness-raising efforts.
00:15:29.040
In Finland, we have a good situation in which public sector sites have to comply with accessibility laws mandating adherence to web accessibility standards. This significantly raises awareness and sets a high bar for accessibility.
00:15:50.120
We also have an upcoming law concerning web stores that will require them to be accessible. We will see further developments in this area in the next few years.
00:16:03.040
The need for raising awareness through discussions, code reviews, and sharing personal stories will help make the topic of accessibility much more visible within the tech community.
00:16:26.560
It's crucial to help others learn about accessibility. If just one developer in your team becomes passionate about this topic, the ripples can spread as others learn too. Be ambassadors in your teams.
00:16:45.760
Thank you for your continued focus on accessibility! Please remember to advocate for it so that we can foster inclusivity and diversity in the tech industry, ensuring that we create a better world.