针对辅助功能标签评估你的 App

Hi, I’m James, a software engineer in Accessibility. Today, I’m going to talk about how you can evaluate your app to add Accessibility Nutrition Labels to your app’s product page. Hi, I’m Lisa. I’m a designer and I also work in Accessibility. I’m going to talk about design and things you can do to make your app more accessible. In this session, we’ll explore how to evaluate your app for Accessibility Nutrition Labels. Lisa and I will introduce core principles of app accessibility and walk through each of the features you can indicate support for. Along the way, we’ll cover how you can design for Accessibility, test your app with VoiceOver and Voice Control, and deliver accessible media.

By the end of this session, you’ll know how to highlight your app’s accessibility with Accessibility Nutrition Labels.

At Apple, we believe that the best technology works for everyone. When you design your app with Accessibility, you open it up to so many more people. And when you build in support for assistive technologies like VoiceOver and Voice Control, you unblock access to your app.

Accessibility Nutrition Labels showcase the features your app supports on the App Store. This helps people to know whether your app supports the key features they rely on. To indicate support for accessibility features in your app, people should be able to complete all of the common tasks of your app.

Start by defining your common tasks. These are your app’s primary functionalities that people download your app for, plus functionality that is fundamental to using an app in general. This includes first launch experience, login, purchase, and settings. Define what people can do in your app.

After you identify your app’s common tasks, evaluate your app for each of the accessibility features available in Accessibility Nutrition Labels. Consider a testing strategy that evaluates each common task in your app with each feature. This strategy will help you discover which features are supported by your app and which ones are not supported yet. Make sure you test on every device that your app supports. This includes iPhone, iPad, Mac products, Apple Watch, and more.

If a feature is not relevant to your app's functionality, don't indicate support. It’s critical to accurately inform people how they can use your app. To ensure accuracy, consult the Accessibility Nutrition Labels documentation. Evaluation criteria are meant to standardize the user experiences an app must provide for that app to be considered as supporting a feature. This ensures that apps have consistent responses across the App Store. When you’re ready, you can add Accessibility Nutrition Labels. You’ll add them to your apps product page in App Store Connect.

All of your apps supported accessibility features will now appear on your product page.

At the center of Accessibility Nutrition Labels are core principles of app accessibility. These principles will help you evaluate each feature.

Hey James, this might be a great opportunity to use the app you and I are working on, Landmarks. Yeah, that’s a great idea. Why don’t you tell them about how we got started? App accessibility starts with design.

You want to design an interface that everyone can enjoy, regardless of how they interact with their device. Like James mentioned, it’s so important to get familiar with the accessibility features, turn them on, like Voice Control and Larger Text, and pay attention to what people might hear and see when using your app. And whenever possible, connect with the disability community. Testing with people who use accessibility features is one of the most effective ways to know how accessible your app is. Like me, for example, I’m legally blind due to a rare form of Macular Degeneration. This affects my central vision, causing everything to be blurry. To give you a better idea, imagine I’m out on one of my favorite hikes. I can see big objects like the trees, the rocks, the trail ahead, but I need to get really close in order to see details, like reading a sign. And when I use my iPhone, I rely on the largest text sizes to do everything, from reading, doing work, and personal tasks. In the disability community, we strongly believe there should be “Nothing about us without us.” People with disabilities should have full participation in the decisions that affect our lives. And there’s no better way to ensure the accessibility of your app than to bring in the people who will be directly impacted by it. And I can tell you firsthand, if an app is designed to support my experience as a blind person, I feel included as a valued customer.

That’s why Accessibility Nutrition Labels are so important. Let’s dive into the first set of features. Yes, let's get started.

This first set of features provides a great opportunity to apply accessible design.

Let's start with color. Color can enhance communication and help people understand information.

There should be a high enough contrast between foreground and background colors. This helps to ensure legibility of text and to help people find what they’re looking for. It is important to design your app using higher contrast color schemes.

If by default your app does not provide minimum contrast, check that it does when the Increase Contrast setting is turned on.

For our app, we intentionally designed using high contrasting colors, but we found some colors didn’t provide minimum contrast, so we selected alternate colors to support the Increase Contrast setting. And this applies to both light and dark appearances. After thoroughly testing the Landmark app’s common tasks for sufficient contrast, we didn’t find any other issues. I’ll plan on indicating support for sufficient contrast in the Accessibility Nutrition Labels. Up next is Dark Interface. People often use dark mode if they’re sensitive to light or prefer a darker background. Large white or bright areas on the screen can cause discomfort or even physical pain. My eyes are very sensitive to light so dark interfaces make it much more comfortable for me to read. If your app doesn’t already have a Dark Interface, make sure it does when the dark mode setting is turned on.

