Frequently Asked Questions - Web Accessibility

• Do we need to submit a request each time we make a change to our applications?

  Yes, an accessibility audit is required when the user interface has been changed.

• What are current and future accessibility standards?

  Current standards

  • WCAG 2.1 (A and AA) supported by
  • Guideline on Making Information Technology Usable by All
  • Standard on Web Accessibility (currently being refreshed)
  • The European Standard for Digital Accessibility (EU EN 301 549 v2.1.2)

  Future standards

  • WCAG 2.2 (A and AA) (Probably in the (2023-24) fiscal year)
  • Will be supported by the latest update to the Standard on Web Accessibility or one of the upcoming digital accessibility policies.
  • WCAG 3.0 (silver rating)(estimated towards 2025)

    Unknown yet how this will be supported but most likely through an updated TBS policy instrument. WCAG 3.0 will be a complete shift of how conformance testing is performed.

• How to validate internal web pages against the Nu Html Checker?

  To validate an internal page, one can use the “Check serialized DOM for the current page” bookmarklet and the “WCAG Parsing” Bookmarklet to filter the result. To try out the bookmarklets, please follow the steps below:

  1. Save the Check serialized DOM of current page
  2. Save the WCAG parsing only as a bookmark.
  3. Check a page (test page) using the Check serialized DOM of current page bookmarklet)
  4. Once the results page is displayed activate the Parsing bookmarklet
  5. The results will be filtered to provide a rough subset of the validation results that represent WCAG 2.x 4.1.1 Parsing fails.

  Check serialized DOM for the current bookmarklet code

  JavaScript

  Code begins

  javascript:(function(){function%20c(a,b){var%20c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var%20e=function(a){for(var%20b="",a=a.firstChild;a;){switch(a.nodeType){case%20Node.ELEMENT_NODE:b+=a.outerHTML;break;case%20Node.TEXT_NODE:b+=a.nodeValue;break;case%20Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case%20Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case%20Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE%20"+a.name+">\n"}a=a.nextSibling}return%20b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("showoutline","yes");c("content",e);document.body.appendChild(d);d.submit()})();

  Code ends

  Source: WCAG 2.1 Parsing Error Bookmarklet

  “WCAG Parsing” Bookmarklet

  JavaScript

  Code begins

  javascript:(function(){var removeNg=true;var filterStrings=["tag seen","Stray end tag","Bad start tag","violates nesting","Duplicate ID","first occurrence of ID","Unclosed element","not allowed as child of","unclosed elements","not allowed on element","unquoted attribute value","Duplicate attribute","tabindex must not", "not appear as a descendant of"];var filterRE,root,results,result,resultText,i,cnt=0;filterRE=filterStrings.join("|");root=document.getElementById("results");if(!root){alert("No results container found.");return}results=root.getElementsByTagName("li");for(i=0;i<results.length;i++){result=results[i];if(result.className!==""){resultText=(result.innerText!==undefined?result.innerText:result.textContent)+"";if(resultText.match(filterRE)===null){result.style.display="none";result.className=result.className+" steveNoLike";cnt++}else if(removeNg==true){if(resultText.indexOf("not allowed on element")!==-1&&(resultText.indexOf("ng-")!==-1&&resultText.indexOf("ng-")<resultText.indexOf("not allowed on element"))){result.style.display="none";result.className=result.className+" steveNoLike";cnt++}}}}alert("Complete. "+cnt+" items removed.")})();

  Code ends

• How to code email addresses?

  Generally, it is recommended to provide the full email address as link text. For example: "Please contact the IT Accessibility Office for more information: edsc.ti-it.a11y.esdc@hrsdc-rhdcc.gc.ca"

  Please write the email address in lower case as recommended by the Canada.ca Content Style Guide.

• Approved browser based plugins

  • Approved plugins Internal link
• How do you make a word cloud accessible?

  A word cloud is a complex image and as such, a long description should be provided below it. Please note that the alternative text should include “Long description below”. Here are some examples:

  • Designing accessible images
  • Accessible Text Alternative for Wolds Word Cloud
• Accessibility guideline for dashboards

  Power BI is the platform that most people use at ESDC. At the IT Accessibility Office, we usually recommend HTML as it is the most accessible format.

  Please find below guidance on how to create accessible dashboards:

  1. Ensure color contrast between title, axis label, and data label text and the background are at least 4.5:1.
  2. Ensure color contrast between active user interface components and graphical objects such as icons and graphs have a minimum 3:1 contrast ratio with the adjacent colors.
  3. Avoid using color as the only means of conveying information. Use text or icons to supplement or replace the color.
  4. Replace unnecessary jargon or acronyms.
  5. When using images to call out data points, use alt text to explain what is being called out.
  6. Ensure alt text is added to all non-decorative visuals on the page.
  7. Set tab order and turn off tab order (mark the item as hidden) on any decorative items.

  
  

  Provide an accessible HTML text alternative (e.g. data tables). See links below for examples of Table of Results in HTML:

  • Employee Pulse Survey Internal link
  • 2020 Public Service Employee Survey

  
  

  Provide highlights or summary of data in text. See links below for examples:

  • Highlights: 2020 Public Service Employee Survey
  • Employee Pulse Survey Infographic - Long Description

  
  Source:

  • Understanding Success Criterion 1.4.11: Non-text Contrast
  • Employee Pulse Survey Infographic - Long Description
  • Creating More Accessible Data Visualizations and Dashboards

  
  Other resources:

  Microsoft guidelines to create Power BI reports:

  • Overview of accessibility in Power BI
  • Creating accessible Power BI reports
  • Accessibility for your embedded solution
  • Report accessibility checklist
• Guidance on Required Fields

  At the IT Accessibility Office, we always recommend to follow the instructions from the Web Experience Toolkit (WET) style guide, but in cases where there is not much space to mark all the required fields as recommended, we do accept the following strategy:

  Mark the mandatory fields with only an asterisk and add the following notification at the top of the form: All fields marked with asterisk “*” are required or mandatory. Add aria-required="true" to the required input fields. Doing so will allow screen readers to announce the required fields.

• Table element: scope vs id/headers attributes

  For simple tables, it is recommended to use the scope attribute. Id/headers are used for complex tables, however, based on the Canada.ca Content Style Guide Section 5.3 recommendations, complex tables should be converted into one or more simple tables. Furthermore, it is recommended to convert a table to a list if the data is simple. So, IT Accessibility office usually recommends using simple tables with scope attribute whenever possible as they are more usable for the general audience (screen readers, keyboard-only, mobile screen readers, etc.). In some cases, id/headers are used for complex tables even if they may be difficult to code and maintain.

• Is a splash page required for my application?

  It depends on the content:

  • Is it an Internet or Intranet application?
  • Is it a bilingual Web application?
  • Where will it be hosted?

  
  

  For example, MSCA does not have a splash page, it only has a language switcher because it is hosted on Canada.ca which has a splash page. According to the Technical specifications for the Web and mobile presence, there are two exceptions for splash page:

  • Websites and Web applications that have a unilingual website address do not implement splash pages.
  • Device-based mobile applications implement application launch screens instead of splash screens.

  
  

  Here are other resources:

  • Canada.ca Content and Information Architecture Specification
  • CDTS Splash page references
  • Web Experience Toolkit Splash page
  • Intranet - Centrally Deployed Templates Solution (CDTS)
• Can I have multiple Heading 1 (H1) tags on a page? Does it fail WCAG?

  Having multiple Heading 1 (H1) tags on a page is not a WCAG failure but the IT Accessibility Office does not recommend using multiple H1 on a page when it is not necessary. Generally, it is a best practice to use one H1 per page which usually is the page title.

• Can I use background images?

  Generally, background images do not convey information, and if they do, they should not be used as background images. Any image that is used to convey information should have an alternative text.

  For example, the headline images could have alt=”” if they are used as a decorative and do not have a function or the image is provided in the headline.

  Other resources:

  • WebAIM: Alternative Text