From d8fda3d7c3d2023c376fe81923a4a539b7e8219f Mon Sep 17 00:00:00 2001 From: Kattt Date: Sun, 5 Nov 2023 02:38:45 -0700 Subject: [PATCH 1/6] Revisions to tutorial to match new technical writing guide --- src/data/en.yml | 314 ++++++++++-------- src/data/es.yml | 314 ++++++++++-------- src/data/hi.yml | 314 ++++++++++-------- src/data/it.yml | 314 ++++++++++-------- src/data/ko.yml | 314 ++++++++++-------- src/data/zh-Hans.yml | 314 ++++++++++-------- .../pages/learn/labeling-canvases.hbs | 200 +++++------ 7 files changed, 1187 insertions(+), 897 deletions(-) diff --git a/src/data/en.yml b/src/data/en.yml index 2aae5c08da..1426bc6853 100644 --- a/src/data/en.yml +++ b/src/data/en.yml @@ -353,142 +353,196 @@ learn: using-local-server-title: Using a local server labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server: 'How to set up a local server on Mac OSX, Windows, or Linux.' p5js-wiki-title: p5.js wiki p5js-wiki: Additonal documentation and tutorials contributed by the community diff --git a/src/data/es.yml b/src/data/es.yml index 927548ef11..49afe470f5 100644 --- a/src/data/es.yml +++ b/src/data/es.yml @@ -365,142 +365,196 @@ learn: pantalla. labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server-title: Usando un servidor local using-local-server: 'Cómo configurar un servidor local en Mac OS X, Windows o Linux.' p5js-wiki-title: p5.js wiki diff --git a/src/data/hi.yml b/src/data/hi.yml index 29e6b1a9ee..fbc9729b7b 100644 --- a/src/data/hi.yml +++ b/src/data/hi.yml @@ -353,142 +353,196 @@ learn: p5-screen-reader: P5 सेट करना ताकि इसे स्क्रीन रीडर के साथ आसानी से उपयोग किया जा सके। labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server-title: स्थानीय सर्वर का उपयोग करना using-local-server: 'Mac OSX, Windows, या Linux पर स्थानीय सर्वर कैसे सेट करें।' p5js-wiki-title: p5.js विकी diff --git a/src/data/it.yml b/src/data/it.yml index eb533f911d..2c6b21edca 100644 --- a/src/data/it.yml +++ b/src/data/it.yml @@ -365,142 +365,196 @@ learn: reader. labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server-title: Usando un server locale using-local-server: 'Come configurare un server locale su Mac OSX, Windows, o Linux.' p5js-wiki-title: p5.js wiki diff --git a/src/data/ko.yml b/src/data/ko.yml index 77dcfd2706..53d6ace61e 100644 --- a/src/data/ko.yml +++ b/src/data/ko.yml @@ -297,142 +297,196 @@ learn: p5-screen-reader: 스크린 리더를 위한 p5 설정 방법을 알아보세요. labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server-title: 로컬 서버 사용하기 using-local-server: '맥 OSX, 윈도우, 리눅스 상에서 로컬 서버 설정하기' p5js-wiki-title: p5.js 위키 diff --git a/src/data/zh-Hans.yml b/src/data/zh-Hans.yml index 6d4a92838f..38d03a7ae0 100644 --- a/src/data/zh-Hans.yml +++ b/src/data/zh-Hans.yml @@ -279,142 +279,196 @@ learn: p5-screen-reader: 设置 p5 以让它可以和荧幕阅读器一起使用。（英文内文） labeling-canvases-title: How to label your p5.js code labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro-1: 'This tutorial will teach you how to use the' - labeling-canvases-intro-2: and - labeling-canvases-intro-3: functions in your code so your canvases are readible by screen readers and other assistive technology. - labeling-canvases-what-is-labeling: What is screen reader labeling? + labeling-canvases-intro: Introduction + labeling-canvases-intro-1: >- + In this tutorial, you'll learn how to use describe() + , describeElement(), + gridOutput(), + and textOutput(). These functions add labels to + your canvas so that it’s readable for screen readers and other assistive technologies. + labeling-canvases-what-is-labeling: What is labeling? labeling-canvases-what-is-labeling-1: >- - The canvas HTML element compresses the visuals created by your p5 code into a bitmap (a rastered graphic composed of pixels). This - bitmap on its own doesn't provide any significant meaning or description about its contents to - screen readers. That’s why the p5.js describe(), - describeElement(), gridOutput(), - and textOutput() - functions exist— these allow you to manually add screen reader-accessible descriptions to your - code so that screen reader technologies can describe the canvas’ content in a meaningful way. - labeling-canvases-what-is-labeling-2: >- - Because a screen reader cannot naturally interpret the contents of a canvas bitmap, these functions - add labels into your code that instruct the screen reader on how to describe certain elements - within your canvas. - labeling-canvases-what-is-labeling-3: >- - For more information about p5.js screen reader accessibility, please read - labeling-canvases-available-labels: Screen reader labels for p5.js + When you use the createCanvas() function, you + create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). + Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. + That’s why we created the describe(), + describeElement(), + gridOutput(), and + textOutput() functions. + These functions add labels to your canvas that tell the screen reader how to describe it. + labeling-canvases-why-labeling-matters: Why labeling matters + labeling-canvases-why-labeling-matters-1: >- + Screen readers (and text-to-speech softwares) are helpful for lots of people, + regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to + understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, + the screen reader software won’t be able to communicate what’s on the site to its user. Someone else + might be using a text-to-speech software because they have dyslexia and find listening to the site’s + content more comprehensible than reading it. There are also people who use these assistive softwares + to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. + labeling-canvases-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive softwares allows + more people to engage with your work in meaningful ways. + labeling-canvases-available-labels: Available labeling functions labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas labeling-canvases-available-labels-li-1: >- - describe() provides an overall description of the canvas contents. This function's parameters include: text, - which affords a string of text for the label; and display, an optional parameter to set the visibility of the label. + describe() provides a description of the canvas contents. + This function's parameters include: text, the label itself; and display, + an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-2: >- - describeElement() describes a specific element or a specific grouping of elements in a canvas. - This function's parameters include: name, which affords a string naming the element described; text, which affords a string of text as the label description; - and display, an optional parameter to set the visibility of the label. + describeElement() describes a specific element or a + specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; + text, the label itself; and display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-3: >- - textOutput() generates a list providing a canvas description and its visual elements, including the canvas' size, - canvas color, as well as each visual element’s color, position, and the amount of area the element covers within the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. + textOutput() generates a list describing the canvas size, color, + as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is + display, an optional parameter to set the visibility of the label. labeling-canvases-available-labels-li-4: >- - gridOutput(), like textOutput(), generates a list of the canvas and its (visual) elements, only this function - arranges its output in a HTML table that plots the spatial location of each shape within the canvas. It also provides a basic - description of the canvas, including the canvas' size, canvas color, the number of visual elements, and the different visual element types inside the canvas. This function's only parameter is display, which is an optional - parameter to set the visibility of the label. - labeling-canvases-best-practices: Labeling best practices - labeling-canvases-best-practices-what-requires-labeling: What requires labeling? - labeling-canvases-best-practices-what-requires-labeling-1: >- - As a good rule of thumb, any visual element that is important to the overall context or purpose - of the canvas should be mentioned by the describe() and/or describeElement() functions. - labeling-canvases-best-practices-what-requires-labeling-2: >- - Consider the overall purpose of the p5.js canvas and its contents in question, and label them in a way that makes - sense for the message, functionality, and/or purpose of the canvas and its elements. In the code block below, a heart is made within the canvas by placing two circles on top of a triangle. - Instead of individually labeling each shape used to make the heart, you should use one describeElement() function to describe - the overall shape you made. - labeling-canvases-best-practices-what-requires-labeling-3: >- - If, at any point, an element in your canvas undergoes a change or alteration in its visual appearance (and this change is - important to the overall meaning and context of the canvas), it’s best to also update the describeElement() label when that - change occurs. - labeling-canvases-best-practices-what-requires-labeling-4: >- - The canvas HTML element will also rasterize any text within it. Use the describeElement() function to translate any significant - text within your canvas. - labeling-canvases-best-practices-what-requires-labeling-5: In short, any significant visual, textual, or animated information within the canvas should be labeled with a screen reader label. - labeling-canvases-best-practices-dont-label: What DOESN'T need labeling - labeling-canvases-best-practices-dont-label-1: >- - Individual interactive elements, such as HTML buttons, dropdowns, or inputs, do not need to be labeled. - In the DOM, these elements are built outside of the p5.js canvas, and therefore can be interpreted by screen readers. - labeling-canvases-best-practices-dont-label-2: >- - This means the gridOutput() and textOutput() functions will not provide any information about these interactive inputs in their - reports of the canvas, should you use them. - labeling-canvases-best-practices-using-labels: How to use labels - labeling-canvases-best-practices-using-labels-all-canvases: For all canvases - labeling-canvases-best-practices-using-labels-all-canvases-1: >- - No matter the canvas’ purpose or contents, you should always use a label to supply an overall summary of the canvas. Most often, - you’ll use the describe() function for this summary. - labeling-canvases-best-practices-using-labels-all-canvases-2: >- - The summary should provide a general understanding of the visuals inside the canvas. - labeling-canvases-best-practices-using-labels-simple: For simple, non-animated canvases - labeling-canvases-best-practices-using-labels-simple-1: >- - For canvases without any changing, moving, or interactive elements, you may use either the describeElement(), - gridOutput(), or textOutput() - functions to label the canvas’ visual content. However, keep in mind that gridOutput() and textOutput() generate their information based on - the rudimentary code of the visual element, such as its size, color, and shape. These functions won’t be able to interpret your - intention in using such a shape within a larger visual built using multiple shapes. - labeling-canvases-best-practices-using-labels-simple-2: >- - Keep in mind the context and objective of the canvas’ contents when choosing which function(s) to use. Is it better to describe the flower - as eight circles and a rectangle, or as a flower with red petals and a green stem? What kind of labeling will provide the best - description of your canvas? - labeling-canvases-best-practices-using-labels-simple-3: >- - If you are creating larger, multi-shaped visuals, then it would be best to use describeElement() to define each visual grouping - present within the canvas. - labeling-canvases-best-practices-using-labels-interactive: For interactive or animated canvases - labeling-canvases-best-practices-using-labels-interactive-1: >- - If your canvas contains any animated elements or elements that change their visual form via user input (the click of a button, a - dropdown selection, etc.), be sure that any descriptions of such elements update with their changes or animations. If you are using - textOutput() or gridOutput() to describe the contents of your canvas, so long as these functions are placed within the draw() function, they - will automatically update with the shape’s new information. If you are using describeElement(), use concatenation or another form of - variable input to update the element’s description. - labeling-canvases-best-practices-using-labels-interactive-2: >- - If this interaction or animation is crucial to the overall purpose and/or message of the canvas, be sure to mention in either the describe() - label or the individual element’s label that this element is (or can be) animated. - labeling-canvases-best-practices-using-labels-interactive-3: >- - Naturally-interactive HTML elements, such as buttons or inputs, do not need to have a label. Instead, follow the proper role and ID - syntax for these elements when possible. For more information about how to properly label and ID HTML - interactive elements, visit Mozilla’s HTML: A good basis for accessibility. - labeling-canvases-best-practices-using-labels-complex: For complex canvases - labeling-canvases-best-practices-using-labels-complex-1: >- - The p5 functions listed above do not afford the more complicated features of ARIA labeling, such as aria-live or aria-atomic. - For advanced canvases, using vanilla ARIA labeling and custom-built fallback content might better convey the canvas’ - information to screen readers. Some cases where the canvas’ content cannot be accurately described (or represented) through p5.js’ supplied - screen reader labels include: - labeling-canvases-best-practices-using-labels-complex-ul-1: Canvases with content that changes extensively via external interactive elements. - labeling-canvases-best-practices-using-labels-complex-ul-2: >- - Canvases with content that requires the user’s attention if it is changed or altered by another element, especially if that element is not - embedded in the canvas’ code. - labeling-canvases-best-practices-using-labels-complex-ul-3: >- - Canvases with complex element layouts that cannot be accurately represented using the describe(), describeElement(), - textOutput(), or gridOutput() functions. - labeling-canvases-best-practices-using-labels-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. For more information about complex ARIA labeling, - visit Mozilla’s ARIA states and properties. - labeling-canvases-how-not-to-use-labels: How NOT to use labels - labeling-canvases-how-not-to-use-labels-sub: As a substitution for poorly organized code - labeling-canvases-how-not-to-use-labels-sub-1: >- - Screen reader labels should not be used as a way of commenting your code. These labels - should only be used to summarize the resulting visual elements within a canvas. - labeling-canvases-how-not-to-use-labels-info-overkill: As information overkill - labeling-canvases-how-not-to-use-labels-info-overkill-1: If you overuse screen reader labels in your code, you may end up overly complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-how-not-to-use-labels-info-overkill-2: Within reason, less is more with screen reader labeling. Be concise, accurate, and short with your label descriptions. - labeling-canvases-how-not-to-use-labels-info-overkill-3: >- - Do not use both the textOutput() and gridOutput() functions in the same canvas. You only need to use one or the other to describe the canvas elements. - Using both will cause redundancy in the screen readers’ translation of your code. This also pertains to using textOutput() or - gridOutput() with additional describeElement() - labels. It’s best to choose one strategy of labeling for your entire canvas, and stick with it. - labeling-canvases-testing-labels: Testing labels during development - labeling-canvases-testing-labels-1: >- - All these functions have a display parameter that either keeps its output only available to screen readers (FALLBACK) or presents the output as text - adjacent to the canvas (LABEL). If you would like to see the output during development, add LABEL as the last parameter for the function. FALLBACK is the default parameter. - labeling-canvases-testing-labels-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough information for someone to understand its purpose? If this canvas - exists on a website, or among any other content, would someone have a good understanding of how the canvas’ content interacts and/or pertains to the surrounding context? - labeling-canvases-testing-labels-3: >- - In order to reduce redundancy, be sure to reset the display parameter to FALLBACK once you’ve tested the output. With LABEL active, screen readers will read the fallback text - and the visible label text when focused on the canvas. - labeling-canvases-note: Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, feel free to issue a pull request! + gridOutput(), like textOutput(), + generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the + spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter + to set the visibility of the label. + labeling-canvases-prerequisites: Prerequisites + labeling-canvases-prerequisites-1: >- + Your project's code should be near completion before you begin labeling. To write clear and effective + labels, you should have a clear understanding about what visuals your code creates within the canvas + element. + labeling-canvases-prerequisites-2: >- + For example, if you started writing your labels before you had a clear understanding of the resulting + visual of your canvas, your labels and your visuals may communicate different messages, like the code + example below: + labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code + labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy + labeling-canvases-steps-for-labeling-step-1-1: >- + Your labeling strategy will change based on your project's complexity and purpose. + labeling-canvases-steps-for-labeling-step-1-2: >- + No matter how complicated your project may be, always provide a brief description of your canvas in + setup() using the + describe() function. If you do not provide any labels in your code, + screen readers will describe your canvas as a blank HTML element. + labeling-canvases-steps-for-labeling-step-1-3: >- + Place this label in the setup() section of your code, + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + the visual elements of your canvas. + labeling-canvases-steps-for-labeling-step-1-4: >- + You do not need to begin your description with "A p5 canvas element..." or anything similar, since the + screen reader will declare the element type before reading your label. + labeling-canvases-steps-for-labeling-step-1-5: >- + Along with the describe() label, use either the + describeElement(), + textOutput(), + or gridOutput() + function to add more detailed labels within your code. + labeling-canvases-steps-for-labeling-step-1-6: >- + The textOutput() and + gridOutput() functions can + describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing + which function(s) to use. Is it better to describe the flower as “eight circles and a rectangle”, or as “a flower with red + petals and a green stem”? What kind of labeling will provide the best description of your canvas? If + you are creating larger visuals with many shapes, use describeElement() + to label each group of shapes. + labeling-canvases-steps-for-labeling-step-1-7: >- + Do not use both the textOutput() and + gridOutput() functions to describe the same canvas. Using both will + cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + using textOutput() or + gridOutput() with + describeElement() labels. It’s best to choose one function to + supplement your describe() label. + labeling-canvases-steps-for-labeling-step-1-complex: Complex projects + labeling-canvases-steps-for-labeling-step-1-complex-1: >- + Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: + labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + Has content that changes extensively via external interactive elements (elements outside the canvas) + labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + Interacts with DOM elements written outside of the canvas code + labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + Requires the user’s attention if the canvas' visual content changes + labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + Has complex element layouts that cannot be accurately labeled with the describe(), + describeElement(), + textOutput(), or + gridOutput() functions + labeling-canvases-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + labeling-canvases-steps-for-labeling-step-2-1: >- + Begin labeling your canvas using the function(s) that best serve your users. + labeling-canvases-steps-for-labeling-step-2-2: >- + While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to + describe how or what functions create the visuals present on the canvas, only how the end result + visuals appear within the canvas. + labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() + labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + When using the describeElement() function to label your code, provide a unique title and a description + no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual + aspects of your canvas. + labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + Within each describeElement() label, discuss the important qualities of that element. Is the element + animated? Is the element interactive? What meaning does the element provide to the project? + labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + If your canvas contains any text() elements that are important to the general understanding of the + image, make a separate label for them. Label any legible text with quotation marks around it in the + label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a + black canvas."). + labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will + call out the element type before reading your labels: + labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + Limit the number of describeElement() functions present within your code as much as possible. If you + have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling + strategy that affords more complexity (such as vanilla ARIA labeling). + labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + gridOutput() and textOutput() + generate their information based on the code of the visual element, such as its size, color, and shape. + Unlike describeElement(), you only need to use one label to describe all + your canvas' visual elements. + labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + labeling-canvases-steps-for-labeling-step-2-animated-1: >- + Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These + elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this + means the gridOutput() and + textOutput() functions won’t provide any information about these interactive + inputs. + labeling-canvases-steps-for-labeling-step-2-animated-2: >- + If a canvas element is animated and/or interactive, represent its current state or qualities in the label. + So long as you place the functions within the draw() function, they will automatically update with the + shape’s new information. If you are using describeElement(), use template strings to update the element’s + description: + labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the + resulting visual elements within a canvas. If you overuse screen reader labels, you may end up + complicating the screen reader’s interpretation of the canvas rather than helping it. + labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + Do make your label descriptions short and accurate. Use full sentences for your labels, and write + in the present tense when describing elements. + labeling-canvases-steps-for-labeling-step-3: 3. Test your labels + labeling-canvases-steps-for-labeling-step-3-1: >- + Be sure to test your labels before publishing your sketch. Labels are only available to screen readers + by default.To see the output during development, pass LABEL as the last argument to the function. + labeling-canvases-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: Do your canvas labels provide enough + information for someone to understand the sketch’s purpose? If this canvas exists on a web page among + other content, would someone have a good understanding of how the canvas relates to its surrounding + context? + labeling-canvases-steps-for-labeling-step-3-3: >- + Be sure to remove the LABEL argument once you’ve tested the output. With LABEL + active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is + confusing for them. + labeling-canvases-steps-for-labeling-step-3-4: >- + You may also download a screen reader and use it to test your code. For more information about using + screen readers, visit W3 School’s Accessibility Screen Readers. + labeling-canvases-conclusion: Conclusion + labeling-canvases-conclusion-1: >- + Once you've tested your labels, your canvas should be accessible to screen reader technology! + labeling-canvases-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + labeling-canvases-conclusion-3: >- + Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, + feel free to issue a pull request! using-local-server-title: 本地伺服器 using-local-server: 如何在 Mac OSX、Windows 或 Linux 上设置本地伺服器。 p5js-wiki-title: p5.js wiki diff --git a/src/templates/pages/learn/labeling-canvases.hbs b/src/templates/pages/learn/labeling-canvases.hbs index 18fc7dbb09..73962bcf36 100644 --- a/src/templates/pages/learn/labeling-canvases.hbs +++ b/src/templates/pages/learn/labeling-canvases.hbs @@ -13,14 +13,15 @@ slug: learn/

