Creating accessible apps

Creating accessible apps is a long-term commitment. Your app design should allow you to improve your app's accessibility with each new version. New assistive technologies, hardware, operating systems, or platform capabilities provide opportunities to make your apps more accessible.

Pairing your app with assistive technologies

An assistive technology device or assistive technology application can respond to the information that it receives from an accessible app. One example of an assistive technology application is a screen reader. A screen reader can identify information about the items that a BlackBerry 10 device displays on-screen, and the actions that occur in the UI. A screen reader can convey this information to the user through an audio output by reading the screen out loud, or by sending the data to a braille output device.

The BlackBerry 10 OS provides a screen reader on the device under Settings > Accessibility > Screen Reader BETA. The screen reader can be enabled, configured, or disabled in Settings.

Accessible reading experience

The following code sample demonstrates how to use the accessibility property to identify UI elements to a screen reader. In some cases, the elements can be identified by their inherent properties. For example, a button is identified by the screen reader using the value of the button's text property.

import bb.cascades 1.4

// The Page uses the accessibility property to
// identify itself to the screen reader
Page {
    accessibility.name: "Data input page"
    
    // The Container uses the accessibility property to
    // identify itself to the screen reader
    Container {
        accessibility.name: "User information container"
        
        // The button's text is used by the screen reader
        Button {
            text: "Exit Button"
        }
        
        // The label's text is used by the screen reader
        Label {
            id: myLbl
            text: "Data input field"
        }
        
        // The TextField uses its accessibility property 
        // to tell the screen reader that it's associated
        // with the above label element. The above label
        // lets the user know that this TextField control
        // is meant to be a data input field
        TextField {
            accessibility.labelledBy: myLbl
        }
    }
}

You must include the following library references in your .cpp file.

#include <bb/cascades/Label>
#include <bb/cascades/Button>
#include <bb/cascades/TextField>
#include <bb/cascades/Container>
#include <bb/cascades/Page>
Button* exitButton = Button::create("Exit Button");

// The label's text is used by the screen reader
Label* dataLabel = Label::create("Data input field");

// The TextField uses its accessibility property 
// to tell the screen reader that it's associated
// with the above label element. The above label
// lets the user know that this TextField control
// is meant to be a data input field
TextField* dataTextField = TextField::create();
dataTextField->accessibility()->addLabel(dataLabel);

// The Container uses the accessibility property to
// identify itself to the screen reader
Container* mainContainer = Container::create();
mainContainer->accessibility()->setName("User information container");

mainContainer->add(exitButton);
mainContainer->add(dataLabel);
mainContainer->add(dataTextField);

// The Page uses the accessibility property to
// identify itself to the screen reader
Page* mainPage = Page::create().content(mainContainer);
mainPage->accessibility()->setName("Data input page");

Not applicable

UI controls, such as sliders, should identify themselves to screen readers, along with their present value on the slider scale. By default, the BlackBerry 10 OS provides the accessibility property for this purpose. Buttons can be identified using their text property. However, if the button has a specific state, such as On or Off, then that state should be identified to the screen reader. Again, the button's accessibility property can be used for this purpose. When you set the accessibility property of your UI controls, your app's UI design becomes accessible to a wider audience.

Accessible Images

From an accessibility point of view, the use of images alone to create a logical flow in a UI design is discouraged. That is not to say that images cannot, or should not, be used in your app UI designs, but they shouldn't be used as the only means to create a logical UI lay out. Check whether your UI works if all of your images are replaced by simple text descriptions.

Images, which cannot be read by a screen reader, should be described using their alternate text property. For example, if a company logo is used, the alt text value for that image could be "image of company logo". This description allows the screen reader to read the contents of the image out loud for the users who cannot see it for themselves.

You can use the image's alternate text property to describe the functionality of the image. For example, if the company logo can be clicked to get more information about the organization, then it might be better to include a description in the image's alt text that tells the user this information. For example, a description could read "Click this company logo for more information about our organization".

You can also include text with your images. This approach is useful in buttons where an image is placed directly on the button.

Accessible buttons partnered with text.

When you decide on an approach, try to be consistent. If you're describing the images in your UI, then be consistent for all images that are in your app's UI. This approach helps users navigate your app's UI with their screen reader, and allows them to picture your app's UI and flow.

Using accessible text formats

The BlackBerry 10 OS has a magnify mode that helps make reading small text easier. In many cases, you can make simple improvements to your UI design to allow your users to make the text larger in a predictable and simple way.

Accessible text size icon

For example, you can use a text size button or icon to make your UI text larger as the user clicks it. This approach allows you to test your app's UI using different text sizes, and also allows you to programmatically adjust your app's UI for use with specific text sizes.

You should always try to use relative font sizes instead of hard-coded font sizes. Using relative font sizes can make your apps more accessible and flexible with different orientations and screen sizes.

The following sample code shows you how to set relative font sizes for a Label control. The label text property in this sample is set to show the size of the font.

// ...

Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center

            Label {
                text: qsTr("XXSmall")
                textStyle.fontSize: FontSize.XXSmall
            }
            Label {
                text: qsTr("XSmall")
                textStyle.fontSize: FontSize.XSmall
            }
            Label {
                text: qsTr("Small")
                textStyle.fontSize: FontSize.Small
            }
            Label {
                text: qsTr("Medium")
                textStyle.fontSize: FontSize.Medium
            }
            Label {
                text: qsTr("Large")
                textStyle.fontSize: FontSize.Large
            }
            Label {
                text: qsTr("XLarge")
                textStyle.fontSize: FontSize.XLarge
            }
            Label {
                text: qsTr("XXLarge")
                textStyle.fontSize: FontSize.XXLarge
            }
        }

// ...

You must include the following library references in your .cpp file.

#include <bb/cascades/Label>
#include <bb/cascades/Button>
#include <bb/cascades/TextField>
#include <bb/cascades/Container>
#include <bb/cascades/Page>

You can use this code sample to define the relative sizes for your font.

// ...

Container* mainContainer = Container::create();

Label* label1 = Label::create("XXSmall");
label1->textStyle()->setFontSize(FontSize::XXSmall);

Label* label2 = Label::create("XSmall");
label2->textStyle()->setFontSize(FontSize::XSmall);

Label* label3 = Label::create("Small");
label3->textStyle()->setFontSize(FontSize::Small);

Label* label4 = Label::create("Medium");
label4->textStyle()->setFontSize(FontSize::Medium);

Label* label5 = Label::create("Large");
label5->textStyle()->setFontSize(FontSize::Large);

Label* label6 = Label::create("XLarge");
label6->textStyle()->setFontSize(FontSize::XLarge);

Label* label7 = Label::create("XXLarge");
label7->textStyle()->setFontSize(FontSize::XXLarge);

mainContainer->add(label1);
mainContainer->add(label2);
mainContainer->add(label3);
mainContainer->add(label4);
mainContainer->add(label5);
mainContainer->add(label6);
mainContainer->add(label7);

// ...

Not applicable

You can use these two approaches to make your app's text more accessible. With each click of the text size icon, the font size increases. When the font has reached the maximum size, you can reset the font size to the smallest font size and start over again. Other controls that can be used to make text larger include a Slider.

Last modified: 2015-05-07



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus