adamliptrot-oc

// When using a link as a button with the aria role we need to handle the spacebar as this can be used for buttons but will scroll the page when used on non-native buttons
// Simply adding an eventlistener for the keypress event (which is what triggers the scroll) is not sufficient
// Native buttons allow a use to press the spacebar and then cancel it with the tab key
// So we need to listen for two events:
// 1. the keypress to cancel the scroll
// 2. the keyup to check the press has not been cancelled by a tabkey press - only this event results in a click being triggered

[].slice.call(document.querySelectorAll('a[role="button"]')).forEach(function (el) {
    el.addEventListener('keypress', function (e) {
        if (e.keyCode === 32) {

adamliptrot-oc

// Find first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }

adamliptrot-oc

Because there is no way of maintaining the HMRC page heading pattern and incorporating it with the current Gov Frontend components (or using aria to reference an external section heading), I’ve been recommending that services send the whole construct (without using the header element due to permitted nesting rules) through to the legend or label.

It isn’t ideal but is better than having repeated content or missing the section heading. As the section heading is announced after the label then the important information is still front-loaded.

Labels

For example, construct a variable to contain the html for the heading and the caption

@headingSnippetLabel = @{"Heading copy <span class='govuk-caption-xl hmrc-caption-xl'><span class='govuk-visually-hidden'>This section is: </span>Caption copy</span>"}

adamliptrot-oc

// Note - updated to work with the HMRC Frontend implementation
// https://github.com/hmrc/play-frontend-hmrc#adding-accessible-autocomplete-css-and-javascript

if (typeof HMRCAccessibleAutocomplete != 'undefined' && document.querySelector('[data-module="hmrc-accessible-autocomplete"]') != null) {
    var originalSelect = document.querySelector('[data-module="hmrc-accessible-autocomplete"]');
    // load autocomplete - now handled by the HMRC component wrapper in Twirl
    // accessibleAutocomplete.enhanceSelectElement({
    //     selectElement: originalSelect,
    //     showAllValues: true
    // });

adamliptrot-oc

To modify a standard table to use this:

• add _table.scss to your service css
• add role="table" to table element
• add role="rowgroup" to thead element
• add role="row" to each row element (including the one containing the headings)
• add role="columnheader" to the th elements
• add role="cell" to the td elements
• add <span class="hmrc-responsive-table__heading" aria-hidden="true">[heading]</span> to each cell, with the [heading] being the column it sits under.

Example markup:

adamliptrot-oc

// ===========================
// UPDATE MAY 2020
// A bug with Voiceover is currently hiding details elements from the Rotor when using the native details element
// The Elements polyfill is being used to by-pass this bug and add in additional aria information missing in the current GOVUK Frontend version
// ===========================

// This is the Elements details polyfill updated to ensure focussable elements inside it are not exposed
// This is accomplished by adding display none to the internal content wrapper.

// <details> polyfill

adamliptrot-oc

  // ---------------------------------------------------
  // Introduce direct skip link control, to work around voiceover failing of hash links
  // https://bugs.webkit.org/show_bug.cgi?id=179011
  // https://axesslab.com/skip-links/
  // ---------------------------------------------------
  $('.skiplink').click(function(e) {
    e.preventDefault();
    $(':header:first').attr('tabindex', '-1').focus();
  });

adamliptrot-oc

h1, h2, h3, h4, h5, h6 {
    outline: 1px solid red!important;
}
h1:after {
    content: "h1";
    background: gold;
    color: black;
    padding: 0.2em;
    font-size: 14px;
}

adamliptrot-oc

Orca controls

More information

Modifier

If you are using the Laptop layout, the default Orca Modifier will be CapsLock If you are using the Desktop layout, the Orca Modifier will be both Insert and KeyPad Insert, the latter being the same key as KeyPad 0.

On/off

Win + Alt + s = On/off

adamliptrot-oc

Semantic HTML

• https://developer.apple.com/videos/play/wwdc2018/239/
• https://www.fastcompany.com/90166413/what-youre-getting-wrong-about-inclusive-design
• https://html.spec.whatwg.org/multipage/
• https://webaim.org/projects/screenreadersurvey8/
• http://www.caniuse.com

ARIA

• https://www.w3.org/TR/html-aria/
• https://www.powermapper.com/tests/screen-readers/aria/