Airo Global Software

Think Beyond Future !

Beginning with Audio Graphs in Swift and iOS 15

- Posted in SwiftUI by

Apple is well-known for its ease of use. With the introduction of the new Audio Graphs feature in iOS 15, iOS became even more accessible for visually impaired users.

This blog will teach you everything you need to know to start using Audio Graphs in your iOS app. We'll go over what Audio Graphs are and how we can incorporate them into our apps, as well as how to define axes and data points.

By the end of this blog, you'll be prepared to make your app more accessible than ever before and assist more people in using it.

According to Apple's session Bring accessibility to charts in your app.

What are Audio Graphs?

We will not look at how to create and use graphs in this blog. There are numerous effective methods for presenting charts and graphs to users, ranging from simple self-build solutions to ready-to-use frameworks such as charts. Instead, we'll work with a sample set of data points and concentrate on adding the Audio Graphs feature.

The displayed page also includes additional information about the data series, such as a summary, features, and statistics. All of this information will be read aloud to the user by VoiceOver.

Implementing Audio Graphs

The first step is to make the view controller displaying the chart conform to the AXChart protocol. This protocol is defined as follows: There is only one requirement: the property varies accessibility.

AXChartDescriptor, A descriptor of this type contains all of the information required to display the Audio Graph page, such as the title, summary, and series. A chart descriptor is made up of additional descriptors for the axes and data points. Let's take a closer look at these classes before combining them to make an AXChartDescriptor.

Describing the Axes

AXNumericDataAxisDescriptor and AXCategoricalDataAxisDescriptor are the two types of axis descriptors. Both implement the same AXDataAxisDescriptor basis protocol, which cannot be used directly. Both types of descriptors can be used on the x-axis. However, only a numeric descriptor can be used to define the y axis. This makes sense because the graph's points can only be numbers, whereas the x values can be both points and categories. Let's begin by making an x-axis, which can be done as follows:

private var xAxis: AXNumericDataAxisDescriptor {

   // 1

   AXNumericDataAxisDescriptor(

       title: "The x axis",

       // 2

       range: (0...9),

       // 3

       gridlinePositions: [],

       // 4

       valueDescriptionProvider: { (value: Double) -> String in

           "\(value)"
      }
   )
}
  • For the time being, we'll create a numerical axis with an example title. For a real-world app, you should use a more descriptive title, as this is what VoiceOver will read.
  • An axis must also be aware of its range. We'll create 10 data points in a later step, so the range in this example is (0...9). When creating your points based on real-world data, you can specify the number of values to display in the graph.
  • Finally, we can pass in an array of points to display grid lines. However, regardless of the values entered, this appears to have no effect on the created Audio Graph detail page.

Please let me know if you have any additional information about this property in the comments!

  • Finally, an axis must understand how to convert data points into strings that can be read by the user. This is accomplished by providing a closure that converts a Double value to a String. We just embed the value in a string in this case, but it could also be used for matters or other transformations.

The y axis is created in the same manner as the x-axis. It also requires a title, range, and gridline. Positions and with DescriptionProvider:

private var yAxis: AXNumericDataAxisDescriptor {

   AXNumericDataAxisDescriptor(

       title: "The y axis",

       range: (0...9),

       gridlinePositions: [],

       valueDescriptionProvider: { (value: Double) -> String in

           "\(value)"

       }
   )
    )

Describing the Data Points

The graph points are encapsulated in an AXDataSeriesDescriptor, which represents a single data series. An Audio Graph can have multiple data series, but for the time being, we'll only use one. An AXDataSeriesDescriptor is made up of a name, a boolean flag indicating whether or not the data series is continuous, and an array of AXDataPoint objects representing the actual points. A point has an x-axis value called xValue at all times. The y axis value, yValue, is optional. A point can also have a label to give the data point a name, as well as additionalValues, which can be numerical or categorical values for this data point. Given some example values, here's how to make an AXDataSeriesDesciptor:

private var series: [AXDataSeriesDescriptor] {

   // 1

   let yValuesSeries = [4.0, 5.0, 6.0, 3.0, 2.0, 1.0, 1.0, 3.0, 6.0, 9.0]

   let dataPointsSeries = yValuesSeries.enumerated().map { index, yValue in

       AXDataPoint(x: Double(index), y: yValue)
   }

   // 2

   return [

       AXDataSeriesDescriptor(

           name: "Data Series 1",

           isContinuous: true,

           dataPoints: dataPointsSeries

       )
   ]
}
  • For the y axis, we create data points with an array of values. The value of the x-axis corresponds to the index of a number in the array.

  • We then use the array of AXDataPoint objects we just created to wrap them in an AXDataSeriesDescriptor. We use true for isContinuous to display a single coherent graph and an empty string as the name for this data series.

  • To display all points separately, use false for isContinuous. Check it out for yourself or wait for the next section, where we'll go over more options in depth.

Putting all Descriptors together

We've made two descriptors for the axes and one for a data series. We are now ready to combine them to form one AXChartDescriptor. Here's how we can go about it:

// 1
var accessibilityChartDescriptor: AXChartDescriptor? {

   // 2

   get {

       AXChartDescriptor(

           title: "Example Graph",

           summary: "This graph shows example data.",

           xAxis: xAxis,

           yAxis: yAxis,

           series: series

       )

   }

   // 3
   set { }
}
  • As previously stated, in order to implement the AXChart protocol, we must provide the property accessibility ChartDescriptor of type AXChartDescriptor.
  • To do so, we specify a title and a summary that will be displayed and read to the user on the Audio Graphs detail page. We also pass in the axis and data series descriptors that we created earlier.
  • We leave the setter empty because this property will never be set from anywhere else.

Using Audio Graphs

Let's take a look at our audio graph in action. It can be intimidating to use VoiceOver if you are not used to it. A double or triple tap on the iPhone's back is the best way to enable or disable it. Scroll down to Back Tap in Settings > Accessibility > Touch. A variety of actions can be defined here to be triggered by a double or triple back tap.

Next, launch your app and navigate to the graph for which you have enabled the Audio Graph feature. Enable VoiceOver and swipe until the graph is selected.

If you're not sure how to use VoiceOver, you can consult Apple's VoiceOver gesture guide or raywenderlich.com's iOS Accessibility: Getting Started.

Let's take a look at our audio graph in action.

It can be intimidating to use VoiceOver if you are not used to it. A double or triple tap on the iPhone's back is the best way to enable or disable it. Scroll down to Back Tap in Settings > Accessibility > Touch. A variety of actions can be defined here to be triggered by a double or triple back tap.

Next, launch your app and navigate to the graph for which you have enabled the Audio Graph feature. Enable VoiceOver and swipe until the graph is selected.

If you're not sure how to use VoiceOver, you can consult Apple's VoiceOver gesture guide or raywenderlich.com's iOS Accessibility: Getting Started.

Open the Audio Graph detail page — this is the result of our efforts!

Swipe right until the Play button appears, then double-tap to listen to the Audio Graph. It's easy to see (or hear) why this new feature improves graph accessibility for visually impaired users so much.

Where To Go From Here

As demonstrated in this tutorial, Apple made it very simple to add audio representations to existing graphs. All you have to do is wrap your data points in an AxDataSeriesDescriptor and add some metadata.

In the following section, we'll look at how adaptable they are. We'll go over various types of axes and show more than one data series. This section will be published next week, so stay tuned for more information!

Audio Graphs can help you make your apps more accessible to a wider audience. This will provide your users with a better experience.

If you have questions or remarks, please let us know in the given email below. Airo Global Software will be your digital partner.

E-mail id: [email protected]

enter image description here

Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/