Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Front page and other elements require localization #77

Closed
jhung opened this issue Sep 14, 2021 · 29 comments · Fixed by #85
Closed

Front page and other elements require localization #77

jhung opened this issue Sep 14, 2021 · 29 comments · Fixed by #85
Labels
enhancement New feature or request

Comments

@jhung
Copy link
Member

jhung commented Sep 14, 2021

Is your feature request related to a problem?

With the localization work, the front page and other elements on the site will also require French translation.

The following items require translation:

  • Site name "The Inclusive Design Guide"
  • Front page content
  • Footer content
  • "Edit this page on Github"
  • "Skip to Content"
  • "Insights"
  • "Tools"
  • "Practices"
  • "Activities"
  • "Home"

Related to #53

@jhung jhung added the enhancement New feature or request label Sep 14, 2021
@jobara
Copy link
Member

jobara commented Sep 15, 2021

I was able to localize the categories, as they were also mentioned in the content of some of the pages.

  • "Insights" -> "Idées"
  • "Tools" -> "Outils"
  • "Practices" -> "Pratiques"
  • "Activities" -> "Activités"

"Outils" was also used to translate "Use" for the bullets at the end of some pages for links to other parts of the guides. I switched that to "Utilise" so that it wouldn't conflate with the "Tools" section.

@jobara
Copy link
Member

jobara commented Sep 15, 2021

There are some additional items to be localized:

  • "Breadcrumb"
    • This is the breadcrumb navigation label
  • "{Category} contents"
    • This is the navigation label for category landing page. {Category} will already be replaced by the related category name.
  • "reset"
    • For UIO

@jobara
Copy link
Member

jobara commented Sep 15, 2021

Additional localizations missed from the content.

  • Activities
    • Cause and Effect
    • Inclusive Design Mapping
      • Inclusive Design Mapping Facets
      • "A diagram showing individual facets of the Inclusive Design Mapping Tool" (image alt text)
      • "Figure 1: Inclusive Design Mapping Tool - Choosing the Facets"
      • "A diagram showing individual facets with “yourself” and “product” mapped" (image alt text)
      • "Figure 2: Inclusive Design Mapping Tool - Mapping onto the Facets"
      • "A diagram showing facets pieced together into a circle, with mappings" (image alt text)
      • "Figure 3: Inclusive Design Mapping Tool - Mapping the Current State"
      • "A diagram showing the gap between self and product maps"
      • "Figure 4: Inclusive Design Mapping Tool - Finding the Gap"
      • "A diagram showing a new mapping with a positive gap"
      • "Figure 5: Inclusive Design Mapping Tool - Proposing the Desired State"
    • Collaborative Art Warmup
      • "An image showing a small sculpture made of lego and pipe cleaners on a table top, beside which lie two hand-written notes, one of which includes a title and description, while the other contains an artist statement." (image alt text)
    • "An image showing a small sculpture made of lego, a toy car, and pipe cleaners on a table top. Some handwritten notes
      lie on the table beside the sculpture and a bin of lego can be seen in the background." (image alt text)
    • Create-a-Thon
      • "An image showing a group of four people participating in a Create-a-Thon, using building toys." (image alt text)
      • "An image of a Create-a-Thon participant describing their group's design." (image alt text)
    • Functional Mashup
      • "An image showing a large selection of cards spread out on the floor, each with a different magazine image pasted on." (image alt text)
    • Virtuous Tornado
      • "A diagram showing a cluster of black dots on a white starburst background. The dots are densest at the centre of the starburst and become more and more spaced out as they move away from the centre. Three concentric, coloured circles are drawn around the dots. In the centre, the smallest blue circle is labelled “Design works”, moving outward from centre the next yellow circle is labelled “Design is difficult to use”, and finally a red circle around the outside is labelled “Can’t use design”." (image alt text)
      • "Image showing a circle broken into four quarters. Each quarter is labelled with “Designs that Help Me…” and is broken up into three equally spaced concentric sections, with “like & use” in the centre, “don’t like or having difficulty using” in the middle, and “can’t use” at the outer periphery." (image alt text)
      • "A photograph showing a large number of sticky notes on a table top. The sticky notes are covered in handwriting, and are stuck to and clustered on large paper wedges, which are themselves put together to form a circle." (image alt text)
      • "A diagram showing a spiral in the centre which is getting wider and wider toward the top as it spirals outward. The spiral is split into five vertical and equal sections starting with “cycle 1” at the bottom and ending with “cycle 5” at the top. 5 corresponding injection points are indicated, showing the injection of needs and characteristics at each iteration point of the 5 cycles. At the base of the spiral the words co-design, develop, implement, evaluate and refine are shown forming a foundation. Three arrows move up through the centre of the spiral, from the foundation up and out to the following blocks of text: More resilient designs, more adaptable designs, more innovative designs, more inclusive designs, more accessible designs." (image alt text)
    • Web of Strings
      • "A diagram showing 8 evenly-spaced straight lines that all intersect at their mid-point, creating a kind of giant asterisk or starburst. The lines are labeled with numbers 1 through 8. Underlying the intersection point there is a circle labeled “first container” and a short distance away there is a second circle labeled “second container”. Lying on top of the intersection point is a smaller circle labeled “object”. Text reads “8 strings set up for 16 participants”" (image alt text)
      • "An image showing a several blue strings laid out on the floor, all intersecting at their midpoint and forming a web in the shape of a large asterisk. The central intersection point of the strings lies on top of a white bowl, and an orange ball lies on top of the intersection point of the strings. Nearby sits another white bowl of the same size." (image alt text)
      • "An image showing a closeup view of the intersection point of the web of strings raised above the floor, on which balances an orange ball. On the floor below a white bowl can be seen, as well as several participants standing in the background holding the ends of the strings." (image alt text)
  • Insights
    • Virtuous Cycles
      • "Figure 1: The virtuous cycles triggered by digital inclusion"
  • Practices
  • Tools
    • User States and Contexts
      • "A diagram showing a States and Contexts map for two different users" (image alt text)

