Accessibility subsite in Design documentation

Accessibility

We track all issues and enhancements regarding accessibility with the feature: accessibility label. They are also all part of the design label.

The posters on dos and don'ts on designing for accessibility are a great summary. Print out the PDF and hang them up. :)

Screenreader accessibility

• Images should always have an alt attribute describing their function, like alt="App menu" (don’t forget the translations). If the image is purely for decoration, use alt="". See more tips for alt text.
• Form fields should always have a corresponding label.
• To make sure everything works well with a screenreader, best test it yourself: NVDA for Windows, VoiceOver for macOS, Universal Access in GNOME, TalkBack for Android or VoiceOver for iOS
• If you regularly use a screen reader and there are any problems, don’t hesitate to open an issue :)

Keyboard navigation

• It should be easy to visually determine the element with keyboard focus. To test, simply use Tab ↹ and make sure all elements are highlighted. Whenever you use :hover in your CSS, also include :focus and :active.
• All elements that can be interacted with via a mouse click should also be possible to interact with via pressing Enter ↵.
• Also see: Quick Test: Navigate using just your keyboard

Contrast and legibility

• Make sure the text color to background passes WCAG AA recommendation (ideally AAA). You can check it using the WebAIM color contrast checker
• Also see: Quick Test: Check contrast with your mobile device

Comprehension

• Write in simple and understandable language.
• Don’t use technical jargon which needs prior knowledge. (Like 404 Error, or Couldn’t set variable X) You can do that in the console to help debugging, but don’t show it in the interface.
• Check your written text using comprehension check tools.

Testing tools

We use various tools for testing like:

• WAVE browser extensions
• aXe browser extensions
• Firefox accessibility inspector
• Lighthouse for audits of performance, accessibility, and more
• Web Accessibility Checklist

Recommended reading

• The Accessibility Project
• Mozilla Developer Network docs on accessibility
• WebAIM articles and resources

@nextcloud/accessibility @nextcloud/designers @MarcoZehe @tyrylu @skjnldsv @kevgathuku @juliushaertl what are additional points we should list? :) I’m wondering how much general accessibility info we should list or rather link to.

Start with the Accessibility section in the Design documentation and review the guidance and external links already listed in the issue. Clarify with maintainers which additional accessibility points belong here versus which should remain external references; done means an agreed scope and an updated, focused section.