Difference between revisions of "Canvas Element"

From Level Access Web Labs
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.

There is more fallback text.

Canvas with fallback and an author supplied accessible name via aria-label.

This is fallback text

Canvas with fallback and a role of img.

There is a green box on the screen.

--

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.