@bliz-ward
Copy link
Contributor

bliz-ward commented Sep 17, 2021

@jobara asked me to have a look at what needed to be done with the translation. I had forgotten to add the Home page document to the drive along the other files so it's a good place to start with.
Here is the link:
https://drive.google.com/file/d/179JyZ7YhHlB9R4v6FHZnFlE6_pQV8_fG/view?usp=shari

I've also attached the file to this comment. I'm now going to read the comments and answer them as I go.

IDG_HomePage.odt

@bliz-ward
Copy link
Contributor

bliz-ward commented Sep 17, 2021

(note that bold text is used here as a means to contrast between english and french, not as a means to emphasize).

  • Site name: Guide pour une conception inclusive

  • Front page content: see the file attached in my previous comment

  • Edit this page on GitHub: modifier cette page sur GitHub

  • Footer:

(text is underlined to mirror the english version layout)
Créé par la communauté des membres du
Centre de Recherche pour une Conception Inclusive de l'Université de l'École d'art et de design de l'Ontario (OCAD)

Hébergé par Netlify
Le contenu de ce site est sous licence Creative Commons CC BY 3.0

  • Skip to Content
    I couldn't find this mention on the page so, without the context, I would translate it Accéder au contenu

  • Tabs

I think it would be better to translate the header tabs by adding an article in french as such:
Insights: Les perspectives. Idées works too but the meaning of insights as "knowledge built over time" is lost.
Practices: Les bonnes pratiques
Tools: Les outils
Activities: Les activités

@bliz-ward
Copy link
Contributor

bliz-ward commented Sep 17, 2021

"Outils" was also used to translate "Use" for the bullets at the end of some pages for links to other parts of the guides. I switched that to "Utilise" so that it wouldn't conflate with the "Tools" section.

Utiliser would work but I think that Pour aller plus loin would be a better fit. It translates into "Further reading"

@bliz-ward
Copy link
Contributor

bliz-ward commented Sep 17, 2021

There are some additional items to be localized:

* "Breadcrumb"
  
  * This is the breadcrumb navigation label

* "{Category} contents"
  
  * This is the navigation label for category landing page. {Category} will already be replaced by the related category name.

* "reset"
  
  * For UIO

I admit I can't find in which context these terms are used. Breadcrumb translates into fil d'ariane in french web terminology but I'm wondering if that's actually what is needed here

@jobara
Copy link
Member

jobara commented Sep 20, 2021

"Outils" was also used to translate "Use" for the bullets at the end of some pages for links to other parts of the guides. I switched that to "Utilise" so that it wouldn't conflate with the "Tools" section.

Utiliser would work but I think that Pour aller plus loin would be a better fit. It translates into "Further reading"

I guess it isn't exactly "Further reading", although it is something else to read. For example on the Interconnectedness page, there is a section for "Try" and "Use". In this case "Try" has a link out to an activity included in the guides. "Use" points to practices to employ to meet that insight. The flip side, if you follow the link, is that the Insight becomes the "Why", supporting the need for that practice.

Does that help at all? Does that suggest an alternative term or is Pour aller plus loin still the best fit?

