Translate revised Benefits application copy to Spanish

indexing commented 1 year ago

We recently revised English copy throughout the application, added benefits eligibility for veterans, and made accessibility improvements by adding alt text in English to various elements in the Benefits application (see #1392 #1137).

All of this text is application content that may need to be understood by Spanish speakers, so we need to translate all instances in English to Spanish.

User stories

As a Spanish speaker verifying my eligibility for benefits, I need to understand all copy in the application, so I can successfully navigate the eligibility workflow.

As a Spanish speaker using a screen reader to verify my eligibility for benefits, I need to understand the description of all elements in the application in my language, so I can successfully navigate the eligibility workflow.

Acceptance criteria

There is alt text in English for all of the following elements in the application:

[x] Images that provide supplemental information
[x] Icons that denote functionality
[x] Branding assets (e.g. logos)
[x] Buttons

And...

[x] English copy for the veterans eligibility flow is included in the master copy spreadsheet.
[x] English copy for the older adults eligibility flow is included in the master copy spreadsheet.
[x] English copy for agency cards is included in the master copy spreadsheet.
[x] English copy in error pages is included in the master copy spreadsheet.
[x] English copy for alt text is included in the master copy spreadsheet.
[x] English copy for all page titles in included in the master copy spreadsheet

And...

[x] Copy for all elements above is translated to Spanish by our translation service.
[x] The translations are approved by all reviewers in the Benefits Copy Master Google Sheet.
[x] The alt text translations are included in the production codebase.

Definition of "Done"

When a user switches their language preference to Spanish in the Benefits application, the text and alt text for all elements listed above displays in Spanish.

The output of web accessibility testing utility confirms the above.

Relevant resources

Cal-ITP Benefits Application Copy (Configurable Strings)

machikoyasuda commented 1 year ago

@srhhnry @indexing

I was going through the django.po files, the app in production, Figma and the Benefits Copy Master Google Sheet. And I realized there's an entire category of copy that is not in the Google Sheet, that requires Spanish translation.

The text that appears in the tab is called, on django.po, the TITLE of the page. The HEADLINE of the page (from django.po naming standards), is Connect your transit benefit to your contactless card. On the Google Sheet however, the column Title refers to what django.po calls the Headline. And the sheet is missing all the Titles.

Sometimes the Title is the same, or very similar to, the Headline, but not always. Compare the title and headline on Eligibility Index:

srhhnry commented 1 year ago

Ugh. We do have all of that copy in a google doc somewhere. I don't think it needs updating (as we haven't changed layouts), but it definitely needs to be accounted for in the new Google Sheets. I'lll take a look right now.

Edit: Okay I found these documents which all include a "Page Title" which would be the .django title. 09/22 Design Update: Login.gov IAL2 Integration | Finalized Copy Courtesy Card Final Copy (English and Spanish)

@indexing I think we should review these at our copy session and adjust page titles if needed

machikoyasuda commented 1 year ago

My suggestion is that page titles should be the same across different eligibility flows.

Here is an example:

Ineligible page - should have the same Title, even if the user is coming from Veterans or Login.gov or Courtesy Card.
Enrollment success page - should have the same Title, even if the user is coming from Veterans or Login.gov or Courtesy Card.
Enrollment index page - should have the same Title, even if the user is coming from Veterans or Login.gov or Courtesy Card.

Currently, we have different titles on the Ineligible page depending on whether someone came through Courtesy Card or Login.gov, but that seems like too much variation to support as we add more agencies/eligibilities.

CC flow ineligible page: Courtesy Card not located

Login.gov ineligible page: the title is simply Eligibility Error

indexing commented 1 year ago

When prepping the CSV file for our translation vendor, I noted that page title are not yet part of master copy sheet. I referenced the current app for many existing titles, but added ones for pages that don't exist yet (such as veterans.) I did a review of the titles together and here's my proposal for a complete list. (I matched the titles to the correct pages in the spreadsheet, but thought it useful to present all title here as a complete set.)

