$30 off During Our Annual Pro Sale. View Details »

Building an Accessible Android Weather App: Lessons from iOS Weather App's A11y Features

Karan
February 01, 2023

Building an Accessible Android Weather App: Lessons from iOS Weather App's A11y Features

As an Android developer, making sure that your app is accessible to all users is crucial. This includes those who have visual impairments and require larger font sizes. In this deck, we will be exploring how to make the weather app on Android more accessible.

Karan

February 01, 2023
Tweet

More Decks by Karan

Other Decks in Design

Transcript

  1. A11y lessons from iOS
    Weather App
    design . accessibility . android
    Karan Sharma
    www.ksharma.xyz

    View Slide

  2. DayTile()

    View Slide

  3. Font Scale: Normal
    Font Scale: Large
    DayTile() Observation
    ● When the font size is increased to
    an extent that the text / items
    cannot be displayed next to each
    other horizontally, then display
    the items vertically.
    ● Hide the TemperatureBar and
    display L and H prefix for low and
    high temperature.
    ● The start position of each
    element such as icon, text,
    temperature bar for each item in
    a list should be same.

    View Slide

  4. Font Scale: Large
    DayTile() What not to do ?
    At Large font scale, the horizontal space for
    the day text is limited.
    Also, the temperature bar is utilizing a lot of
    space which may not be useful at large font
    scale.

    View Slide

  5. Font Scale: Normal
    Font Scale: Large
    DayTile() Technical Approach
    There are multiple ways to achieve this. We
    want to display either a Row or a Column of
    items based on font scale value.
    1. One approach is to use an if else
    conditional logic to switch between a
    Row and Column.
    2. Another approach can be to use a
    ConstraintLayout, however it will be
    hard to maintain all the conditional
    constraints.
    Since, maintaining the conditional constraints
    of the layout will be challenging, therefore, the
    first approach of switching between a Row
    and a Column seems easy and optimal at this
    time.

    View Slide

  6. Font Scale: Normal
    Font Scale: Large
    DayTile()
    Code
    Code

    View Slide

  7. Header()

    View Slide

  8. Font Scale: Large
    Header()
    Font Scale: Normal
    Observation
    ● When the font size is increased
    beyond a certain threshold, then
    the text is aligned to the start of
    the screen in order to utilize all
    the given width.

    View Slide

  9. TextAlign: Center
    Header()
    TextAlign: Start
    Observation
    Why is it a good idea to align to Start ?
    ● Aligning to Start will look more
    pretty
    ● Will also provide more room to
    grow for text.
    The difference is especially visible when
    the text is large and spans across more
    than one line.
    v/s

    View Slide

  10. Header() Code
    Font Scale: Normal
    Font Scale: Large

    View Slide

  11. WeatherConditionTile()

    View Slide

  12. Font Scale: Large
    Font Scale: Normal
    Observation
    ● When the font size is increased
    beyond a certain threshold, then
    the tiles stretch to occupy all the
    horizontal space.
    ● The sticky header is also disabled
    while scrolling so as to provide
    maximum visibility area on the
    screen to read text.
    WeatherConditionTile()

    View Slide

  13. Font Scale: Large
    Font Scale: Normal
    Observation
    ● The tiles are square in shape. I.e
    with equal height and width. The
    uniformity is maintained in all the
    tiles.
    ● When the font size is increased
    beyond a certain threshold, then
    the tiles stretch to occupy all the
    horizontal space.
    ● The sticky header is also disabled
    while scrolling so as to provide
    maximum visibility area on the
    screen to read text.
    WeatherConditionTile()

    View Slide

  14. Code
    WeatherConditionTile()

    View Slide

  15. Font Scale: Normal
    Foldable: Fold state
    ● Always display the UI in full
    stretch across the screen as the
    available width is very less.
    ~330dp
    WeatherConditionTile()

    View Slide

  16. Font Scale: Normal
    Foldable: Unfold state
    When font scale is:
    ● Normal: 3 Column Layout
    ● Large: 1 Column Layout
    WeatherConditionTile()
    Font Scale: Large

    View Slide

  17. Font Scale:
    Normal
    Mobile
    When font scale is:
    ● Normal: 2 Column Layout
    ● Large: 1 Column Layout
    WeatherConditionTile()
    Font Scale:
    Large

    View Slide

  18. Font Scale: Large
    Tablet : Landscape Mode
    When font scale is:
    ● Normal: 5 Column Layout
    ● Large: 1 Column Layout
    WeatherConditionTile()
    Font Scale: Normal

    View Slide

  19. Tablet : Portrait Mode
    When font scale is:
    ● Normal: 3 Column Layout
    ● Large: 1 Column Layout
    WeatherConditionTile()
    Font Scale: Normal

    View Slide