{"id":7575,"date":"2023-09-19T08:30:00","date_gmt":"2023-09-19T15:30:00","guid":{"rendered":"https:\/\/cloudfour.com\/?p=7575"},"modified":"2023-09-18T14:53:26","modified_gmt":"2023-09-18T21:53:26","slug":"starfield-accessibility","status":"publish","type":"post","link":"https:\/\/cloudfour.com\/thinks\/starfield-accessibility\/","title":{"rendered":"Starfield\u2019s Accessibility Problems"},"content":{"rendered":"\n

I\u2019ve been playing a lot of Starfield<\/em> lately, the new game from Bethesda Studios, and I really enjoy it. Flying my little spaceship around, pretending to be Naomi Nagata from The Expanse<\/em>, and digging the NASA-punk design aesthetic is a lot of fun. But there\u2019s one little thing that bothers me.<\/p>\n\n\n\n

In the game, you interact with a lot of computers. Ship controls, desktop terminals, and information kiosks abound. And I have yet to interact with a single one that didn\u2019t have some sort of accessibility problem.<\/p>\n\n\n\n

To be clear, I\u2019m not talking about the game itself \u2014 though it has its share of accessibility woes<\/a> \u2014 I\u2019m talking about the ability to use the in-game computer UIs. Let me show you some examples:<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

There are a lot of information kiosks in Starfield<\/em>, and they suffer from a common accessibility problem \u2014 insufficient focus indicators. Here we have a kiosk with only two options, using the Ryujin Industries brand color of red. Quick question: which button is active right now? There\u2019s literally no way to tell.<\/p>\n\n\n\n

When building websites in the real world, this is a common problem. For sighted users with a mouse, highlighting a button by changing color when they hover over it is fine, because the user knows where their mouse is. But for low-vision users or keyboard users, we add a focus ring to make it clear which button is active. Ryujin Industries may have an accessibility lawsuit in their future.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Here\u2019s another example, from the big city of New Atlantis, one of the first places you visit in the game. Although they have the same insufficient focus indicator, it\u2019s less of a problem because there\u2019s more than one button, so it\u2019s at least clear which one is colored differently. But there\u2019s another, sneakier problem here. How many buttons are available?<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Surprise! It\u2019s six<\/em>. That\u2019s right, there were two buttons scrolled off-screen. Now, technically, there is<\/em> a scrollbar, but I can tell you that I didn\u2019t notice it until I took these screenshots. It\u2019s that tiny thin grey line to the left of the buttons.<\/p>\n\n\n\n

This is a bad design for a few reasons. First, the thinness of the scrollbar means it\u2019s easy to miss. The fact that it\u2019s using the same thickness and muted grey as all the other decorative lines<\/em> in the background aggravates the problem. Finally it\u2019s on the left side, which is non-traditional for left-to-right languages.<\/p>\n\n\n\n

I would suggest moving the scrollbar to the right, making it thicker and tweaking the colors to stand out a bit more. Or even consider ditching the scrollbar entirely. There\u2019s plenty of room on the screen to show all six buttons.<\/p>\n\n\n\n

Oh, and I\u2019d get rid of those four dots at the bottom of the list. They look like an ellipsis, which makes me think I\u2019m supposed to be able to expand it to see more, but it\u2019s just a design element.<\/p>\n\n\n\n

Perhaps because the scrollbar is so hard to notice, the designer of this next screen did away with it entirely, opting to use pagination instead.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

To their credit, the pagination controls aren\u2019t hidden away, though there are still some problems here.<\/p>\n\n\n\n

They certainly don\u2019t have enough contrast, making them difficult to read for low-vision users, and the current page indicator, like the buttons, is only indicated by a color change. This could be addressed by darkening the text on the controls and by making the active page indicator a bit larger than the others.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Lastly, we have a view of the standard Starfield<\/em> desktop computer interface. Files and folders are shown on the desktop and can be activated to open a window showing the contents. The active file is only indicated via color, but the contrast change is strong enough that it may be sufficient.<\/p>\n\n\n\n

But let’s turn our attention to the window showing the text of the file. Oh dear, our low-contrast skinny left-hand scrollbar has returned. There is (practically) no indication to the user that they\u2019re missing the last bit of the file. The scrollbar recommendations I made before apply here, but in addition, they might consider adding a scroll shadow<\/a> along the bottom to hint to the user that there\u2019s more to read just off-screen.<\/p>\n\n\n\n

I love Starfield<\/em>, but I find it depressing that even in a game emphasizing hope and human achievements, they couldn\u2019t imagine a world with accessible user interfaces.<\/p>\n","protected":false},"excerpt":{"rendered":"

Starfield has a lot of computers to interact with: Ship controls, desktop terminals, and information kiosks. And they all have accessibility problems.<\/p>\n","protected":false},"author":21,"featured_media":7577,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[232],"tags":[346,348,347],"class_list":["post-7575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","tag-games","tag-kiosks","tag-starfield"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/cloudfour.com\/wp-content\/uploads\/2023\/09\/starfield-kiosk-na-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/7575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/comments?post=7575"}],"version-history":[{"count":0,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/7575\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media\/7577"}],"wp:attachment":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media?parent=7575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/categories?post=7575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/tags?post=7575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}