A couple notes:

I standardized on "choose" vs. "select," as it's a less technical, more friendly word. (We're currently using both.)
I standardized on "transit agency" vs. "provider" with the thought that the former is more specific and, thus, more broadly understandable than "provider" for people using the application. (This is only a change for page titles, not page content.)
Since we are moving toward sentence case for strings, I applied that styling for page titles.
I assumed modals will not have a page title and instead use the parent page.

@machikoyasuda I will submit the titles for translation After translation, we will need to review the tag of each page and update accordingly. Perhaps it makes sense to capture this effort is a distinct issue? I'll let you make that call.

indexing commented 1 year ago

Yesterday I prepared the CSV file that iBabble-on requires for translation. Unfortunately, they need the string data structured differently than the layout we use to sync data from the master sheet to Figma, so I had to do a good deal of work to prepare the CSV file. Here's a summary of changes.

I was able to use the data we have in the current sheet, but I created a new tab called "forTranslation" to present it in a the correct layout for iBabble-on. For future reference, these are the columns the CSV file requires.

Key	English source	Translation	Context
Title.27	Sorry! We can’t find that page.		404 Error (https://share.getcloudapp.com/5zuOAzjO?collection_id=nlfk4Q0)

We should continue to add and maintain data on the English-configurable sheet just as we've been doing. Any changes to those strings will also show in forTranslation. I will export from this sheet to create future versions of the CSV file when we add or change application copy.
I added a new column for page titles.
I added a new column for footer copy.
I added a new column for navigation copy.
I copied the master copy spreadsheet to the Cal-ITP drive in this path: Cal-ITP Team > --Program Files-- > Product: Cal-ITP Benefits (Eligibility Verification) > Application Copy
I renamed the file to "Cal-ITP Benefits Application Copy (Configurable Strings)"
OFFICIAL LINK: https://docs.google.com/spreadsheets/d/1_Gi_YbJr4ZuXCOsnOWaewvHqUO1nC1nKqiVDHvw0118/edit?usp=sharing
If we need any additional files, please add them here.

@srhhnry You will need to specify the URL above when syncing to Figma, but everything should work as it did with the initial file. Let's delete Benefits Copy Master Google Sheet to avoid confusion.

Lastly, here is the CSV file I gave to iBabble-on:

Cal-ITP Benefits Application Copy (Configurable Strings) - forTranslation.csv

machikoyasuda commented 1 year ago

@indexing Thanks for these detailed notes and all the Google Spreadsheet-wrangling. This is going to improve our process so much.

I had one small suggestion for the Google Spreadsheet. I'd like to have a clear record of exactly which version from which day was sent to iBabble-on, and what's been deployed, etc., so we can use the Google Spreadsheet version history tool like GitHub history.

You can name a version like this: The name could be something like 2023 - Sprint 06 - Veterans. Once we get the Spanish into the spreadsheet, and put the copy in the code, and deploy that version to Test, we could name another version like 2023 - August - 01 - Veterans - Test or something like that... we can determine it once we actually get there. When we finally deploy this to Production, we can name that version again to reflect that this is the copy on Prod.

srhhnry commented 1 year ago

I synced the new Google Sheet to the Benefits configurable string Figma board and it looks like nothing broke and we are good to go there.

Just a heads up that I don't believe I can currently sync different tabs within the same Google sheet. There's a somewhat complicated workaround (unofficial) that I tried and could get to work, but maybe someone else can help me figure that out in the future.

indexing commented 1 year ago

@vykster The invoice is ready in iBabble-on. We simply need to pay before they will begin work on translations. cc// @machikoyasuda

https://www.ibabbleon.com/invoice/show.php?no=nta1ote3

vykster commented 1 year ago

done

On Mon, Jul 3, 2023 at 3:09 PM Andy Walker @.***> wrote:

@vykster https://github.com/vykster The invoice is ready in iBabble-on. We simply need to pay before they will begin work on translations. cc// @machikoyasuda https://github.com/machikoyasuda

https://www.ibabbleon.com/invoice/show.php?no=nta1ote3

— Reply to this email directly, view it on GitHub https://github.com/cal-itp/benefits/issues/1410#issuecomment-1619204346, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAWB5W4VCUG6LVTRSAXE3TXOM7KXANCNFSM6AAAAAAYVZELKQ . You are receiving this because you were mentioned.Message ID: @.***>

machikoyasuda commented 1 year ago

Update as of Monday, July 10th: Translations are done and the file is posted in Slack. @indexing can update the Google Spreadsheet when he is back.

machikoyasuda commented 1 year ago

After going through this full translation process for this PR #1572 #1629, I have a few feedback notes:

Copy missing from spreadsheet and Figma

Help page variations for agency-specific Help vs. generalized Help

msgid "Skip to Main Content"
msgstr "Saltar al contenido principal"

msgid "Check your input. The format looks wrong."
msgstr "Verifique su entrada. El formato parece incorrecto."

msgid "This field is required."
msgstr "Este campo es requerido."

msgid "Please wait..."
msgstr "Espere por favor..."

msgid "Cookies are disabled"
msgstr "Cookies están inactivos"
msgid ""
"To function properly, this website requires a browser that supports cookies. "
"Please enable cookies for this website and"
msgstr ""
"Para funcionar correctamente, este sitio web requiere un navegador que "
"admita cookies. Por favor, active cookies por este sitio web y"
msgid "JavaScript is disabled"
msgstr "JavaScript está inactivo"
msgid ""
"To function properly, this website requires a browser that supports "
"JavaScript. Please enable JavaScript for this website and"
msgstr ""
"Para funcionar correctamente, este sitio web requiere un navegador que "
"admita JavaScript. Por favor, active JavaScript por este sitio web y"

Copy missing from spreadsheet

msgid ""
"The Benefits application is Free and Open Source Software (FOSS). You may "
"obtain the source code from"
msgstr ""
"Esta aplicación es un software libre y de código abierto. Puede obtener el "
"código fuente de"
msgid "GitHub"
msgstr "GitHub"

msgid "Sign out of Login.gov"
msgstr "Cierre sesión de Login.gov"

msgid "Logged out"
msgstr "Cierre sesión"

msgctxt "image alt text"
msgid "Bus icon with smiley face"
msgstr "Icono de autobús con cara sonriente"

msgctxt "image alt text"
msgid "Bus icon with flat tire"
msgstr "Icono de autobus con llanta ponchada"

Some capitalization/formatting is different from Figma

See @angela-tran's comment: https://github.com/cal-itp/benefits/pull/1629#discussion_r1289355160

indexing commented 1 year ago

@machikoyasuda I'm adding the missing strings you note to the spreadsheet.

This is the logout confirmation view (="LoggedOut"). I added the alt text, but the confirmation string is different in the spreadsheet, "You have successfully logged out. Thank you for using Cal-ITP Benefits!" rather than "Logged out." Do I have the correct view? Is there a different one?

Secondly, I'm wondering if we should remove the alt text string altogether here for the icon. Other error pages with a different icon don't have alt text (according to the spreadsheet). See Eligibility Error as an example. @srhhnry Can we consider the icon supplemental and, therefore, drop the alt text string? Or is there is rationale for having the alt text here but not elsewhere?

msgid "Logged out" msgstr "Cierre sesión"

msgctxt "image alt text" msgid "Bus icon with smiley face" msgstr "Icono de autobús con cara sonriente"

Added alt text to these views in spreadsheet:

User Error Redirect
404 Error

msgctxt "image alt text" msgid "Bus icon with flat tire" msgstr "Icono de autobus con llanta ponchada"

thekaveman commented 1 year ago

@indexing:

Other error pages with a different icon don't have alt text

Maybe not on the spreadsheet, but all those icon have alt text in the app.

For the error icon alt text, we have: Bus icon with flat tire

Here are the other icon alt texts in the app:

Bus icon with smiley face
Identification card icon with question mark
Identification card icon with checkmark
Bank card icon with contactless symbol and checkmark
Bank card icon with contactless symbol and question mark

machikoyasuda commented 1 year ago

@indexing The page is correct. The Logged out is for the page window title.

srhhnry commented 1 year ago

Our icons are decorative elements and should not have alt text. The icons do not convey anything not stated in text and so adding alt text adds audio clutter. I added a clarifying flag to the components page:

thekaveman commented 1 year ago

@srhhnry I think this goes back to our recent redefinition of which images needs alt text; the icons have all had it since day 1 of the app.

But we'll drop that in #1651

srhhnry commented 1 year ago

Yup, definitely a legacy issue and worth clarifying.

On Mon, Aug 14, 2023 at 6:05 PM Kegan Maher @.***> wrote:

@srhhnry https://github.com/srhhnry I think this goes back to our recent redefinition of which images needs alt text; the icons have all had it since day 1 of the app.

But we'll drop that in #1651 https://github.com/cal-itp/benefits/issues/1651

— Reply to this email directly, view it on GitHub https://github.com/cal-itp/benefits/issues/1410#issuecomment-1678140012, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJE6HDQNBNVD3Z72H4HGG3XVKOK7ANCNFSM6AAAAAAYVZELKQ . You are receiving this because you were mentioned.Message ID: @.***>

-- [image: logo] http://calitp.org/Sarah Henry UX Designer, California Integrated Mobility California Department of Transportation

calitp.org http://calitp.org/ | 954.937.8894 Visit CAMobilityMarketplace.org http://camobilitymarketplace.org/ for a catalog of code-compliant products and services for Transit Providers. Subscribe to our http://www.placeandpage.la/cal-itp_emlsig/cal-itp_sigblock_2.htmlMobility Newsletter https://lp.constantcontactpages.com/su/eLbtFoE/calitp?source_id=a41b99cd-7f28-4be8-a286-f9e75fc7bbce&source_type=em&c= for the latest Cal-ITP and Caltrans updates.

indexing commented 1 year ago

@indexing The page is correct. The Logged out is for the page window title.

@machikoyasuda Ah. Got it. I have title of that page in the spreadsheet as Logout confirmation | Cal-ITP Benefits. I prefer the phrasing in the spreadsheet, but not a hill I'm prepared to die on. :)

machikoyasuda commented 1 year ago

@indexing I believe this Issue is complete, so can it be closed?

indexing commented 1 year ago

@machikoyasuda @thekaveman I've updated the spreadsheet with the missing copy.

msgid "Skip to Main Content"

Added to EN-US tab, Navigation-header "page" in the header column

msgid "Check your input. The format looks wrong."

msgid "This field is required."

Added to EN-US tab, CC_Eligibility_Confirm page in the fieldValidation column

msgid "Please wait..."

Added to EN-US tab, Enrollment-loading page in the buttonLabel column

msgid "Cookies are disabled"

msgid "To function properly, this website requires a browser that supports cookies. " "Please enable cookies for this website and return home."

msgid "JavaScript is disabled"

msgid "To function properly, this website requires a browser that supports " "JavaScript. Please enable JavaScript for this website and return home."

Added to EN-US tab, Browser "page" in the browserAlert column

msgid "The Benefits application is Free and Open Source Software (FOSS). You may " "obtain the source code from"

msgid "GitHub"

Added to EN-US tab, Help page in the body column

msgid "Sign out of Login.gov"

Added to EN-US tab, Enrollment, Eligibility Error, and Payment Error pages in the signoutButton column

cal-itp / benefits