How to make a great product accessible
At first glance, creating an accessible environment in a digital product seems like a simple task. After all, what could be easier than using normal buttons instead of DIVS? But when you try to scale this approach, things get more complicated. In this article, we will start with the basic components (text fields, popups) and then explain how to make an entire platform available from many applications written by dozens of different teams.
What do we mean by scalability?
People fromeCommerce application development company work on different processes using different tools. For example, managers use resource planning tools and Gantt charts, while designers use plug-ins for Adobe products and the ability to add comments directly to images and other documents.
This is the accessibility of the first order: our product should provide useful tools to more people from different departments of the company.
Let's start with the basics
Required to create a web page:
Content (obviously);
Some amount of HTML;
css
JS.
When used correctly, HTML is likely to already meet the accessibility criteria. Keyboard navigation in an application that is written in HTML will work as expected. Proper heading structure and text color contrast make the application accessible to users with color vision impairments and those using screen readers (screen readers).
Single-page web applications go beyond the capabilities of HTML. In addition to HTML, we write a lot of JavaScript code. We are talking mainly about components that the browser itself does not provide: dialog boxes, context menus, or auto-complete fields and drop-down lists. But there are things that do not fully meet the criteria for accessibility, even in HTML. Therefore, sometimes you have to abandon the native implementation, write your own and add accessibility support yourself.
Web applications from the point of view of the browser are ordinary sites, but the mechanics in them are more complicated than ordinary browser ones. Let's take browser history. Should the action of moving from one section of the application to another be treated as a historical event that changes the text in the address bar and allows you to return using the back button or hotkeys? While technically we're probably staying on the same page, in most cases the answer is yes, we should. What if the user opens a dialog box? Should this action be a "historical" event?
Focus management is a separate large topic, which I will not dwell on in detail in this article, but I will give a few examples of tasks that have to be solved. For example, where should the keyboard focus be by default when a dialog box opens? Should the focus be strictly limited to the area of the dialog, or should the user be allowed to Tab out to the interface of the browser itself? There are many questions, and often there are no simple answers (WCAG, of course, helps, but not always).
Developers are people with different backgrounds and specializations. Accessibility is not the only issue that must be addressed when creating the next application. There are also issues of security, performance, etc. No matter how the product changes, the interface should work predictably, look consistent within the product, and the API of the components should be understandable.
A design system can help with all of this.
At first glance, creating an accessible environment.