@jobara
Copy link
Member

jobara commented Sep 20, 2021

@bliz-ward thanks for all the help with this. I've added some more information to clarify a few of the context for translations. Please let me know if you'd need more info.

Breadcrumb

This is the label applied to the breadcrumb navigation.

You can see an example on any of the category pages, example Disability as Mismatch. Below is a screenshot with some markings to highlight the breadcrumbs. NOTE: the label isn't visibly displayed, but is provided to an assistive technology, e.g. screenreader, to be presented to the user.
Screen Shot 2021-09-20 at 8 08 31 AM

Also as part of the breadcrumb we need to translate "Home".

"{Category} contents"

Similar to "Breadcrumbs" this is a label for a navigation element. In this case, it is the navigation for the child pages on the category landing page. For example, on the Insights landing page, it is the label for the navigation of the child pages listed. And would be called "Insight contents". NOTE: the label isn't visibly displayed, but is provided to an assistive technology, e.g. screenreader, to be presented to the user.

I'm open to a better English name for this one too. And we could actually think of rendering out the label as heading or something like that. @jhung what do you think?

Screen Shot 2021-09-20 at 8 29 38 AM

reset

This is part of the "show display preferences" tab at the top right corner of ever page. However, it will only appear when you open the widget. If you click on that tab, a drop down will appear, and you'll see the word "reset" on the tab. It resets the preferences to the default, so if you were to make any changes in that widget, clicking "reset" will restore the page to how it originally displayed.

Screen Shot 2021-09-20 at 8 33 30 AM

Skip to Content

"Skip to Content" is a skip link making it easier for a keyboard user to jump from the top of the page directly into the content. Usually intended for bypassing lots of navigation links. It is actually the first focusable element on the page, but appears visually hidden until it receives focus. If you start from the top of the page and tap the tab, navigate to it. Alternatively you can place focus on "show display preferences" and tap shift-tab to navigate backwards to it. It will appear in the top left corner of the page. You can then press the enter key to activate it, and your subsequent tab will now be within the content portion of the page.
Screen Shot 2021-09-20 at 8 38 15 AM

@jobara
Copy link
Member

jobara commented Sep 20, 2021

@bliz-ward another thing to translate would be the 404 page. For example if you go to https://guide.inclusivedesign.ca/missing that should return a 404 page. The text is just:

404 - Page Not Found

Check the entered URL, or go to the Inclusive Design Guides homepage.

@jobara
Copy link
Member

jobara commented Sep 20, 2021

@bliz-ward another one would be the language toggle I'm adding. It's to switch between the locales. It will have the name of the locale to switch to, I'll try get a demo of this up soon. But I'm probably going to contain it in a <nav> element, similar to the Breadcrumbs and category contents. I'm thinking of labelling that navigation "locale" in English. There maybe a more appropriate name too. @jhung any thoughts on that?

@jobara
Copy link
Member

jobara commented Sep 20, 2021

  • Footer:

(text is underlined to mirror the english version layout)
Créé par la communauté des membres du
Centre de Recherche pour une Conception Inclusive de l'Université de l'École d'art et de design de l'Ontario (OCAD)

Hébergé par Netlify
Le contenu de ce site est sous licence Creative Commons CC BY 3.0

The footer appears to be missing the "and supported by" portion of the text. Could you please inform how best to translate that?

@jobara
Copy link
Member

jobara commented Sep 20, 2021

@bliz-ward and @jhung you can see the in progress work from the deploy preview. For the latest deploy preview, please see PR #78

@bliz-ward
Copy link
Contributor

Additional localizations missed from the content.

Here is the link to the translation of the Cause and Effects card deck:
https://drive.google.com/file/d/1n0KN_ZdGhAyxaU7Ji2WYl2RqT2T8QcZ9/view?usp=sharing

And here are the translations for the missing alt-texts:
https://drive.google.com/file/d/1SSs3vi2D9up8g8l-2QpGvQFeHu0tnPya/view?usp=sharing

regarding the Inclusive Design Mapping Facets I have found strategies to work around the terminology that proved to be trickier to translate. My main concern is, since the text in french would be embeded in a .pdf version, it would be harder to make any further corrections.
https://drive.google.com/file/d/19NCagyJlcoqw8G3HsmP_tdEpIxY1Nypm/view?usp=sharing

@bliz-ward
Copy link
Contributor

bliz-ward commented Sep 22, 2021

"Outils" was also used to translate "Use" for the bullets at the end of some pages for links to other parts of the guides. I switched that to "Utilise" so that it wouldn't conflate with the "Tools" section.

