Difference between revisions of "Canvas Element"
Jump to navigation
Jump to search
(Created page with "<html> <canvas id="myCanvas"></canvas> <script> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#00FF00'; ctx.fillRect(0,0,90,...") |
|||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <canvas id="myCanvas"></canvas> | + | <p>Canvas with fallback and no author supplied accessible name and no explicit role.</p> |
| + | <canvas id="myCanvas2"> | ||
| + | <p>There is more fallback text.</p> | ||
| + | </canvas> | ||
| + | |||
| + | <p>Canvas with fallback and an author supplied accessible name via aria-label.</p> | ||
| + | <canvas id="myCanvas3" role="img" aria-label="aria label canvas"> | ||
| + | <p>This is fallback text </p> | ||
| + | </canvas> | ||
| + | |||
| + | <p>Canvas with fallback and a role of img.</p> | ||
| + | <canvas role="img" id="myCanvas"> | ||
| + | <p>There is a green box on the screen.</p> | ||
| + | </canvas> | ||
| + | -- | ||
<script> | <script> | ||
| + | window.addEventListener('DOMContentLoaded', (event) => { | ||
| + | setup(); | ||
| + | }); | ||
| + | |||
| + | function setup() { | ||
var canvas=document.getElementById('myCanvas'); | var canvas=document.getElementById('myCanvas'); | ||
var ctx=canvas.getContext('2d'); | var ctx=canvas.getContext('2d'); | ||
ctx.fillStyle='#00FF00'; | ctx.fillStyle='#00FF00'; | ||
ctx.fillRect(0,0,90,90); | ctx.fillRect(0,0,90,90); | ||
| + | var canvas=document.getElementById('myCanvas2'); | ||
| + | var ctx=canvas.getContext('2d'); | ||
| + | ctx.fillStyle='#00FF00'; | ||
| + | ctx.fillRect(0,0,90,90); | ||
| + | var canvas=document.getElementById('myCanvas3'); | ||
| + | var ctx=canvas.getContext('2d'); | ||
| + | ctx.fillStyle='#00FF00'; | ||
| + | ctx.fillRect(0,0,90,90); | ||
| + | } | ||
</script> | </script> | ||
</html> | </html> | ||
| + | |||
| + | ==Test results for canvus-== | ||
| + | All screen readers and browsers tested announced the text that is in the paragraph inside of the canvas unless the accessible name is set by the author by the aria-label, aria-labelledby, or title attribute or unless there is a role img of img in which case the fallback text is not announced. | ||
[[Category:HTML5]] | [[Category:HTML5]] | ||
[[Category:Elements]] | [[Category:Elements]] | ||
Latest revision as of 16:53, 22 November 2021
Canvas with fallback and no author supplied accessible name and no explicit role.
Canvas with fallback and an author supplied accessible name via aria-label.
Canvas with fallback and a role of img.
--
Test results for canvus-
All screen readers and browsers tested announced the text that is in the paragraph inside of the canvas unless the accessible name is set by the author by the aria-label, aria-labelledby, or title attribute or unless there is a role img of img in which case the fallback text is not announced.
