adamliptrot-oc

/*
====================================
Work-around for issue on iOS VoiceOver with AFE version of visuallyhidden
https://github.com/hmrc/assets-frontend/issues/727
Also fixes issue with VO announcing hidden copy before visible copy
https://github.com/h5bp/main.css/issues/12
and fixes text running into itself on FF
https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
This brings the class into line with the latest release of GOV.UK Frontend
====================================

adamliptrot-oc

Checklist

Content

• check content for reading level
• check content in screen-reader
• don't write content to help screen-readers
• avoid title attributes
• all images have an appropriate alt attribute
• only one h1
• title matches h1

adamliptrot-oc

NVDA Controls

MODIFIER + f7 = Rotor

MODIFIER + [DOWN ARROW] = Read from current point

h = Next heading element (then 1-6 for levels)

f = Next form element

adamliptrot-oc

JAWS

General navigation is the same as NVDA

Forms mode - hit Enter when in a form input

[MODIFIER KEY] + f5 = Form field Rotor

[MODIFIER KEY] + f6 = Headings Rotor

[MODIFIER KEY] + f7 = Links Rotor

adamliptrot-oc

VOICEOVER Controls

CMD + F5 = On/off

CTRL + OPTION + A = Start reading from current place

CTRL + OPTION + B = Start reading from top

CTRL = stop

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/

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

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

  // ---------------------------------------------------
  // 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

// ===========================
// 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