Writing Justice Into Web/Mobile Projects

KIM SARABIA:
Yeah, so, I'm gonna go ahead and start since it's already 1.05. Thanks for coming to the session, hopefully you're in the right place. This is writing justice into web and mobile projects. I'm Kim Sarabia, I'm a web developer at center for research libraries. We are a research library consortium based here in Chicago, in the university of Chicago campus. And we handle unique and rare research materials and provides services for both students and academics all around the world. And today I wanted to do just like a very experimental sort of case study role play as like the part one. And then part two, I wanted to hear more about your perspective around the idea of writing justice into web and mobile applications. So, what really prompted this thought was I was driving and listening to WBEZ and PR. And one of the big issues right now here in Chicago, is that a lot of elderly black and Brown folks are having a lot of trouble finding vaccine sites and finding access to vaccines. In the beginning of the year, there were about, there was a vast unequal access to vaccines where a lot of folks were coming in from the suburbs and taking up a lot of the vaccine distribution and a lot of the folks that were the most impacted by COVID, the most that so, black and Brown communities in Chicago were not getting the access they needed.

The journalists did a really great report on it. And a lot of the comments were around how difficult it was to navigate these websites, these vaccine signup websites. And I thought, wow, like, that's something we do, right? We are web developers, we think about these forms, on a daily basis, we are always troubleshooting forms. We're creating forms, where you know, we're working on things like web forums, things that a lot of folks are probably using to sign up for things that are really important vital services. But how come we can't make these accessible? How come we can't make these more accessible to communities of color, to aging populations? Why are we having this problem when we have, when we're making amazing, great strides and other things like machine learning, AI? Why can't we do basic things like make forms better? So, that's why I wanted to have this discussion today. And I figured one way we can sort of get our brain juices flowing was by having a fun sort of case study.

So if you check out the chat, oops! Okay. (CROSSTALK) yeah, the chat got deleted. So, I can also share my screen, but this is the first link. So sort of the case study, what page that we're gonna pretend that we are gonna improve. So if the Chicago COVID vaccine finder and I can quickly share my page. We'll see if this works. One moment, here we are. So, we are in the Chicago how to get vaccinated page and I figured and if this is not helpful, we can also move on, but I figured we can sort of do a little bit of role play, pretend that we are in a design meeting. I've just told you the context. We have a lot of folks, a lot of folks in communities of color here in Chicago, that are saying aging communities of color. Maybe you've heard the news and you know, I've explained it to you, but you've heard that they're having trouble navigating this web page and pages like this, in order to find the COVID and, or in order to find like a COVID signup form or a COVID appointment form. And giving you just to give you more context and kind of to help you out and sort of how can we improve this page?

I'll give you some useful statistics. Roughly one in 10 white folks report owning a desktop or lots of computer compared to only 58% of black folks and 57% of Latinx people. Some 25% to 20 and 23% of Brown and black folks are smartphone only, internet users. Meaning they lack traditional home broadband service, but they do own a smartphone. And in comparison, only 12% of white folks rely on smartphone for internet. Another thing that's interesting for black Americans in particular libraries play an important role. 42% of black library users say they use library computers and internet connections compared to only one quarter of white folks and 24% of Latinx folks, according to the 2016 census data or Pew research research center data. So, with that in mind, thinking about mobile reliance and mobile for internet use, thinking about the limitations of speed with mobile, as well as basic access to desktop, what are some, how would you start improving a page like this? Also keeping in mind the accessibility considerations for the aging populations that are right now able to sign up for the vaccine, also folks with disabilities.

While you all are thinking about it, I will also add this to the chat. It's kind of a cheat sheet, of how to make pages more accessible for aging populations, and that is part of the W3C initiative.

JUNE:
Well, I was just sort of going through and making it, you know, responsive and mobile view. And I don't use a mouse for reasons that it doesn't matter why I don't use a mouse, but the information isn't highlighted on focus. So I can't tell where I am on the page. So that could be troublesome for some folks.

KIM SARABIA:
Do you mind explaining to folks why that might be an issue?

JUNE:
Well, because, because I don't know where I am on the page, I don't know if I'm on an interactive element, so I can't open an accordion or if I hit a space bar, I opened the wrong accordion. So it's really making my navigation experience horrible.

KIM SARABIA:
Right.

ANDREW:
The links have an outline, but the accordions don't, that's exactly,...

KIM SARABIA:
Oh, I see. Yeah, yeah, that can be an issue.

JUNE:
And then even some of the stuff, the line is so small, you know, as far as like pixels wide, that it's hard to tell you're on something too. So...

KIM SARABIA:
The line, this line?