We’ve designed our app to support dark mode, but to make sure, we’ll complete some common tasks. We’ll also check with Smart Invert turned on. Smart Invert is an accessibility feature that reverses the colors in the interface. You want to make sure that colors in any media do not get inverted. Once we’ve confirmed that our app supports a mostly dark background, we can add Dark Interface to our Accessibility Nutrition Labels. Some people need to increase the size of text in order to read it. When designing your app, make sure people can increase the text size to at least 200% larger. Ideally, the text can grow even larger. Personally, I need 310%.

So, support text sizes larger than 200% if possible.

It’s important to also design a layout that allows the text to increase in size without any overlapping or severe truncation.

Allow enough space and additional lines to support the larger text sizes. For controls that cannot reasonably increase in size, you can review documentation for other design options.

One of the best ways to support Larger Text in your app is to use Dynamic Type. To learn more, check out the WWDC24 video "Get Started with Dynamic Type." If the text scales up to at least 200% throughout your common task in your iOS app, you can add Larger Text to your Accessibility Nutrition Labels.

Hey James, let's test our app.

That's a great idea. I have questions about how large text works for somebody who needs it. You and I have worked together for a while. I know that you rely on larger text every day. Is it OK if I ask questions? Absolutely.

I'll also document any issues we find. I already have larger accessibility text sizes turned on. and the text size is set to 235% on this iPhone. In the Landmarks app, I can already see that the text is bigger than the default size. One of the features of Landmarks is that it lets you group different landmarks into collections. We have an Accessibility Team collection already started to help us plan hiking trips. Hey, I know! Let’s update the Accessibility team collection. Sounds good. Maybe we can pick a location to take the team on the next hike. Perfect. Great, let’s check out the collections. First, I'll tap on the back button, and then I’ll tap on the collections button. Hey Lisa, I noticed the 2023 trip collection is a little bit misaligned. That’s definitely a bug, what do you think? Well, it’s not polished, but I can still read the collection name. I don’t think it’ll prevent us from indicating support for Larger Text, but we should take a note to fix the layout. I’ll write it down.

Actually, let’s take a deeper look.

Hmm, the description is truncated. We really should make that text wrap into multiple lines. I'll add it to the list of bugs.

I'll edit the collection.

Hold up. Why is the text in the description text field not growing? I'll check if the text can scroll.

Well, it doesn’t look like the description field grows to support the larger text sizes. While I still can scroll, it’s much more work. Lisa, now that we have some more information, What do you think? Honestly, all of those bugs make it difficult to get information about the collection. We really should fix those bugs before we indicate support for Larger Text. I agree. After we finish the rest of our common tasks, we'll look to developer documentation to find solutions for the bugs we found. We can make text fields grow to accommodate larger text and allow for text to wrap to the next line instead of truncating.

For now, these issues mean we will not indicate support for Larger Text in Landmarks. Once we fix these issues and test our other common tasks, we can come back to App Store Connect and indicate support later.

Let's talk more about color. When designing using color, it’s important to consider that people can perceive color differently. Many apps use color to convey information. For example, some apps use red or green to communicate a status like success or failure. People who are colorblind might miss out on this status. When designing, use shapes, icons, or text in addition to color to communicate important information. You can also let people customize how color is used in your app. We’ve designed our app using color and icons to draw attention to important elements like the trash button. This means we do not rely on color alone for these elements.

To make sure we meet evaluation criteria, we’ll walk through common tasks paying attention to the use of color.

Once we’ve confirmed that color isn’t the only means to communicate information in the Landmarks app, we can add Differentiate Without Color Alone to our Accessibility Nutrition Labels. Next, let’s talk about motion.

Motion can enrich an app experience, but it’s important to consider that certain types of motion can cause severe dizziness or nausea. This can prevent people from using your app. Triggers can include: zooming or sliding transitions, flashing or blinking, animations that play automatically, or parallax effects.

To help with this, people can turn on the reduced motion setting.

To support this setting, go through your common task and identify any animations that are known triggers. You can make changes to these animations instead of removing them.

If your app doesn’t have any of these known triggers to begin with, you can indicate support for Reduced Motion. To evaluate our app, we’ll complete common tasks paying close attention to any motion. We’ll check documentation for guidance for any problematic animations or animations we’re not sure about.

Once you’ve confirmed that motion triggers have been removed, you can add reduced motion to your Accessibility Nutrition Labels.

