aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/canvas_api
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-15 13:42:10 -0400
committerGitHub <noreply@github.com>2021-07-15 13:42:10 -0400
commit4f0e1ec1c2772904c033f747dc38a08223e8d661 (patch)
tree6212d976fd9f708d4f13e7d472bd765341661c1b /files/es/web/api/canvas_api
parentd79f316e1c617b165487da0198765d992cce2fff (diff)
downloadtranslated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.gz
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.bz2
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.zip
delete pages that were never translated from en-US (es, part 2) (#1550)
Diffstat (limited to 'files/es/web/api/canvas_api')
-rw-r--r--files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html100
1 files changed, 0 insertions, 100 deletions
diff --git a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
deleted file mode 100644
index 1f2a93dbae..0000000000
--- a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Hit regions and accessibility
-slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
-translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
-original_slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility
----
-<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
-
-<div class="summary">The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.</div>
-
-<div class="summary">El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.</div>
-
-<h2 id="Fallback_content">Fallback content</h2>
-
-<p>The content inside the <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demonstrates how this can be done:</p>
-
-<pre class="brush: html">&lt;canvas&gt;
- &lt;h2&gt;Shapes&lt;/h2&gt;
- &lt;p&gt;A rectangle with a black border.
- In the background is a pink circle.
- Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
- Partially overlaying the circle is a green
- &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
- and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
- both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
-&lt;/canvas&gt; </pre>
-
-<p>See the <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video how NVDA reads this example by Steve Faulkner</a>.</p>
-
-<h2 id="ARIA_rules">ARIA rules</h2>
-
-<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA techniques</a> for more information.</p>
-
-<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
-</pre>
-
-<h2 id="Hit_regions">Hit regions</h2>
-
-<p>Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Adds a hit region to the canvas.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
- <dd>Removes all hit regions from the canvas.</dd>
-</dl>
-
-<p>You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.</p>
-
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;script&gt;
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    alert('hit region: ' + event.region);
-  }
-});
-&lt;/script&gt;</pre>
-
-<p>The <code>addHitRegion()</code> method also takes a <code>control</code> option to route events to an element (that is a descendant of the canvas):</p>
-
-<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
-
-<p>This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen demo</a>.</p>
-
-<h2 id="Focus_rings">Focus rings</h2>
-
-<p>When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the <code>drawFocusIfNeeded</code> property can be used.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
- <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
-</dl>
-
-<p>Additionally, the <code>scrollPathIntoView()</code> method can be used to make an element visible on the screen if focused, for example.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
- <dd>Scrolls the current path or a given path into the view.</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
- <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
- <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
- <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
-</ul>
-
-<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>