JUNE:
(CROSSTALK) When I'm on the visible focus and I'm tabbing through the just, there's not enough contrast to tell too.

KIM SARABIA:
Yeah. That makes sense. And then while I see that they did make an attempt to kind of even stylize elements on focus, it's not consistent. That's a really good point June. Anyone else notice anything, that's a big one? If you resize or just take a look at the page on mobile, there's one glaring issue that can create a huge barrier for folks who don't speak English.

JUNE:
Well, the select language is inside the mobile menu, and not outside the mobile menu.

KIM SARABIA:
So that was a big, no, no, for me, in terms of, I think and even this in itself I feel like there could be room for improvement. I actually am not sure this would be a good discussion topic later if people are interested. But yeah, that was a big issue for me was as I've mentioned earlier good amount of folks, communities of color rely mainly folks that have been mainly and tremendously impacted by the virus and rely, you know, desperately need to have more exposure to this information. There is no way to translate this page or no obvious way to translate this on mobile. And as we know, a good percent of populations that critically need this right now are majority are smartphone only users. And as I'm talking also feel free to check me or correct me if I'm wrong, if I'm using the terminology, that sounds off, definitely feel free to call me out. I'm sort of also, this is very experimental for me, so yeah, let me know. But that was a big thing for me, that was a big issue for me, was, you know, seeing that that was missing for mobile

ANDREW:
(INAUDIBLE) that I changed the language, and the filters in the map, didn't go along with the language change. It was great. I change it to Spanish cause I know a little bit of Spanish, but when I changed the language and then I go to the filters, the filters inside that map component do not translate as well. So, that's something that I find on a lot of translation projects I've been on is trying to find all the translations and all the places. Make sure that the entire interface is supportive.

KIM SARABIA:
Right, can I ask, what you were using to change the language, just using this component or something local?

ANDREW:
Correct. No, I used that component. I was on my desktop and I changed it. And then I went down because I had a feeling that the filter that was a self-contained kind of Google component. Yeah. Click the filter that's right there. Again, that's just been the trickiest part of a lot of EMU projects. I've been a part of is to QA, had enough to find all the places where the translations are necessary.

KIM SARABIA:
It's a lot of hard work just to cover all your bases. And you know, keeping in mind, whoever built this probably was doing it in a tremendous rush and maybe could not QA every piece, every single component. So, you know, this is not also to bash whoever built this page, designs page. This is sort of, we're learning what can be better, what we can do in our own projects, if we're ever assigned something that's critical, which I would love to as a next step later here, folks who have had to build and design forms, components that serve that are basically gateways to critical services. So, some other things that I found and I'll just do it quickly so I could see if there's anyone, anyone else have any thoughts, but basically when you first get to this page, there's already it's already an overwhelming amount of information, and there is no direct way to just enter your information and immediately find a place to get the vaccine or to sign up for the vaccine. There's a bunch of different options and it's overwhelming.

So, this could certainly use with a little bit of narrowing down of simplifying the interface for folks teams, especially aging populations that require just a more straightforward interface. That's more easily understandable. Also, this text it's very hard to read. The cursor is, of course it's not modified in any way that can make it easier to track. And folks have already mentioned other things like with the translation. Any-

JUNE:
Also with our aging populations, the links are gonna be harder to identify because they're only (INAUDIBLE). So if you experienced like low vision or anything like that, or tunnel vision, those links aren't immediately identifiable. Because they're just color rather than like being bold or underlined or and especially with our aging population who might have gotten used to the internet when it first came out when all of our links were underlined. I think it's really important just to underline all our links when that's sort of our target demographic. Well, now that this is the target demographic, but it's an important, important piece of that demographic.

KIM SARABIA:
And I believe just relying on color is, we had violation and it doesn't meet AA standards. So, that is something that to keep in mind is that we can't only rely on color, on focus hover or the other States. So, yeah, that's a really good point June. Anyone else found anything interesting or something that they would improve on?

BENJI:
Well, looking at the page with a 360 pixel wide, it's an awfully large block of text before you get to the map. And then if you're, I don't, I don't know, it might be more of a problem on my phone imitator and then the web browser, but scrolling, and then trying to scroll when the map comes and scroll trends into the zoom is a bit of a nuisance. (INAUDIBLE) And if the map shows up the whole view part, then you really can't scroll

