Difference between revisions of "Canvas Element"

From Level Access Web Labs
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
--
+
<p>Canvas with fallback and no author supplied accessible name and no explicit role.</p>
<canvas id="myCanvas">
+
<canvas id="myCanvas2">
  <p>There is a green box on the screen.</p>
+
  <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="aria label canvas">
+
<p>Canvas with fallback and a role of img.</p>
<p> this is fallback text </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 26: 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 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.