Accessibility for digital products and services

Presentation at GSD Meetup

Concerning the 17 United Nations Sustainable Development Goals, in particular Goal 10 (Reduced Inequalities), all people should have equal opportunities, regardless of age, gender, sexual orientation, disability, ethnicity, religion, origin, or social and economic status.
To support Goal 10 of the UN SDGs, this MeetUp Talk will focus on how we, as UX designers and software engineers, can improve the accessibility of digital products and services, therefore establishing more equal access to digital resources for all kinds of users.
To make you accessibility-ready in 20 minutes, we will cover 10 rules for better accessibility and show you useful tools to analyze the accessibility of digital products and services, ranging from OS settings, browser properties,

1. qaware.de
Accessibility for digital
products and services

Thomas Zettlitz
[email protected]

2. Motivation: To Contribute to Goal 10 of the
17 United Nations SDGs (Reduced Inequalities)


QAware | 2
https://www.un.org/sustainabledevelopment/news/communications-material/

3. Motivation: To Contribute to Goal 10 of the
17 United Nations SDGs (Reduced Inequalities)


QAware | 3
https://www.un.org/sustainabledevelopment/news/communications-material/
All people should have equal opportunities – regardless of age, gender,
sexual orientation, disability, ethnicity, religion, origin or social and
economic status.

4. Goal: Design for all



QAware | 4
https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility
-64f105f0881b#.ff63p02u7

5. There is a critical mass of severely disabled people
living in germany



QAware | 5https://www.european-accessibility-act.de/
7,8
million people in
Germany are
severely disabled
That´s about 9,4% of the total population
in Germany

6. Types of impairment


QAware | 6https://inclusive.microsoft.design/

7. Definition: Accessibility for digital products and services




QAware | 7
Accessibility means that everyone can use digital products and services,
regardless of their physical and mental abilities.
https://www.european-accessibility-act.de/

8. Legal framework



QAware | 8
-The Accessibility Strengthening Act Ordinance (Verordnung zum Barrierefreiheitsstärkungsgesetz ,
BFSGV) was passed on June 15, 2022 and defines accessibility requirements for products and services
that are placed on the market or provided to consumers after June 28, 2025.

-This includes all online commerce, hardware, software, but also passenger transport or banking
services.

-Micro-enterprises (with fewer than 10 employees or less than €2 million annual turnover) are
partially exempt from the law.

-B2B is not affected by the law: Because the BFSG was passed to strengthen consumers.
https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/gesetze-und-richtlinien/barriere
freiheitsstaerkungsgesetz/barrierefreiheitsstaerkungsgesetz-node.html

9. Basic Accessibility Goals



QAware | 9
perceptible
operable
understandable
robust

10. Perceptible



QAware | 10 https://www.w3.org/mission/accessibility/

11. Operable



QAware | 11 https://www.w3.org/mission/accessibility/

12. Understandable



QAware | 12 https://www.w3.org/mission/accessibility/

13. Robust



QAware | 13https://www.w3.org/mission/accessibility/

14. Rules for better accessibility
of digital products and services


QAware | 14

15. Ensure sufficient contrast for text
and interaction objects



QAware | 15https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

16. Ensure sufficient contrast for text
and interaction objects



QAware | 16 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

17. Signaling distinctiveness
not only through colour


QAware | 17 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

18. Signaling distinctiveness
not only through colour


QAware | 18 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

19. Signaling distinctiveness
not only through colour


QAware | 19 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

20. Enable navigation using tabs and screen readers
for people with visual impairments


QAware | 20 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

21. Make the focus state of interaction objects
clearly visible


QAware | 21 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

22. Make the focus state of interaction objects
clearly visible

QAware | 22 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

23. Make the focus state of interaction objects
clearly visible


QAware | 23 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

24. Correctly place labels on input fields
so that they are recognized and read out


QAware | 24 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

25. Correctly place labels on input fields
so that they are recognized and read out


QAware | 25 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

26. Describe images accurately using alternative text
in the code. This will be read out.


QAware | 26 https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 (by Pablo Stanley)

27. Maintain clean semantic HTML structure
for screen readers


QAware | 27https://webaim.org/techniques/semanticstructure/

28. Rules for better accessibility
of digital products and services


QAware | 28
●Clear structure (visible & code)
●Visible focus state
●Logical reading order
●Contrasting colors
●Understandable without colors
●Text for non-text-content
●Understandable labeling of components
●Use of simple terms
●Limit animations
●Two-sense principle
Workshop: MaibornWolff “Barrierefreiheit entfesseln”

29. Helpful tools for accessibility checks


QAware | 29
●OS Tools for accessibility
●Browser settings for accessibility
●Wave
●Lighthouse
●Web Disability Simulator

30. macOS Bedienungshilfen


QAware | 30

31. Chrome Accessibility Settings
(Bedienungshilfen in den Einstellungen)


QAware | 31

32. Chrome Accessibility Extensions


QAware | 32

33. Lighthouse Chrome Extension


QAware | 33

34. Wave: Web accessibility evaluation tool


QAware | 34https://wave.webaim.org/

35. Wave: Web accessibility evaluation tool


QAware | 35https://wave.webaim.org/

36. Further Tools


QAware | 36https://www.w3.org/WAI/test-evaluate/tools/list/

37. qaware.de
QAware GmbH
Aschauer Straße 32
81549 München
Tel. [phone]
[email protected]
twitter.com/qaware
linkedin.com/company/qaware-gmbh
xing.com/companies/qawaregmbh
slideshare.net/qaware
github.com/qaware