I've already talked about Open Academy for a long time. Just to remind you, it's a Telegram mini app for learning finance (and other areas in the future) right in Telegram and in a convenient format.

I like the project. So I decided to write an accessibility review so they can improve it.

1. If some elements only have icons and they are important (there is interaction), add the aria-label="name" attribute to them. This will greatly simplify the work.

2. Add tabindex=-1 to modal windows and .focus to elements where you need to fix the cursor (JS method).

3. Add alt to images

4. Separate the content part (main tag) and menu (nav tag).

5. Make headings of different levels: h2, h3, highlighting sections of the page.

And now for the review of the bot's interface.

Let's start with the strikers:

In Nuts Farm, it was written how much I receive. There is nothing like that here. Or I don't have access. Better to add in text or write what rewards are planned.

Next is the "Rumi" button with local AI.
I click on it:

Right under the title (in html) I see a button with a menu. After opening it, the "Clear Chat" button appears. Better to name it "Actions".

Under the line "AI-ASSISTANT" there is a "BETA" button. Better to name it "About Rumi (BETA)" or something like that.

The list of prompts is voiced normally. I click "Create Quiz":

In the chat, there was text about the correct answer - this is convenient. But when I sent "Next", there was an error generating the response:

Although ideally, the next question should have been generated.

Ideally, it is worth adding a "Next Question" button.

By the way, there is a button under the input field - it is unnamed. It would be better to name it "Submit".

Also, it's better to use textarea instead of input type="text": sometimes AI requests can be multi-line.
Although at this stage it's probably not necessary. Also, we don't want them to send large prompts that overload Rumi.

Story - stories:

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

What is immediately noticeable:

1. The cursor does not enter it. In fact, as in other cases above. It would be more convenient if the cursor entered the modal.

2. The story navigation buttons are not labeled, as is the modal close button. It would be better to name them "Back", "Forward", and "Close".
   For info: movements are implemented as "Click" (likely div or similar), and closing is a button button or input with type="button".

Below on the main page there is a search. The "Find" button under the text field is not described. It would also be good to add aria-label="Find".

Further down - heading level 2 "Choose a category".
But the categories themselves are level 4 (h4) for some reason. Logically, they should have been h3.
Better to replace.

And even better - just make a ul li list with links. Because listening to headings before elements is not very convenient. Yes: you can navigate through links with the "k" key, but not everyone will do this.

In the recommended courses, there is some button under the banner of each course. It is unnamed, and I don't understand its purpose: nothing happens after clicking. Better to hide or name it.

Moving to the "Catalog" page:

Search is also without a named "Find" button, but everything is accessible.

But there is a moment that worsens usability:

• The user has to select one category and view lessons in it. But what if they are not sure which one is interesting, or want to choose several? They have to choose and then cancel the selection.

• It would be better to have a "Filter" button. After clicking, a modal window opens displaying a list of categories with checkboxes input type="checkbox". The user selects the necessary ones and clicks "Configure".
  After that, a list of courses with the selected ones appears.

Selected "Investments":

Everything is accessible. It would be great to see the learning progress here as well.

But as I already said, such a selection is quite inconvenient. If I realize that the category is not interesting for now, I have to click "Reset":

And the entire list appears. It's better to display it in this format right away.

I opened the category selection by clicking the "Categories" button:

As I said before, multiple selection is better.

Although, of course, it might be worth conducting A/B testing.

Sorting is available well.

I chose the first one about Bitget wallet:

Here, under the "Back" link, there are two buttons:

1. The first one I don't know what it does: after clicking, nothing visible happened.

2. The second one allows you to share the course.

Neither is signed. Better write the names via aria-label.

Below 4.8 and 3621. Better add what this is. For example:
Rating: 4.8
Students: 3621.

In the reviews, the "Show All" button opens a modal window with an unsigned "Close" button.

We will consider the learning process separately, as this is a whole important separate section.

1. No name for the "Find" button

2. The "Favorites" heading and courses in favorites are level 3. It would be better to make "Favorites" h2, and courses h3 or section heading h3 and courses h4.

3. In the favorites list, there is again a button without a name under the images.

4. Under 4.8, the number "0" is written - it's unclear what this is.

5. Better to separate sections with hr (separator). This will improve navigation convenience, as now when listening to the presence of links, it's not immediately clear that this is no longer the next element in favorites, but "Completed".

In completed, including after opening via the link in the heading, everything is accessible.

I'll just say that the review modal is well implemented: the cursor immediately goes to the text input field.
But the downside is that there is no "Close" button at the top.

