Setting an accessibility label on a UITabBarItem with no title

10,810

Solution 1

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;

Solution 2

If you are trying to set the accessibilityIdentifier on a UITabBarItem, it will not show up in the Accessibility Identifier unless you update the isAccessibilityElement property to true:

Example:

self.navigationController?.tabBarItem.isAccessibilityElement = true
self.navigationController?.tabBarItem.accessibilityIdentifier = "SomeIdName"
Share:
10,810
jjj
Author by

jjj

Updated on August 07, 2022

Comments

  • jjj
    jjj over 1 year

    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];
    }