In addition to accessible design, you can build your app with accessibility APIs, make it possible for people who rely on assistive technologies to enjoy your app.

Let’s next focus on two of these technologies, Voice Control and VoiceOver. Voice Control is one of Apple’s assistive technologies that makes it possible for people to control their devices through speech. People can use Voice Control to tap, swipe, and more using voice commands. It’s important to make sure that Voice Control can interact with any part of your app that responds to touch. Items like back buttons and search fields. Voice Control relies on your app providing metadata to the accessibility element for the view. For example, the accessibility label modifier on a button specifies the name of that button. People can speak this name to tap it using Voice Control. We’re going to focus on how to evaluate your app for voice control support, but you should refer to developer documentation for detailed information. Speaking of which, I’m sure people will need to find landmarks using voice control. Let's test our app. You got it.

We’re going to make sure people can complete common tasks using only voice commands. After I turn on voice control, I'll open the Landmarks app. Then I'm going to speak show names and make sure items have labels that are descriptive and accurate. I’ll complete common tasks using voice control. Where it makes sense, I’ll use commands for scrolling, dragging, and other interactions. It’s important that I only use voice control commands and never have to use touch or the cursor so that people who rely exclusively on voice commands can navigate the features of our app. Once you’ve confirmed people can use your app through voice control commands, you can add Voice Control to your Accessibility Nutrition Labels. We’ll talk about VoiceOver next. The good news is that the API work you’ve done for Voice Control will support VoiceOver as well.

VoiceOver is one of Apple’s assistive technologies that allows people to navigate an interface without needing to see the screen.

People can use a gesture or a keyboard command to move VoiceOver focus around the interface. When focus moves to a button, VoiceOver speaks the name of the button. And likewise, when focus moves to text, VoiceOver speaks the text. And then, with another gesture or keyboard command, VoiceOver can activate the focused item. Lisa, I’d love your help evaluating landmarks with VoiceOver. I know how assistive technologies work, but I’m particularly interested in how you use VoiceOver. I often use VoiceOver when I can’t see the details on the screen. Makes sense. Is it cool if I ask more questions while we work? - Absolutely. - I appreciate it.

At a high level, I wanna make sure people can complete common tasks using VoiceOver commands.

I’ll start by turning VoiceOver on using the Accessibility Shortcut.

“VoiceOver On, Landmarks, toggle sidebar, button.” You can hear VoiceOver speak, “VoiceOver On”, and then the name of the first button. This is the right place to start exploring. With VoiceOver, how do you understand the structure of an app? I swipe right to move VoiceOver focus to each button.

“Search. Search field.” “ Show badges, button.” “Featured landmark. Mount Fuji, button.” “Actions available.” As focus moves to each button, I can hear the name and the element type. This tells me what it is and what it can do.

To understand the layout of the app, I can drag my finger across the screen.

“Sahara Desert, button.” “Serengeti, button.” “Sahara Desert, button.” This lets me know that Sahara Desert is left of Serengeti and the other way around.

Sounds like it’s important to consider that VoiceOver changes how people navigate. People use touch to move focus and then interact. Now, let’s use VoiceOver to add Landmarks to the Accessibility Team collection. I know there’s usually a sidebar on the left. I’ll use VoiceOver to find and activate it.

“Africa.” “Mount Everest, button” “Wulinguan, button.” “Mount Fuji, button.” “Asia.” “Featured landmark, Mount Fuji, button.” “Show badges, button.” “Search, search field.” “Toggle sidebar, button.” “Toggle sidebar, button.” Now I’ll swipe right until I find the Collections button.

“Sidebar, Landmarks, button.” “Map, button.” “Collections, button.” Ah, there it is. I'll double tap to activate it.

“Selected, Collections.” VoiceOver confirmed that the Collections button is activated, and now we're in the Collections view. Let’s find and open the Accessibility Team collection. First, I'll close the sidebar.

“Map, button.” “Landmarks, button.” “Toggle sidebar, button.” “Toggle sidebar.” “Search, search field.” “Show badges, button.” “Favorites.” “Sahara Desert, button.” “South Shetland Islands, button.” “Rocky Mountains, button.” “Uyuni Salt Flat, button.” “My Collections.” “Accessibility Team, three items, button.” Let's open this.

“Accessibility Team.” Now, let’s review what landmarks we’ve added already.

