{"id":5115,"date":"2020-05-20T18:06:14","date_gmt":"2020-05-20T18:06:14","guid":{"rendered":"https:\/\/owncloud.com\/?p=5115"},"modified":"2020-07-07T18:07:03","modified_gmt":"2020-07-07T18:07:03","slug":"accessibility-and-frameworks-working-it-out-upstream-with-vue-js","status":"publish","type":"post","link":"https:\/\/owncloud.com\/de\/blogs\/accessibility-and-frameworks-working-it-out-upstream-with-vue-js\/","title":{"rendered":"Accessibility and Frameworks: Working it out upstream with Vue.js"},"content":{"rendered":"<p>Making user interfaces accessible to as many people as possible might be a no-brainer to everyone mindful about it. Accessibility should be the default, not an optional extra.<\/p>\n<p>One of our missions at ownCloud is to enable the future of collaboration. This also means delivering on the possibilities that remote work opens up for people with disabilities. When organizations choose ownCloud, its staff should find the overall accessibility of their tool stack enhanced.<\/p>\n<p>All too often, software projects lack awareness and then need to retrofit their code if and when the topic comes up. We\u2019ve been there ourselves. We want to avoid that particular trap in the development of ownCloud\u2019s future web frontend, code-named Phoenix, and our new app for iOS. Both should be inclusive and empathetic environments which can be used by positively everyone, e.g. non-visually or without a pointing device.<\/p>\n<p>Phoenix is a web app built in the JavaScript framework Vue.js, and we tried to nail accessibility right in its building blocks that are part of the ownCloud design system (ODS), a pattern library for Vue.js. The components and patterns therein, once written and tested, can then be used and reused across the user interface.<\/p>\n<p>It wasn\u2019t very easy to find input on this topic. While accessible design for web pages is an established field, accessible web apps based on the latest and greatest JavaScript frameworks are kind of wild frontier \u2014 and those are sparsely populated.<\/p>\n<p>We are pleased to have obtained the services of\u00a0<a href=\"https:\/\/marcus-herrmann.com\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Marcus Herrmann, a Berlin-based accessibility consultant and web developer<\/a>. He educates our development team by pointing to specific problems in our code, reviews fixes our team makes and contributes code himself.<\/p>\n<p>In a\u00a0<a href=\"https:\/\/owncloud.org\/?p=20306\" target=\"_blank\" rel=\"noreferrer noopener\">guest post<\/a>\u00a0in our blog he explains what he has been doing at ownCloud. For even more detail, look forward to\u00a0<a href=\"https:\/\/marcus.io\/blog\/change-of-ebook-plans\" target=\"_blank\" rel=\"noreferrer noopener\">his upcoming book on accessible design with Vue.js<\/a>.<\/p>\n<p>We still have and maybe always will have room for improvement in making ownCloud fully accessible. But we hope that by addressing the issue head-on in the early stages of its design process, we can make our new interface contribute to a more inclusive workplace \u2013 and a more open web for positively everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility should be the default, not an optional extra. That is easier said than done in contemporary JavaScript frameworks. For our new web frontend, built in Vue.js, we are glad to have obtained the services of web developer and accessibility consultant Marcus Herrmann to make ownCloud even more accessible.<\/p>\n","protected":false},"author":23,"featured_media":5116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-5115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/5115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/comments?post=5115"}],"version-history":[{"count":0,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/5115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media\/5116"}],"wp:attachment":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media?parent=5115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/categories?post=5115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/tags?post=5115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}