Thread:Kagehirin/@comment-1877307-20200405025622/@comment-1877307-20200406020319

Hi, I apologize if I was being vague, this was not my intention. I simply didn't want to drag on a conversation longer than I had already, if there was no interest at all.

Regarding my previous work, I am the owner of the A3! Wiki on my own site yaycupcake.com, as well as an admin on the Dragalia Lost site on gamepedia. On both, I've worked on story pages, and how to make them readable and accessible to people using different device sizes, or with different visual needs, such as different font sizes. I'm also just a web developer in general, who wants to improve the UI/UX of the web overall.

My ideas are many, as I've been experimenting with them for the past three years, both on other wikis and in my own time. I think a good way to start is to provide the user some options. Incorporating a toggle for a larger or smaller font size would allow users to have larger text if they need it, without having to zoom the entire page. By having to zoom the entire page, it means the images end up taking far too much space, and they're already quite large for a page that's supposed to be for stories to be read. It's not too difficult to implement this either, it's a simple few lines of javascript, and just making sure that the story text has a css class assigned that can be targeted.

I also think adding a toggle for options for the speaker in stories would be a big help. Again, this could be done fairly simply with just a little bit of javascript. I'd be happy to help with this if you or your team aren't sure how. My idea is to be able to toggle between the full images like you have now, and smaller icons (crops of their head only, perhaps). Additionally, it would be a help to new fans if there was an option to display the speaker's name, either near, or instead of, their image. Just a separate toggle for that to be on or off. Again, it's not too difficult to set this up.

The biggest issue for accessibility in my opinion though, is that the stories are in tables, with the rows being formatted with the first cell having an image, and the second having a bunch of text. I think what would be better is to have them in the same cell, but have the images displayed on the left by using flexbox instead. The main reason for this is that HTML tables weren't meant to display images or large paragraphs of text in this fashion, and it's not a good way to display things for people using smaller screens either. Additionally, when there's a very long monologue from one character, there ends up being a lot of wasted horizontal space, particularly on smaller screens, which is just a poor user experience. This is another reason I think the images should share the td cell with the text -- so that a media query can be used, to more easily alleviate the extra space taken up on small screens, while still allowing the same side by side view for larger screens.

These ideas I've listed here aren't exhaustive, like I said, this has been on my mind for quite a while, and is frankly what sparked my interest in trying to make other games' stories a bit easier to read. I know one size will never fit all, which is precisely why I'm proposing that options be provided by simple button toggles. I'd love to provide a demo if you're interested at all, however of course I don't have access to the CSS/JS for this wiki in particular. I may be able to rig something up client side and send the code though. If you're interested, please do let me know. And once again, I really hope I'm not coming off poorly, I just want to try and help other people enjoy the content we all care about, in a way that works for them.