Utiliser would work but I think that Pour aller plus loin would be a better fit. It translates into "Further reading"

I guess it isn't exactly "Further reading", although it is something else to read. For example on the Interconnectedness page, there is a section for "Try" and "Use". In this case "Try" has a link out to an activity included in the guides. "Use" points to practices to employ to meet that insight. The flip side, if you follow the link, is that the Insight becomes the "Why", supporting the need for that practice.

Does that help at all? Does that suggest an alternative term or is Pour aller plus loin still the best fit?

I think I understand the problem better now. Would it be a good idea to use the same terminology for the bullet points and the tabs? Keeping the Interconnectedness page as an example, under the title "Les activités à essayer" would be the link to "cause and effect" and, under the "Les bonnes pratiques", the two links for the "Design for adaptability and flexibility" and "Design for uncertainty pages". The french version "les activités à essayer" would be, admitedly, a fair bit longer by making obvious to "Try" the activities.
If you think it's a good idea, I can go through the files and modify the different instances of "Try", "Use", "Why" and "How".

@bliz-ward
Copy link
Contributor

Also as part of the breadcrumb we need to translate "Home".

  • Home translates into "Accueil" and breadcrumbs translates into "Fil d'Ariane" which back translates into "Ariadne's thread".
  • {category} contents translates into "{catégorie} sommaire" as in "the list of chapters in a book".
  • Reset would be "Retour aux paramètres par défaut". "Réinitialiser" would work but feels less natural.
  • Skip to content translates into "Accès direct au contenu".
  • I'm wondering if I have translated show display preferences / hide. That would be "Afficher les préférences d'affichage / masquer".
  • 404 - Page Not Found = "Erreur 404 - page introuvable"
    Check the entered URL, or go to the Inclusive Design Guides homepage. = "Vérifiez l'adresse URL ou rendez-vous sur la page d'accueil du guide pour une conception inclusive"

@bliz-ward
Copy link
Contributor

another one would be the language toggle I'm adding

From what I can see on the deploy preview it seems to work but obviously it can get messy with multiple languages: This kind of interface element is usually labelled "langues" in french

@bliz-ward
Copy link
Contributor

The footer appears to be missing the "and supported by" portion of the text.

Yes, that's my mistake: you would add "avec le soutien de" as such:
Créé par la communauté des membres du Centre de Recherche pour une Conception Inclusive de l'Université de l'École d'art et de design de l'Ontario (OCAD), avec le soutien de

@jobara
Copy link
Member

jobara commented Sep 22, 2021

"Outils" was also used to translate "Use" for the bullets at the end of some pages for links to other parts of the guides. I switched that to "Utilise" so that it wouldn't conflate with the "Tools" section.

Utiliser would work but I think that Pour aller plus loin would be a better fit. It translates into "Further reading"

I guess it isn't exactly "Further reading", although it is something else to read. For example on the Interconnectedness page, there is a section for "Try" and "Use". In this case "Try" has a link out to an activity included in the guides. "Use" points to practices to employ to meet that insight. The flip side, if you follow the link, is that the Insight becomes the "Why", supporting the need for that practice.
Does that help at all? Does that suggest an alternative term or is Pour aller plus loin still the best fit?

I think I understand the problem better now. Would it be a good idea to use the same terminology for the bullet points and the tabs? Keeping the Interconnectedness page as an example, under the title "Les activités à essayer" would be the link to "cause and effect" and, under the "Les bonnes pratiques", the two links for the "Design for adaptability and flexibility" and "Design for uncertainty pages". The french version "les activités à essayer" would be, admitedly, a fair bit longer by making obvious to "Try" the activities.
If you think it's a good idea, I can go through the files and modify the different instances of "Try", "Use", "Why" and "How".

Unfortunately they don't all correspond directly to the tabs. Some of the "Try" sections are just paragraphs, or a paragraph and a some links. In other cases there may be a mixture of links to different categories of resources.

For example: https://guide.inclusivedesign.ca/insights/disabilityasmismatch

@jobara
Copy link
Member

jobara commented Sep 22, 2021

another one would be the language toggle I'm adding

From what I can see on the deploy preview it seems to work but obviously it can get messy with multiple languages: This kind of interface element is usually labelled "langues" in french

I was starting to think "Language" in English might also sound better. We're exploring turning this into a dropdown/disclsoure widget instead just a link too.

@bliz-ward
Copy link
Contributor

Unfortunately they don't all correspond directly to the tabs. Some of the "Try" sections are just paragraphs, or a paragraph and a some links. In other cases there may be a mixture of links to different categories of resources.