ANDREW:
Point above, they do ask for help with assistance with the map. So that is good. I just noticed that now. So as much as I said about the filters, that was more out of personal experience. But I do find that good, like reading into the map, it's not like there's the map and then there's the help. So, a sequencing kind of adding on to (UNKNOWN) point of sequencing content, it's always good to set people up that there's a map coming and that if you need help with a map and then present the map, that's a helpful sequence of order. I've been on sites where you were presented with something that's not very helpful, and then after the fact, after you've kind of all the way through it, you're like, Oh! By the way, we can help you with a map. It's like, I already went through all of the trouble. So that's a positive, I would say.

KIM SARABIA:
Yeah, that's a good point, Andrew. So, the fact that they added it here, I suppose, added this info, which I think is very clear actually, that, you know, it is something that your eye can focus on. So, in terms of eye tracking, I think it's laid out really well here. It's great that they put that here instead of say at the very end of the page. So that is something. And yeah, to your point, what has ended up happening was because folks have been complaining about the UI and the UX is just the fact that the layout and just it's been difficult to navigate and they have given up and just gone ahead and made a phone call.

BENJI:
That phone number is plain text.

KIM SARABIA:
Oh, okay.

BENJI:
How hard would it be to put it inside a TEL tags, mobile user can click on it, (A)But we're almost helping you better. That's a great idea.

KIM SARABIA:
So, Benji, do you mind just explaining for folks who might not understand what's wrong with not having it in the Tel, in the TEL attribute?

BENJI:
So, if I'm looking at this on my phone, which I'm faking doing by looking at it in the browser and (INAUDIBLE), but if I'm actually looking at it on my phone, what I wanna be able to do, and I see a phone number is put my finger on that phone number, and have the phone start dialing. And I think that'll happen automatically if you just put the phone number inside the right HTML tag, which they have (CROSSTALK).

ANDREW:
there's another problem with this. I am on my iPhone emulator on my my computer. I can share my screen really quick and show you the experience.

KIM SARABIA:
Okay. let me just back share.

ANDREW:
Yeah, I think I can share. So it will be show you quickly what's going on. So, you all see my screen? So, I've had this discussion quite a few times with 312.746., that's not a real phone number. Devices are pretty smart most times, and they can tell your phone number, especially if they know your locale, but check this out. So, It thinks it's a phone number, but when I click on it, it's saying, 'sorry it can't open because the address is invalid'. I don't know if that's because it's gonna try and call, so maybe I could visit it on my actual phone and see if it's ready...

JUNE:
it maybe because the periods make it look like a website? (CROSSTALK).

ANDREW:
Oh! That's true. (INAUDIBLE) you know, whatever.com. So, yeah, let me visit this on my actual phone. I didn't know if this service meant, like I can't actually make a phone call on this device, but let me try my phone. I'll hand you the screen back, but I thought that was an interesting thing. So, even if they don't have the Tel link attribute, your phone can be, if you actually had dashes and had it, like in your email, a phone number could understand,

KIM SARABIA:
That totally makes sense. And, let us know if it makes a difference, if it's a dash versus a dot. I think I've been told before to avoid using that. So, that would be something interesting to verify. Anything else?

MARY:
In the paragraph below the one, two, three, four blue points, it says if you have insurance, but not have a primary care provider. And then for more information, you have to open a PDF file. Is there a problem for some folks?

JUNE:
Well, it can be if that PDF is inaccessible.

KIM SARABIA:
And it looks like I can just double check what the link looks like. Well, for one thing, it could be a problem. This could definitely be done a little better. I believe that we had a role for linking to PDFs is that it needs to be explicitly sad that it's a PDF, because if I'm a blind or someone with vision disability, visual impairment were tabbing through this, and were to click the link, and there's no indication that's a PDF, they'll just be taken to a the new, they'll just open to a new tab, I believe. And they won't really have an idea what's going on. So you need to be very explicit that it's a PDF, when it's a link.

MARY:
And do mobile users, are mobile users able to open PDF?

KIM SARABIA:
Yeah, Usually, usually but yeah, it definitely has to be something to keep in mind is that it's really important. Something like, so when you run this through something like, accessibility tool, it won't flag, something like that. Or I won't flag that, you know, the language component is missing and mobile. These are the times when you can't rely on tools and that you're really have to be up to date. And a lot of these W3C rules, we have rules that we, AI are your rules. Because it's, there's a lot of serious issues that can just be missed. And you back up them here, which is cool. Anything else?

ANDREW:
It does, it does try and call. So, as I click on it, so it is getting... That's fine. So, that's only because my Safari locally is talking to my phone saying, "Hey, this is a phone number, I think you want to call it, but to (UNKNOWN), it's not clearly defined.

BENJI:
My Android Phone does not recognize it as a phone number.

