Update visually hidden class to fix ordering issue in VoiceOver OSX

I have investigated this and recorded the results in this gist: https://gist.github.com/nickcolley/19b80ed24d0364cfd3afd3b1b49c4014

We should update the govuk-visually-hidden class to remove the negative margin which will fix the ordering issue in VoiceOver for OSX.

We should recommend using aria-label or aria-labelledby where it makes sense to.

Visually hidden CSS can result in text not being read out when touching on iOS, this is regrettable but does not cause a hard barrier as users can explore the surrounding content to understand context.

CHANGELOG.md

@@ -48,6 +48,14 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Update visually hidden class to fix ordering issue in VoiceOver OSX
+
+  We have fixed an issue in VoiceOver OSX where using the `govuk-visually-hidden` class in links would result in the text being announced out of order.
+
+  We also now recommend to use aria-label or aria-labelledby where appropriate.
+
+  ([PR #1109](https://github.com/alphagov/govuk-frontend/pull/1109))
+
 ## 2.4.1 (fix release)
 
 🔧 Fixes:

src/helpers/_visually-hidden.scss

@@ -18,7 +18,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  margin: -1px iff($important, !important);
+  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  margin: 0 iff($important, !important);
   padding: 0 iff($important, !important);
 
   overflow: hidden iff($important, !important);
@@ -49,7 +50,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  margin: -1px iff($important, !important);
+  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  margin: 0 iff($important, !important);
 
   overflow: hidden iff($important, !important);
   clip: rect(0 0 0 0) iff($important, !important);