Accessibility on iOS: Make your app more accessible using UIScrollView

Today is global accessibility awareness day. Every third Thursday of May each year is a day to get everyone talking, thinking and learning about digital inclusion of people with disabilities.

On that note today’s post is about making iOS apps more accessible. There are many forms of disabilities however in this post we will focus on blind and visually impaired users.

We will create a simple app with a single screen. The screen will display the recipe and method of one of my favourite dishes: chicken paella. For this post Swift knowledge is not required. In fact we will not looking at any code at all. We will build our app only through the interface builder on Xcode.

We will learn:

  • how to enable views for iOS’s screen reader named VoiceOver
  • how to make screens adapt to large texts using UIScrollView

Let’s cover why you should make you app more inclusive before creating the app. Feel free to skip any sections as required.

Why you should make your app or framework more inclusive

Ethics 😇

As software engineers we should make sure we include everyone. It is part of many of our codes of ethics. Check out IEEE Computer Society Code of Ethics. Moreover there are two types of disabilities:

  1. Permanent
  2. Temporary

Around 20% of the population of the UK and US are permanently disabled. That statistic does not take into account temporary disabilities. Any one of us can be temporarily disabled. For example a colleague of mine recently broke his arm. He shared his story as well as a few tricks and tips that not only helped him become more productive during his temporal disability but also when he recovered. It can happen to any of us.

Legal 👔

Legally we must also make our software more inclusive. It is stated by laws such as:

Here are two lawsuits against companies for not making there product and services inclusive:

Comercial 💰

There are nearly 14 million people in the UK with disabilities and nearly 40 million people in the US. The numbers go up when we consider those that not are considered disabled. Some people rely on larger font text size features without suffering an officially recognised disability. Others may suffer from a temporary disability.

Additionally the world population is ageing 📈 and 44% of adults over state pension age suffer from disabilities. We are looking at a future where more and more people will require the use of features which are currently considered as accessibility features.

So there are plenty of commercial opportunities by making your app accessible 💵.

Chicken paella recipe app 🥘

In this section we will:

  1. Create a new Xcode project
  2. Insert a scroll view
  3. Insert the recipe steps
  4. Insert the title and description
  5. Insert the paella image

Let’s create an app that displays chicken paella recipe 😋.

1. Create new project

Open Xcode and create a new project. From menu select File > New > Project….

Create a new Xcode project

From template search and select for Single View App. Click Next.

Search and select Single View App from template

Name the project ChickenPaellaRecipe. Select Swift as development language. Make sure that all checkboxes are unticked.

New project options

Create your project at any path that you desire.

The project created from template will provide you with a running app with a single blank screen.

2. Insert a scroll view

Let’s add a scroll view to the app. Open Main.storyboard. Main.storyboard contains a single screen. Here we can add labels, buttons or other view elements to our screen.

From the top left corner of Xcode click on library.

Click on library

Once the search bar appears, search for Scroll View.

Search for Scroll View

Next drag and drop the scroll view onto the blank screen. And then align the edges of the scroll view to the screen. Click on the Add New Constraints button at the bottom right corner of the storyboard pane.

Align the edges of the scroll view to the screens edges

The scroll view allows us to display content which is larger than the space its provided. It allows the user to scroll through the content that doesn’t fit a given space. In this case the space is the whole screen.

Next let’s add a view that will be the container. In this container we will later add an image and labels.

Open the library again and search for UIView. Drag and drop View into the scroll view. Your view hierarchy should look like this:

View hierarchy

Let’s add the constraints to the container view. Let’s pin all edges of the container view to the scroll view. This is the same as we did earlier when we pinned the scroll view edges to the screen’s.

Next control + drag the container view on the view hierarchy to the scroll view.

Control + drag the container view to the scroll view

Next select Equal Heights and Equal Widths from the pop-up menu.

Next from Xcode menu select View > Inspectors > Show Size Inspector. On the right hand side pane double click the Equal Height to: Superview constraint. Change the constraint relation to Greater Than or Equal.

Change the height of scrolls view content to be equal or larger than the scroll view space

The constraints just added makes sure that the container view takes up all the space provided by the scroll view. The scroll view can scroll both vertically and horizontally. We only want the contents to scroll vertically when the text grows. Thus the content view must have the same width as the scroll view and height equal to or larger than the scroll view.

We are all set for our scrolling behaviour next let’s add the actual content the user will see.

3. Insert the recipe steps

In this section we will add the recipe and method on how to make chicken paella.

Open the library. Drag and drop two UILabels onto the scroll view’s content view. Drag them so they are one on top of the other. Next select them both (Command + click on the labels). And then embed them in a stack view.

Embed the two labels in a stack view

The top label will be the step outline and the bottom label will be the step description.