KIM SARABIA:
And that's another thing. And, you know, I'm glad that you brought up, we have one result in iOS and then we have another one, another result and talk back, or, I mean, well, in Android. So, another really important point when we're talking about these things and we're sort of having this pseudo role-play case study situation is the importance of cross browser, cross phone, cross system testing. So, it's really important to know the differences between say iOS and Android. Anything else? If not, we can move on to part two, where I will stop talking. And I would love to hear more anecdotal evidence or stories, ways that you have maybe in the past, worked on projects that provide vital services like this worked on forms that needed to be accessible that needed to be compliant that required. That's a lot of already prompts, but yeah, just there's, anyone have anything to share about any sort of projects you worked on that were vital gateways services?

JUNE:
I didn't work on the project, but I'm a hospice nurse by trade. So, sometimes one of the things we do is just hang out with our patients and there's only like three or four beds, you know, so we just hang out in the rooms. And we help them do some tasks while they're sort of making the transition to imminent death. You know, they're still cognizant, they're still writing to their families and stuff. And so sometimes what we have to do is like read their emails because, you know, they don't have access to read their emails. But forms is always a tricky one, because of the error inputs. We are always having to really help our patients fill out forms because either they're too long, so they get lost or those, the errors aren't in line and they can't find where the errors are because the focus doesn't go back to it. You know, the focus is just, you have an error on the page and we don't know where it is. So, that's a really big one for, you know, aging populations, I think, but mostly it's that the length of the form because of the form only took one page, like say on a desktop, it might be easier not to have that inline form error, but the complexity of the forms is just really challenging.

I think for our aging, for our patients.

KIM SARABIA:
To be fair also, it's also very hard to code error messages in a way where it can alert either an aging population or a screen reader user. And I think there really isn't a universal way that everyone's sort of just doing an ad hoc from what I've seen. Like for example, like a couple of weeks ago, I basically just had to rely on (UNKNOWN) to make sure that, you know, the errors were being read out and it wasn't ideal. And a lot of it had to go against the design because in order to just make sure the errors were being read out, And all the errors just had to deal with it at the top, as opposed to next to the field where it's, to the input field. So it's very technically difficult as well. But I don't know if has anyone else had these issues around error messaging?

ANDREW:
I feel like that's a battle that we try and anticipate as we go into forms. Forms to me are always such a challenging thing cause you have to keep the user in mind. So, inline is in context. But some of the things with, with Drupal is you need to process the form and then find the issues and then present them at the top and then allow them to come back down to correct those errors. So, working with back end and front end has always been quite a challenge. One of the things that I'm going to put into the zoom chat is just field sets. So there's some simple, quick wins that I've rolled into projects, just being able to collect certain choices providing a legend. It's not always an opportunity to do that, but I've done some testing on devices, like TalkBack or voiceover. It's very clear, you ask, I think the example I just said is choose your favorite monster, the crackin Sasquatch, or moth man. And there's ways to code this, where it would ask you, you know, what is your favorite monster?

And then each one of these feel individual choices of they're not quite collected or presented in context. So, I use the word context a lot when working with forms and working with developers to help collect like things together, and help the user on errors, you know, fix the problems in context. So, if I have trouble with my social security number, it might be the format or that I have dashes or something, you know, to go and correct that. Last thing too, is form labels, I'm a bit much, but form labels, being able to, like, as you click into them if it's first name, last name, and those are presented as a placeholder text, I might just put Andrew Olson for first name. I've done that before. And then I go to the next one and it says last name, and I'm like, Oh, full name versus first, versus last that can labels are super helpful. In keeping labels presented throughout the form has been something to work really, really hard on the designers that back end, front end that picks the whole team to pull that off.

KIM SARABIA:
It definitely has to be collaborative. I'm sorry (UNKNOWN), you said something?

JUNE:
No, that's okay. I just have a question back to the inline formers. I don't do a lot of development work, but I learned how to develop great when Drupal seven was being antiquated into play. And I remember conversations that inline formers was gonna be in core for triple eight. Did that ever happen?

BENJI:
Yes. JUNE: Okay. Is that something people have to turn on or is it on by default? I think it's on default.

JUNE:
Okay.

ANDREW:
I do see it in different ways. So I think it's I know a web form, I've always been meaning to dive more into web form, provides so many options. And I know the person that manages that module has worked really hard on accessibility forms. So, I do know that there's options I've worked with back in teams to help correct those, but I don't, those are great questions. I don't know the answer to defaults or not. What is standard and what isn't. So I'd love to hear if somebody else knows,

BENJI:
I take it back inline form errors is in core, but it seems not to be enabled in the standard.

KIM SARABIA:
Gotcha.