Clicked "Continue Learning" in the catalog or on the course page, "Start Over" in my courses:

Several points:

1. The cursor does not immediately go into the modal window.

2. There is no close button - inconvenient.

3. Lesson buttons have no name. At least the next lesson used to be marked with the word "Start", but now it's in the alt below the button - this is not very convenient.

4. It's better not to put the list of course lessons in a modal window, but to display it below the "Start" button, which would work as a spoiler.
   Otherwise, there are too many nested modals.

After opening the list of lessons, I click on the button of the first one:

Another modal window appears!
The cursor goes into it - that's good. But there is no close button (you'll have to use the escape key.

Also, I don't know why this extra click is needed.

It would be better if the slides appeared immediately after selecting a lesson in the list. Now you have to click "Start" again:

From an accessibility standpoint, this is even more inconvenient, as after clicking, the cursor does not land in the correct modal window: you have to press tab.

Here I scrolled through some slides of the lesson:

This is done easily: with the button under the image.

Only the image itself is inaccessible. It is read out to me as "graphics info block 1008".
That is unclear.

In essence, the functionality of the lesson content is currently inaccessible to the visually impaired.

I asked to add recognition, but apparently they haven't gotten to it yet.

Quizzes are accessible. I went to the last slide and clicked "Next". Visually, another modal appeared:

You just have to press Tab to see it. Otherwise, you won't understand that something has already appeared.

I remember the first time I pressed "Next" several times, not understanding what was going on: why nothing was happening.

I don't understand why instead of another pop-up window, they don't just replace the slide with text congratulating you and a button to return to the course.

The second problem...

Here is the list of lessons:

I click on the second button:

Again, as far as I'm concerned, an unnecessary modal with "Start".

I click on this button:

The cursor is on it: it reads as "button expanded opens dialog Start".

But for some reason, the first time after pressing the Tab key, everything except the lesson list closed...

It only worked on the second try.

Although this might have been due to long loading: on the third lesson, I tried - it worked immediately.
Yes: indeed:
If you press "Tab" immediately after clicking "Start", everything closes instead of the modal appearing.

I'm glad that after returning to the course, the modal window with the "Start" button stopped appearing, which was renamed to "Start over" or something like that: then you had to press Escape again to return to the lesson list.

I liked how the quest is implemented:

As you can see, "Start" is not in a separate modal, but right here.
Although there is a downside to this as well: you have to go to the end of the window to find the button.

In the quest window with the form, everything is available, but there is no "Close" button:

Because of this, I cannot close the modal window: Escape doesn't work for some reason...

We move to this page:

The first button under the login opens settings. It's better to name it aria-label="Settings".

In the modal window, the close button also has no name.

The rest is quite accessible.

It can also be named as done with "Tasks".

By the way, in the task modal window, only the close button is not described.

Everything else is great!

Although after clicking "Complete" on a running task, the cursor exited the modal window: it's better to leave it as in the lesson slides.

In the "My OA Token" modal window, the help button explaining what OA is is not described. It's better to add "?" or "Help".

In the referral program:

After clicking "All Referrals", another modal window opens if this one is already open.
Perhaps it's worth considering implementing a profile page with tabs (not pages at the bottom, but separate tabs at the top).

And for convenience, it would be better to add a "Copy Link" button, because you don't always want to share to favorites or some chat / channel.

With the "Show All" button in the inventory, everything is available except the close button - it has no name.
The same problem with a specific item (otherwise great).

In achievements, list items are labeled as "collapsed button opens dialog graphics achievement 3" - this is unclear. After opening the description, it is there.
Better: display them here as well, and remove technical designations like "achievement 3".

They say it's an interesting game, but it doesn't load at all for me:

This is in the Unigram desktop client. Unfortunately, Telegram Desktop is not accessible to the visually impaired due to the use of QT.

But it works in Telegram web:

The bot's main page is generally accessible.

I was even able to start and complete the game! Although you rush to answer the question, it's not easy to get to it: better make the round title an h2 heading.

In the "Friends" section, it would be great if you could add not only by ID, but also by Telegram login and nickname.
Because you have to find out their ID - it's inconvenient...

Also, the "Share" button has no name. It would be better to name it accordingly.

But I received the following link:

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

is available at 90%.

In the main bot, it would be good to add names to the modal window close buttons, add text recognition for lessons, and change the modal window system.

Thank you for your attention, and I would be happy to share this accessibility review for the visually impaired.

If you came to the article from another source, subscribe to my channel https://t.me/blind_dev - there you will find new accessibility reviews, analysis of projects according to 4K+ (team, concept, coin, code + practice) and news about my developments.

