SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
Accessibility for iOS
Raising the bar



Session 210
Chris Fleizach
iOS Accessibility



These are confidential sessions—please refrain from streaming, blogging, or taking pictures
Accessibility
Using technology to overcome challenges
• Computer-controlled wheelchairs
Accessibility
Using technology to overcome challenges
• Computer-controlled wheelchairs
• Assistive communication
Accessibility
Using technology to overcome challenges
• Computer-controlled wheelchairs
• Assistive communication
• Screen readers
• Many others
iOS Accessibility Features
VoiceOver
iOS Accessibility Features
Zoom
iOS Accessibility Features
Zoom
iOS Accessibility Features
AssistiveTouch
New in iOS 6
Guided Access
• Lock into a single App
• Control access to
 hardware features
New in iOS 6
Made for iPhone hearing aids
• High quality wireless audio
• Low power consumption
• Adjust hearing aid
  directly from iPhone
• Partnering with top
  hearing aid manufacturers
New in iOS 6
VoiceOver and Maps
• Discover roads and
  points of interest
• Determine intersections
• Integration with
  turn-by-turn directions
New in iOS 6
Enhancements
• Custom vibrations for
  all notifications
• VoiceOver and Zoom
• Speak Selection improvements
Demo
Speak Selection
What You’ll Learn
App accessibility
• UIAccessibility API
  ■ Basic
  ■ New




• In-depth UIAccessibility
  ■ Make anything accessible
  ■ Things you might not know
UIAccessibility


VoiceOver            What’s the element
                        at a point?
                         UIAccessibility
            Label,
            Frame,
              …              UIKit
Adding Accessibility to Your App

• Simple
• A lot comes for free
• “Just add labels”
UIAccessibility API: Attributes

• Attributes convey information
• VoiceOver transforms that information

 UIImageView *view = [[UIImageView alloc] initWithImage:image];




            "apple_logo512x512, image"
UIAccessibility API: Attributes

• Attributes convey information
• VoiceOver transforms that information

 UIImageView *view = [[UIImageView alloc] initWithImage:image];
 view.accessibilityLabel = @"Apple Logo";




                   "Apple logo, image"
Common Accessibility Attributes

#import <UIKit/UIAccessibility.h>

@property BOOL isAccessibilityElement
  ■ Return YES to make VoiceOver see this element
  ■ Default is YES for UIKit controls



@property(copy) NSString *accessibilityLabel
  ■   A textual representation of the element
Common Accessibility Attributes

@property(copy) NSString *accessibilityHint
  ■ Optional
  ■ Provides more information to aid VoiceOver users



@property UIAccessibilityTraits accessibilityTraits
  ■ Defines behavior
  ■ Bitmask of integers
Accessibility Traits


                       Static Text




         Image


                       Button
     Adjustable
Accessibility in Interface Builder
Change static accessibility values




                                     isAccessibilityElement
accessibilityLabel
                                     accessibilityHint
accessibilityTraits
Adding Accessibility in Code
If accessibility values do not change, use setters
- (void)awakeFromNib {

    MyControl *control = [[MyControl alloc] initWithFrame:frame];


    control.isAccessibilityElement = YES;
    control.accessibilityLabel = @"Play";


    [window addSubview:control];
}
Adding Accessibility in Code
If accessibility attributes change, override methods
@implementation ProductView

- (BOOL)isAccessibilityElement {
    return YES;
}
- (NSString *)accessibilityLabel {
     if (isMac())
         return @"Mac";
     else if (iPhone())
         return @"iPhone";
     ...
}
@end
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
  UIAccessibilityPostNotification(
     UIAccessibilityLayoutChangedNotification,
     nil);
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
  UIAccessibilityPostNotification(
     UIAccessibilityLayoutChangedNotification,
     nil);

• When the screen changes, VoiceOver should “reset”
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
  UIAccessibilityPostNotification(
     UIAccessibilityLayoutChangedNotification,
     nil);

• When the screen changes, VoiceOver should “reset”
Accessibility Notifications
Tell VoiceOver something happened
• When a few items change, VoiceOver should “update”
  UIAccessibilityPostNotification(
     UIAccessibilityLayoutChangedNotification,
     nil);

