cvs-health / ios-swiftui-accessibility-techniques

Demonstrates iOS SwiftUI Accessibility programming techniques using live good and bad examples that can be tested with VoiceOver and other AT. Includes documentation for developers explaining how to code accessible patterns for iOS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Accessibility Hints on Data Table rows

Steady5063 opened this issue · comments

The data tables documentation is awesome! The only thing I hesitate on is the use of an .accessibilityHint to convey row/column information. The only reason I say that is because there are still users who choose to have hints turned off.

The feedback I have gotten from VoiceOver users is to include the association of header and row within the label for each item.
That way whether hints are turn on/off it is conveyed. Now this does cause other potential issues such as overriding the text of the item in the cell or labels being super long.

Just as a note, I do not condone having the label say "Row " or "Column <xyz". Same as what you got documented :)

Thanks for the feedback! I also used to recommend modifying the .accessibilityLabel to prepend the row and column header text to the cell but then I was thinking the VoiceOver user may not want to hear a long row and column header text always spoken before the cell text and they may prefer to hear the data cell text first and then the long row and column header text second. There's definitely no prescribed approach to take here since there are no native iOS data table semantics like th, td, or caption, for table in HTML.

I've updated the docs and the swift file to include using both techniques either hint or label. This would be a good usability test with VoiceOver users.

.accessibilityHint VoiceOver says "$30, 90 Day, CLONIDINE 0.1mg"
image

.accessibilityLabel VoiceOver says "90 Day, CLONIDINE 0.1 mg, $30"

image

The updated example is waiting approval in the App Store now should be out fast https://apps.apple.com/us/app/swiftui-accessibility-techs/id6474141089

I agree 100% with you that this would be a great usability test with real users to see what the preference is!

The consistent feedback I have gotten is labels including the info. However, we have gotten a range of feedback that goes from hints, to it not announcing EXACTLY as web. It is one of those things where I think there is no middle ground in a lot of apps currently, it is is either not announcing an association OR mobile teams are trying to openly mimic web. (bleh)

Either way the update you got will drastically help improve data tables in mobile apps since there isn't a load of guidance out there!

I could not find a single page with guidance on building accessible data tables for mobile apps.

What about using accessibilityValue to communicate a cell's row/column header information? I personally think this modifier has great potential to expose non-label information in a way that is more robust than relying on accessibilityHint.

What about using accessibilityValue to communicate a cell's row/column header information? I personally think this modifier has great potential to expose non-label information in a way that is more robust than relying on accessibilityHint.

Thanks for the feedback! I can update the page with an additional good example showing the row and column header text in the a11yValue.

I've updated the technique and doc with a11yValue. Will get it into the App Store soon.