Web accessibility is a complex topic, especially in the context of JavaScript-based web applications. With its new web interface, 玩嘉电竞下载注册 starts to tackle this topic to create a front-end usable for and accessible to everyone, regardless of their circumstances, abilities or technologies used.
玩嘉电竞下载注册 accessibility web frontend Vue.js

At the start of 2019, 玩嘉电竞下载注册 team lead Michael Stingl approached me and asked whether I could support the accessibility aspect of 玩嘉电竞下载注册s Project Phoenix. I was very pleased to say yes, especially once I learned that Phoenix was a) a web-app and b) written in Vue.js. The intersection of web accessibility and modern, framework-driven JavaScript is a fascinating topic for me, and additionally, Vue.js is my favourite framework.

Michael then went into more detail: It would be perfect if I could help with improving the already existing  玩嘉电竞下载注册 Design System (ODS)  pattern library  in multiple ways:

  1. Help building accessible components that can be used throughout the new interface, using the strength of a design system: Authors and developers would need to build and test an inclusive interface pattern once, and it could then be used all across the interface. In the bird’s eye view, an application consisting of well-built single parts is on a good path to become a truly inclusive one.
  2. Help with documentation: When certain components or controls a built in a certain way – what is the reasoning behind it? What user groups and which assistive technologies are affected? What circumstances and strategies could people have when they approach the interface? In the end, the documentation is intended to have two audiences: The core team members and associated freelancers, but also anyone else building extensions for the new front-end. For both groups, the design system should serve as a knowledge center: about the available components, for sure, but also about the design and markup decisions that went into them. Project Phoenix is being heavily worked on and will, especially when it comes to user experience and screen designs, go through further iterations. But the sometimes abstract, sometimes concrete documentation bits in ODS are meant to stand the test of time and to be educational resources for everyone working in the proximity of 玩嘉电竞下载注册’s new interface.
  3. Lastly to conduct occasional video calls or physical meetings where I can show to the team some strategies people with disabilities employ to use websites, and the tools developers have at their disposal to help them succeed. Over the last months, these occasional “accessibility session” also dealt with what needs to be done in the future, and I tried to make it clear,  why  something needs to be done in accessibility terms.

In October and November of 2019, I also had the opportunity to work in the ‘machine room’ of both Project Phoenix and the 玩嘉电竞下载注册 Design System. While doing so, I tried to emphasize accessibility basics but also the special idiosyncrasies that exist in JavaScript-based web apps. In these weeks, I approached the following topics:

  • Semantics of controls, and buttons vs. links
  • The importance of accessible names and labels
  • Communicating interstitial states in web apps, like a condition where a progress (e.g. upload) is running for a certain time ( example )
  • How an application or document can be structured non-visually with headline and/or ARIA landmark regions, and how skip links will help people who are not using a pointer device (such as mouse, or a touch surface)
  • The virtue of hiding things accessibly, either from visual users, or from screen reader users without alienating the other group
  • The concept of an accessible disclosure widget and where it could and should be used in an interface ( example )
  • The Basics of WAI-ARIA ( example )
  • That keyboard navigation is a cornerstone of accessibility, and that good usability in that regard oftentimes is passed on to assistive technology
  • The concept of an “action menu” (a widget that emulates native application menus on the desktop, and triggers screen readers to go into a special mode) ( example )
  • How to build a tab module accessibly ( example )
  • The best way of implementing an accessible date picker ( example )
  • The central importance that all of the above should be tested with real users, and that building inclusive interfaces is not checking of a list, and real feedback from real people wins over dogmatism

All in all, especially the weeks in the fall were exciting times. In my project  I built a small dummy application to show some concepts, components and patterns. But of course a living, breathing and growing project like Phoenix was something else, and I really enjoyed it to work so  close to the metal .

Still, in such a relatively short amount of time and in a growing and complex application like Phoenix it is impossible to boost the accessibility up to eleven. Nevertheless, I really hope to have helped facilitate laying the groundwork for accessibility knowledge, and that everyone will reap the rewards of this work in the near future. In the meantime, you can check out Phoenix’s progress at .


mayo 13, 2020

Ready to see what’s next?

Having trouble viewing or submitting this form?

Contact Us

We care about protecting your data. Here’s our Privacy Policy .

Read now:

Data sovereignty, data protection and the future of open source

Data sovereignty, data protection and the future of open source

Data sovereignty is currently one of the most discussed digital policy issues. Tobias Gerlinger, CEO, 玩嘉电竞下载注册, discusses in detail the growing importance of data sovereignty, measures that companies can implement to protect intellectual property, open source alternatives, the future of open source ecosystems in the European economy, and more.

leer más
Infinite Scale Spaces: A Quantum Leap for Enterprise Collaboration

Infinite Scale Spaces: A Quantum Leap for Enterprise Collaboration

Senior Product Manager Patrick Maier explains how Spaces comes as nothing less than a revolutionary new way of collaboration in modern companies, institutions or organizations. As an elementary feature of 玩嘉电竞下载注册 Infinite Scale, the new cloud-native platform from 玩嘉电竞下载注册, Spaces boost collaboration, save money and significantly reduce administrative overhead while improving compliance, control and security.

leer más
英雄联盟竞猜数据直播正规 英雄联盟竞猜查询决赛 英雄联盟竞猜数据抽注 英雄联盟竞猜入口手机版 大圣电竞(重庆)投注排名 VG电子比分手机版电脑版