Accessibility: Add description text, simplify structure

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
index 03054af1c8c4a62c95ae3743edef5246bd410518..8983ecc1976d0a2bf4eaa4f0c924f22a9032d278 100644 (file)
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/App.vue
@@ -1,20 +1,21 @@
 <template>
-       <div id="accessibility">
-               <div id="themes" class="section">
-                       <h2>{{t('accessibility', 'Themes')}}</h2>
-                       <div class="themes-list preview-list">
-                               <preview v-for="preview in themes" :preview="preview"
-                                                :key="preview.id" :selected="selected.theme"
-                                                v-on:select="selectTheme"></preview>
-                       </div>
+       <div id="accessibility" class="section">
+               <h2>{{t('accessibility', 'Accessibility')}}</h2>
+               <p class="settings-hint">
+                       {{t('accessibility', 'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders.')}}</br>
+                       We aim to be compliant with the <a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">Web Content Accessibility Guidelines</a>  2.1 on AA level, with the high contrast theme even on AAA level.</br>
+                       If you find any issues, don’t hesitate to report them on <a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">our issue tracker</a>. And if you want to get involved, come join <a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">our design team</a>!
+               </p>
+
+               <div class="themes-list preview-list">
+                       <preview v-for="preview in themes" :preview="preview"
+                                        :key="preview.id" :selected="selected.theme"
+                                        v-on:select="selectTheme"></preview>
                </div>
-               <div id="fonts" class="section">
-                       <h2>{{t('accessibility', 'Fonts')}}</h2>
-                       <div class="fonts-list preview-list">
-                               <preview v-for="preview in fonts" :preview="preview"
-                                                :key="preview.id" :selected="selected.font"
-                                                v-on:select="selectFont"></preview>
-                       </div>
+               <div class="fonts-list preview-list">
+                       <preview v-for="preview in fonts" :preview="preview"
+                                        :key="preview.id" :selected="selected.font"
+                                        v-on:select="selectFont"></preview>
                </div>
        </div>
 </template>