appt-org/accessibility-code-examples

Accessibility code examples for Android, iOS, Flutter, React Native and Xamarin apps. Help us add more frameworks!

Appt.org

Source code of appt.org

What is Appt?

The Appt® platform is an initiative of the Appt Foundation, a non-profit organization. Our mission is to make apps accessible for everyone. We try to achieve this by sharing free knowledge and open-source code. Appt.org is a website that empowers developers and organizations to build accessible apps for everyone.

Table of contents

• Stack
• Local development
• Environments
• Commit conventions
• Accessibility
• License

Stack

• Next.js
• Typescript
• Tailwind CSS
• Contentful
• Google Cloud Run

Local development

Local development for Appt is not supported right now. Some secrets, like API keys, are needed to make a connection with Contentful for the content of the website. For more on local development see docs on local development.

Environments

The Next.js server is hosted on Google Cloud Platform and Cloud Run as a docker container. A new version will be automatically deployed to GCP with commits on specific branches, outlined below.

Acceptance

• URL: https://appt-acceptance-o4ale4roda-ez.a.run.app
• Branch: develop

Production

• URL: https://appt.org
• Branch: main

Commit conventions

We use Conventional Commits to write clear and readable commit messages.

Accessibility

Font scaling and using REM

To make sure users that change their default font-size in the browser are still able to use Appt we make sure we support font scaling.

Don't

• Don't use fixed widths or heights on components, so the containers can grow with the font size.
• Don't use a fixed width and height on svg's.
• Don't use REM for line heights, this will result in mega line heights on Safari.

Do

• Use the viewBox on svg's with a width and height class in REM's.
• Use REM's for font sizes, paddings, margins, media queries and images that should grow when the text grows, for example logo's.

Note: We decided to not use font: -apple-system-body; for scaling text on mobile iOS devices. You can already set a default zoom level in the Safari preferences. We assume that people have this turned on. If we also turn on font scaling on iOS, users suddenly get an extra large font.

License

The source code is available under the MIT license. See the LICENSE file for more information.

accessibility-code-examples's Issues

React Native: include a pattern for linking labels with text inputs

Hi,

Thanks for these resources. I have little experience with building native apps so this definitely comes in handy.

I'm trying to find an idiomatic and isomorphic way of assigning labels with associated inputs. In the page input-label.md it is suggested to link a <Text> with <TextInput>, but no pattern is provided on how to actually achieve this.

Additionally, React Native Paper is provided as an example but for a beginner it is difficult to figure out how they implemented their <TextInput> in their source code. I am also critical of this particular example because of their use of floating input label for reasons illustrated in this article by Adam Silver (as well as other sources online).

I am currently looking online in other projects' source codes on how this is achieved and experimenting/testing myself. I'm definitely willing to contribute to this page once I have a better idea if you agree that this is something we might want to add in the documentation.

For now: do you have any extra resources or tips with regards to linking labels with text inputs in React Native?

EDIT: my naive implementation (React Native >= 0.71) would be something along the lines of

function AccessibleInput({ label, name, ...rest }) {
  <View>
    <Text aria-hidden>{label}</Text>
    <TextInput accessibilityLabel={label} {...rest}/>
  </View>
}

iOS input-label guidance incorrectly states to hide the visible label text from VoiceOver focus

The current iOS input-label guidance says to hide the visible label text of an input from VoiceOver focus which is abnormal behavior compared to forms on the web. Screen readers on the web and on all other platforms will normally read the label text first and then the input but the label is never hidden from screen reader focus.

https://github.com/appt-org/accessibility-code-examples/blob/main/input-label/ios.md

label.text = "Name"
**label.isAccessibilityElement = false**
field.accessibilityLabel = label.text

This guidance would be like saying to place aria-hidden=true on all text on web forms. No-one says to hide form input labels from screen readers on the web and I'm not sure why there is guidance saying to hide the label for iOS apps.

Also the Android guidance does NOT say to hide the label text from screen readers so there is no consistency in how this is recommended. There's also no guidance saying to hide the label for flutter, react, or xamarin.

If an iOS VoiceOver user has low vision and also runs screen magnification at the same time, they may see the label text and try to touch it to hear what it says but that would not be possible if you hide the label text from VoiceOver focus.

Another issue is the label hiding hack creates VoiceOver touch exploration "Dead Space" where when you move touch focus from one input to the other you hear the "ding ding ding" which indicates you can't focus on the label element so you can't as easily move your finger between each element on the page.