Building accessible web apps - where to start?

Maybe a platitude, but true nevertheless: The web changed and changes how we work, communicate, consume, entertain ourselves. In addition to that more and more processes once only available in the "analogue world" will be digitalized (e.g. e-government, shopping, project management). In some areas it is valid to say that, after a given period of time, the analogue counterpart will vanish - take the banking sector for example. My mother worked as a bank clerk since the 1970s and she will go into retirement next year. And, boy, the importance of having dedicated bank branches for the usual processes (transferals, account statements and management) has declined during her career. In Germany, more and more banks close their subsidiaries and heavily invest in their online presences, consulting services and tools.

When such a process is inexorable, the importance of digital tools and web apps increases. Regarding their availability, performance, usability but also accessibility. When you have no "physical" place to visit anymore (or you are not able to, or don't want to) you must rely on the supplied online tools. Therefore it's important that these tools are available, usable - in short: accessible - to the biggest audience possible. In some countries and jurisdictions, this important recognition has become established, and laws are being prepared or in force - probably against the will of lobby groups - that require both the public and private sectors to supply at least a minimum level of accessibility.

There was a little discussion on twitter this week, and it seems to me that one of the problems of web app accessibility is educational material about the topic. Especially when it comes to starting points. Here's an attempt to gather a few links:

Starting points for web accessibility in general

There's always "web" in "web app", so the first starting point for making web apps accessible is adhering to the rules that make web sites accessible.

• First of all the detailed, quite technical, but absolutely basic standard in Web Accessibility: Web Content Accessibility Guidelines (WCAG).
• dynomapper.com supplies a birds-eye view on the WCAG, from history, core principles to the levels of agreement (A, AA, AAA)
• The a11yproject supplies a "Web Accessibility Checklist"
• Both Laura Kalbag and Heydon Pickering wrote great books about Accessibility to Inclusive Design: "Accessibility for Everyone" and "Inclusive Design Patterns" are both a great intro to the subject and worth every cent.

Starting points for making web apps

Web apps usually have peculiarities and thus pose new challenges to "the old" web accessibility rules and advice. For example:

• Focus management
• Statefulness. Meaning: asynchronous content rendering and letting e.g. screen readers know that content on the site has changed without site reload
• The most custom framework components not adhering to accessibility best practices

With regard to these points, Lisa Canigla has written a good introductory article: Building accessible single page apps . Also, Heydon Pickering has put the spotlight on the accessibility of statefulness and "live notifications" in his article on Notifications in its generally highly recommended series about Inclusive Components.

If you prefer videos with specific examples in code, browsers and screen readers look no further: Marcy Sutton supplied a one-hour video course on egghead.io called Start Building Accessible Web Applications Today

In An overview of accessible web applications and widgets, the authors of MDN web docs delve deeper into the issue of keyboard navigation and present the concept of ARIA (Accessible Rich Internet Applications) and its task to provide a way to add the "missing semantics" needed by assistive technologies such as screen readers.

In the same context Accessibility in Modern Web Applications, published by rangle.io, takes a few steps backs to look at the subject and expresses the important advice:

"Don't Reinvent HTML"

But the article also looks beyond that, and supplies valuable tips and links on designing and testing your web app.

Frameworks

Very few developers write their web apps or single page apps without a framework and in pure Javascript. Therefore, all those who plan to build an accessible web app should consider how their framework of choice takes care of accessibility. For example React has its own section on accessibility in its documentation, supplying many code examples and links to testing tools and assistive technologies. Unfortunately, a corresponding counterpart is still missing in the documentation of its competitor VueJS. But luckily the community has provided, as Emily Mears phrases it in her article Getting Started with Web Accessibility in Vue, "a lot of articles, talks, repositories and demonstrations out there aiming to help developers overcome accessibility issues".

Find your reasons

Even though there are peculiarities common to all web apps, each app will likely have accessibility challenges as individual as the app itself. Nevertheless, it is worth dealing with these situations. For ethical, but also more and more for legal reasons. That's why it's great to read articles about efforts like this: Michael Berger explains How we stopped making excuses and started improving Basecamp’s accessibility.