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 all provide new opportunities to make your mobile apps more accessible.

Pairing your app with assistive technologies

An assistive technology device or assistive technology application can respond to the information it receives from an accessible application. 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 onscreen, 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.

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

Accessible reading experience

The following is a QML sample that 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.2

// When necessary, the Page element can use the  
// accessibility property to identify itself
// to the screen reader.
Page {
    accessibility.name: "Data input page"
    
    // When necessary, the Container element can use 
    // 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
        }
    }
}

UI controls, such as sliders, should identify themselves to screen readers, along with their present value on the slider scale. This should happen without any special programming or effort. 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. Once you set the accessibility property of your UI controls, then your app's UI design will become 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 within the image's alt text that tells the user this information. Such a description could read "Click this company logo for more information about our organization".

Another approach is to partner your images with text. This is particularly useful in buttons where an image is placed directly on the button.

Accessible buttons partnered with text.

Once 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 helps the user 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 which 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 QML 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 can use these two approaches to make your app's text more accessible. With each click of the text size icon, then 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: 2013-12-20



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

comments powered by Disqus