supertriodo / Arena-Tracker

Arena Tracker is a deck tracker that gives you a lot of extra info while playing Hearthstone.
GNU General Public License v2.0
292 stars 33 forks source link

Accessibility. Implement accessibility for blind screen reader users while drafting. #146

Closed sevapopov2 closed 1 year ago

sevapopov2 commented 1 year ago

Hello. I am a blind Hearthstone player and would like to use arena tracker while drafting arena decks. I use screen reader to operate the computer and play Hearthstone. Currently, arena tracker works as an overlay that shows the player the rating of cards from different sources when hearthstone arena draft is opened. This aproach is not accessible for blind screen reader users. I have a suggestion how drafting could be made accessible: It could be a separate window that a screen reader user can switch to, there can be 2 UI elements: a list box containing the list of sources from where the information about the card rating can be viewed (E.G. hsreplay, heartharena) and a readonly text edit field where the name of a card and it's rating can be written. For example: Card 1 - 45.5% Card 2 - 66.5% That way the user can view the rating of cards and it can be easier for him to choose the card while drafting. It can be super helpful for people who are learning to play arena, especially for blind players who cannot use any deck trackers, overlays to help themselves to learn building a good arena deck. Would it be possible to consider implementing that? If any help regarding Accessibility testing is needed I am ready to help.

supertriodo commented 1 year ago

Hi there, Right now, apart from the window overlay, AT shows the scores in one of the main app tab, the first one called draft tab that is created when you start a draft and destroyed when you finish it. In that tab the scores are shown in labels following this structure:

These 3 fields are repeated from top to bottom for each of the 3 cards.

This seems like one of the solution you were proposing.

I hope you get it to work with the window screen reader. Triodo

sevapopov2 commented 1 year ago

Hi, thank you for your answer. Unfortunately, the tab with  scores for cards is not accessible. It is not readable by NVDA screen reader I use. Steps to reproduce:

  1. Download NVDA screen reader from here
  2. Install and launch it.
  3. Launch arena tracker app.
  4. Launch hearthstone.
  5. Go to modes/arena and start a run.
  6. Choose a hero.
  7. After the deck drafting process starts, move to AT Scores window.
  8. Close it with alt+f4.
  9. In arena tracker window move with tab key. The only things you will here is labeled rescan cards button and then unlabeled buttons will be presented as button button button because they are not labeled. There is no possibility for screen reader user to view the card name, it's score and it's rating. Expected result: The tab with arena draft is accessible for screen reader. User should see an edit field with readonly status with information about cards: card name, it's scores. Actual result: Screen reader user cannot read the information about the cards/scores using the keyboard in the arena tracker drafting tab.

Thank you.

sevapopov2 commented 1 year ago

Hello, @supertriodo Would it be possible to consider that in the future updates? Currently, the labels and information you listed aren't accessible with the keyboard/screen reader. You can read about keyboard accessibility and importance of roles, names and values in WCAG standart. Thank you!

supertriodo commented 1 year ago

Hi, I'll keep this post as a reminder and see what I can do.

But to be honest, it doesn't make much sense to implement all this accessibility changes on a deck tracker when the game is it based on, hearthstone, doesn't help much in that sense.

sevapopov2 commented 1 year ago

Hello, @supertriodo Thank you for your answer! Actually, as far as Hearthstone accessibility there is a way for blind and visually impared players to play and enjoy a game as much as sighted players do. There is a patch that is called Hearthstone Access that allows blind players to play Hearthstone using the keyboard and screen reader. All game actions are outputted to screen reader and user can play ranked, arena, duels, battlegrounds and tavern brawl. However, we cannot use deck drafting tools for arena due to inaccessibility of these things. So, it makes really a lot of sense if accessibility for screen readers can be included in drafting mechanism of arena tracker, that will allow new arena players to learn how to draft decks better and progress in that! I myself took part in developing accessibility for duels mode in this patch. You can learn more about this patch and also join a discord server where I am sure a lot of users and developers can also help you in making arena tracker accessible! Thank you!

supertriodo commented 1 year ago

That was an interesting read, I didn't know there were a community made patch for that.

I don't promise anything, but I will keep these improvements in mind.

Thanks for your suggestions.

sevapopov2 commented 1 year ago

Hello, @supertriodo I have tried using this tool with sighted person today for me to read the ratings of cards and it really helped me in deck building and I got 2 wins. The only part that is inaccessible in arena-tracker is the part that helps to check cards rating. It would be really helpful to be able to check that, I think that the information can be structured in a following way for screen reader:

All that written in the text field that has readonly statement. I and other blind players will really appreciate if you could implement that, I am ready to test the accessible version. It will really help blind players community in improving the arena game play and understanding of this mode. Thank you!

supertriodo commented 1 year ago

Hi, So to be clear, right now there are labels read only that contains the scores of every card. As it is right now, does the screen reader read correclty those scores?

If so I could easily add in those same labels the name of the card at the end.

sevapopov2 commented 1 year ago