I think it's clear the translation must be refined. I think it works as is but I can see where it can be redundant. I need more time to go through the different files and figure a better way forward. I think it works as is but I'm wondering if the current state causes technical issues that I don't completely understand? more time for me means keeping the translation as is, assuming that it works, albeit not perfectly, and come back later with better answers. I'm pretty sure that an outside eye would spot obvious errors that I'm too close to see in my translation.

@jobara
Copy link
Member

jobara commented Sep 28, 2021

@bliz-ward I found another one that I missed sending before. It's the alt-text for the Image on the Virtuous Cycles page (under Insights).

"Diagram showing the virtuous cycles as a result of digital inclusion."

Also, should the captions for images use "Figure" or "Illustration" for the French translation?

@bliz-ward
Copy link
Contributor

Figure or Illustration (fig. or ill. in short) can both be used interchangeably. Illustration has a broader meaning so it would be a better fit.

"Diagram showing the virtuous cycles as a result of digital inclusion."
un diagramme qui représente le cercle vertueux résultant d'un inclusion digitale

@jobara
Copy link
Member

jobara commented Sep 28, 2021

@bliz-ward thanks for the very fast reply!

@jobara
Copy link
Member

jobara commented Sep 29, 2021

Here is the link to the translation of the Cause and Effects card deck: https://drive.google.com/file/d/1n0KN_ZdGhAyxaU7Ji2WYl2RqT2T8QcZ9/view?usp=sharing

Filed as #82

regarding the Inclusive Design Mapping Facets I have found strategies to work around the terminology that proved to be trickier to translate. My main concern is, since the text in french would be embeded in a .pdf version, it would be harder to make any further corrections. https://drive.google.com/file/d/19NCagyJlcoqw8G3HsmP_tdEpIxY1Nypm/view?usp=sharing

Filed as #83

jobara added a commit to jobara/guide.inclusivedesign.ca that referenced this issue Oct 7, 2021


* inclusive-designGH-53: Add localization support (Resolves inclusive-design#53, inclusive-design#77, inclusive-design#80)
  docs: apply suggestions from code review
  docs: more info regarding adding new locales
  docs: address typos caught in review
  style: fix syntax error
  fix: remove presentational svg from a11y tree
  refactor: source logos from an SVG sprite
  fix: update to latest eleventy-plugin-fluid for fix to figure shortcode
  docs: use a more understanable reference for language codes
  docs: clarify task for updating .po files when adding a new locale
  docs: updating link to localized text
  style: linting
  docs: Apply suggestions from code review
  docs: emphasize the main branch name
  style: update linting config and lint files
  docs: move contributor guide to root
  fix: simply footer localization text
  docs: add contributor guide
  fix: localize UIO reset
  style: use double quotes
  feat: use gettext style localization
  fix: remove icons from a11y tree
  fix: Add misssing alt text translation
  fix: added missing French translations
  feat: localize 404 page
  fix: adding and updating French translations
  fix: add missing translation for footer
  feat: localize additional ui elements
  refactor: use transactionKey to find page in alternate locale
  fix: correct broken links
  fix: update French names for category tabs
  fix: languge toggle to same card page in different locales
  feat: add French locale for home page
  feat: add locale toggle
  fix: add language direction
  fix: update links to edit on GitHub
  fix: remove bullet styling from list of reference guide pages
  refactor: use figure shortcode from plugin
  perf: reference SVG icons as sprites from external file
  feat: add support for localized content
  refactor(deps): update Infusion/UIO
  build: update linting configuration and linting
  build: remove unused Gruntfile
  build: update dependencies and related config/code
@jobara jobara closed this as completed in #85 Oct 7, 2021
@jobara
Copy link
Member

jobara commented Oct 7, 2021

@bliz-ward the site with translations is up https://guide.inclusivedesign.ca. There is future work for localizing the pdfs still, styling, and updating to a language selection widget. Thanks for all of your help with this.

@bliz-ward
Copy link
Contributor

bliz-ward commented Oct 8, 2021 via email

@jobara
Copy link
Member

jobara commented Oct 12, 2021

How would you go about the localization of the pdfs?

I'm not entirely sure at the moment. I was thinking we may need to make localized versions of those PDFs. This would are harder to maintain unfortunately, but these resources will likely not change as often as the site. Or perhaps these just become other pages in the website that can be printed or exported. I still need to track down the source files for them though. I'll add a note about this conversation to the respective Issues (#82, #83) for localizing those documents.

@bliz-ward
Copy link
Contributor

bliz-ward commented Oct 12, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
3 participants