Accessible Apps Qt Developer Days 2014 Frederik Gladhorn frederik.gladhorn@theqtcompany.com 1 © 2013 The Qt Company About Me ● The Qt Company (Oslo) ● Qt Project, QA ● Input handling in Qt Quick ● Cloud Services ● Maintainer Qt Accessibility ● Qt accessibility on Linux, OS X, Windows, Android and iOS 2 © 2014 The Qt Company Outline What is accessibility? Qt Quick QWidget 3 © 2014 The Qt Company Accessibility Colors ● Fonts ● Assistive technology – Magnification – Screen reader – Braille display – Switch ● 4 © 2014 The Qt Company History ● Qt 5.0: improved API ● Qt 5.1: Windows ● Qt 5.2: Android and OS X ● Qt 5.3: iOS ● Qt 5.4: QtWebEngine ● research project: mobile device accessibility 5 © 2014 The Qt Company Mobile Accessibility ● Simple user interfaces ● Gestures ● iOS: Voice Over ● Android: Talk Back 6 © 2014 The Qt Company Qt Quick Accessibility Accessible is an attached property Item { Accessible.name: “Show Kitten” Accessible.description: “Shows a kitten when clicked” Accessible.role: Accessible.Button } 7 © 2014 The Qt Company Qt Quick Accessibility Item { Accessible.name: “Show Kitten” Accessible.description: “Shows a kitten when clicked” Accessible.role: Accessible.Button } name: concise label 8 © 2014 The Qt Company Qt Quick Accessibility Item { Accessible.name: “Show Kitten” Accessible.description: “Shows a kitten when clicked” Accessible.role: Accessible.Button } description: longer explanation 9 © 2014 The Qt Company Qt Quick Accessibility Item { Accessible.name: “Show Kitten” Accessible.description: “Shows a kitten when clicked” Accessible.role: Accessible.Button } role: what this item represents, for example: Button, StaticText, EditableText, Graphic, Slider, ... 10 © 2014 The Qt Company Voice Over Demo time 11 © 2014 The Qt Company Qt Quick Accessibility API ● Name, description, role ● State (focused, checked, readOnly, passwordEdit, ...) ● Ignored (new in Qt 5.4) ● Actions (new in Qt 5.4) Accessible.onPressAction: {} Qt 5.4: Press, Toggle, Increase, Decrease Qt 5.5: ScrollUp, ScrollDown, ScrollLeft, ScrollRight, PreviousPage, NextPage 12 © 2014 The Qt Company Example: Quick Forecast Finding the right level of abstraction 13 © 2014 The Qt Company Example: Quick Forecast Window Header Table Row 1 Weekday Row ... Temp Max Date Temp Min Icon 14 © 2014 The Qt Company Example: Quick Forecast Window Header Back Button Table Oslo – Norway, 10 Day Forecast 15 © 2014 The Qt Company Example: Quick Forecast Window Table Tue, 23/09, Cloudy, 11°C to 11°C Wed, ... 16 © 2014 The Qt Company Summary Qt Quick Use Qt Quick Controls ● Custom controls: add Accessible properties ● Test with a screen reader ● Split or unite items using Accessible.ignored ● Add actions, especially for touch input ● 17 © 2014 The Qt Company QWidget QWidget::accessibleName QWidget::accessibleDescription MyWidget.setAccessibleName(“Open”); MyWidget.setAccessibleDescription(“Open a file”); 18 © 2014 The Qt Company Custom QWidget ● ● ● ● Subclass QAccessibleInterface Create a factory function (QAccessible::installFactory) Optionally implement more interfaces (text, table, table-cell, value, action) Send notifications (QAccessible::updateAccessibility) 19 © 2014 The Qt Company Factory QAccessibleInterface *myAccessibleFactory( const QString &classname, QObject *object) { } if (classname == "MyWidget") return new MyWidgetAccessibleInterface(object); return 0; QAccessible::installFactory(myAccessibleFactory); 20 © 2014 The Qt Company QAccessibleInterface class MyWidgetAccessibleInterface : public QAccessibleInterface { public: MyWidgetAccessibleInterface(QObject *o); }; QString text(QAccessible::Text t) const; QAccessible::State state() const; QRect rect() const; QAccessible::Role role() const; // ... 21 © 2014 The Qt Company Additional Interfaces Subclass e.g. QAccessibleTextInterface void *MyIface::interface_cast(QAccessible::InterfaceType t) { if (t == QAccessible::TextInterface) return static_cast<QAccessibleTextInterface*>(this); return 0; } 22 © 2014 The Qt Company QWidget Summary ● Use existing widgets ● No text → setAccessibleName ● For custom widgets create subclasses of QAccessibleInterface 23 © 2014 The Qt Company Tools ● OS X: Voice Over; Accessibility Inspector (in Xcode) ● Windows: NVDA, JAWS, Windows Eyes; Inspect, AccProbe ● Linux: Orca; Accerciser ● iOS: Voice Over ● Android: Talk Back 24 © 2014 The Qt Company Resources Qt Quick accessibility: http://qt-project.org/doc/qt-5/qml-qtquick-accessible.html QWidget: http://qt-project.org/doc/qt-5/accessible-qwidget.html http://qt-project.org/doc/qt-5/QAccessibleInterface.html Testing and Voice Over (OS X): http://blog.qt.digia.com/blog/2014/06/20/qt-weekly-14-testing-accessibil ity-on-os-x 25 © 2014 The Qt Company Questions? Frederik Gladhorn frederik.gladhorn@theqtcompany.com 26 © 2013 The Qt Company