“Places the Accessibility Team can go for team hikes.” “Grand Canyon, button.” “Niagara Falls, button.” “Joshua Tree, button.” “Joshua Tree, button.′ “Actions available.” OK, Joshua Tree is the last landmark. Pretty good list. Now, let’s add Muir Woods to our collection. I'll find the edit button. “Niagara Falls, button.” “Grand Canyon, button” “Places the Accessibility Team can...” “Accessibility Team” “Search, Search field’ “Edit, button” “Edit” “Selected, selected, button” “Search, search for your...” “Title” “Accessibility Team” “Description” Places the Accessibility...” “Landmarks” “Select, button” “Select landmarks heading” “Selected. Select Asia, heading. “Mount Fuji.” In order to move through this list quickly, I’ll scroll using a three-finger swipe up.

“Page two of five.” “Page three of five.” Now let’s add Muir Woods to the collection. “Kirchufel Mountain.” “North America, heading.” “Selected, Grand Canyon.” “Selected, Niagara Falls.” “Selected, Joshua Tree. ” “Rocky Mountains.” “Monument Valley.” “Muir Woods.” Ah, there it is. Let's add this to our collection. “Selected. Muir Woods.” Thank you, Lisa, that’s really insightful. That helps add context for how VoiceOver users will use Landmarks after we ship. Lisa, I’ve got to practice these gestures. Do you have any tips? Well, there are interactive tutorials and settings that will teach you how to use VoiceOver. We really should talk to people who rely on VoiceOver until we get a variety of feedback from people who use VoiceOver regularly. Sometimes, we don’t know if a common task in our app is uniquely challenging until we get that feedback.

We’ll also collect feedback from internal testers and finish evaluating all of our other common tasks with VoiceOver. We’ll indicate support if there are no other issues found.

So far, we’ve talked about design decisions you can make and assistive technologies you can support to help people enjoy your apps. You can also tell people you support media accessibility through Accessibility Nutrition Labels. Captions provide text descriptions of dialogue and other audible content while media plays.

Captions make it possible for the deaf and hard of hearing to get critical information like speech, nonverbal communication, music, and sound effects. Make sure that people can turn on captions for video or audio content. Once you’ve confirmed your app provides captions for content, you can add Captions to your Accessibility Nutrition Labels. Lisa and I confirmed something interesting when we tested Landmarks for caption support. After we completed common tasks, we realized our app doesn’t have any video or audio only content.

In this case, we aren’t going to indicate that Landmarks supports Captions. That's okay. This accurately describes the features that people will expect to be available while using the app.

Audio Descriptions provide information between natural pauses in the main audio of media that describes to viewers what’s happening during visual content. Make sure that people can find content that includes audio descriptions. For example, most video streaming service apps will show an AD icon. If people can find and turn on audio descriptions in your app, you can indicate support for them. Once you’ve confirmed your app provides Audio Descriptions, you can add this feature to Accessibility Nutrition Labels. Like Captions, Landmarks doesn’t offer any content requiring Audio Descriptions, so we won’t indicate support for Audio Descriptions.

I think we’re ready to let everyone know how accessible our app is. In App Store Connect, you can add features to the Accessibility Nutrition Labels on your product page. You can also add a link to your website to provide additional details about your app’s accessibility. Let’s check out how this works for Landmarks. We’ve learned a lot about our app Landmarks by evaluating common tasks for each feature.

We’ve verified that our app supports Sufficient Contrast, Dark Interface, Differentiate Without Color Alone, Reduced Motion, Voice Control, and VoiceOver. We found some issues with Larger Text, but we decided to fix those before we add that to our Accessibility Nutrition Labels. And we’ve confirmed that Closed Captions and Audio Descriptions aren’t relevant to our app, so we won't add those.

We’ll go to our product page in App Store Connect. We’ve selected the supported features for the Accessibility Nutrition labels. We also added a link to our Accessibility website. And now we're ready to publish.

I can’t wait for people to use the Accessibility Nutrition labels when deciding to use our app. We’re excited to make it easier to share the great work you’ve done to make your apps accessible. You can review developer documentation and start evaluating your apps today. Remember to partner with people who need accessibility features. Take the time to learn how to use features like VoiceOver and Voice Control. Those of us in the disability community will quickly know that we can also enjoy your app. So don’t hesitate to start highlighting your app’s accessibility.

In your app, consider accessibility as early as the design phase. Test each accessibility feature through the common tasks of your app to determine which features you’ll indicate support for. When you’re ready, showcase your app’s accessibility support by adding Accessibility Nutrition Labels to the product page.

To learn more about evaluation criteria and ways you can improve your app’s accessibility experience, check out the documentation for Accessibility Nutrition Labels.

Thanks for taking the time today. Hey Lisa, now that we know how accessible the Landmarks app is, maybe we can take the Accessibility Team out for a hike. Sounds like a blast!