{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - September 2022 |Digital.gov",
    "description": "USWDS Monthly Call - September 2022",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/09/15/uswds-monthly-call-september-2022/index.json","item" : [
    {"kicker" : "USWDS LANGUAGE SELECTION PATTERNS","title" :"USWDS Monthly Call - September 2022","summary" : "How do we help users find content in their preferred language? Join us as we take a closer look at the language selection patterns we're developing for USWDS.","date" : "2022-09-15T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2022-09-15T14:00:00-05:00","end_date" : "2022-09-15T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-language-selection-patterns-sep-2022-tickets-415626809977","captions" : "https://www.streamtext.net/player?event=BIS-GSA-JY","authors" : {"dan-williams" : "Dan Williams","lgodfrey" : "Laura Godfrey"},"topics" : {
        
            "content-strategy" : "Content strategy",
            "design" : "Design",
            "multilingual" : "Multilingual",
            "user-experience" : "User experience"
            },"primary_image" : { "uid" : "uswds-monthly-call-sep-title-card", "alt" :
  "Title card image of USWDS logo, a multi-colored pentagon shape consisting of five triangles, centered on a black background. In white text, the first line says, USWDS Monthly Call. Below that in yellow text, the second line has the date of the event, September 15, 2022", "width" :
  "1200", "height" :
  "628", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"content" :"\n\u003ca\n    href=\"https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-september-2022.pptx\"\u003eView the slides (PowerPoint presentation, 10.5 MB, 46 pages)\u003c/a\u003e\n\n\n\u003cdiv class=\"usa-accordion accordion\"\u003e\u003ch3 class=\"usa-accordion__heading\"\u003e\n    \u003cbutton\n      class=\"usa-accordion__button\"\n      title=\"View \"\n      aria-expanded=\"false\"\n      aria-controls=\"accordion-1\"\n    \u003e\n      \u003cspan class=\"icon\"\u003e\n          \u003csvg\n            class=\"usa-icon dg-icon dg-icon--standard margin-bottom-05\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          \u003e\n            \n            \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#content_copy\"\u003e\u003c/use\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\u003cspan class=\"src\"\u003e\n        \u003cstrong class=\"kicker\"\u003eSlide by Slide\u003c/strong\u003eUSWDS Monthly Call - Presentation Script for September 2022\n        \u003c/span\n      \u003e\n    \u003c/button\u003e\n  \u003c/h3\u003e\u003cdiv\n      id=\"accordion-1\"\n      class=\"accordion-body usa-accordion__content usa-prose\"\n    \u003e\u003cp\u003e\u003cstrong\u003eSlide 1:\u003c/strong\u003e Hi there and welcome to the U.S. Web Design System monthly call.\u003c/p\u003e\n\u003cp\u003eFor September 2022 — National Hispanic Heritage Month begins today, and coincidentally but fortuitously this month’s call dives into language selection for multilingual digital content. And here we see the USWDS logo in a festive teal, magenta, yellow, orange and blue.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, he/him, and I\u0026rsquo;m the USWDS product lead — and this is my avatar: dark hair, blue sweater, collared shirt. A bit more youthful than real me, and more so every day I think. I\u0026rsquo;d also like to mention that when we introduce ourselves in these calls, you\u0026rsquo;ll hear things like self-descriptions and pronouns — these help everyone share the same context and know a bit more about who we are, whether or not you can see us.\u003c/p\u003e\n\u003cp\u003eFirst, I\u0026rsquo;d like to mention that we\u0026rsquo;re recording this monthly call, so please refrain from turning on your camera. We will manually turn off any cameras to ensure the recording doesn\u0026rsquo;t show us on camera. Unfortunately, while we are recording this call, we currently aren\u0026rsquo;t able to share the video publicly.\u003c/p\u003e\n\u003cp\u003eI’d also like to remind you that by voluntarily attending this DigitalGov event, you agree to abide by the \u003ca href=\"https://handbook.tts.gsa.gov/code-of-conduct\"\u003eTTS Code of Conduct\u003c/a\u003e, which is available at handbook.tts.gsa.gov/code-of-conduct — please leave the meeting if you do not agree to abide by this code of conduct. We’ve posted the link to the code of conduct in the chat.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll be posting other links and references into the chat as we go along, and I encourage you to ask questions in the chat at any time. If any member of our team can answer your question in the chat, we\u0026rsquo;ll do so, otherwise there\u0026rsquo;ll be some time for questions and answers at the end of the hour. Also, be sure to introduce yourself in the chat as well — it\u0026rsquo;s nice to know who\u0026rsquo;s here. It\u0026rsquo;s good to have you here today.\u003c/p\u003e\n\u003cp\u003eFor those of you who find the chat distracting, you’re welcome to close or hide the chat window during the main presentation. You can reopen it later during the Q\u0026amp;A session at the end of this call.\u003c/p\u003e\n\u003cp\u003eSo thanks! And, with that, let\u0026rsquo;s get started!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 3:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today?\u003c/p\u003e\n\u003cp\u003eFirst we\u0026rsquo;ll look at a couple new site launches.\u003c/p\u003e\n\u003cp\u003eThen I\u0026rsquo;ll highlight some product updates.\u003c/p\u003e\n\u003cp\u003eAnd then we’ll spend the rest of our time here today talking about language section patterns!\u003c/p\u003e\n\u003cp\u003eAnd if all goes well, we\u0026rsquo;ll have some time left at the end of Q\u0026amp;A. So let\u0026rsquo;s get right into it…\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e with site launches\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e First up: \u003ca href=\"https://www.nist.gov/chips\"\u003eCHIPS.gov\u003c/a\u003e from the Department of Commerce. CHIPS.gov supports the CHIPS and Science Act of 2022 and serves as a public portal for implementation priorities related to that legislation. The CHIPS.gov homepage features a logo of a semiconductor chip with an american flag printed on it, and a video of Commerce Secretary Gina Raimondo titled, \u0026ldquo;A message from the Secretary of Commerce.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e Next is a new tool in \u003ca href=\"https://www.usa.gov/death-loved-one\"\u003eBeta from USAGov\u003c/a\u003e — meant to help the public understand what benefits they qualify for, based on the details of their situation and circumstance.The USAGov benefits tool shows a header reading, \u0026ldquo;Government Assistance After Losing a Loved One\u0026rdquo; followed by a USWDS process list.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e Next is an update to \u003ca href=\"https://accounts.waterdata.usgs.gov/wateralert/\"\u003eUSGS WaterAlert\u003c/a\u003e from the US Geological Survey. WaterAlert provides notifications to an email or text phone number when a monitoring location exceeds the trigger levels set by the user. This interface allows users to create and manage their alert subscriptions and also uses login.gov as its identity provider. The USGS WaterAlert page shows an image of a mobile phone displaying multiple notification configuration options. A header reads, \u0026ldquo;Welcome to WaterAlert.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e Finally, \u003ca href=\"https://www.dol.gov/agencies/vets?utm_source=veterans_gov\u0026amp;utm_medium=redirect\u0026amp;utm_campaign=veterans_gov_redirect\"\u003eveterans.gov\u003c/a\u003e from the Department of Labor — home of the Veterans Employment and Training Service, or VETS. The VETS program prepares America\u0026rsquo;s veterans, transitioning service members, and military spouses for meaningful careers, provides them with employment resources and expertise, protects their employment rights, and promotes their employment opportunities. The veterans.gov homepage shows a large hero image of a retired Air Force lieutenant colonel holding a black and white photograph of herself in uniform receiving her new rank during a promotion ceremony. Text reads, \u0026ldquo;Welcome to VETS.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e Congratulations, and great work! Be sure to let our team know when a new site launches, either with an email or a note on the USWDS public Slack channel!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e So now, a few product updates.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e Just one new update this month: USWDS 2.13.4 — a maintenance and security update for the USWDS 2 branch. This is not a very big update but if you use the latest version of USWDS 2 and you\u0026rsquo;re not able to update to USWDS 3, it could be worth grabbing this update to keep your dependencies up to date.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e USWDS 2.13.4 is out now.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e And now let\u0026rsquo;s move on to language selection patterns. We\u0026rsquo;ve been working hard over the last few months to bring patterns and pattern guidance to the design system. This work is in the last phase of review and we hope to launch the new guidance next month.\u003c/p\u003e\n\u003cp\u003eLast month we introduced you to the concept of design patterns, why they\u0026rsquo;re important for the design system, and the research and development approach we used to arrive at them. Today we’re going to go into a bit more detail about what makes up USWDS pattern guidance as we focus on language selection… with the help of a few guest speakers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e I\u0026rsquo;d like to introduce a couple members of the inclusive patterns team. First Meghan O\u0026rsquo;Meara, a Content Strategist and a contractor on our team. Meghan, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eMeghan: Hi, I\u0026rsquo;m Meghan O\u0026rsquo;Meara, and I\u0026rsquo;m the content strategist on the Inclusive Patterns team. My pronouns are she/her and I have chin-length brown and gray hair. I’m located in Michigan and if my screen wasn’t blurred you’d see my dogs coming in and out of the room.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e Thanks Meghan, and I\u0026rsquo;d also like to introduce Mitch Moccia, an Engineer, and a contractor on the Inclusive Patterns team. Mitch, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eMitch: Hi, I\u0026rsquo;m Mitch Moccia, and I\u0026rsquo;m a front-end developer and engineer on the Inclusive Patterns team. I’m located in Florida. My pronouns are he and him and I wear dark glasses and have short brown hair and brown eyes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e Thanks Mitch! Finally, I’d like to introduce you all to Laura Godfrey, a colleague of mine in GSA, working with \u003ca href=\"https://vote.gov/\"\u003eVote.gov\u003c/a\u003e, and a community manager for the \u003ca href=\"https://digital.gov/communities/multilingual/\"\u003eMultilingual Community of Practice\u003c/a\u003e. Laura, can you introduce yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eLaura: Hi, I’m Laura Godfrey, my pronouns are she, her and ella, I live in the Washington, DC Metro Area. I wear glasses, have brown shoulder-length hair and am wearing a shirt with different shades of blue, white and a bit of green.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e We\u0026rsquo;ll hear a bit more from Meghan, Mitch, and Laura in a bit, but I\u0026rsquo;d like to start with an overview of what we\u0026rsquo;ll discuss today.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eFor those of you who missed our call last month, or don\u0026rsquo;t have all this committed to memory yet, we’ll start with a brief overview and introduction to patterns and why we are including them in USWDS.\u003c/li\u003e\n\u003cli\u003eNext we\u0026rsquo;ll talk about what makes up our pattern guidance, and some of specific language selection guidance, as well as how we arrived at our guidance and recommendations.\u003c/li\u003e\n\u003cli\u003eThen we\u0026rsquo;ll demo the new language selector component.\u003c/li\u003e\n\u003cli\u003eAnd finally, we\u0026rsquo;ll talk a bit about what to expect in the coming months.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e So let\u0026rsquo;s get going and talk about what USWDS provides today: What we might call the building blocks of websites. Or, to use a metaphor from the last call.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e The building blocks of a meal.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e First are \u003cstrong\u003eDesign tokens\u003c/strong\u003e — the flavors and textures of our meal analogy. Instead of Sweet, Salty, Savory, and Bitter, tokens in USWDS are elements of style like color, typography, and spacing.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e We also provide \u003cstrong\u003eComponents\u003c/strong\u003e — the ingredients in our food analogy. Instead of cabbage, beans, mushrooms, and broccoli, our components are the functional units of a website, things like buttons, form fields, alerts, and cards.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e And finally \u003cstrong\u003eUsability and Accessibility Guidance\u003c/strong\u003e — the techniques in our analogy. Instead of telling you the six ways to break down an onion, we provide advice on how to use components in ways that users expect, and make site functionality easy to use on any device and accessible.\u003c/p\u003e\n\u003cp\u003eSo what were we missing with our flavors, textures, ingredients, and techniques?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e Well, it was recipes. How are we using all these things together? What are we trying to accomplish with our ingredients and techniques? In the context of a design system, recipes are something we call patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e We can think of patterns as \u0026ldquo;things users do again and again on our sites and services.\u0026rdquo; A good way to think about a pattern is as a common interaction. When we say pattern, a reasonable synonym is: interaction.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e But this can seem a little abstract, so we\u0026rsquo;ve chosen a specific rubric for how to think of a pattern. A pattern completes the sentence, \u0026ldquo;Help a user to [blank].\u0026rdquo; And if you\u0026rsquo;re thinking that this construction sounds a lot like a user story, it sure does. Patterns and user stories have significant conceptual overlap.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e Such as,\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003eenter their name\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003ereview a complex form\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003erefine search results\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003erecover from an error\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003emake an appointment\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003eupload a document\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003eprovide their race or ethnicity\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eAnd, of course, what we\u0026rsquo;ll see in just a moment: help a user to \u003cstrong\u003eselect their preferred language\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eJust as a pile of raw ingredients does not a meal make, nor do components alone make up a service. We see patterns as a missing link — a human-centered link — between components and services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e Patterns and pattern guidance have the opportunity to describe important user needs, and to give any designer a head start to understanding their own specific audience and how to solve for that user need. Because this is what it\u0026rsquo;s all about for us: The USWDS vision: Government teams sharing solutions and practicing effective human-centered design. USWDS has never been intended to replace designers or developers, but to give them the tools to do their job more effectively, to provide important context, and provide well-researched solutions (often shared by other government designers and developers!) that help any government designer and developer start their process further down the path.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e Patterns help us push the USWDS vision and mission of making it easier to build accessible, mobile-friendly government websites even further. It can be easier to talk about whether a form field is accessible, than about whether a form field is fair and equitable. And that\u0026rsquo;s because a form field — on its own, in the abstract — is not much of an experience. It\u0026rsquo;s only in the context of a pattern.… when a user is trying to actually do something.… that a form field has the responsibility to be part of a fair and equitable experience.\u003c/p\u003e\n\u003cp\u003eWhen we talk about patterns we have that responsibility to consider — what it means to be fair and equitable.\u003c/p\u003e\n\u003cp\u003eSuccessful patterns have a responsibility to be fair, equitable, respectful, and inclusive experiences for diverse audiences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e Patterns have a responsibility to reduce barriers to participation through every interaction. So, let’s start by taking a look at what’s in a pattern. We’ll show you a pattern in a minute, but let’s talk about how we got started with the language selector pattern.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e Meghan: As we discussed at the last monthly meeting, we did a lot of research to learn from our colleagues around the federal space, and hear from them what types of interactions they are wrestling with and would like USWDS to focus on. One that kept coming up was language selection. As more and more sites add languages other than English, and as specified in \u003ca href=\"https://www.justice.gov/crt/executive-order-13166\"\u003eExecutive Order 13166\u003c/a\u003e Improving Access to Services for Persons with Limited English Proficiency, digital teams wanted effective solutions for helping users find their language of choice. Luckily, our colleagues in the Multilingual Community of Practice had already taken up this issue. In fact, they’d already drafted a pattern! Laura, can you tell us a little about what you did?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 31:\u003c/strong\u003e Laura: Several of us from the Multilingual Community of Practice decided that this was an interaction that was a challenge for both individual sites and across the federal space. We formed a small team of people who’d been working in this space for a long time, and did a deep dive into the research associated with providing access to multiple languages. The idea was to have a team that was small (so we could make timely decisions) but that included folks from different agencies that had different skillsets. That worked really well.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 32:\u003c/strong\u003e After doing a lot of individual research, we came together to share our findings and begin a debate. And debate we did. We all had strong opinions about our research and what we wanted to offer. And after a few rounds of discussions and visualizations we developed pattern guidance around presenting content in multiple languages. There were three main use cases: sites that have two languages (English and Spanish); sites that have three or more languages; and sites that have full content in two or three languages and some — selected — content in languages other than English. Our pattern addressed each of these scenarios.\u003c/p\u003e\n\u003cp\u003eThis slide shows a visual of these three scenarios. \u003cstrong\u003eTwo languages\u003c/strong\u003e is shown with two similar web pages in two different colors. \u003cstrong\u003eThree or more languages\u003c/strong\u003e is shown with three similar web pages in three different colors. And \u003cstrong\u003eSelected content\u003c/strong\u003e is shown with a single page with four sections in four different colors.\u003c/p\u003e\n\u003cp\u003eWe think this language selection guidance is critical both because it solves a significant design challenge, and also because if everyone in the federal space solves it on their own, it will be inconsistent and confusing for the users. They won’t know how to find content in languages other than English, or even know where to look for this option.\u003c/p\u003e\n\u003cp\u003eI often think of how we adapted to the menu on mobile devices. One day we saw three little lines and didn’t have any idea what that meant. But soon, we figured out that those 3 lines indicated the menu of that site where we could choose what we needed to do. The same will happen with a consistent way to access content in languages other than English. Our goal is to point folks to this content by having a consistent way of doing this across the government. USWDS will help us get here.\u003c/p\u003e\n\u003cp\u003eMeghan?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 33:\u003c/strong\u003e Meghan: So our team took the excellent work done by the \u003ca href=\"https://digital.gov/communities/multilingual/\"\u003eMultilingual Community of Practice\u003c/a\u003e, and built on that to develop patterns to help users to select their preferred language. We interviewed people all over the federal space, focusing on high impact service providers to understand how they are approaching it and what issues they’ve faced. We also explored best practices outside of the federal government. We pulled all of this together into draft patterns, and asked for feedback from stakeholders across the government but particularly the USWDS community (via Slack) and the Multilingual COP email listserv.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 34:\u003c/strong\u003e We ended up with four use cases in the “Select a language” pattern family — three of which are around choosing a language for site content. This slide shows all of the patterns in the family. As you know, accessing content in the language the user is most comfortable with allows them to be more successful in completing tasks, and this is especially true if they are interacting with us during times of stress. These patterns allow us to better support users and show respect for them. On the slide we list the four patterns in the family. The four patterns are:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eSelect between two languages\u003c/strong\u003e, which is about helping a user to select between two languages, such as English and Spanish. (Which we see here as two colored circles with one filled in.)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSelect from three or more languages\u003c/strong\u003e, which is about helping a user to choose from multiple available languages, such as English, Spanish, Chinese, and Arabic. (Which we see here as three colored circles with one filled in.)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFind selected multilingual content\u003c/strong\u003e, which helps a user to find content in their preferred language when only selected content has been translated (which we see here as four colored circles, each partially filled in)\u003c/li\u003e\n\u003cli\u003eand \u003cstrong\u003eIndicate preferred languages\u003c/strong\u003e. This helps a user to choose the languages they prefer for verbal or written communication. (Which we see here as four colored checkboxes with two checked.) This one’s a bit of a departure from the others, in that it’s more about preference management.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 35:\u003c/strong\u003e Let’s take a quick look at the “select from three or more languages” pattern — which is representative of what you can expect from each pattern. Each pattern has a guidance page, just like components. On the following slides, we’ll walk through a typical pattern guidance page and you’ll see different elements of the pattern highlighted on the next few pages.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 36:\u003c/strong\u003e At the top of each pattern guidance page, you’ll see a description of the pattern. Each pattern includes a heading, along with a short lede, and a summary of what the pattern is about, so you can decide if this is what you’re looking for. In this case the heading is “Three or more languages” and the lede is “Help a user choose from multiple available languages.” The summary expands on that, but references that this pattern is serving people with limited English proficiency when they are visiting a website available in three or more languages, like English, Spanish, and Arabic.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 37:\u003c/strong\u003e Then each pattern will have some key information to make sure this pattern is appropriate for your use.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eA heading asks “What problem does this solve?” and then summarizes the key challenge the pattern is solving. In this case, inconsistent placement and treatment of language selection interface components can be a barrier to users, especially those with limited English-language skills, preventing them from easily finding and accessing content in other languages.\u003c/li\u003e\n\u003cli\u003eEach pattern then tells you when use of the pattern is appropriate, and, sometimes, when it is not. In this case the pattern should be used only when the entire experience is available in three or more languages. If the site is available in only two languages, you should consider a different pattern, which we link to here. And if only selected content, such as instructions or infographics, are available in some languages, there is another pattern for that.\u003c/li\u003e\n\u003cli\u003eFinally, there is a high-level summary of the solution. In this case, the pattern recommends placing the language selector menu at the top of the screen above site navigation, allowing site visitors to use a dropdown menu to select their language of choice. Place the language selector on the top right for left-to-right languages and on the top left for right-to-left languages if possible. As Laura mentioned, standardization of placement is really important so users know where to look for this feature.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 38:\u003c/strong\u003e Then each pattern provides a list of do’s and don’ts. I’m going to take a minute to walk through these, since these are important and show you some of the challenges of this pattern.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eFirst, under “What to do,” we recommend placing the language menu button in the upper corner of the screen for consistency. If possible, flip the arrangement of the header for right-to-left languages. The language button should be positioned at the top right of the page for left-to-right languages and on the top left for right-to-left languages. There was lots of debate on this one. Generally, users of RTL languages expect the heading to be flipped from what we expect in English, and look for their utilities, including language selection, at the far end of their reading line, which is in the upper left. And that is where we landed in the recommendations, but are looking forward to more user testing to validate this.\u003c/li\u003e\n\u003cli\u003eWe recommend making the language access buttons a single, independent element.\u003c/li\u003e\n\u003cli\u003eIf you have a sticky or fixed header, include the language dropdown in the header so it remains visible and in the same position as the user scrolls.\u003c/li\u003e\n\u003cli\u003eMake sure you are taking the users to an equivalent page — if the entire site isn’t available in languages other than English, there’s another pattern to help you with that.\u003c/li\u003e\n\u003cli\u003eUse the label “Languages” for the dropdown.\u003c/li\u003e\n\u003cli\u003eCapitalize the name of each language and use the common, native language name, such as Espanol or Francais. Use the native alphabet, too.\u003c/li\u003e\n\u003cli\u003eWe’re not recommending including the English-language version of the language name in addition to the native language name, but if you have a specific use case, and have validated it with user testing, please do. For example, if you have a user group where a lot of the users will be helped by someone who doesn’t speak their language, you may need to include the English language version of the name next to the native name. Let user testing be your guide.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eNow, for the don’ts:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDon’t create a dead end for users by taking them to a site with little content in their preferred language.\u003c/li\u003e\n\u003cli\u003eDon’t use icons or graphics or flags or country codes to indicate languages. These mean different things to different cultures, and flags don’t map to languages. Country codes such as ES may not be universally understood.\u003c/li\u003e\n\u003cli\u003eAvoid auto-redirecting language based on detecting location or browser settings. This can be confusing and disorienting.\u003c/li\u003e\n\u003cli\u003eFinally, don’t combine this element with other navigation items.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 39:\u003c/strong\u003e Then on each pattern, you’ll see a series of considerations — things to think about as you implement the pattern. For example,\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eEnsure there is adequate color contrast between all elements of the button.\u003c/li\u003e\n\u003cli\u003eIf the text will be visually presented as a button but coded as a link, add the ARIA role=”button” so screen readers announce it as a button. You’ll also need JavaScript so that keyboard users can activate both the Enter and Spacebar keys. We’ve provided a link to the WCAG success criteria for more information.\u003c/li\u003e\n\u003cli\u003eRemember to use HTML lang attributes to set the language of each page and to present all logically related items and links in an HTML unordered list.\u003c/li\u003e\n\u003cli\u003eWe also recommend including a prominent in-page notice or link regarding the available languages in addition to the link in the header, in order to increase visibility.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 40:\u003c/strong\u003e For each pattern you’ll also see a link to the components you’ll need to use this pattern, a preview of what they look like, and the pattern code. Mitch will demo the related component — Language selector — in a minute.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 41:\u003c/strong\u003e Other things you’ll find on the page are links to the pattern in use, in this case at the Department of Education. Their example departs from our recommendations, a bit, but gives you a sense of one implementation. You’ll also see a list of related components, patterns, and templates, in this case the header component, and the find selected multilingual content pattern, and the select from two languages pattern. You’ll also see a list of references used to inform this pattern and a changelog, a list of any changes to the pattern page since publication.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 42:\u003c/strong\u003e One of the stickiest design challenges in this pattern family is how to surface non-English language content when the entire site is not translated. (Which we see here on the slide represented with an image of a webpage with four colored sections, and the same four colored circles we saw in an earlier slide, each half filled.)\u003c/p\u003e\n\u003cp\u003eMaybe your site is available in English, Spanish, and Simplified Chinese, but you have selected content — factsheets or instructions, infographics or videos in a bunch of other languages, such as Arabic and ASL. How do you provide access to those languages without causing the user confusion when they expect to get the entire site in those languages. These are tough questions, and the Find selected multilingual content pattern provides guidance about how to think about these, recommending an additional panel on the dropdown menu that links to the landing page for this kind of content. I mention this because now we’re going to see a demo of the language selector component from Mitch, and this will come up. Mitch?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 43:\u003c/strong\u003e Mitch: DEMO\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eTwo languages\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe two languages button is basically a toggle between two languages. The behavior of the button is fully controlled by JavaScript which allows us to address any accessibility considerations.\u003c/li\u003e\n\u003cli\u003eSpeaking of accessibility, one of the most important elements of a language selector is making sure that any language that is not the language of the page you are on is wrapped in a span element with the lang attribute and two character language code. And we’ll see more of that in the next section.\u003c/li\u003e\n\u003cli\u003eFor sites that are RTL, the converse would be appropriate, with the language selector positioned on the far left corner of the header.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eThree or more languages\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eFeatures a dropdown that lists all the languages in their native languages — alphabetically.\u003c/li\u003e\n\u003cli\u003eWe recommend listing the languages in native language only, but including the English language name in hover text. Let’s dive into some code to better illustrate this and how we emphasized accessibility with the language selector component.\u003c/li\u003e\n\u003cli\u003eTo achieve the hover text, we utilize the title attribute. Here we have added the English translation in addition to the native language which can be helpful if you are using a screen reader.\u003c/li\u003e\n\u003cli\u003eEvery native language is also wrapped in a span element that contains the lang attribute and corresponding, two-character language code.\u003c/li\u003e\n\u003cli\u003eIn mobile, the language button appears to the left of the Menu button. The pattern guidance states that even in mobile, the language button should be accessible, so avoid hiding the language button inside a mobile nav. In this example, I used the unstyled variant of usa-button to display the language selector as a standard link next to the large, blue Menu button.\u003c/li\u003e\n\u003cli\u003eAnother accessibility consideration is to ensure that your tab order matches the visual order of the elements. So as I tab through the desktop header, the tab order is correct, and as I tab through the mobile header, the tab order now also reflects the correct order even though the position of the language button changed.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSelected content in additional languages\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe pattern guidance suggests different solutions based on whether the content is very specific, such as fact sheets, or more general and varied content.\u003c/li\u003e\n\u003cli\u003eBut the language selector component supports an additional block of real estate where you can promote that content. Typically that content would generally take one of two approaches: topic-driven approach, for sites that have rich, topical content, and language-driven approach for sites that have a disparate set of content available in additional languages.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eOther MITCH insights\nThe dropdown version of the language component, like the government banner, utilizes the accordion component for its expand and collapse functionality, so you’ll see usa-accordion as a dependency of the usa-language-selector package. Also, the button in all versions of the language selector uses the usa-button class and you can utilize any of its many variants, making it super easy to customize. Dan?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 44:\u003c/strong\u003e Dan: What you’ve seen here is an overview of the language selector patterns and how we arrived at pattern recommendations…and a brief demo of the language selector components. Next month, we’ll take a look at some of the other patterns we’ve developed, with a focus around providing personal information and completing complex forms.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 45:\u003c/strong\u003e And while these patterns and components are designed based on extensive research, we expect them to evolve as the equity and inclusivity landscape evolves and as we learn more from you. We invite you to share your input in #USWDS-public slack, GitHub issues, or by emailing the USWDS team.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 46:\u003c/strong\u003e Now some Q\u0026amp;A. You must have some questions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 47:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, we\u0026rsquo;ll be looking at Inclusive Patterns in depth. Please look out for an event feedback survey from Digital.gov. You\u0026rsquo;ll get this in your email, and there\u0026rsquo;s also a link in the chat. Your feedback makes a difference to us, so we\u0026rsquo;d appreciate the extra time it takes you to provide it.\u003c/p\u003e\n\u003cp\u003eThank you, and see you in October!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003cp\u003eHow do we help users find content in their preferred language? Join us as we take a closer look at the language selection patterns we\u0026rsquo;re developing for USWDS.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll talk about how this work evolved out of the \u003ca href=\"https://digital.gov/communities/multilingual/\"\u003eMultilingual Community of Practice\u003c/a\u003e, then we\u0026rsquo;ll discuss our general approach to pattern guidance, while looking at this specific guidance and the new components that support it.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis event is part of a monthly series that takes place on the third Thursday of each month. Don’t forget to set a placeholder on your personal calendar for our future events this year.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"about-the-uswds\"\u003eAbout the USWDS\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e is a toolkit of principles, guidance, and code to help government teams design and build accessible, mobile-friendly websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eContribute on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003eEmail Us\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003eJoin our community\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/uswds\"\u003eFollow @uswds on Twitter\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n",
      "branch" : "bc-archive-content-3",
      "filename" :"2022-09-08-uswds-monthly-call-september-2022.md",
      
      "filepath" :"events/2022/09/2022-09-08-uswds-monthly-call-september-2022.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2022/09/2022-09-08-uswds-monthly-call-september-2022.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2022/09/2022-09-08-uswds-monthly-call-september-2022.md","slug" : "uswds-monthly-call-september-2022","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/09/15/uswds-monthly-call-september-2022/"
    }
  ]
}