Screen readers are now even easier to use! Introducing our initiatives from June to August to enhance accessibility

To achieve our mission of "ensuring that everyone can start and continue creating," note is focusing on improving web accessibility (*1) so that all creators can enjoy their creative activities.

From June to August 2022, we worked on permeating accessibility awareness within the company through internal study sessions, as well as making web improvements, conducting user interviews, and improving internal infrastructure. In this article, we will introduce all the specific activities the project team has undertaken!

Enhancing note's accessibility

At note, we have been working on enhancing accessibility since 2021, and we launched a project team so that all creators can enjoy creating on note, announce their processes and works, and support each other. We are making daily improvements to note, such as holding regular meetings every Tuesday.

Conducted internal study sessions and fixed 160 existing errors

The theme of the study session was about image alt (alternative text)

In the previous internal study session, we learned about the dangers of "void buttons" (*2), and our internal engineers actually fixed over 160 of them. However, we then encountered a new challenge. When we introduced a mechanism to automatically check for missing alt text, it detected 160 alt errors. To prevent adding new error targets, it became necessary to permeate awareness among engineers and designers, so we held this study session. If you would like to know more about the previous internal study session and void buttons, please see the article "We held an internal study session to reveal note's void buttons."

*2 Buttons that exist visually but behave as if they do not exist when using a screen reader (*3) or keyboard operation.
*3 Software that reads aloud the content displayed on the screen and the input from the keyboard for people with visual impairments when using a computer. It is standard on many computer and smartphone operating systems such as Windows, Mac, iOS, and Android.

Fixing existing errors and enhancing accessibility

After the study session, we fixed the 160 alt errors detected by the automatic check to make note easier to use for those who use screen readers. Here is one of the correction examples.

As a challenge, in situations where a profile image and creator name are lined up as shown in the figure below, if "note official" was entered in the alt text of the profile image, the screen reader would read "note official" twice. So, we decided to leave the alt text of the profile image blank to make it read only once! With this fix, we eliminated redundant reading by screen readers and made note smoother to use.

Over 20 people participated in the study session. Toward permeating accessibility awareness

More than 20 members gathered, mainly from teams that have many opportunities to create content, such as engineers, designers, and PMs. We hope that having members from various teams participate will be a catalyst for communication regarding accessibility in various note meetings. We will continue to increase opportunities for active learning.

Other accessibility enhancement measures

In addition, we carried out the following accessibility-related measures between June and August.

Conducted a total of 6 user interviews

With the cooperation of people with disabilities, we conducted a total of 6 interviews. During the interviews, we received comments such as "I use various blogs, but note is particularly easy to use," "It's reaching a level where it's moving to use," and "I'm happy that it's evolving." On the other hand, we also found issues that need improvement. We will continue to make improvements while utilizing these insights.

• Because I memorize menus and buttons by their position, I have to relearn them if their positions change frequently (for those with low vision who use magnification operations)

• When using the screen with magnification, only a portion of the screen is visible.

  • When you press the Enter key on the iOS screen keyboard once, the screen view shifts to the editor, causing the screen keyboard to move off-screen. As a result, it is impossible to press the Enter key twice in a row.

  • When looking at the left edge of the page, you might not notice labels for buttons in the center of the page. Even if you notice something is there, you may need to move the visible area to the center of the screen.

Feature Improvements

Web

• Enabled keyboard access for the tooltips that appear when hovering over links in the editor.

• Fixed an issue where the delete button for header images in the editor was not being read correctly.

• Added tips for specifying alt text when setting alt text in the editor.

• To make placeholders (auxiliary text in input fields) easier to read, we conducted an A/B test for contrast.

  • Adjusted the contrast to 3.5:1 to ensure it is recognizable as auxiliary text without any negative impact.

• Enabled screen reader access to search history in the header.

  • Enabled access to the history list using the down arrow key.

• Fixed an issue where the number of 'likes' was not being read below the title on article pages.

• Following our internal alt text study session vol. 2, we updated 160 instances of alt text within note.

• Introduced automated a11y (short for Accessibility) checks using mabl (a test automation tool).

• vuejs-accessiblity/alt-text (automated testing tool) introduced for automated a11y checks

• storybook (UI catalog) and jest-axe (automated testing) implemented for accessibility testing

  • Implemented a mechanism where tests run automatically when creating components

iOS

• Implemented support for Dynamic Type integration in WebView-based screens

  • Enabled text in articles to scale up when increasing font size via iOS accessibility settings

Internal Infrastructure

• Evolved from a volunteer team into a project directly under the CDO (Chief Design Officer)

  • Enabled larger-scale activities

  • Designed OKRs (a goal-setting and management framework) for accessibility

• Held internal alt-text study session vol. 2

• Began collaboration with the QA team regarding quality

• Every month, we identify issues by utilizing the Accessibility Check List published by freee K.K., a provider of cloud accounting software

At note, we will continue to improve accessibility to realize our mission of "enabling everyone to start and continue creating."

If you would like to cooperate with an interview, please apply via the interview recruitment form.

You can view a list of our accessibility measures and feature improvements to date below.

The latest information on improvements is also announced on our official Twitter.

For improvements and requests regarding features, please use note feedback. For other inquiries, please use the
request submission form. * note is improved daily, and page designs may change depending on future updates. Therefore, please check the
help page for the latest version of the new features announced here.