{{#i18n "labeling-canvases-title"}}{{/i18n}}

-

{{#i18n "labeling-canvases-intro-1"}}{{/i18n}} describe(), - describeElement(), gridOutput(), - {{#i18n "labeling-canvases-intro-2"}}{{/i18n}} textOutput() {{#i18n "labeling-canvases-intro-3"}}{{/i18n}}

+

{{#i18n "labeling-canvases-intro"}}{{/i18n}}

+

{{#i18n "labeling-canvases-intro-1"}}{{/i18n}}

{{#i18n "labeling-canvases-what-is-labeling"}}{{/i18n}}

{{#i18n "labeling-canvases-what-is-labeling-1"}}{{/i18n}}

-

{{#i18n "labeling-canvases-what-is-labeling-2"}}{{/i18n}}

-

{{#i18n "labeling-canvases-what-is-labeling-3"}}{{/i18n}} Using p5 with a screen reader.

+ +

{{#i18n "labeling-canvases-why-labeling-matters"}}{{/i18n}}

+

{{#i18n "labeling-canvases-why-labeling-matters-1"}}{{/i18n}}

+

{{#i18n "labeling-canvases-why-labeling-matters-2"}}{{/i18n}}

{{#i18n "labeling-canvases-available-labels"}}{{/i18n}}

{{#i18n "labeling-canvases-available-labels-1"}}{{/i18n}}:

@@ -31,130 +32,107 @@ slug: learn/
  • {{#i18n "labeling-canvases-available-labels-li-4"}}{{/i18n}}
    • -

    {{#i18n "labeling-canvases-best-practices"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling-2"}}{{/i18n}}

    - - - +

    {{#i18n "labeling-canvases-prerequisites"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-prerequisites-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-prerequisites-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling-3"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling-4"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling"}}{{/i18n}}

    + +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-3"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-what-requires-labeling-5"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-4"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-5"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-6"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-7"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-dont-label"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-dont-label-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-dont-label-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-using-labels"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-1"}}{{/i18n}}

    + +

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-all-canvases"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-all-canvases-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-3"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-4"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-using-labels-all-canvases-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-using-labels-simple"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-simple-1"}}{{/i18n}}

    - - -

    {{#i18n "labeling-canvases-best-practices-using-labels-simple-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-simple-3"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-using-labels-interactive"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-interactive-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-5"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-go-to"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-go-to-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated-2"}}{{/i18n}}

    - - -

    {{#i18n "labeling-canvases-best-practices-using-labels-interactive-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-interactive-3"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-best-practices-using-labels-complex"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-best-practices-using-labels-complex-1"}}{{/i18n}}

    - - -

    {{#i18n "labeling-canvases-best-practices-using-labels-complex-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-how-not-to-use-labels"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-sub"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-sub-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-3"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-3"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-testing-labels"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-testing-labels-1"}}{{/i18n}}

    - - -

    {{#i18n "labeling-canvases-testing-labels-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-testing-labels-3"}}{{/i18n}}

    -
    -

    {{#i18n "labeling-canvases-note"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-3"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-4"}}{{/i18n}}

    + +

    {{#i18n "labeling-canvases-conclusion"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-conclusion-1"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-conclusion-2"}}{{/i18n}}

    +

    {{#i18n "labeling-canvases-conclusion-3"}}{{/i18n}}

    From 3bc69f96d2089ad52d0f95d15c6a844ba13e6e4c Mon Sep 17 00:00:00 2001 From: Kattt Date: Sat, 18 Nov 2023 21:41:57 -0700 Subject: [PATCH 2/6] "revisions" --- src/data/en.yml | 152 ++++++------- src/data/es.yml | 152 ++++++------- src/data/hi.yml | 152 ++++++------- src/data/it.yml | 152 ++++++------- src/data/ko.yml | 152 ++++++------- src/data/learn/learn.json | 4 +- src/data/zh-Hans.yml | 152 ++++++------- .../pages/learn/accessible-labels.hbs | 207 ++++++++++++++++++ .../pages/learn/labeling-canvases.hbs | 203 ----------------- 9 files changed, 671 insertions(+), 655 deletions(-) create mode 100644 src/templates/pages/learn/accessible-labels.hbs delete mode 100644 src/templates/pages/learn/labeling-canvases.hbs diff --git a/src/data/en.yml b/src/data/en.yml index 1426bc6853..be8254a00c 100644 --- a/src/data/en.yml +++ b/src/data/en.yml @@ -351,17 +351,17 @@ learn: p5-screen-reader-title: p5 with a screen reader p5-screen-reader: Setting up p5 so that it can be used easily with a screen reader. using-local-server-title: Using a local server - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -370,69 +370,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -440,109 +440,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server: 'How to set up a local server on Mac OSX, Windows, or Linux.' p5js-wiki-title: p5.js wiki p5js-wiki: Additonal documentation and tutorials contributed by the community diff --git a/src/data/es.yml b/src/data/es.yml index 49afe470f5..17b3f96253 100644 --- a/src/data/es.yml +++ b/src/data/es.yml @@ -363,17 +363,17 @@ learn: p5-screen-reader: >- Configurando p5 para que pueda ser usado fácilmente con un lector de pantalla. - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -382,69 +382,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -452,109 +452,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server-title: Usando un servidor local using-local-server: 'Cómo configurar un servidor local en Mac OS X, Windows o Linux.' p5js-wiki-title: p5.js wiki diff --git a/src/data/hi.yml b/src/data/hi.yml index fbc9729b7b..bfa8d9e6ec 100644 --- a/src/data/hi.yml +++ b/src/data/hi.yml @@ -351,17 +351,17 @@ learn: p5js-processing: 'दोनों के बीच मुख्य अंतर, और एक से दूसरे में कैसे परिवर्तित किया जाए।' p5-screen-reader-title: स्क्रीन रीडर के साथ p5 p5-screen-reader: P5 सेट करना ताकि इसे स्क्रीन रीडर के साथ आसानी से उपयोग किया जा सके। - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -370,69 +370,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -440,109 +440,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server-title: स्थानीय सर्वर का उपयोग करना using-local-server: 'Mac OSX, Windows, या Linux पर स्थानीय सर्वर कैसे सेट करें।' p5js-wiki-title: p5.js विकी diff --git a/src/data/it.yml b/src/data/it.yml index 38fc36b5fa..7d7fd9bc2c 100644 --- a/src/data/it.yml +++ b/src/data/it.yml @@ -364,17 +364,17 @@ learn: p5-screen-reader: >- Configurare p5 in modo che possa essere utilizzato facilmente con uno screen reader. - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -383,69 +383,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -453,109 +453,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server-title: Usando un server locale using-local-server: 'Come configurare un server locale su Mac OSX, Windows, o Linux.' p5js-wiki-title: p5.js wiki diff --git a/src/data/ko.yml b/src/data/ko.yml index 53d6ace61e..d2590d0400 100644 --- a/src/data/ko.yml +++ b/src/data/ko.yml @@ -295,17 +295,17 @@ learn: p5js-processing: 'p5와 프로세싱 간의 주요 차이점, 그리고 변환 방법을 알아보세요.' p5-screen-reader-title: p5와 스크린 리더 p5-screen-reader: 스크린 리더를 위한 p5 설정 방법을 알아보세요. - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -314,69 +314,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -384,109 +384,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server-title: 로컬 서버 사용하기 using-local-server: '맥 OSX, 윈도우, 리눅스 상에서 로컬 서버 설정하기' p5js-wiki-title: p5.js 위키 diff --git a/src/data/learn/learn.json b/src/data/learn/learn.json index e9c9886165..38423629ee 100644 --- a/src/data/learn/learn.json +++ b/src/data/learn/learn.json @@ -25,8 +25,8 @@ "url": "p5-screen-reader.html" }, { - "name": "labeling-canvases", - "url": "labeling-canvases.html" + "name": "accessible-labels", + "url": "accessible-labels.html" } ], "connecting-p5js-title": [ diff --git a/src/data/zh-Hans.yml b/src/data/zh-Hans.yml index 38d03a7ae0..9607e43d66 100644 --- a/src/data/zh-Hans.yml +++ b/src/data/zh-Hans.yml @@ -277,17 +277,17 @@ learn: p5js-processing: 两者之间的差别及如何将两者之间互相转换。 p5-screen-reader-title: p5 及荧幕阅读器 p5-screen-reader: 设置 p5 以让它可以和荧幕阅读器一起使用。（英文内文） - labeling-canvases-title: How to label your p5.js code - labeling-canvases: Using labels to make your code accessible to screen readers. - labeling-canvases-intro: Introduction - labeling-canvases-intro-1: >- + accessible-labels-title: Writing accessible canvas descriptions + accessible-labels: Using labels to make your code accessible to screen readers. + accessible-labels-intro: Introduction + accessible-labels-intro-1: >- In this tutorial, you'll learn how to use describe() , describeElement(), gridOutput(), and textOutput(). These functions add labels to your canvas so that it’s readable for screen readers and other assistive technologies. - labeling-canvases-what-is-labeling: What is labeling? - labeling-canvases-what-is-labeling-1: >- + accessible-labels-what-is-labeling: What is labeling? + accessible-labels-what-is-labeling-1: >- When you use the createCanvas() function, you create a canvas HTML element. This canvas element displays the image generated by your code as a bitmap (a raster graphic made up of pixels). Unlike most HTML elements, the canvas doesn’t provide any description about its contents to screen readers. @@ -296,69 +296,69 @@ learn: gridOutput(), and textOutput() functions. These functions add labels to your canvas that tell the screen reader how to describe it. - labeling-canvases-why-labeling-matters: Why labeling matters - labeling-canvases-why-labeling-matters-1: >- - Screen readers (and text-to-speech softwares) are helpful for lots of people, + accessible-labels-why-labeling-matters: Why labeling matters + accessible-labels-why-labeling-matters-1: >- + Screen readers (and text-to-speech software) are helpful for lots of people, regardless of ability or context. For example, a visually impaired person searching the web might use a screen reader to understand the contents of a site. If a site’s code isn’t properly labeled for assistive technologies, the screen reader software won’t be able to communicate what’s on the site to its user. Someone else might be using a text-to-speech software because they have dyslexia and find listening to the site’s - content more comprehensible than reading it. There are also people who use these assistive softwares + content more comprehensible than reading it. There are also people who use these assistive software to multi-task, so they can listen to an article on the web and wash dishes, or complete other chores. - labeling-canvases-why-labeling-matters-2: >- - No matter the purpose or person, making sure your code is readable by these assistive softwares allows + accessible-labels-why-labeling-matters-2: >- + No matter the purpose or person, making sure your code is readable by these assistive software allows more people to engage with your work in meaningful ways. - labeling-canvases-available-labels: Available labeling functions - labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas - labeling-canvases-available-labels-li-1: >- + accessible-labels-available-labels: Available labeling functions + accessible-labels-available-labels-1: p5.js offers four different functions for labeling your canvas + accessible-labels-available-labels-li-1: >- describe() provides a description of the canvas contents. This function's parameters include: text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-2: >- + accessible-labels-available-labels-li-2: >- describeElement() describes a specific element or a specific grouping of elements in a canvas. This function's parameters include: name, the title for the label; text, the label itself; and display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-3: >- + accessible-labels-available-labels-li-3: >- textOutput() generates a list describing the canvas size, color, as well as each visual element’s color, position, and the amount of area it covers within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-available-labels-li-4: >- + accessible-labels-available-labels-li-4: >- gridOutput(), like textOutput(), generates a list of the canvas' qualities and its elements. Along with this list, this function also creates an HTML table that plots the spatial location of each shape within the canvas. This function's only parameter is display, an optional parameter to set the visibility of the label. - labeling-canvases-prerequisites: Prerequisites - labeling-canvases-prerequisites-1: >- + accessible-labels-prerequisites: Prerequisites + accessible-labels-prerequisites-1: >- Your project's code should be near completion before you begin labeling. To write clear and effective labels, you should have a clear understanding about what visuals your code creates within the canvas element. - labeling-canvases-prerequisites-2: >- + accessible-labels-prerequisites-2: >- For example, if you started writing your labels before you had a clear understanding of the resulting visual of your canvas, your labels and your visuals may communicate different messages, like the code example below: - labeling-canvases-steps-for-labeling: Steps for labeling your p5.js code - labeling-canvases-steps-for-labeling-step-1: 1. Plan your labeling strategy - labeling-canvases-steps-for-labeling-step-1-1: >- + accessible-labels-steps-for-labeling: Steps for labeling your p5.js code + accessible-labels-steps-for-labeling-step-1: 1. Plan your labeling strategy + accessible-labels-steps-for-labeling-step-1-1: >- Your labeling strategy will change based on your project's complexity and purpose. - labeling-canvases-steps-for-labeling-step-1-2: >- + accessible-labels-steps-for-labeling-step-1-2: >- No matter how complicated your project may be, always provide a brief description of your canvas in setup() using the describe() function. If you do not provide any labels in your code, screen readers will describe your canvas as a blank HTML element. - labeling-canvases-steps-for-labeling-step-1-3: >- + accessible-labels-steps-for-labeling-step-1-3: >- Place this label in the setup() section of your code, - and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about + and provide a 1-3 sentence description of your canvas in its text parameter. This description should only provide details about the visual elements of your canvas. - labeling-canvases-steps-for-labeling-step-1-4: >- + accessible-labels-steps-for-labeling-step-1-4: >- You do not need to begin your description with "A p5 canvas element..." or anything similar, since the screen reader will declare the element type before reading your label. - labeling-canvases-steps-for-labeling-step-1-5: >- + accessible-labels-steps-for-labeling-step-1-5: >- Along with the describe() label, use either the describeElement(), textOutput(), or gridOutput() function to add more detailed labels within your code. - labeling-canvases-steps-for-labeling-step-1-6: >- + accessible-labels-steps-for-labeling-step-1-6: >- The textOutput() and gridOutput() functions can describe what shapes are on your canvas, but they can’t interpret your intention in using the shapes. Keep context in mind when choosing @@ -366,109 +366,111 @@ learn: petals and a green stem”? What kind of labeling will provide the best description of your canvas? If you are creating larger visuals with many shapes, use describeElement() to label each group of shapes. - labeling-canvases-steps-for-labeling-step-1-7: >- + accessible-labels-steps-for-labeling-step-1-7: >- Do not use both the textOutput() and gridOutput() functions to describe the same canvas. Using both will - cause similar descriptions to appear twice, which is confusing the screen readers. The same goes for + cause similar descriptions to appear twice, which confuses the screen readers. The same goes for using textOutput() or gridOutput() with describeElement() labels. It’s best to choose one function to supplement your describe() label. - labeling-canvases-steps-for-labeling-step-1-complex: Complex projects - labeling-canvases-steps-for-labeling-step-1-complex-1: >- + accessible-labels-steps-for-labeling-step-1-complex: Complex projects + accessible-labels-steps-for-labeling-step-1-complex-1: >- Use vanilla ARIA labeling and custom-built fallback labels instead of p5's labeling functions if your canvas: - labeling-canvases-steps-for-labeling-step-1-complex-li-1: >- + accessible-labels-steps-for-labeling-step-1-complex-li-1: >- Has content that changes extensively via external interactive elements (elements outside the canvas) - labeling-canvases-steps-for-labeling-step-1-complex-li-2: >- + accessible-labels-steps-for-labeling-step-1-complex-li-2: >- Interacts with DOM elements written outside of the canvas code - labeling-canvases-steps-for-labeling-step-1-complex-li-3: >- + accessible-labels-steps-for-labeling-step-1-complex-li-3: >- Requires the user’s attention if the canvas' visual content changes - labeling-canvases-steps-for-labeling-step-1-complex-li-4: >- + accessible-labels-steps-for-labeling-step-1-complex-li-4: >- Has complex element layouts that cannot be accurately labeled with the describe(), describeElement(), textOutput(), or gridOutput() functions - labeling-canvases-steps-for-labeling-step-1-complex-2: >- - For more information about fallback content, visit W3C’s Wiki. - For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties - and W3C's Using ARIA. - labeling-canvases-steps-for-labeling-step-2: 2. Write your main and supporting label(s) - labeling-canvases-steps-for-labeling-step-2-1: >- + accessible-labels-steps-for-labeling-step-1-complex-2: >- + For more information about fallback content, visit W3C’s Wiki. + For more information about complex ARIA labeling, visit Mozilla’s ARIA states and properties + and W3C's Using ARIA. + accessible-labels-steps-for-labeling-step-2: 2. Write your main and supporting label(s) + accessible-labels-steps-for-labeling-step-2-1: >- Begin labeling your canvas using the function(s) that best serve your users. - labeling-canvases-steps-for-labeling-step-2-2: >- + accessible-labels-steps-for-labeling-step-2-2: >- While labeling, only provide descriptions of the visual aspects of your canvas. You don’t need to describe how or what functions create the visuals present on the canvas, only how the end result visuals appear within the canvas. - labeling-canvases-steps-for-labeling-step-2-using-de: Using describeElement() - labeling-canvases-steps-for-labeling-step-2-using-de-1: >- + accessible-labels-steps-for-labeling-step-2-using-de: Using describeElement() + accessible-labels-steps-for-labeling-step-2-using-de-1: >- When using the describeElement() function to label your code, provide a unique title and a description no more than 1-2 sentences long. Only label the parts of your code that depict the most important visual aspects of your canvas. - labeling-canvases-steps-for-labeling-step-2-using-de-2: >- + accessible-labels-steps-for-labeling-step-2-using-de-2: >- Within each describeElement() label, discuss the important qualities of that element. Is the element animated? Is the element interactive? What meaning does the element provide to the project? - labeling-canvases-steps-for-labeling-step-2-using-de-3: >- + accessible-labels-steps-for-labeling-step-2-using-de-3: >- If your canvas contains any text() elements that are important to the general understanding of the image, make a separate label for them. Label any legible text with quotation marks around it in the label, as in describeElement("Text", "The words 'hello, world' displayed in green at the center of a black canvas."). - labeling-canvases-steps-for-labeling-step-2-using-de-4: >- + accessible-labels-steps-for-labeling-step-2-using-de-4: >- You don’t need to start each label with “A p5 canvas…” or something similar. The screen reader will call out the element type before reading your labels: - labeling-canvases-steps-for-labeling-step-2-using-de-5: >- + accessible-labels-steps-for-labeling-step-2-using-de-5: >- Limit the number of describeElement() functions present within your code as much as possible. If you have to use more than 10 describeElement() functions to describe your canvas, consider using a labeling strategy that affords more complexity (such as vanilla ARIA labeling). - labeling-canvases-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() - labeling-canvases-steps-for-labeling-step-2-using-go-to-1: >- + accessible-labels-steps-for-labeling-step-2-using-go-to: Using gridOutput() or textOutput() + accessible-labels-steps-for-labeling-step-2-using-go-to-1: >- gridOutput() and textOutput() generate their information based on the code of the visual element, such as its size, color, and shape. Unlike describeElement(), you only need to use one label to describe all your canvas' visual elements. - labeling-canvases-steps-for-labeling-step-2-animated: Projects with animated or interactive elements - labeling-canvases-steps-for-labeling-step-2-animated-1: >- + accessible-labels-steps-for-labeling-step-2-animated: Projects with animated or interactive elements + accessible-labels-steps-for-labeling-step-2-animated-1: >- Individual interactive elements, such as HTML buttons, dropdowns, or inputs, don’t need labels. These elements are built outside of the p5.js canvas and are interpreted by screen readers. However, this means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - labeling-canvases-steps-for-labeling-step-2-animated-2: >- + accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. So long as you place the functions within the draw() function, they will automatically update with the shape’s new information. If you are using describeElement(), use template strings to update the element’s description: - labeling-canvases-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts - labeling-canvases-steps-for-labeling-step-2-do-donts-1: >- + accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts + accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas. If you overuse screen reader labels, you may end up complicating the screen reader’s interpretation of the canvas rather than helping it. - labeling-canvases-steps-for-labeling-step-2-do-donts-2: >- + accessible-labels-steps-for-labeling-step-2-do-donts-2: >- Do make your label descriptions short and accurate. Use full sentences for your labels, and write in the present tense when describing elements. - labeling-canvases-steps-for-labeling-step-3: 3. Test your labels - labeling-canvases-steps-for-labeling-step-3-1: >- + accessible-labels-steps-for-labeling-step-3: 3. Test your labels + accessible-labels-steps-for-labeling-step-3-1: >- Be sure to test your labels before publishing your sketch. Labels are only available to screen readers by default.To see the output during development, pass LABEL as the last argument to the function. - labeling-canvases-steps-for-labeling-step-3-2: >- - When testing your labels, consider the following questions: Do your canvas labels provide enough - information for someone to understand the sketch’s purpose? If this canvas exists on a web page among - other content, would someone have a good understanding of how the canvas relates to its surrounding - context? - labeling-canvases-steps-for-labeling-step-3-3: >- + accessible-labels-steps-for-labeling-step-3-2: >- + When testing your labels, consider the following questions: + accessible-labels-steps-for-labeling-step-3-2-li-1: >- + Do your canvas labels provide enough information for someone to understand the sketch’s purpose? + accessible-labels-steps-for-labeling-step-3-2-li-2: >- + If this canvas exists on a web page among other content, would someone have a good understanding of how the canvas relates to its + surrounding context? + accessible-labels-steps-for-labeling-step-3-3: >- Be sure to remove the LABEL argument once you’ve tested the output. With LABEL active, screen readers are forced to read the fallback text and the visible label text when focused on the canvas. This is confusing for them. - labeling-canvases-steps-for-labeling-step-3-4: >- + accessible-labels-steps-for-labeling-step-3-4: >- You may also download a screen reader and use it to test your code. For more information about using - screen readers, visit W3 School’s Accessibility Screen Readers. - labeling-canvases-conclusion: Conclusion - labeling-canvases-conclusion-1: >- + screen readers, visit W3 School’s Accessibility Screen Readers. + accessible-labels-conclusion: Conclusion + accessible-labels-conclusion-1: >- Once you've tested your labels, your canvas should be accessible to screen reader technology! - labeling-canvases-conclusion-2: >- - If you would like more information about ARIA labeling, visit MDN’s ARIA. - labeling-canvases-conclusion-3: >- + accessible-labels-conclusion-2: >- + If you would like more information about ARIA labeling, visit MDN’s ARIA. + accessible-labels-conclusion-3: >- Notice any errors or typos? Please let us know. If you would like to contribute to this tutorial, - feel free to issue a pull request! + feel free to issue a pull request! using-local-server-title: 本地伺服器 using-local-server: 如何在 Mac OSX、Windows 或 Linux 上设置本地伺服器。 p5js-wiki-title: p5.js wiki diff --git a/src/templates/pages/learn/accessible-labels.hbs b/src/templates/pages/learn/accessible-labels.hbs new file mode 100644 index 0000000000..8b21b41314 --- /dev/null +++ b/src/templates/pages/learn/accessible-labels.hbs @@ -0,0 +1,207 @@ +--- +title: learn +slug: learn/ +--- + +
    + + {{> sidebar}} + +
    + +
    + +

    {{#i18n "accessible-labels-title"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-intro"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-intro-1"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-what-is-labeling"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-what-is-labeling-1"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-why-labeling-matters"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-why-labeling-matters-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-why-labeling-matters-2"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-available-labels"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-available-labels-1"}}{{/i18n}}:

    +
      +
    • {{#i18n "accessible-labels-available-labels-li-1"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-available-labels-li-2"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-available-labels-li-3"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-available-labels-li-4"}}{{/i18n}}
      • +
    + +

    {{#i18n "accessible-labels-prerequisites"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-prerequisites-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-prerequisites-2"}}{{/i18n}}

    + + + +

    {{#i18n "accessible-labels-steps-for-labeling"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-steps-for-labeling-step-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-2"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-3"}}{{/i18n}}

    + + + +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-4"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-5"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-6"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-7"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-complex"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-1"}}{{/i18n}}

    +
      +
    • {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-1"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-2"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-3"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-4"}}{{/i18n}}
      • +
    +

    {{#i18n "accessible-labels-steps-for-labeling-step-1-complex-2"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-steps-for-labeling-step-2"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-2"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-2"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-3"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-4"}}{{/i18n}}

    + + + +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-5"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-go-to"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-using-go-to-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-animated"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-animated-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-animated-2"}}{{/i18n}}

    + + + +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts-2"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-steps-for-labeling-step-3"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-3-1"}}{{/i18n}}

    + + + +

    {{#i18n "accessible-labels-steps-for-labeling-step-3-2"}}{{/i18n}}

    +
      +
    • {{#i18n "accessible-labels-steps-for-labeling-step-3-2-li-1"}}{{/i18n}}
      • +
    • {{#i18n "accessible-labels-steps-for-labeling-step-3-2-li-2"}}{{/i18n}}
      • +
    +

    {{#i18n "accessible-labels-steps-for-labeling-step-3-3"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-steps-for-labeling-step-3-4"}}{{/i18n}}

    + +

    {{#i18n "accessible-labels-conclusion"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-conclusion-1"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-conclusion-2"}}{{/i18n}}

    +

    {{#i18n "accessible-labels-conclusion-3"}}{{/i18n}}

    + + + + +
    + + {{> footer}} + +
    + + {{> asterisk}} + +
    \ No newline at end of file diff --git a/src/templates/pages/learn/labeling-canvases.hbs b/src/templates/pages/learn/labeling-canvases.hbs deleted file mode 100644 index 73962bcf36..0000000000 --- a/src/templates/pages/learn/labeling-canvases.hbs +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: learn -slug: learn/ ---- - -
    - - {{> sidebar}} - -
    - -
    - -

    {{#i18n "labeling-canvases-title"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-intro"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-intro-1"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-what-is-labeling"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-what-is-labeling-1"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-why-labeling-matters"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-why-labeling-matters-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-why-labeling-matters-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-available-labels"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-available-labels-1"}}{{/i18n}}:

    -
      -
    • {{#i18n "labeling-canvases-available-labels-li-1"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-available-labels-li-2"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-available-labels-li-3"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-available-labels-li-4"}}{{/i18n}}
      • -
    - -

    {{#i18n "labeling-canvases-prerequisites"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-prerequisites-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-prerequisites-2"}}{{/i18n}}

    - - - -

    {{#i18n "labeling-canvases-steps-for-labeling"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-3"}}{{/i18n}}

    - - - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-4"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-5"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-6"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-7"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-1"}}{{/i18n}}

    -
      -
    • {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-li-1"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-li-2"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-li-3"}}{{/i18n}}
      • -
    • {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-li-4"}}{{/i18n}}
      • -
    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-1-complex-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-3"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-4"}}{{/i18n}}

    - - - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-de-5"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-go-to"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-using-go-to-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-animated-2"}}{{/i18n}}

    - - - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-2-do-donts-2"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-3"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-1"}}{{/i18n}}

    - - - -

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-3"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-steps-for-labeling-step-3-4"}}{{/i18n}}

    - -

    {{#i18n "labeling-canvases-conclusion"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-conclusion-1"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-conclusion-2"}}{{/i18n}}

    -

    {{#i18n "labeling-canvases-conclusion-3"}}{{/i18n}}

    - - - - -
    - - {{> footer}} - -
    - - {{> asterisk}} - -
    \ No newline at end of file From 9cbded3e097f8df5273ddd64f204ea3f2801174d Mon Sep 17 00:00:00 2001 From: Kattt Date: Sat, 25 Nov 2023 15:24:49 -0700 Subject: [PATCH 3/6] update, concatenation --- src/templates/pages/learn/accessible-labels.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/pages/learn/accessible-labels.hbs b/src/templates/pages/learn/accessible-labels.hbs index 8b21b41314..06033aec70 100644 --- a/src/templates/pages/learn/accessible-labels.hbs +++ b/src/templates/pages/learn/accessible-labels.hbs @@ -149,7 +149,7 @@ function draw() { ellipse(x, 50, 40, 40); x = x + 0.1; // Label updates with shape’s translation. - describe("A green circle at x position " + round(x) + ", moving to the right", LABEL); + describe(`A green circle at x position ${round(x)}, moving to the right`, LABEL); } From e37c210dfca15f52e1aac02371706689914441cf Mon Sep 17 00:00:00 2001 From: Kattt Date: Sat, 25 Nov 2023 15:30:28 -0700 Subject: [PATCH 4/6] code revisions --- src/templates/pages/learn/accessible-labels.hbs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/templates/pages/learn/accessible-labels.hbs b/src/templates/pages/learn/accessible-labels.hbs index 06033aec70..79a5059a04 100644 --- a/src/templates/pages/learn/accessible-labels.hbs +++ b/src/templates/pages/learn/accessible-labels.hbs @@ -39,7 +39,7 @@ slug: learn/ @@ -194,7 +194,7 @@ function draw() {

    {{#i18n "accessible-labels-conclusion-3"}}{{/i18n}}

    - + From be4e706779c199d91d1f570503c8403c7069c5e9 Mon Sep 17 00:00:00 2001 From: Kattt Date: Sun, 10 Dec 2023 14:48:22 -0700 Subject: [PATCH 5/6] Final edits (updating Steps for Labeling) --- src/data/en.yml | 8 +++++--- src/data/es.yml | 10 ++++++---- src/data/hi.yml | 10 ++++++---- src/data/it.yml | 10 ++++++---- src/data/ko.yml | 10 ++++++---- src/data/zh-Hans.yml | 10 ++++++---- src/templates/pages/learn/accessible-labels.hbs | 2 +- 7 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/data/en.yml b/src/data/en.yml index be8254a00c..86ea97ee3f 100644 --- a/src/data/en.yml +++ b/src/data/en.yml @@ -508,9 +508,11 @@ learn: inputs. accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/data/es.yml b/src/data/es.yml index 17b3f96253..76009fa70e 100644 --- a/src/data/es.yml +++ b/src/data/es.yml @@ -518,11 +518,13 @@ learn: means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - accessible-labels-steps-for-labeling-step-2-animated-2: >- +accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/data/hi.yml b/src/data/hi.yml index bfa8d9e6ec..9d6b8e4438 100644 --- a/src/data/hi.yml +++ b/src/data/hi.yml @@ -506,11 +506,13 @@ learn: means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - accessible-labels-steps-for-labeling-step-2-animated-2: >- +accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/data/it.yml b/src/data/it.yml index 7d7fd9bc2c..571dd9f3c7 100644 --- a/src/data/it.yml +++ b/src/data/it.yml @@ -519,11 +519,13 @@ learn: means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - accessible-labels-steps-for-labeling-step-2-animated-2: >- +accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/data/ko.yml b/src/data/ko.yml index d2590d0400..1054923356 100644 --- a/src/data/ko.yml +++ b/src/data/ko.yml @@ -450,11 +450,13 @@ learn: means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - accessible-labels-steps-for-labeling-step-2-animated-2: >- +accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/data/zh-Hans.yml b/src/data/zh-Hans.yml index 9607e43d66..75d445bc33 100644 --- a/src/data/zh-Hans.yml +++ b/src/data/zh-Hans.yml @@ -432,11 +432,13 @@ learn: means the gridOutput() and textOutput() functions won’t provide any information about these interactive inputs. - accessible-labels-steps-for-labeling-step-2-animated-2: >- +accessible-labels-steps-for-labeling-step-2-animated-2: >- If a canvas element is animated and/or interactive, represent its current state or qualities in the label. - So long as you place the functions within the draw() function, they will automatically update with the - shape’s new information. If you are using describeElement(), use template strings to update the element’s - description: + So long as you place the functions within the draw() function, + they will automatically update with the shape’s new information (except for textOutput() + and gridOutput(), + which will update even when listed in setup()). If you are using + describeElement(), use template strings to update the element’s description: accessible-labels-steps-for-labeling-step-2-do-donts: Labeling do’s and don’ts accessible-labels-steps-for-labeling-step-2-do-donts-1: >- Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the diff --git a/src/templates/pages/learn/accessible-labels.hbs b/src/templates/pages/learn/accessible-labels.hbs index 79a5059a04..4d7714628b 100644 --- a/src/templates/pages/learn/accessible-labels.hbs +++ b/src/templates/pages/learn/accessible-labels.hbs @@ -102,7 +102,7 @@ function draw() {