Difference between revisions of "Canvas Element"

From Level Access Web Labs
Jump to navigation Jump to search
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<canvas id="myCanvas">
+
<p>Canvas with fallback and no author supplied accessible name and no explicit role.</p>
  <p>There is a green box on the screen.</p>
+
<canvas id="myCanvas2">
 +
  <p>There is more fallback text.</p>
 
</canvas>
 
</canvas>
  
<canvas id="myCanvas2">
+
<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>
 
</canvas>
  
<canvas id="myCanvas3" role="img" aria-label="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>
 
</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');
Line 23: Line 34:
 
ctx.fillStyle='#00FF00';
 
ctx.fillStyle='#00FF00';
 
ctx.fillRect(0,0,90,90);
 
ctx.fillRect(0,0,90,90);
 +
}
 
</script>
 
</script>
 
</html>
 
</html>
  
 
==Test results for canvus-==
 
==Test results for canvus-==
All screen readers and browsers tested announced that there is a green box on the screen.  this is the text that is in the paragraph inside of the 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.
 
[[Category:HTML5]]
 
[[Category:HTML5]]
 
[[Category:Elements]]
 
[[Category:Elements]]

Revision as of 03:30, 9 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.