Select the bottom label and then open Attributes Inspector (View > Inspectors > Show Attributes Inspector). Next change the Lines attribute value from 1 to 0; which means it is undefined number of lines. Some of our steps will have 1 line some of them will have 2. If the user decides the text size to be larger than normal then it can cover more lines than we anticipate. Set the font to Body.

Now select the top label. Let’s change the font to Title 1.

Settings the font for step title

We will have an easy three step paella. Copy and paste the steps twice. Next let’s embed the stack views inside another stack view. Select all three and from menu select Editor > Embed In > Stack View.

Embed the three stack views into another stack view

Next open the Attributes Inspector and set the value for Axis attribute Vertical.

Configure the stack view to be vertical

Let’s add the actual recipe to the steps now. Select the first label and set its text value to Step 1 in the Attribute Inspector. Name the third and fifth labels Step 2 and Step 3 respectively.

Filling in the contents for the first, third and fifth labels

Set the second label text to:

Heat oil in a paellera. Once hot enough add chicken meat after seasoning with salt. Sauté for a little while. Add green vegetables of your choice such as bell peppers. Add garlic and grated tomatoes. Sauté until soft.

Set the fourth label text to:

Add fresh chicken stock or alternatively water, turmeric powder and rosemary to the mix. Boil to broth. Remove the rosemary once flavour has infused.

Set the sixth label text to:

Add rice and simmer. Keep adding chicken stock or water as needed until rice is cooked.

Select the stack view containing all three stack views. Select from menu View > Inspectors > Show Attributes Inspector. Set the Distribution attribute to Equal Spacing.

Align the left, right and bottom edges to the scroll’s view container view with a 25 pixel margin.

Select the stack view containing the other three stack views
Align the left, right and bottom edges to the container view with 25 pixel margin

4. Insert the title and description

Let’s drop in two more labels into our screen. One for the recipe title and one for the description. Align them on top of each other. And once again let’s embed them in vertical stack view.

  • Editor > Embed In > Stack View
  • View > Inspectors > Show Attributes Inspector
  • Change the Axis value to Vertical.
  • Change the Alignment value to Center.

Select the top label and open the Attributes Inspector. Set the text to Chicken Paella Recipe, the Lines to 0 , the Font to Large Title and Alignment to centre.

Recipe title label view configuration

For the second label set the Lines attributes to value 0, Alignment to centre, the Font to Body and the text to:

Paella is a Valencian rice dish that has ancient roots but its modern form originated in the mid-19th century in the area around the Albufera lagoon on the east coast of Spain adjacent to the city of Valencia.

Drag the new stack view on top. of the steps stack view. Next align the left, right and bottom edges with values 25, 25 and 10 respectively.

5. Insert the paella image

Last step in this tutorial.

Download this image of a paella I made two summers ago. In Xcode select from menu View > Navigators > Show Project Navigator. Drag and drop the downloaded image under the ChickenPaellaRecipe folder.

When the Xcode file adding options prompt appears, make sure Copy items if needed is checked. Also make sure ChickenPaellaRecipe app is checked.

Add file to project options

Open library, search for “Image View” and, drag and drop it on top of the title and description stack view. Select the image view and in the attributes inspector set the image to anurags_massive_summer_paella.JPG. Make sure that the Content Mode attribute has Aspect Fit value. This will ensure that our image is not pixelated.

Insert image view with paella image

Next from menu select View > Inspectors > Show Identity Inspector. On the right hand side pane under Accessibility section check Enabled and set the value for label as “Paella”. Now the image can be read by VoiceOver.

Let’s set the aspect ratio of the image view to the one of the image. Control + drag the image view into itself. On the pop-up select Aspect Ratio.

Select the image view. Open View > Inspectors > Show Size Inspector and under Constraints section double click on the only constraint. Now change the multiplier to 4:3 which is the image’s aspect ratio.

Next pin the edges of the image view. Set 25 margin for the top, left and right edges, and 10 for the bottom edge.

And that’s all! 🎉 Run the app and the test out the VoiceOver feature (Settings > General > Accessibility > VoiceOver). You will see that the image is read by VoiceOver to the user. Also test out large font size (Settings > General > Accessibility > Larger Text) and see how previously our text fitted comfortably into our screen (iPhone X, XR, XS, XS Max) now doesn’t fit the given space. Thanks to the scroll view the user is able to read the whole text in their given text size setting.

VoiceOver and larger text

Summary

In this post we have learnt:

  • why we should make our apps more inclusive
  • adapting our apps to larger text sizes using UIScrollViews
  • making other UI elements accessible such as UIImage

Final notes

In this post we made an image accessible. However we should pose the question whether we should make all elements accessible or not. In this case the paella image was not needed for the user to follow the recipe. So we could argue that there was no need to make the image accessible in the first place.

There are plenty of other disabilities we could adapt our apps for. However I would recommend you to consider the user experience from different perspectives when building the feature rather than as an after thought.

If you liked this post please clap to show your support. Stay tuned for more posts on iOS development! Follow me on Twitter or Medium!