JUNE:
And then this is a little tangential, but back end forms, they're not very inclusive for different groups of our population either, like they're not long enough sometimes for those of us that have hyphenated names, which happens a lot in my community. We have a lot of people from Mexico in my community. And so that's what we come across at the hospital is the form fields aren't big enough for their last names, or when I worked in San Francisco, we had last names that only had two letters. And there was this default that, Oh, you need to enter your whole last name. It's like, well, that is my whole last name. So that's sort of, was I guess with something like like wanting your COVID vaccine, you're willing to work through of those, but normally when you have those inclusive forms, you're like, well, screw this. I don't even want to fill out this form because I can't even put my last name, you know, I'm not being included. So that might, I hate to say that might not be an issue there, but still it's that idea of we're not including everybody really

KIM SARABIA:
That's a real, that's a real challenge. Studying foreign validation. There's no another thing that's, you know, all over the place. So we have I believe about five minutes left. And this isn't like a very meaty topic and I doubt we'll even reach the surface, but I am curious what kinds of projects folks have worked on around language, language switchers and what kind of common challenges have you encountered and what kind of advice can you give out to folks that may run into just language and multi-lingual interfaces in the future.

ANDREW:
(INAUDIBLE) a bit in my experiences. There's been, our teams have been hung up on translation versus localization. So, I've heard a lot of really good discussion on that is for example Hispanic community, not only do they need the translation, but there might need to be some localization, how they interpret the information or how it's said would benefit them more or sequencing. So, I find that very interesting of just straight translations. So, I've worked on projects with that, flipping into some localizations that I already touched a little bit on when we work through like EMEA, finding all the places where the translations are needed. Going through getting a little technical with Drupal, using the T-translation function and all the right places in the code, it's always a challenge when that's not thought of at the start. So we try and anticipate those things. We try and fix those things, but I do know that there is some times trouble with people creating content in English as the first language and then translating, but it still misses the Mark.

And while we're meeting the EMEA requirements, it's still not these are for products and services. So, there's times when a translation doesn't really quite help cause it's not quite localized.

KIM SARABIA:
I've worked with a multi-site deep platform that required, localized and just translation in general that and within that, within that multi-site, one site would require, you know, five different languages. Another one would require another, like another set of languages that the other side did not have at all. So, all I can say in terms of knowledge, I can impart is to make sure to advocate for extra time, extra development time, extra QA and troubleshooting time, when it comes to creating multi-lingual platforms because there's a lot more troubleshooting that goes into it than you think

ANDREW:
Third party, let's not forget third-party tools. Like for example, that map, the reason the filters might not have been because it's a third party plugin. Maybe just setting the page language is not enough to help that third-party component. So you are beholden to what's in the page and how much you can help. So, those are a lot of technical challenges.

KIM SARABIA:
And also some languages will completely change the way out of your page because you know, something that information that will, you know, be 100 characters in one language, be 500 in another. So, that's something also that to keep in mind and why QA is so important,

ANDREW:
The Germans really (INAUDIBLE) letters that was one, we did it, it was challenging for layouts, like hero banners. When we did Germany, we, we groaned a bit cause we knew it was gonna wreak some havoc on some of the creative assets that we had.

KIM SARABIA:
Sure.

ANDREW:
Then in the language, it just makes makes those projects that much more challenging. And that's why you need that much more time.

KIM SARABIA:
Yes, time is really important to advocate for. Okay, so we have two more minutes. I know we breezed through a lot of a wide range of topics. But if there are any last minute questions, let me know. If you have any feedback, feel free to, I will leave my contact info here and then I can also leave some of the resources and just anything else on Slack. But yeah, if there's nothing else thank you so much for dropping by and chatting with me. And if you have any feedback of how I can grow this topic or how I can, you know... Oh! Yes.

MARY:
The title of the session included the word justice, which we think about the use of language as in the wording that we're using. And so, about things like when there are fields asking about gender, you need just male and female, there needs to be a place where (CROSSTALK) and same with if you're asking about ethnicity, you have to have enough options so people can find themselves in the list or provider or other.

KIM SARABIA:
Absolutely. I can also speak more to that in terms of how we can, like what references we can use. So we're inclusive of all genders, ethnicities, and that's something of interest. Mary, I can try to post some of the things I referenced in the past on the general chat.

MARY:
That would be great. Thank you. (1)Okay. So we're at time, I don't wanna keep anyone, feel free to reach out to me on Slack, if there's anything else. I'm under KMS, I believe so. Yeah. Thanks again. And, hope to see you all next year in person, if that's possible. Alright, bye.

ANDREW:
Thank you.