Hi! @supertriodo Thank you for answering! The thing is that I cannot reach these scores with screen reader with keyboard, there is no any place where they can be read with it. That is why I suggested to have a text field and put the information like card name and these scores there that I can navigate with the tab key to this field and read all presented info with arrow keys about all 3 cards. Then return to game, pick the card I want and then switch back and continue. Thank you!

supertriodo commented 1 year ago

Ok, when Im talking about the scores written on a readonly label I dont mean the scores shown as overlay. Apart of those there are readonly labels on the main app to which you should be able to navigate. Those only contain the scores, not the card name right now.

sevapopov2 commented 1 year ago

@supertriodo Yes, I understand that you mean the app itself and not the overlay. I mean that these scores cannot be read by screen reader when navigating with a keyboard, there is no way now that screen reader interacts with this information. I made a screen recording for your clarity and understanding the issue. You can find it here.

supertriodo commented 1 year ago

Ok I got it, I now know what you mean, very good explanation video.

I'll see if I can include the scores fields into the tab rotation. Also the 3 button unlabeled are the close app button, minimize app button and resize app button, in that order. I'll try to correctly label them.

I'll report here if I make any progress on it.

sevapopov2 commented 1 year ago

@supertriodo Great! I am glad I could explain it! I think it would be really convinient if you could implement one field where all names of cards and scores are presented, so I can move to this field with tab key, read all information in the field with arrows and choose card in the game next. It is not needed to make each label navigatable by Tab key because then it won't be logical and confusing, so it is better to make one field where all information is structured in a compact way. Tab key should navigate between buttons of rescanning cards, closing the app, minimizing and resizing, tabs and this field with cards information.

supertriodo commented 1 year ago

ArenaTracker Accessibility Test.zip

Hi there,

I've linked in this post a test version of AT for you to try.

I think the reader get the name of the buttons from the tooltip, so I've added tooltips for close, minimize and resize buttons.

I've also added an invisible readonly field you can travel to through tab. It's identified as "Accessibility cards and scores" and has the text "Card A 87 Card B 88 Card C 100".

This new field is located after the "Rescan cards" button in tab order. In my tests I seem to be able to access it as in the tab sequence the focus stop in an element between Rescan cards and close button.

If your reader can access to what its inside and read you that test text then it's great, I'll make the changes so it includes the correct text every time.

Cheers, Triodo

sevapopov2 commented 1 year ago

Hi @supertriodo, Thank you for your affert to make the software accessible! Yes, screen reader reads labels, but it reads them once by one Tab press, and I cannot move between cards with arrows to read each card separately. I have a suggestion: Maybe it is possible to make a list for screen reader where each list element is a card name and card score, like that:

So I can move to the list by Tab press and then move between cards with arrows in this list when needed to review them? Buttons close, minimize and resize are read. Thank you!

supertriodo commented 1 year ago

I don't know how to do that on QT.

Which of the following would be best for you:

  1. The previous test.
  2. Reusing the already present scores, including them in the tab rotation and tagging them with the card name. You could cycle through them with tab and shift-tab. When showing scores from HA and HSR there will be 6 fields to cycle through and only 3 if you only show from one of them (HA or HSR).
sevapopov2 commented 1 year ago

Hi @supertriodo, Unfortunately I am not familiar with QT too so I am not really helpful in the answer on how to make the way I suggested and if it is possible at all, but I think that the second option that you suggested will work for now. I think if somebody else has any other ways of improving he can help implementing them. Thank you!

supertriodo commented 1 year ago

ArenaTracker Accessibility Test 2.zip

Ok, let's try this with a proper draft and let me know how's the experience.

sevapopov2 commented 1 year ago

Hi @supertriodo, Thank you for implementing that! It works great, everything is read well and understandable!

supertriodo commented 1 year ago

Great! Nice to hear! Enjoy your arenas.

sevapopov2 commented 1 year ago

@supertriodo, Could you include these changes to the main release? I am sure it can be useful for other players too!

supertriodo commented 1 year ago

Oh for sure, they are already in the development branch and the next release in some days will come with it.

supertriodo commented 1 year ago

Implemented on the new AT release https://github.com/supertriodo/Arena-Tracker/releases/tag/v23.11

sevapopov2 commented 8 months ago

Hello @supertriodo, Unfortunately, accessibility for drafting process is broken in the last arena-tracker version. There is no Rescan button visible with tab navigation anymore and when moving between labels Screen Reader tells the word "Text" which means that the label is empty. There is no card name and information on the label. Could you please check and fix that? I can provide screen recording if needed. Thank you!

supertriodo commented 8 months ago

That's weird cause there are no changes affecting that in this release. Could someone help you to verify that the app is actually detecting the card and the screens, because it seems to me like a problem outside the accessibility range.

sevapopov2 commented 8 months ago

Hello @supertriodo, Thank you. Yes, you are right, the problem was not in accessibility. It was that cards were downloading. I suggest the following: Could you please do a progress bar that will show the cards' downloading process and make this progress bar as a separate element navigable by Tab when it is visible? It would allow to understand when cards are downloading for me as for screen reader user. For example it could look like: Downloading cards: 3/6, 50% For sighted people that were helping me to check the line that is displayed on the screen is not really clear too. If it is done like the progress bar possibly screen reader could beep, showing that cards are downloading. Thank you!