• When the screen changes, VoiceOver should “reset”
  UIAccessibilityPostNotification(
     UIAccessibilityScreenChangedNotification,
     nil);
Demo
Introduction to VoiceOver and UIAccessibility
New API in iOS 6

• Apps can become very accessible with basic attributes
• But, we want more!
• New API in iOS 6 allows
  ■ New ways to interact with VoiceOver
  ■ New attributes and traits

  ■ Custom text views based on UITextInput
New VoiceOver API

- (BOOL)accessibilityPerformMagicTap
■   Control what happens when user does two-finger double-tap
New VoiceOver API
• Move VoiceOver focus
  ■   Use the element as the argument when posting
        UIAccessibilityLayoutChangedNotification or
        UIAccesibilityScreenChangeNotification


      UIButton *moveToButton = ...


      UIAccessibilityPostNotification(
         UIAccessibilityScreenChangedNotification,
         moveToButton);
New VoiceOver API
Callbacks from UIAccessibilityAnnouncement

• Be notified when an announcement finishes
■   Listen on the NSNotificationCenter for
     ■   UIAccessibilityAnnouncementDidFinishNotification

■   Then look at the userInfo to gather
     ■ UIAccessibilityAnnouncementKeyStringValue
     ■ UIAccessibilityAnnouncementKeyWasSuccessful
New Accessibility API

@property BOOL shouldGroupAccessibilityChildren
■   Group items together to control the order VoiceOver visits elements
New Accessibility API

UIAccessibilityTraits UIAccessibilityTraitHeader
■   New trait in order to mark elements as a header
Demo
Using new API
Into the Deep End
What do you do if there is no view?
• If drawing happens with a UIView
  ■ drawAtPoint:
  ■ drawRect:

  ■ OpenGL




• Make an array of
  UIAccessibilityElement’s
• One for each distinct user
  interface object
Into the Deep End
    What do you do if there is no view?
- (NSArray *)roads {
   if (roads != nil) {
      return roads;
   }

    roads = [[NSMutableArray alloc] init];
    UIAccessibilityElement *road =
      [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self];
    road.accessibilityLabel = @"Infinite Loop";
    [roads addObject:road];
    return roads;
}
Into the Deep End
What do you do if there is no view?
• Implement UIAccessibilityContainer protocol
- (NSInteger)accessibilityElementCount {
    return self.roads.count;
}

- (NSInteger)indexOfAccessibilityElement:(id)element {
    return [self.roads indexOfObject:element];
}

- (id)accessibilityElementAtIndex:(NSInteger)index {
    return [self.roads objectAtIndex:index];
}
Into the Deep End
Get the right frame
• By default, UIAccessibilityElement’s do not have a “frame”
• You must set the frame in “screen” coordinates
 UIAccessibilityElement *road =
   [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self];
 // Get the frame in "view" coordinates.
 CGRect viewFrame = CGRectMake(0, 100, 50, 100);

 // Convert frame to "window" coordinates.
 viewFrame = [self convertRect:viewFrame toView:[self window]];

 // Convert frame to "screen" coordinates.
 viewFrame = [[self window] convertRect:viewFrame toWindow:nil];

 road.accessibilityFrame = viewFrame;
Into the Deep End
Using announcements
• Announcements allow for immediate feedback
• Example: Moving things
Into the Deep End
Using announcements
#define Post UIAccessibilityPostNotification

- (void)continueTracking:(id)touch {

if (isNearEdge(touch))
   Post(UIAccessibilityAnnouncementNotification,
     @"Nearing %@ border", borderLabel(touch));

if (isOnEmptySpace(touch))
   Post(UIAccessibilityAnnouncementNotification,
     @"On empty space. Lift finger to cancel");

if (isOnDifferentIcon(touch))
   Post(UIAccessibilityAnnouncementNotification,
     @"On top of Artists. Lift finger to replace");

}
Into the Deep End
Using direct interaction
• Example
  ■ Musical instruments
  ■ Explore elements within direct touch area
Into the Deep End
Using direct interaction
@implementation PianoView

- (id)initWithFrame:(CGRect)frame {
    ...
    KeyView *aKey = [KeyView new];
    aKey.isAccessibilityElement = YES;
    aKey.accessibilityLabel = @"A";
    ....
}

