HTML Accessibility (original) (raw)
< Back to Demos | Learn more at PaulJAdam.com >
Simple Text Alternative
Overview
Canvas elements render as pixels on the screen that do not scale like SVG. JavaScript is used to dynamically draw on the canvas at runtime which allows creation of dynamic images like charts and graphs. Canvas is often used for HTML5 desktop and mobile game development.
The canvas element has support in all browsers and will render on screen but the canvas content will not be accessible to screen readers. With canvas the accessibility has to be added with JavaScript or ARIA on the canvas element itself or using internal fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM except for the fallback content.
SVG is a better choice for interactive content and custom controls than Canvas because SVG has internal accessibility semantics and ability to easily add interactivity with JavaScript.
Canvas should not be used to generate text because it renders as an image of text that pixellates when enlarged and cannot be customized by the user like CSS text.
Canvas element must have an accessible name and description that matches the visible text and content inside the canvas drawing area.
Canvas elements that are used as mouse and keyboard operable custom UI controls must have an accessibility role, i.e. role=button for custom canvas buttons.
Canvas References:
Canvas elements MUST have a text alternative
The canvas element that renders on screen is not accessible to screen readers because the content is not in the DOM and has no accessibility semantics. Either internal fallback content or ARIA semantics must be used to create an text alternative accessible to screen readers.
ARIA as alt text
Using ARIA role=img and aria-label="alt text" on the element or the internal fallback content creates an element available to the screen reader via Image quick navigation commands with the image role spoken based on role=img.
Fallback content as alt text
Internal fallback content between the opening and closing canvas tags, e.g. Fallback Content Static Text, does not have an image role unless ARIA is applied and the focusable area is not the full canvas rectangle, the touch target area and screen reader focus outline only surrounds fallback content text. By placing role=img and an aria-label value directly on the tag the touch target and screen reader focus area correctly surrounds the enter canvas element.
If fallback content is used then it must also be accessible and not simply tell the user that their browser does not support canvas.
Good example: Canvas element with accessible name and role via ARIA
<canvas id="goodCanvas1" width="400" height="100" **aria-label="Hello ARIA World" role="img"**>
OK example: Canvas element with text alternative via fallback content
Hello Fallback World
Hello Fallback World
Bad example: Canvas element without accessible name or role
Bad example: Canvas element with inaccessible fallback content
Your browser does not support the canvas element.
Your browser does not support the canvas element.
Complex Text Alternatives
Overview
Complex canvas elements like bar graphs and pie charts require a full text alternative of all the text and data presented in the complex image. ARIA role=img sets the canvas as an image for the screen reader and an accessible name can be created with an aria-label string value or an aria-labelledby ID reference to other strings in the DOM. The image can also have an accessible description via aria-describedby ID reference to text in the DOM.
Text alternatives for complex image data can also be presented as an accessible data table.
Canvas elements used as complex images MUST have a text alternative
The canvas element used in the demo is from the Safari HTML5 Canvas Guide.
Fallback content as alt text
If you place a data table inside the canvas tag as fallback content the screen reader user will hear it all as a single string of text and will not be able to navigate the cells and hear row and column headers spoken or a table caption. The fallback text can direct the user to the data table below as the text alternative for the canvas graphic.