[Bug]: Guidelines page accessibility issues

[pya35]

Prerequisites

• I have searched the backlog for duplicate or closed feature requests

Your test device

iPhone 14 Plus

OS Version

17.1.1

App version

v0.16.0

Describe the issue

This list is about the defaut page displayed in app : "Guidelines"

• [Bug] [A11Y] Low text contrast < 4.5:1 : orange text on light grey (tab bar) #657
  Recommandation : do not use orange for text on light backgrounds. For mobile use, recommanded text contrast is 7:1

• [Bug] [A11Y] Low button contrast < 3:1 : orange theme icon on light gray #658

• [Bug] [A11Y] Information transmitted only by color : selected tab differs only by orange colour #659
  
  Recommandation : add a second way to transmist information, like following example :
  

• svg vocalization image vocalization "typography" -> with VoiceOver we hear "75 Aa 55Aa", not useful. #702

• keyboard focus barely visible on the 3 main buttons
  
  Recommandation: If possible, add an outline to make the focus more visible or reinforce the focus with darker orange. Maybe with this kind of code:

override open func accessibilityElementDidBecomeFocused() {
        backgroundColor = .focused
    }

• voice over grouping: when user changes the colour theme, the description of the warning popup is vocalized with title only.
  Recommandation: Group popup title and description so the user has the whole information at once.

• landscape mode : landscape mode from guidelines page leads to open typography automatically
  **Recommandation: no content change on landscape mode

• tap cancellation not possible on colour palette icon. User should be able to cancel the tap by moving the finger out of the button
  Recommandation : Don't activate button on down action

• No vocalization of title after displaying the page #683
  Recommandation: Use announcements (notifications) to force the title page vocalization - To be done on each main page Guidelines, Components, Modules & About

Expected Behavior

Page 100% accessible (updated status 19/12/2023: 71%)

[ludovic35]

To avoid vocalization of text in image do:
group bouton + image via accessibilityElement(children: .contain)

[ludovic35]

it does not work, need more investigation

[pya35]

landscape mode : landscape mode from guidelines page leads to open typography automatically seems to be fixed on last release

[pya35]

keyboard focus visibility can be solved with high contrast in Full Keyboard Access settings, no fix needed

[pylapp]

@pya35 About your comment "information transmitted only by color : selected tab differs only by orange colour.", it is the native iOS behavior.
Did you look on some a11Y settings in the device to get workarounds?

About the case where "image vocalization "typography" -> with VoiceOver we hear "75 Aa 55Aa", not useful.", it is already fixed since at least commit c2f245c in qualif

Same thing for "image vocalization "spacing" -> with VoiceOver we hear "plus plus", not useful." case.

In case "voice over grouping: when user changes the colour theme, the description of the warning popup is vocalized with title only.", what did you mean @pya35? Today vocalization of menu vocalizes the texts of the menu items, is it enough?

About the case "No vocalization of title after displaying the page", is it managed in issue #588

[pylapp]

@pya35 I understand the needs behind your case "tap cancellation not possible on colour palette icon. User should be able to cancel the tap by moving the finger out of the button", however it is the native behaviour of iOS for such pickers: the content is displayed when the component is pressed, it's slightly different than buttons for example.