- (UIAccessibilityTraits)accessibilityTraits {
    return UIAccessibilityTraitAllowsDirectInteraction;
}

- (BOOL)isAccessibilityElement {
    return YES;
}
Demo
Into the deep end
Things You Might Not Know
Language selection
• Control the language used for the entire App
[[UIApplication sharedApplication] setAccessibilityLanguage:@"fr-FR"]



• Control the language for a range within a string
NSAttributedString *attr =
[[NSAttributedString alloc] initWithString:@"こんにちは, My Friends"];


[attr addAttribute:@"accessibilityLanguage" value:@"ja-JP"
     range:NSMakeRange(0, 5)];

[element setAccessibilityLabel:(id)attr];
Things You Might Not Know
Controls without views
• UISegmentedControls
NSString *title = @"∫";
title.accessibilityLabel = @"Integral";

UIImage *image = [UIImage imageNamed:@"GearImage.png"];
image.accessibilityLabel = @”Settings”;

[segmentedControl insertedSegmentedWithTitle:title];
[segmentedControl insertedSegmentWithImage:image];
Things You Might Not Know
Controls without views
• UITableView index titles
- (NSArray *)sectionIndexTitlesForTableView:(id)tableView {

     NSString *a = @"A";
     NSString *b = @"B";

    a.accessibilityLabel = @"Alpha";
    b.accessibilityLabel = @"Beta";

     return @[a, b];
}
Summary

• Add accessibility
• Increases user base
• Great feedback from users
• Apple takes accessibility seriously
• You should too
Related Sessions

                                    Russian Hill
Keyboard Input in iOS               Wednesday 2:00PM

                                    Russian Hill
Improving Accessibility in iBooks   Thursday 9:00AM
Labs

                               App Services Lab B
Accessibility and Speech Lab   Wednesday 11:30AM
More Information

Jake Behrens
User Experience Evangelist
behrens@apple.com

Documentation
Accessibility Programming Guide for iOS
Search on http://developer.apple.com/ for Accessibility

UIAccessibility Protocol Reference
Search on http://developer.apple.com/ for UIAccessibility

VoiceOver User Manual
http://support.apple.com/manuals/iphone

Apple Developer Forums
http://devforums.apple.com

Weitere ähnliche Inhalte

Andere mochten auch

Assistive Technology
Assistive TechnologyAssistive Technology
Assistive TechnologyAmy G.
 
iOS Accessibility
iOS AccessibilityiOS Accessibility
iOS AccessibilityLuis Abreu
 
Learnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformLearnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformTasneem Sayeed
 
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IP
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IPSyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IP
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IPStefan Esser
 

Andere mochten auch (6)

Assistive Technology
Assistive TechnologyAssistive Technology
Assistive Technology
 
iOS Accessibility
iOS AccessibilityiOS Accessibility
iOS Accessibility
 
iOS Accessibility
iOS AccessibilityiOS Accessibility
iOS Accessibility
 
ATIA Workshop - iOS Accessibility
ATIA Workshop - iOS AccessibilityATIA Workshop - iOS Accessibility
ATIA Workshop - iOS Accessibility
 
Learnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformLearnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS Platform
 
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IP
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IPSyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IP
SyScan360 - Stefan Esser - OS X El Capitan sinking the S\H/IP
 

Ähnlich wie Session 210 _accessibility_for_ios

Making an app like 'Clear' Accessible
Making an app like 'Clear' AccessibleMaking an app like 'Clear' Accessible
Making an app like 'Clear' AccessibleSally Shepard
 
Programming iOS in C#
Programming iOS in C#Programming iOS in C#
Programming iOS in C#Frank Krueger
 
Develop apps for (Apple) TV
Develop apps for (Apple) TVDevelop apps for (Apple) TV
Develop apps for (Apple) TVCodemotion
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QATed Drake
 
New to native? Getting Started With iOS Development
New to native?   Getting Started With iOS DevelopmentNew to native?   Getting Started With iOS Development
New to native? Getting Started With iOS DevelopmentGeoffrey Goetz
 
Quick Start to iOS Development
Quick Start to iOS DevelopmentQuick Start to iOS Development
Quick Start to iOS DevelopmentJussi Pohjolainen
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKitLouis D'hauwe
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentanistar sung
 
