Blind Dev article

Open Academy: accessibility audit of a Telegram Mini App

An audit case: real scenarios, screen reader blockers, and practical fixes.

Based on Blind Dev personal experience and source posts; verify current details before applying.

Full English translation of the Teletype article published on 2025-10-31. Observations, estimates and technical claims describe the interfaces at publication time; this is not a new assessment of their current state.

Open Academy is a Telegram mini app for learning about finance (and other subjects in the future), directly inside Telegram in a convenient slide format. In this article, I review Open Academy’s interface accessibility from a blind user’s perspective and show which elements could be improved.

Introduction: technical details of improving accessibility

• If important interactive elements have only icons, add an aria-label="name" attribute. It makes using them much easier.
• Add tabindex=-1 to modal windows and use .focus (a JS method) on elements where focus needs to be placed.
• Add alt text to images.
• Separate the content area (the main tag) from the menu (the nav tag).
• Use different heading levels, h2 and h3, to distinguish page sections.

Now to the bot’s interface.

Homepage

Let us start with streaks:

Nuts Farm stated how much I was receiving. Here there is no such information, or it is inaccessible to me. Add it as text, or explain what rewards are planned.

Next is the “Rumi” button for the local AI. I click it:

Immediately below the heading in the HTML, I find a menu button. Opening it reveals “Clear chat”. The menu button should be called “Actions”.

Below “AI ASSISTANT” is a “BETA” button. Call it “About Rumi (BETA)” or something similar.

The list of prompts is announced correctly. I click “Create a quiz”:

Text about the correct answer appeared in the chat, which is convenient. But when I sent “Next”, an error occurred while generating the response:

It should have generated the next question.

Ideally, add a “Next question” button.

There is also an unnamed button below the input field. Call it “Send”.

A textarea would be better than input type="text": AI prompts sometimes span several lines. Although this may not be essential at this stage. Besides, you would not want people sending huge prompts that overload Rumi.

Story — stories:

I click the corresponding button (“Story 20”), and a modal window opens.

What I notice immediately:

• Focus does not move into it, as in the other cases above. Moving focus into the modal would be more convenient.
• The story-navigation controls and modal close button have no labels. Call them “Back”, “Next” and “Close”. For reference, navigation is implemented as elements announced as “clickable” (probably divs or similar), whereas closing uses a button element or an input with type="button".

Further down the homepage is search. The “Find” button below the text field has no description. Add aria-label="Find" here, too.

Below that is a level-2 heading, “Choose a category”. Yet the categories themselves are level 4 (h4), when logically they should be h3. Change that.

Even better, make them a simple ul/li list of links. Hearing headings before every item is inconvenient. Yes, you can navigate links with the “k” key, but not everyone will do that.

Under each recommended course’s banner is some button with no label. I do not understand its purpose: clicking does nothing. Hide it or give it a name.

Course catalogue accessibility

Moving to “Catalogue”:

Search again lacks a named “Find” button; otherwise everything is accessible.

But one thing reduces usability:

• Users have to pick one category and view its lessons. What if they are unsure which interests them, or want several? They must select and then deselect categories.
• A “Filter” button would be better. Clicking it would open a modal listing categories with input type="checkbox" controls. Users choose the ones they want and click “Apply”. The matching courses then appear.

I chose “Investments”:

Everything is accessible. It would just be nice to see learning progress here, too.

But as I said, this selection method is rather inconvenient. If I decide a category does not interest me for now, I have to click “Reset”:

The full list appears. It would be better to display it in that format from the start.

Here I opened category selection with “Categories”:

As I said, multiple selection would be better.

Of course, perhaps this should be A/B tested.

Sorting is very accessible.

Course page

I selected the first course, about Bitget wallet:

Below “Back” are two buttons:

• I do not know what the first does: clicking produced no visible change.
• The second lets you share the course.

Neither is labeled. Give them names using aria-label.

Below are 4.8 and 3621. Explain what they mean, for example:

Rating: 4.8. Students: 3621.

In reviews, “Show all” opens a modal with an unlabeled close button.

I will discuss the learning process separately: it is an important section in its own right.

“My courses” page

• The “Find” button has no name.
• Both “Favorites” and the favorite courses are level-3 headings. Make “Favorites” h2 and courses h3, or the section heading h3 and courses h4.
• In the favorites list, there is another unnamed button below the images.
• Below 4.8 is “0”; what it means is unclear.
• Separate sections with hr separators. That would improve navigation: currently, when listening to links, I do not immediately realize I have reached “Completed” rather than the next favorite item.

Everything in Completed is accessible, including after following the link in its heading.

The review-writing modal is implemented well: focus immediately moves to the text field. The downside is that it also lacks a “Close” button at the top.

