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.

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