iPhone Camp Birmingham (Bham) - Intro To iPhone Development
iPhone Camp Birmingham (Bham) - Intro To iPhone DevelopmentiPhone Camp Birmingham (Bham) - Intro To iPhone Development
iPhone Camp Birmingham (Bham) - Intro To iPhone Developmentandriajensen
 
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb HighlightsGoogle I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb HighlightsRomain Guy
 
How To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface BuilderHow To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface Builderdasdom
 
A tour through Swift attributes
A tour through Swift attributesA tour through Swift attributes
A tour through Swift attributesMarco Eidinger
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lectureTsvyatko Konov
 
Building html5 apps using Cordova
Building html5 apps using Cordova Building html5 apps using Cordova
Building html5 apps using Cordova David Voyles
 
漫游iOS开发指南
漫游iOS开发指南漫游iOS开发指南
漫游iOS开发指南jeff kit
 

Ähnlich wie Session 210 _accessibility_for_ios (20)

Making an app like 'Clear' Accessible
Making an app like 'Clear' AccessibleMaking an app like 'Clear' Accessible
Making an app like 'Clear' Accessible
 
Programming iOS in C#
Programming iOS in C#Programming iOS in C#
Programming iOS in C#
 
Develop apps for (Apple) TV
Develop apps for (Apple) TVDevelop apps for (Apple) TV
Develop apps for (Apple) TV
 
Develop apps for (Apple) TV
Develop apps for (Apple) TVDevelop apps for (Apple) TV
Develop apps for (Apple) TV
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
 
New to native? Getting Started With iOS Development
New to native?   Getting Started With iOS DevelopmentNew to native?   Getting Started With iOS Development
New to native? Getting Started With iOS Development
 
Quick Start to iOS Development
Quick Start to iOS DevelopmentQuick Start to iOS Development
Quick Start to iOS Development
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKit
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
iPhone Camp Birmingham (Bham) - Intro To iPhone Development
iPhone Camp Birmingham (Bham) - Intro To iPhone DevelopmentiPhone Camp Birmingham (Bham) - Intro To iPhone Development
iPhone Camp Birmingham (Bham) - Intro To iPhone Development
 
IOS APPs Revision
IOS APPs RevisionIOS APPs Revision
IOS APPs Revision
 
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb HighlightsGoogle I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
 
How To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface BuilderHow To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface Builder
 
A tour through Swift attributes
A tour through Swift attributesA tour through Swift attributes
A tour through Swift attributes
 
Animation in iOS
Animation in iOSAnimation in iOS
Animation in iOS
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lecture
 
Intro to Asha UI
Intro to Asha UIIntro to Asha UI
Intro to Asha UI
 
04 objective-c session 4
04  objective-c session 404  objective-c session 4
04 objective-c session 4
 
Building html5 apps using Cordova
Building html5 apps using Cordova Building html5 apps using Cordova
Building html5 apps using Cordova
 
漫游iOS开发指南
漫游iOS开发指南漫游iOS开发指南
漫游iOS开发指南
 

Kürzlich hochgeladen

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 

Kürzlich hochgeladen (20)

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 