I've already talked about Open Academy for a long time. Just to remind you, it's a Telegram mini app for learning finance (and other areas in the future) right in Telegram and in a convenient format.

I like the project. So I decided to write an accessibility review so they can improve it.

1. If some elements only have icons and they are important (there is interaction), add the aria-label="name" attribute to them. This will greatly simplify the work.

2. Add tabindex=-1 to modal windows and .focus to elements where you need to fix the cursor (JS method).

3. Add alt to images

4. Separate the content part (main tag) and menu (nav tag).

5. Make headings of different levels: h2, h3, highlighting sections of the page.

And now for the review of the bot's interface.

Let's start with the strikers:

In Nuts Farm, it was written how much I receive. There is nothing like that here. Or I don't have access. Better to add in text or write what rewards are planned.

Next is the "Rumi" button with local AI.
I click on it:

Right under the title (in html) I see a button with a menu. After opening it, the "Clear Chat" button appears. Better to name it "Actions".

Under the line "AI-ASSISTANT" there is a "BETA" button. Better to name it "About Rumi (BETA)" or something like that.

The list of prompts is voiced normally. I click "Create Quiz":

In the chat, there was text about the correct answer - this is convenient. But when I sent "Next", there was an error generating the response:

Although ideally, the next question should have been generated.

Ideally, it is worth adding a "Next Question" button.

By the way, there is a button under the input field - it is unnamed. It would be better to name it "Submit".

Also, it's better to use textarea instead of input type="text": sometimes AI requests can be multi-line.
Although at this stage it's probably not necessary. Also, we don't want them to send large prompts that overload Rumi.

Story - stories:

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

What is immediately noticeable:

1. The cursor does not enter it. In fact, as in other cases above. It would be more convenient if the cursor entered the modal.

2. The story navigation buttons are not labeled, as is the modal close button. It would be better to name them "Back", "Forward", and "Close".
   For info: movements are implemented as "Click" (likely div or similar), and closing is a button button or input with type="button".

Below on the main page there is a search. The "Find" button under the text field is not described. It would also be good to add aria-label="Find".

Further down - heading level 2 "Choose a category".
But the categories themselves are level 4 (h4) for some reason. Logically, they should have been h3.
Better to replace.

And even better - just make a ul li list with links. Because listening to headings before elements is not very convenient. Yes: you can navigate through links with the "k" key, but not everyone will do this.

In the recommended courses, there is some button under the banner of each course. It is unnamed, and I don't understand its purpose: nothing happens after clicking. Better to hide or name it.

Moving to the "Catalog" page:

Search is also without a named "Find" button, but everything is accessible.

But there is a moment that worsens usability:

• The user has to select one category and view lessons in it. But what if they are not sure which one is interesting, or want to choose several? They have to choose and then cancel the selection.

• It would be better to have a "Filter" button. After clicking, a modal window opens displaying a list of categories with checkboxes input type="checkbox". The user selects the necessary ones and clicks "Configure".
  After that, a list of courses with the selected ones appears.

Selected "Investments":

Everything is accessible. It would be great to see the learning progress here as well.

But as I already said, such a selection is quite inconvenient. If I realize that the category is not interesting for now, I have to click "Reset":

And the entire list appears. It's better to display it in this format right away.

I opened the category selection by clicking the "Categories" button:

As I said before, multiple selection is better.

Although, of course, it might be worth conducting A/B testing.

Sorting is available well.

I chose the first one about Bitget wallet:

Here, under the "Back" link, there are two buttons:

1. The first one I don't know what it does: after clicking, nothing visible happened.

2. The second one allows you to share the course.

Neither is signed. Better write the names via aria-label.

Below 4.8 and 3621. Better add what this is. For example:
Rating: 4.8
Students: 3621.

In the reviews, the "Show All" button opens a modal window with an unsigned "Close" button.

We will consider the learning process separately, as this is a whole important separate section.

1. No name for the "Find" button

2. The "Favorites" heading and courses in favorites are level 3. It would be better to make "Favorites" h2, and courses h3 or section heading h3 and courses h4.

3. In the favorites list, there is again a button without a name under the images.

4. Under 4.8, the number "0" is written - it's unclear what this is.

5. Better to separate sections with hr (separator). This will improve navigation convenience, as now when listening to the presence of links, it's not immediately clear that this is no longer the next element in favorites, but "Completed".

In completed, including after opening via the link in the heading, everything is accessible.

I'll just say that the review modal is well implemented: the cursor immediately goes to the text input field.
But the downside is that there is no "Close" button at the top.

