This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Testing Accessibility Features With Playwright
Discover how Playwright can help ensure accessibility in your applications. This article demonstrates how to use Playwright for testing keyboard navigation and identifying accessibility regressions before production....
Jan 31, 2024
5 mins
I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)
A perspective of a temporarily impaired developer on accessibility both from the perspective of a user and of a software engineer. Using the web disabled “surprisingly” makes you think about people’s experience on the web. Let us take you on that journey!...
Dec 6, 2023
5 mins
State of A11y Wrap-up | April 19th, 2022
In this wrap-up for State of A11y, we will talk about the key points presented by our hosts and panelists. I'll lay out who our hosts were and who was a part of our list of speakers. Our experts spoke about how we can improve developer tools like CMS' to improve the accessibility development process for those who use no-code tools. They also gave their thoughts on the top 1,000,000 homepages from an accessibility perspective; you can view that report here. In case you missed the event or want to rewatch, you can head over to Youtube to rewatch State of A11y otherwise, keep reading! First, here is a list of everyone who attended State of A11y: Hosts - Rob Ocell, Team Lead, and Software Architect, @robocell - Jesse Tomchak, Senior Software Engineer, @jtomchak Panelists - Anna E. Cook, Senior Accessibility Designer, Northwestern Mutual, @annaecook - Adrián Bolonio, Accessibility Software Engineer, GitHub, @bolonio - Amy Carney, Accessibility Specialist, Digilou, @click2carney - Amina Aweis, Accessibility Advocate and Founder of RecipeMate, @yeahshewrites - Albert Kim, Accessibility Lead, Korn Ferry, @djkalbert - Crystal Preston-Watson, Senior Digital Accessibility Analyst, Salesforce, @ScopicEngineer - Beatriz González Mellídez, Head of Accessibility & Digital Inclusion, Central Europe at Atos, @b_atish Accessibility is an after-thought for most, but why? In recent months, WebAIM released a report named "The WebAIM Million" which focuses on the state of accessibility for the top one million homepages. This report indicated a few key points that our panelists spoke about. Most websites being built in recent years are by those who might not be entirely technically inclined. The developers building these web pages might be using no-code solutions that don't entirely support the creation of web elements with accessibility in mind. On the other hand, out-sourcing development is not an uncommon practice. You might run into working with developers who haven't made web accessibility, a priority. This goes hand-in-hand with how accessibility has taken a back seat in development. The most common reason behind accessibility not being important is largely due to ignorance. If there was a focus on educating developers and creators (not excluding managers either), there would be a greater focus on making sure your websites work for every kind of person. A lack of education is one of the larger theories on why accessibility is lacking in most cases. The web does move fast; faster than it has in recent points in history. So many tools and websites are being created on a daily basis that often things like accessibility get left behind in favor of development speed and lack of priorities. The problem doesn't explicitly lie with developers. "Blame" (for a lack of a better word) can also be attributed to individual users too. For example, when posting images on social media websites, alt text isn't used nearly enough. To be a champion for web accessibility, one might take advantage of such opportunities to improve the overall integration of accessible tools. How culture and complexity impact accessibility There's a growing gap between accessibility and usability - you need one with the other. If you don't have accessibility, you won't have usability because, without accessibility, you limit the usability of your website for users who require accessibility. It sort of goes full circle. Designers and developers must keep the entire scope of usability in mind when creating their designs and developing their websites. But, it's not easy to keep these aspects a priority, so how do we do that? Some would argue that we need a culture shift that emphasizes user empathy. If you have empathy for all users of your site regardless of their limitations or not, you will consider all types of people. When you have empathy for your users, you will consider those who might require accessible features. With a culture change, comes compassion, empathy, and a greater focus on prioritizing those aspects that may have been left aside. Similarly, an increase in homepage complexity has also contributed to the fall of accessibility. While the number of elements and interactions increase on any given webpage, the state of accessibility falls or is largely forgotten. However, while these complexities increase, so should a focus on accessibility. How Twitter is helping normalize accessibility Twitter has, for the most part, always had the ability for you to add ALT text to your images. However, you could only see this ALT text (or see if a particular image had ALT text to begin with) if you were using a screen-reader. They've added a small badge to each image to show that ALT text has been added. This lets you know if the image you're about to retweet has accessibility in mind. By putting this feature in front of the eyes of every user, they are helping contribute to the normalization of accessibility features which in turn will encourage others to do the same. If you need a little accessibility accountability, check out this fun bot on Twitter named: Caption Clerk. When should I think about it? In short: from the start. It should be a priority during the early design and developing stages of whatever you're building. Rather than have it as an afterthought, make it a priority from the start and ensure it never loses focus. You might consider hiring people with disabilities to gather valuable feedback from them and allow them to contribute to the overall growth of your product. Having people with disabilities directly involved in the building or designing of your product ensures that accessibility will always be impactful. Building a career in accessibility Being in this space can be boring. There's a lot to learn and while it is universally helpful, it's not too thrilling. While lacking in the entertainment department, it emphasizes a deeper, human aspect: integrity. Designing with integrity is crucial for making the web more accessible. It forces you to account for users who might benefit greatly from accessible components. When you design and develop with integrity, you automatically include accessibility on your priority list. Teaching accessibility to others is not an "us vs. them" situation. We need to come alongside each other and prop each other up to teach us the importance of accessibility and growing in the areas we lack. It can be taught, and likewise, it can be learned. But it needs to happen in a team environment. Furthermore, prioritizing accessibility goes further up the chain than just developers and project managers. It goes all the way up to the C-Suite level (CEOs / CTOs). If they make it a priority, then it will trickle down to the rest of the teams. However, as a developer, don't feel forced to learn accessibility. Instead, lean on those who are experts in the space already to help you develop more usable applications. If needed, you might also look to find an accessibility mentor. Conclusion In the end, accessibility should always be a priority for you and your teams. Designing and developing with integrity allows you to provide a greater usability experience for all kinds of different users. Usability without accessibility isn't very usable at all....
Apr 27, 2022
5 mins
#StateOfA11y - Why A11y is so important
🤔 What is accessibility and what does it mean on the web? How can we improve accessibility within our websites? Is accessibility something we can overlook or put on the back burner? If you’ve been curious about what accessibility is and how it plays a role on the web, this talk will definitely be one to watch. In this article, I will talk about the key points and takeaways from the #StateOfA11y event hosted by Rob Ocel and Dacey Nolan. Before we get started, let’s take a look at our panelists! Hosts Rob Ocel @robocell - Team Lead and Software Architect, This Dot Labs Dacey Nolan @dacey_nolan - Software Engineer, Trainual Panelists Marcy Sutton @marcysutton - Owner and Lead Engineer, Modern Sole Design Tim Winfred @Contimporary - Front-End & JavaScript Web Developer, Curative Anna E. Cook @annaecook - Senior Accessibility Designer, Northwestern Mutual Carie Fisher @cariefisher - Sr. Accessibility Consultant and Trainer, Deque Nicolas Steenhout @vavroom - Independent Accessibility Consultant Crystal Preston-Watson @ScopicEngineer - Quality & Accessibility Engineer, Salesforce 🔑 Key Takeaways - UX promotes effective accessibility. If the UX is poor and fails to deliver on key points, accessibility will also suffer. - Want to become effective at writing accessible code? Try going to your favourite websites and using your keyboard to navigate! Once you're familiar with how it works, you can improve your code in accessibility! - How does the increase in remote work affect accessibility? Introducing more people to websites and applications to help facilitate effective communication and work. - Accessibility exists in many forms and exists beyond the web in more ways than one - How do we get better at onboarding ourselves and others into building better accessibility? Documentation. - The future of accessibility is: choice. Dark mode, enlarged text, animations. Having a single source of truth is the future! - Want to be effective at writing accessible code? Bring it back to the basics! Learn how to write proper HTML! 💭 Have any questions or points to share? Use #StateOfA11y on Twitter and talk with us! 📺 View the replay here for fun stories, great tips, and faces to names! 🤝...
Nov 18, 2021
2 mins
Semantic HTML: Why it matters and top tips on how to apply it
Semantic HTML: Why it matters and top tips on how to apply it HTML is the backbone of the web, and while it may be overlooked quite often, it is an essential language to know if you want to be a web developer. HTML5 brought us some nice changes and gave us the possibility of writing more semantic code than before. For clarification, code is “semantic” when you attribute more meaning to it using tags that have particular roles, instead of throwing everything inside divs and spans, and hoping for the best. Why does Semantic HTML matter? Writing semantic HTML makes your code easier to understand, making the source code more readable for other developers. Screen readers and browsers can interpret Semantic HTML better, which makes it more accessible. It affects your page's SEO, giving it a better ranking on search engines weighing the most important content appropriately. Now that you know what semantic HTML is and why to write your code with that in mind, here are some tips that you can easily apply to your daily code to leverage the benefits of semantic HTML. Top Tips The tag has its uses, but think twice before using it. Chances are, there is a semantic alternative. Can we use a semantic tag instead? , for example, may be a good substitute. It’s a tag that defines elements in a document, such as chapters, headings, or any other area of the document with a common tag or , that holds content that makes sense on its own like blog posts and comments. Instead of using , you can use or , which will not only allow you to style your content differently, but will also give it semantic emphasis? The tag is commonly used to hold images, but instead we can use the tag. You can use this tag as a holder for media elements other than image as well, like illustrations, diagrams or code snippets, for example. A great complement to the tag is the tag that we can use to describe the content of the figure tag. If the figure gets moved, the fig-caption will move with it. While using classes and IDs, be mindful about the names you choose, and be specific. A button with a class doesn't give much context for another dev reading your code, while a button with a class of will tell them that this button is related to a download. Try to “read” your code, and see if it makes sense to you. A common web page structure is as we see below: ` If the flow of your tags make sense even without content, you are on the right track. As you can see, using Semantic code has several benefits to your projects, making them more readable, accessible, and improving its ranking on search engines. And you can start using it today. All you need is to follow some tips, be mindful and of course, some practice, and soon it will become a habit....
Nov 16, 2020
2 mins
Make it Accessible: Better Layout with HTML
In this article I'm going to teach you how to use the HTML tags , and , and how they can improve your web applications accessibility....
May 22, 2020
5 mins
Make it Accessible: Accessible Alphabet Board with Angular and RxJs
Alphabet Board in Angular Intro I've seen Breaking Bad so many times. Like honestly at least 4 times. If you haven't seen it, be careful, it will keep you in front of the TV for several days. In a nutshell, the show is about a high school teacher, named Walter, who gets diagnosed with cancer, and decides to cook meth to pay for his medical bills. Over the course of the show, Walter goes through some extreme lengths to hide his criminal activity- the first time you see it, you think he is so smart! When you get to see it as many times as I have, you notice that he is not only smart, but extremely lucky. There's another character, Hector Salamanca. He is a former high profile drug runner, and patriarch to a criminal family that is competing for territory with Walter. Since his more involved criminal days, he has had a severe stroke, and communicates with nothing but a bell. If you have seen the show, you should remember him. If not, you can imagine how frustrating it must be to not be able to communicate with verbal or written language. Salamanca, however, is able to better communicate with the help of his nephews, who are always there for him. I've been working with accessibility for a few weeks now, and it has totally shifted the way I do things. So when I saw Breaking Bad the last time, I was really interested in finding out a way that the characters in the show could have communicated with Salamanca. There's one scene in which Salamanca is trying to expose Walter as an infamous meth manufacturer to his nephew Tuco, but Tuco isn't able to properly understand what his uncle is trying to say. At that moment, I was thinking, if only they both knew Morse, right?. Later on, Salamanca gets reunited with his other nephews, Leonel and Marcos. Then, something incredible happens. They used a Ouija board to communicate with him. At that time I thought, WOW, that's much better than Morse, I even felt dumb for not thinking of it. Then, Salamanca is sent to a nursing home where he has access to an alphabet board, specifically designed to help non-verbal people communicate. At that point, I felt like designing something around the use of a Ouija board was just reinventing the wheel. So let's face it, the rule of thumb is if we are looking to solve a problem, the first thing you should do is to search for how others are dealing with it now. Doing so will probably lead you in the right direction. To feel better, I decided to do an Angular application with a digital alphabet board. What's an alphabet board? > Also referred to as a letter board, an alphabet board is a tool, used by people with certain disabilities, to communicate with others. Users do this by pointing to symbols on the board. These symbols include letters, numbers, signs, and even frequently used words. I started thinking that if I was going to learn about accessibility, working with an accessibility tool is the best way to go. An alphabet board seemed like a fun idea- listing the alphabet, going through all the letters, allowing the user to react to letters as a manner of input to build phrases. I decided to use the click as the interaction for this example, but it can be changed to anything else. When using non-digital boards, there's often someone holding the board and systematically scanning through each symbol, giving the user the opportunity to select symbols using a mutually agreed upon signal. The digital version has to automatically go through the letters, and select when receiving clicks. Now that you have an idea of what this will look like, let's go back to accessibility concepts in order to understand how to properly tackle the project. Accessibility > Accessibility, as it relates to digital technologies, refers to the design of products, devices, services, or environments, so they can be usable by people with disabilities. You may already be thinking of ideas to optimize the board's design and function. Your initial thought may be to add some kind of outline to the active letter while going through the alphabet. But what if the user has a visual impairment? That leads us to the first principle in WCAG, _Perceivable_. Perceivable > Users must be able to perceive the information being presented (it can't be invisible to all of their senses). WCAG In order to say that the alphabet tool is truly accessible, users with visual impairments have to be able to use it. There has to be some mechanism to let the user know the currently active letter by sound. Although it may look like this is the only principle you are applying, if you create an alphabet board that can be easily placed in HTML, users like Salamanca will be able to best operate this tool. This falls into the second principle in WCAG, _Operable_. Operable > Users must be able to operate the interface (the interface cannot require interaction that a user cannot perform). WCAG Helping users like Salamanca use web applications is taking this principle to the next level. It can literally change lives. Solution Now, instead of teaching Morse to all patients and nurses, let's build an easy to use alphabet board for people who are non-verbal. In the previous image, you can see the tool built by IBM for Stephen Hawking. I didn't have a huge crew to pull this off, so I'm going to walk you through a simpler version I created. Design The alphabet should be stored as a list of letters; the user interface has to show all the letters in the alphabet, separated by space. It has to have a time interval while the letter is active. When the user clicks, the currently active letter is stored as part of the word. In order for it to work, there has to be some kind of store, keeping track of the state of the letters that have been added to the word. Implementation Let's get to it. Our first step is to build the array of letters. The standard use for electronic communication encoding is named ASCII, in which the upper case letter A is represented by the integer 65. Since it's ordered, we can assume that 66 is upper cased B, and so on, until we reach the length of the alphabet (26). One of the possible ways to generate an array containing the integers from 65 to 90 in typescript is: ` You may be wondering, Now what? The user has to do the math to see the current letter? The short answer is no. The long answer is that we can use a custom pure pipe to map the charCodes to their respective letter. That pipe can look like this: ` Which can be used this way: ` Our next step will be to display them in the UI for the user. That can be done like this: ` What about the active letter? How will the user be visually notified of the currently active letter? That's easy. We create a modifier class in css for that. It can be something like this: ` The Alphabet board is now pretty useless. We need it to move if we want to allow users to use it by themselves. > RxJs to the rescue! For the board to move, it is required to have an interval running that will loop through the items in the letters array. We want it to go back to the start once it reaches the end of the list. Also, the .active class depends on the currently active letter, so you are going to need some Angular magic too. ` ` We are close! The board is there, and it already moves automatically. Now is the time to listen to interactions, and save the currently selected letter, as well as the word stored so far. ` ` You just did it! Your users are able to write words with it. > But what if I told you that's not completely true? Although there's a visual way to know the active letter, what about blind users? Remember, we are talking about inclusion here. You'll need to find a way to automatically notify screen reader users of which letter is currently active, and you will need to create a way to read out the word written so far. Thankfully ARIA exists, and it has a property that does exactly what we need. I'm not going to talk about ARIA specifically in this article, but you'll need it to get your alphabet board to the next level. To achieve this, you can use aria-live property. ` And now, if you turn on a screen reader, you'll see how it notifies the active letter, as well as the word written so far. In case you don't want to create your own board, you can access my version of the alphabet board which looks like this: > NOTE: In order for the alphabet board to start, you have to click. Conclusion To wrap this up, I have to say that I personally had a lot of fun doing the Alphabet Board, and I really hope you do too. Many think that accessibility is a matter of following rules and compliance, but there is more to it. It is a way of designing what we build. > NOTE: This article is not related to compliance and rules. The intention is to give you a broader view of the accessibility aspect. If you are interested in being WCAG compliant, I'll release a new article about that soon. Icons made by Nikita Golubev from Flaticon...
May 19, 2020
8 mins
Accessible Tabs in Angular
This article intention is to guide the reader through the process of building a Tab interface that complies with the WAI-ARIA 1.1 Specification....
May 6, 2020
4 mins
Remote JavaScript Workshops for Enterprise Teams - Unveiling This Dot Lab's New Training Service
Over the past few weeks, many teams have transitioned their developers to working from home, and leaders are looking for innovative ways to support and continue team growth despite new operational challenges. We have put a lot of energy into thinking about how we can better serve our clients in the present working climate. Since 2016, our clients have leveraged This Dot’s onsite trainings to upskill their developers, establish foundations for new projects, and promote engagement within their teams. Today, we are proud to unveil a brand new catalog of remote JavaScript trainings for corporate teams. Topics include a variety of web development technologies and concepts relevant to modern JavaScript engineering and range from introductory to advanced. While custom trainings are available, our current catalogue includes: ReactJS Trainings ReactJS 101 Advanced React Architecture and Patterns React Testing React Hooks: Migration Strategies Web Components Training Web Components 101 Web Performance Training Web Performance 101 GraphQL Trainings GraphQL 101 GraphQL 201 GraphQL 301 VueJS Trainings Vue 101 Vue 201 Testing in Vue Angular Trainings Angular 101 Angular Accessibility 101 Angular Accessibility 201 Advanced Angular Architecture and Patterns Testing in Angular NgRx Trainings NgRx 101 NgRx 201 RxJS Training RxJS 101 A11Y/Accessibility Training Accessibility 101 Bazel Training Bazel 101 To celebrate our launch, we are offering any remote trainings booked during April at 20% off! These trainings can be purchased and used anytime within the year. If you are interested in learning more about how to leverage the talent and expertise of the This Dot Labs’ team and mentors, please reach out to us at hi@thisdot.co....
Mar 27, 2020
2 mins
Loading Components Dynamically in Angular 9 with Ivy
The intention of this article is to show how you can start loading components dynamically using Angular 9 with Ivy....
Mar 27, 2020
5 mins
Truly Accessible Custom Components in Angular
For the first time in my Make it Accessible series, I'm going to work on building a component that meets the requirements specified in the WAI-ARIA Authoring Practices...
Mar 25, 2020
7 mins
Make it Accessible: Dealing with Form Errors in Angular
This article's intention is to show you how to handle errors in forms from the a11y angle....
Mar 2, 2020
4 mins