Session 210 _accessibility_for_ios

  • 1. Accessibility for iOS Raising the bar Session 210 Chris Fleizach iOS Accessibility These are confidential sessions—please refrain from streaming, blogging, or taking pictures
  • 2. Accessibility Using technology to overcome challenges • Computer-controlled wheelchairs
  • 3. Accessibility Using technology to overcome challenges • Computer-controlled wheelchairs • Assistive communication
  • 4. Accessibility Using technology to overcome challenges • Computer-controlled wheelchairs • Assistive communication • Screen readers • Many others
  • 9. New in iOS 6 Guided Access • Lock into a single App • Control access to hardware features
  • 10. New in iOS 6 Made for iPhone hearing aids • High quality wireless audio • Low power consumption • Adjust hearing aid directly from iPhone • Partnering with top hearing aid manufacturers
  • 11. New in iOS 6 VoiceOver and Maps • Discover roads and points of interest • Determine intersections • Integration with turn-by-turn directions
  • 12. New in iOS 6 Enhancements • Custom vibrations for all notifications • VoiceOver and Zoom • Speak Selection improvements
  • 14. What You’ll Learn App accessibility • UIAccessibility API ■ Basic ■ New • In-depth UIAccessibility ■ Make anything accessible ■ Things you might not know
  • 15. UIAccessibility VoiceOver What’s the element at a point? UIAccessibility Label, Frame, … UIKit
  • 16. Adding Accessibility to Your App • Simple • A lot comes for free • “Just add labels”
  • 17. UIAccessibility API: Attributes • Attributes convey information • VoiceOver transforms that information UIImageView *view = [[UIImageView alloc] initWithImage:image]; "apple_logo512x512, image"
  • 18. UIAccessibility API: Attributes • Attributes convey information • VoiceOver transforms that information UIImageView *view = [[UIImageView alloc] initWithImage:image]; view.accessibilityLabel = @"Apple Logo"; "Apple logo, image"
  • 19. Common Accessibility Attributes #import <UIKit/UIAccessibility.h> @property BOOL isAccessibilityElement ■ Return YES to make VoiceOver see this element ■ Default is YES for UIKit controls @property(copy) NSString *accessibilityLabel ■ A textual representation of the element
  • 20. Common Accessibility Attributes @property(copy) NSString *accessibilityHint ■ Optional ■ Provides more information to aid VoiceOver users @property UIAccessibilityTraits accessibilityTraits ■ Defines behavior ■ Bitmask of integers
  • 21. Accessibility Traits Static Text Image Button Adjustable
  • 22. Accessibility in Interface Builder Change static accessibility values isAccessibilityElement accessibilityLabel accessibilityHint accessibilityTraits
  • 23. Adding Accessibility in Code If accessibility values do not change, use setters - (void)awakeFromNib { MyControl *control = [[MyControl alloc] initWithFrame:frame]; control.isAccessibilityElement = YES; control.accessibilityLabel = @"Play"; [window addSubview:control]; }
  • 24. Adding Accessibility in Code If accessibility attributes change, override methods @implementation ProductView - (BOOL)isAccessibilityElement { return YES; } - (NSString *)accessibilityLabel { if (isMac()) return @"Mac"; else if (iPhone()) return @"iPhone"; ... } @end
  • 25. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update”
  • 26. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update”
  • 27. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update” UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, nil);
  • 28. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update” UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, nil); • When the screen changes, VoiceOver should “reset”
  • 29. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update” UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, nil); • When the screen changes, VoiceOver should “reset”
  • 30. Accessibility Notifications Tell VoiceOver something happened • When a few items change, VoiceOver should “update” UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, nil); • When the screen changes, VoiceOver should “reset” UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, nil);
  • 31. Demo Introduction to VoiceOver and UIAccessibility
  • 32. New API in iOS 6 • Apps can become very accessible with basic attributes • But, we want more! • New API in iOS 6 allows ■ New ways to interact with VoiceOver ■ New attributes and traits ■ Custom text views based on UITextInput
  • 33. New VoiceOver API - (BOOL)accessibilityPerformMagicTap ■ Control what happens when user does two-finger double-tap
  • 34. New VoiceOver API • Move VoiceOver focus ■ Use the element as the argument when posting UIAccessibilityLayoutChangedNotification or UIAccesibilityScreenChangeNotification UIButton *moveToButton = ... UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, moveToButton);
  • 35. New VoiceOver API Callbacks from UIAccessibilityAnnouncement • Be notified when an announcement finishes ■ Listen on the NSNotificationCenter for ■ UIAccessibilityAnnouncementDidFinishNotification ■ Then look at the userInfo to gather ■ UIAccessibilityAnnouncementKeyStringValue ■ UIAccessibilityAnnouncementKeyWasSuccessful
  • 36. New Accessibility API @property BOOL shouldGroupAccessibilityChildren ■ Group items together to control the order VoiceOver visits elements
  • 37. New Accessibility API UIAccessibilityTraits UIAccessibilityTraitHeader ■ New trait in order to mark elements as a header
  • 39. Into the Deep End What do you do if there is no view? • If drawing happens with a UIView ■ drawAtPoint: ■ drawRect: ■ OpenGL • Make an array of UIAccessibilityElement’s • One for each distinct user interface object
  • 40. Into the Deep End What do you do if there is no view? - (NSArray *)roads { if (roads != nil) { return roads; } roads = [[NSMutableArray alloc] init]; UIAccessibilityElement *road = [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self]; road.accessibilityLabel = @"Infinite Loop"; [roads addObject:road]; return roads; }
  • 41. Into the Deep End What do you do if there is no view? • Implement UIAccessibilityContainer protocol - (NSInteger)accessibilityElementCount { return self.roads.count; } - (NSInteger)indexOfAccessibilityElement:(id)element { return [self.roads indexOfObject:element]; } - (id)accessibilityElementAtIndex:(NSInteger)index { return [self.roads objectAtIndex:index]; }
  • 42. Into the Deep End Get the right frame • By default, UIAccessibilityElement’s do not have a “frame” • You must set the frame in “screen” coordinates UIAccessibilityElement *road = [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self]; // Get the frame in "view" coordinates. CGRect viewFrame = CGRectMake(0, 100, 50, 100); // Convert frame to "window" coordinates. viewFrame = [self convertRect:viewFrame toView:[self window]]; // Convert frame to "screen" coordinates. viewFrame = [[self window] convertRect:viewFrame toWindow:nil]; road.accessibilityFrame = viewFrame;
  • 43. Into the Deep End Using announcements • Announcements allow for immediate feedback • Example: Moving things
  • 44. Into the Deep End Using announcements #define Post UIAccessibilityPostNotification - (void)continueTracking:(id)touch { if (isNearEdge(touch)) Post(UIAccessibilityAnnouncementNotification, @"Nearing %@ border", borderLabel(touch)); if (isOnEmptySpace(touch)) Post(UIAccessibilityAnnouncementNotification, @"On empty space. Lift finger to cancel"); if (isOnDifferentIcon(touch)) Post(UIAccessibilityAnnouncementNotification, @"On top of Artists. Lift finger to replace"); }
  • 45. Into the Deep End Using direct interaction • Example ■ Musical instruments ■ Explore elements within direct touch area
  • 46. Into the Deep End Using direct interaction @implementation PianoView - (id)initWithFrame:(CGRect)frame { ... KeyView *aKey = [KeyView new]; aKey.isAccessibilityElement = YES; aKey.accessibilityLabel = @"A"; .... } - (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitAllowsDirectInteraction; } - (BOOL)isAccessibilityElement { return YES; }
  • 48. Things You Might Not Know Language selection • Control the language used for the entire App [[UIApplication sharedApplication] setAccessibilityLanguage:@"fr-FR"] • Control the language for a range within a string NSAttributedString *attr = [[NSAttributedString alloc] initWithString:@"こんにちは, My Friends"]; [attr addAttribute:@"accessibilityLanguage" value:@"ja-JP" range:NSMakeRange(0, 5)]; [element setAccessibilityLabel:(id)attr];
  • 49. Things You Might Not Know Controls without views • UISegmentedControls NSString *title = @"∫"; title.accessibilityLabel = @"Integral"; UIImage *image = [UIImage imageNamed:@"GearImage.png"]; image.accessibilityLabel = @”Settings”; [segmentedControl insertedSegmentedWithTitle:title]; [segmentedControl insertedSegmentWithImage:image];
  • 50. Things You Might Not Know Controls without views • UITableView index titles - (NSArray *)sectionIndexTitlesForTableView:(id)tableView { NSString *a = @"A"; NSString *b = @"B"; a.accessibilityLabel = @"Alpha"; b.accessibilityLabel = @"Beta"; return @[a, b]; }
  • 51. Summary • Add accessibility • Increases user base • Great feedback from users • Apple takes accessibility seriously • You should too
  • 52. Related Sessions Russian Hill Keyboard Input in iOS Wednesday 2:00PM Russian Hill Improving Accessibility in iBooks Thursday 9:00AM
  • 53. Labs App Services Lab B Accessibility and Speech Lab Wednesday 11:30AM
  • 54. More Information Jake Behrens User Experience Evangelist behrens@apple.com Documentation Accessibility Programming Guide for iOS Search on http://developer.apple.com/ for Accessibility UIAccessibility Protocol Reference Search on http://developer.apple.com/ for UIAccessibility VoiceOver User Manual http://support.apple.com/manuals/iphone Apple Developer Forums http://devforums.apple.com