Clicked "Continue Learning" in the catalog or on the course page, "Start Over" in my courses:

Several points:

1. The cursor does not immediately go into the modal window.

2. There is no close button - inconvenient.

3. Lesson buttons have no name. At least the next lesson used to be marked with the word "Start", but now it's in the alt below the button - this is not very convenient.

4. It's better not to put the list of course lessons in a modal window, but to display it below the "Start" button, which would work as a spoiler.
   Otherwise, there are too many nested modals.

After opening the list of lessons, I click on the button of the first one:

Another modal window appears!
The cursor goes into it - that's good. But there is no close button (you'll have to use the escape key.

Also, I don't know why this extra click is needed.

It would be better if the slides appeared immediately after selecting a lesson in the list. Now you have to click "Start" again:

From an accessibility standpoint, this is even more inconvenient, as after clicking, the cursor does not land in the correct modal window: you have to press tab.

Here I scrolled through some slides of the lesson:

This is done easily: with the button under the image.

Only the image itself is inaccessible. It is read out to me as "graphics info block 1008".
That is unclear.

In essence, the functionality of the lesson content is currently inaccessible to the visually impaired.

I asked to add recognition, but apparently they haven't gotten to it yet.

Quizzes are accessible. I went to the last slide and clicked "Next". Visually, another modal appeared:

You just have to press Tab to see it. Otherwise, you won't understand that something has already appeared.

I remember the first time I pressed "Next" several times, not understanding what was going on: why nothing was happening.

I don't understand why instead of another pop-up window, they don't just replace the slide with text congratulating you and a button to return to the course.

The second problem...

Here is the list of lessons:

I click on the second button:

Again, as far as I'm concerned, an unnecessary modal with "Start".

I click on this button:

The cursor is on it: it reads as "button expanded opens dialog Start".

But for some reason, the first time after pressing the Tab key, everything except the lesson list closed...

It only worked on the second try.

Although this might have been due to long loading: on the third lesson, I tried - it worked immediately.
Yes: indeed:
If you press "Tab" immediately after clicking "Start", everything closes instead of the modal appearing.

I'm glad that after returning to the course, the modal window with the "Start" button stopped appearing, which was renamed to "Start over" or something like that: then you had to press Escape again to return to the lesson list.

I liked how the quest is implemented:

As you can see, "Start" is not in a separate modal, but right here.
Although there is a downside to this as well: you have to go to the end of the window to find the button.

In the quest window with the form, everything is available, but there is no "Close" button:

Because of this, I cannot close the modal window: Escape doesn't work for some reason...

We move to this page:

The first button under the login opens settings. It's better to name it aria-label="Settings".

In the modal window, the close button also has no name.

The rest is quite accessible.

It can also be named as done with "Tasks".

By the way, in the task modal window, only the close button is not described.

Everything else is great!

Although after clicking "Complete" on a running task, the cursor exited the modal window: it's better to leave it as in the lesson slides.

In the "My OA Token" modal window, the help button explaining what OA is is not described. It's better to add "?" or "Help".

In the referral program:

After clicking "All Referrals", another modal window opens if this one is already open.
Perhaps it's worth considering implementing a profile page with tabs (not pages at the bottom, but separate tabs at the top).

And for convenience, it would be better to add a "Copy Link" button, because you don't always want to share to favorites or some chat / channel.

With the "Show All" button in the inventory, everything is available except the close button - it has no name.
The same problem with a specific item (otherwise great).

In achievements, list items are labeled as "collapsed button opens dialog graphics achievement 3" - this is unclear. After opening the description, it is there.
Better: display them here as well, and remove technical designations like "achievement 3".

They say it's an interesting game, but it doesn't load at all for me:

This is in the Unigram desktop client. Unfortunately, Telegram Desktop is not accessible to the visually impaired due to the use of QT.

But it works in Telegram web:

The bot's main page is generally accessible.

I was even able to start and complete the game! Although you rush to answer the question, it's not easy to get to it: better make the round title an h2 heading.

In the "Friends" section, it would be great if you could add not only by ID, but also by Telegram login and nickname.
Because you have to find out their ID - it's inconvenient...

Also, the "Share" button has no name. It would be better to name it accordingly.

But I received the following link:

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

is available at 90%.

In the main bot, it would be good to add names to the modal window close buttons, add text recognition for lessons, and change the modal window system.

Thank you for your attention, and I would be happy to share this accessibility review for the visually impaired.

If you came to the article from another source, subscribe to my channel https://t.me/blind_dev - there you will find new accessibility reviews, analysis of projects according to 4K+ (team, concept, coin, code + practice) and news about my developments.