The document provides an overview of quick wins that local authority teams can implement to improve website accessibility. It discusses considering the needs of users with disabilities, including vision, cognitive, hearing, physical, and mobility impairments. It provides examples of accessibility issues that can affect different types of users and potential solutions, such as proper labeling, color contrast, limiting movement, and providing text alternatives for images. It also summarizes criteria for evaluating accessibility from an organization called Better Connected.

1. Improving Accessibility: quick wins
for local authority teams
Presentation by
Gavin Evans
Because everyone matters
Twitter: @DACcessibility
@GavinAEvans

2. Because everyone matters
About DAC
The Digital Accessibility Centre is a Social Enterprise,
operating on a 100% not-for-profit basis.
• We have been in operation for 6 years and currently employ 30
people
• Most of our employees are people with disabilities
• We are a Living Wage Foundation accredited employer
• We work with many high street banks, media organisations and
Government agencies.
• We perform the Accessibility reviews for Better Connected each
year

3. What is Web Accessibility?
Ensuring that all web based platforms and
applications are accessible to ALL
regardless of ability and or age

4. Vision
Cognitive
Hearing
Physical
What types of User groups do you need
to take into consideration?

5. People with Mobility
Impairments

6. •Therearemanydifferenttypesof
cognitiveimpairment
•Readingagemaybelower
•Maybeeasilydistracted
•Dyslexianeedstobeconsidered
Because everyone matters
People with Cognitive Impairments

7. People with Hearing
Impairments

8. Low Vision Users

9. Blind Users

10. Accessibility for Better Connected –
Desktop/Mobile
1. (Desktop) unique and informative page titles (Mobile) Website delivers a mobile
dedicated design
2. good heading structure
3. present and functioning visible skip links (Mobile) Limit scrolling to one direction
4. all-important content reachable by keyboard navigation (Mobile) In sequence
5. visible focus indicators on links and form elements
6. clear labels and instructions for forms
7. meaningful links in context
8. appropriate text alternatives for images
9. sufficient colour contrast
10. ability to resize text to 200% without loss of content
11. avoidance of movement on pages
12. no auto-starting for audio or video with sound
13. no flashing content
14. accessible downloadable ‘non-html’ documents
14 Criteria that accessibility for Better Connected is measured upon

11. Better Connected criteria and
scores
All important content reachable by keyboard navigation (4)
Keyboard trap
A keyboard user is in danger of becoming trapped in an area of the page when
navigating by tab key
Severity Level: 10
Illogical tab order
The tab order is not logical enough to allow a user to track their onscreen position
Severity Level: 5
Links and controls are device independent.
No problems identified
Severity Level: 0

12. Better Connected showstoppers
What can drop you to a score of 0 immediately
1. Auto-starting audio or video with sound
2. Flashing content
3. Inaccessible downloadable ‘non-html’ documents
4. Keyboard traps
5. CAPTCHA without an accessible alternative
NOTE: If sites are to be fully accessible to all, transactions
and interactions need to be available via online forms. The
existence or not of such forms is something that auto
testing cannot pick up.

13. Better Connected difficult rating
What can drop you to a score of 1 immediately
1. Movement on pages
2. Inaccessible downloadable ‘non-html’ documents
3. Website does not deliver a mobile dedicated design
4. Visible focus indicators on links and form elements

14. How the criteria impacts Blind Users
• Page Titles are front loaded and unique
• Require alternatives to visual content – only place an ‘alt’ on
inline images that convey meaning.
• Visual structure must be represented programmatically –
Heading in a logical hierarchy
• Clear labels and instructions for form elements
• Do no auto start video/audio

15. Press INS+F6 on Desktop and use rotor for mobile
Blind Users on desktop and mobile

16. Because everyone matters
Hiding content-Meaningful links make
sense in context
Occasionally, links require extra information for screen reader users
only. This content can be hidden from view by spanning content off
screen.
CSS
.hidden
{ position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;}
The 'hidden' class can be applied to any element but when only a certain part is to be hidden use
'span'
HTML
<a href="#" >Link text that will be seen <span class="hidden">This text is hidden. </span> </a>

17. How the criteria impacts on Low
Vision Users
• Text may not be large enough to read so ensure that this
can be resized on desktop as well as mobile
• Colour contrast is problematic for low vision and colour
blind users (Ensure text and foreground meet WCAG2
requirements of 4.5:1 contrast)

18. Low Vision Users on Mobile
Text may not be large enough to read – Do Not Suppress zoom capabilities on a
mobile design
Don’t do this
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=1;” name=”viewport”>
Or
<meta name=”viewport” content=”user-scalable=no” />
Do this
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=2.0;
user-scalable=1;” name=”viewport”>
or
<meta name=”viewport” content=”user-scalable=YES” />

19. Because Everyone Matters

20. How the criteria impacts People
with Mobility Impairments
• It is important that keyboard users can see which element has
focus. Therefore, display:none; or display:0; must NOT be used.
• Mobile users – Limit scrolling to one direction
• A visible skip link is present
• It is best practise to offer additional focus indicators such as a
background colour, border underline and/or mouse change. This
can be done via CSS using the elements’ :focus attribute.
a:hover, a:focus, a:active { background-color: #ff9; }

22. • Z index below 100 for desktop voice
activation

23. Because everyone matters
Skip Links
It is recommended that a visible skip link is implemented to
allow users to skip to the accessibility statement link if it is
situated at the foot of the page.
Setting the tabindex to -1 ensures that the user is not returned to the
top of the page after activating the skip link.
<div id="skip" ><a href="#mainContent">skip to main
content</a></div>
<div id="mainContent" tabindex="-1"> </div>

24. Because everyone matters
How the criteria impacts on People with
Cognitive Impairments
• Can be affected by poor error handling
• Dyslexia needs to be considered – font
style,text alignment, do not use upper
case
• Ambiguous labels and icons can be
confusing – relying on placeholder text
is a no go!
What did I
do wrong?

25. Because everyone matters

26. Because everyone matters
• Images do not flicker at a rate that may trigger seizures
in susceptible individuals.
• Movement on the page is limited to 5 seconds.
• Use a control on the page that stops moving, blinking or
auto updating content.
• Provide a link button or other mechanisms that reloads the
page without any blinking content.
Avoid flickering blinking and moving
images and images of text

28. • Choose an accessibility champion
• Write an accessibility policy/Strategy
• Include references to current guidelines (WCAG 2.0)
• Involve project managers, developers, content authors
• Audit or test through all stages of the process, start with
automated tools and then manually audit with Assistive
Technologies, such as screen reader software, use the
keyboard, voice activation software, a mobile device
• Get expert help or certify content
• Get Users involved, Get Users involved, Get users involved
How do you get this done?

29. Access for people with disabilities
https://betterconnected.socitm.net/usability/ac
cessibility_stage_two/2016-17

30. References
WCAG2
http://www.w3.org/TR/WCAG20/
Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to
Mobile
http://www.w3.org/TR/mobile-accessibility-mapping/
ARIA Specification
http://www.w3.org/TR/wai-aria/
HTML5 Specification
http://www.w3.org/TR/html5/

31. Because everyone matters
Digital Accessibility Centre
Stephen Lloyd Suite, Llan Coed House,
Llandarcy, Neath, SA10 6FG.
Telephone: 01792 815267
www.digitalaccessibilitycentre.org
Thank you
Twitter: @DACcessibility
@GavinAEvans