Setting an accessibility label on a UITabBarItem with no title

jjj picture jjj · Oct 14, 2014 · Viewed 10.4k times · Source

I have a UITabBarItem like so:

_Controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:nil image:nil tag:0];

But having nil for a title removes the label needed for accessibility and KIF testing. An alternative I found is to set the title and move it off the screen, but that seems like a hacky solution:

_Controller.tabBarItem.title = @"Foo";
_Controller.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, 200);

Is it possible to have a UITabBarItem without a title, but still have an accessibility label?

EDIT to add full code for tab bar and background button code:

- (void) loadViewController {
    _Controller = [[UIViewController alloc] init];
    UIImage *normalImage = [UIImage imageNamed:@"bar.png"];
    UIImage *selectedTabImage = [UIImage imageNamed:@"barHover.png"];
    [self addCenterButtonWithImage:normalImage
                    highlightImage:selectedTabImage];

    _Controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:nil image:nil tag:0];
}

// Create a custom UIButton and add it to the center of our tab bar
-(void) addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:(UIImage*)highlightImage
{
    UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height);
    [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
    [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted];
    [button addTarget:self action:@selector(openCamera) forControlEvents:UIControlEventTouchUpInside];

    button.center = CGPointMake(self.tabBar.frame.size.width/2.0, self.tabBar.frame.size.height/2.0 - 6.0);

    [self.tabBar addSubview:button];
}

Answer

Brian Nickel picture Brian Nickel · Oct 14, 2014

In iOS8, you can assign an accessibility label directly to a tab bar item:

_Controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:nil image:nil tag:0];
_Controller.tabBarItem.accessibilityLabel = @"Foo";

For iOS7 and below, you are right that you need to do something to hide the text. You can force it offscreen like you had illustrated:

_Controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Foo" image:nil tag:0];
_Controller.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, 200);

Or you can make the text color clear:

_Controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Foo" image:nil tag:0];
[_Controller.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor clearColor]} forState:UIControlStateNormal];

Remember, whatever solution you come to will be used by visually impaired users to navigate you app. Since your background button is an unusable decoration, you should flag it as such:

button.isAccessibilityElement = NO;
button.userInteractionEnabled = NO;