Accessibility of the learning process

I clicked “Continue learning” in the catalogue or on a course page, or “Start again” in My courses:

A few points:

• Focus does not immediately move into the modal.
• There is no close button, which is inconvenient.
• Lesson buttons have no names. Previously, at least the next lesson was labeled “Start”, but now that word is in alt text below the button, which is inconvenient.
• Rather than putting the lesson list in a modal, display it below a “Start” button that works as an expand/collapse control. Otherwise there are too many nested modals.

After opening the lesson list, I click the first lesson’s button:

Another modal appears! Focus moves into it, which is good. But there is no close button; I have to use Escape.

I also do not know why this extra click is necessary.

The slides should appear as soon as I choose a lesson. Instead, I have to click “Start” again:

From an accessibility perspective, this is even more inconvenient: after clicking, focus does not move into the correct modal, so I have to press Tab.

Here I have flipped through some lesson slides:

That is easy to do using the button below the image.

But the image itself is inaccessible. My screen reader announces “graphic info block 1008”, which conveys nothing useful.

Essentially, lesson content is currently inaccessible to blind users.

I asked for text recognition to be added, but apparently the team has not got around to it yet.

Quizzes are accessible. I reached the last slide and clicked “Next”. Another modal appeared visually:

But I have to press Tab to discover it. Otherwise I cannot tell that anything has appeared.

I remember clicking “Next” several times on my first attempt, not understanding why nothing was happening.

I do not understand why, instead of yet another popup, the slide could not simply be replaced with a congratulatory message and a button to return to the course.

A second problem…

Here is the lesson list:

I click the second lesson’s button:

Again, there is what I consider an unnecessary modal with “Start”.

I click that button:

Focus stays on it; it is announced as “button expanded opens dialog Start”.

But on the first attempt, pressing Tab somehow closed everything except the lesson list.

I only managed to enter on the second attempt.

Perhaps this was due to slow loading: I tried the third lesson and it worked immediately. Yes, indeed: pressing Tab immediately after clicking “Start” closes everything instead of opening the required modal.

At least I am glad that returning to the course no longer opens the modal with “Start”, which used to be renamed “Continue again” or something like that. Previously, I had to press Escape once more to get back to the lesson list.

I liked how the quest was implemented:

As you can see, “Start” is right here rather than in a separate modal. There is a downside, though: I have to go to the end of the window to find the button.

Everything in the quest’s form window is accessible, but there is no “Close” button:

As a result, I cannot close the modal: Escape does not work for some reason.

Profile

Moving to this page:

The first button below the username opens settings. Give it aria-label="Settings".

The modal’s close button is also unnamed.

Everything else is quite accessible.

The settings button could also be named the way “Tasks” is.

Incidentally, the only undescribed button in the tasks modal is the close button.

Everything else is excellent!

Except that clicking “Complete” on an active task moved focus outside the modal. Keep it inside, as with lesson slides.

In “My OA token”, the help button explaining OA has no description. Add “?” or “Help”.

In the referral program:

Clicking “All referrals” opens another modal while this one is still open. Perhaps consider a profile page with tabs: separate tabs at the top, not the page navigation at the bottom.

For convenience, also add “Copy link”. I do not always want to share it to Saved Messages or a chat/channel.

In the inventory, “Show all” is fully accessible except for the unnamed close button. Individual items have the same problem; everything else is excellent.

Achievement list items are announced as “button collapsed opens dialog graphic achievement 3”, which is unclear. Descriptions are available once opened. Show them in the list as well, and remove technical labels such as “achievement 3”.

Royale

People say it is an interesting game, but it does not load at all for me:

This is in the Unigram desktop client. Unfortunately, Telegram Desktop is inaccessible to blind users because it uses QT.

But it works in Telegram web:

The bot’s homepage is generally accessible.

I even managed to start and complete a game! However, you want to answer quickly, and navigating to the question is not easy. Make the round name an h2 heading.

In “Friends”, it would be great to add people not only by ID, but also by Telegram username and nickname. Having to ask for their ID is inconvenient.

The “Share” button also has no name. Give it that label.

But I did get the link:

https://t.me/academy_royale_bot/play?startapp=ref_F42C7F9C8AEAB0F

Conclusion

Open Academy looks like an interesting product. I am especially pleased that Academy Royale is approximately 90% accessible.

The main bot needs names for modal close buttons, text recognition for lessons, and some adjustments to how lessons work. These changes could substantially improve accessibility for blind users.

If you found this article elsewhere, subscribe to my channel: https://t.me/blind_dev

I publish new accessibility reviews of digital services, project analysis using the 4K+ method (team, concept, coin, code + practice), and news about my development work there.

Source

Original Russian article on Teletype.