Digital Accessibility Centre - Accessibility Audit Report

Digital Accessibility Centre

Accessibility Audit Report

Company

British Council

Date

November 2019

DAC Ref.

000414

Version

V 1.0 Final

Standard

WCAG 2.1

Disclosure

Pursuant to item 7 in our terms and conditions, this report and its findings are intended for the client organization. Any

other use of this material that is attributed to Digital Accessibility Centre, including delivery of excerpts, paraphrases, or

edited versions to anyone not employed by the client organization must be approved by us in writing.

Document Control

Site/product/app name:

https://active-citizens.britishcouncil.org

Client:

British Council

Project lead:

Dan Jolley

User Testing lead/support:

James Bradley

Technical Auditing Report Author:

Dan Jolley

Quality checked by:

Gemma Nicholl

Address:

Digital Accessibility Centre

Stephen Lloyd Suite (Unit 18)

D’arcy Business Park

Llandarcy

Neath

SA10 6FG

Contact details:

[email protected]

079366 85804

[email protected]

07597 690358

Phone:

01792 815267

Date of audit:

October 2019

Date Report Issued:

November 2019

3 
Copyright © 2019 Digital Accessibility Centre Limited. All Rights Reserved. 
 Contents 
 
Digital Accessibility Centre ................................................................................................................... 1 
Accessibility Audit Report .................................................................................................................... 1 
Document Control ............................................................................................................................ 2 
Contents ........................................................................................................................................... 3 
Executive Summary .......................................................................................................................... 5 
Audit Summary................................................................................................................................. 6 
Scope ................................................................................................................................................ 7 
Browser matrix and Assistive Technology (AT) combinations ..................................................... 7 
Summary Graphs .............................................................................................................................. 8 
Audit Results .................................................................................................................................. 11 
High Priority ................................................................................................................................... 12 
Images ........................................................................................................................................ 12 
Issue ID: DAC_Images_Issue_01 ............................................................................................ 12 
Non-html documents ................................................................................................................. 14 
Issue ID: DAC_PDF_Issue_01.................................................................................................. 15 
Video content ............................................................................................................................. 17 
Issue ID: DAC_Video_Content_Issue_01 ............................................................................... 18 
Issue ID: DAC_Video_Content_issue_02 ............................................................................... 19 
Heading structure ...................................................................................................................... 21 
Issue ID: DAC_Headings_Issues_02 ....................................................................................... 21 
Use of Colour Alone ................................................................................................................... 23 
Issue ID: DAC_Link_Colour_Issue_01 ..................................................................................... 23 
Animation ................................................................................................................................... 25 
Issue ID: DAC_Animation_Issue_02 ....................................................................................... 25 
Skip Links .................................................................................................................................... 27 
Issue ID: DAC_Skip_Links_Issue_01 ....................................................................................... 27 
Issue ID: DAC_Skip_Links_Issue_02 ....................................................................................... 28 
Page Titles .................................................................................................................................. 30 
Issue ID: DAC_Page_Titles_Issue_01 ..................................................................................... 30 
Focus order ................................................................................................................................ 32 
Issue ID: DAC_Focus_Order_Issue_01 ................................................................................... 32 
Bleed Through ............................................................................................................................ 34 
Issue ID: DAC_Bleed_Through_Issue_01 ............................................................................... 34 
Close button is obscured ............................................................................................................ 36 
Issue ID: DAC_Focus_Order_Issue_02 ................................................................................... 36 
Focus order ................................................................................................................................ 38 
Issue ID: DAC_Focus_Order_Issue_03 ................................................................................... 38 
Link text ...................................................................................................................................... 40 
Issue ID: DAC_Links_Issue_01 ................................................................................................ 40 
Non-descriptive links .................................................................................................................. 44 
Issue ID: DAC_Links_Issue_02 ................................................................................................ 44 
Non-Descriptive Links ................................................................................................................ 46 
Issue ID: DAC_Links_Issue_03 ................................................................................................ 46 
Issue ID: DAC_Links_Issue_04 ................................................................................................ 49 
Non-Descriptive Links ................................................................................................................ 51 
Issue ID: DAC_Links_Issue_05 ................................................................................................ 51 

4 
Copyright © 2019 Digital Accessibility Centre Limited. All Rights Reserved. 
Expandable content ................................................................................................................... 53 
Issue ID: DAC_Expandable_Content_Issue_01 ...................................................................... 53 
Issue ID: DAC_Expandable_Content_Issue_02 ...................................................................... 55 
Issue ID: DAC_Expandable_Content_Issue_03 ...................................................................... 56 
Expandable Content ................................................................................................................... 58 
Issue ID: DAC_Expandable_Content_Issue_04 ...................................................................... 58 
Incorrect use of aria ................................................................................................................... 61 
Issue ID: DAC_Aria_Issue_01 ................................................................................................. 61 
Incorrect use of aria ................................................................................................................... 62 
Issue ID: DAC_Aria_Issue_02 ................................................................................................. 62 
Issue ID: DAC_Aria_Issue_03 ................................................................................................. 64 
Medium Priority ............................................................................................................................. 66 
Colour Contrast .......................................................................................................................... 66 
Issue ID: DAC_Colour_Contrast_Issue_01 ............................................................................. 66 
Issue ID: DAC_Colour_Contrast_Issue_02 ............................................................................. 68 
Issue ID: DAC_Colour_Contrast_Issue_03 ............................................................................. 70 
Issue ID: DAC_Colour_Contrast_Issue_04 ............................................................................. 71 
Issue ID: DAC_Colour_Contrast_Issue_05 ............................................................................. 72 
Text over images ........................................................................................................................ 74 
Issue ID: DAC_Colour_Contrast_Issue_06 ............................................................................. 74 
Resizing causes page to jump .................................................................................................... 75 
Issue ID: DAC_Resize_Text_Issue_01 ..................................................................................... 75 
Reflow ........................................................................................................................................ 77 
Issue ID: DAC_Reflow_Issue_01 ............................................................................................. 77 
Non-text contrast ....................................................................................................................... 78 
Issue ID: DAC_Non_Text_Contrast_Issue_01 ........................................................................ 78 
Duplicated Form Labels .............................................................................................................. 80 
Issue ID: DAC_Forms_Issue_01 .............................................................................................. 80 
Consistent Navigation ................................................................................................................ 82 
Issue ID: DAC_Consistent_Navigation_Issue_01 ................................................................... 82 
Status Message .......................................................................................................................... 84 
Issue ID: DAC_Status_Message_Issue_01 ............................................................................. 84 
Low Priority .................................................................................................................................... 87 
Animation ................................................................................................................................... 87 
Issue ID: DAC_Animations_Issue_01 ..................................................................................... 87 
Heading structure ...................................................................................................................... 88 
Issue ID: DAC_Headings_Issues_01 ....................................................................................... 88 
End of Report ............................................................................................................................. 89 
Appendix I ...................................................................................................................................... 90 
Journeys ..................................................................................................................................... 90 
Appendix II ..................................................................................................................................... 91 
Classification of Accessibility Issues ........................................................................................... 91 
Appendix III .................................................................................................................................. 112 
The Process .............................................................................................................................. 112 
CRITERIA ............................................................................................................................... 112 
DAC Testing Procedure ........................................................................................................ 113 
 

Executive Summary

An accessibility audit for the British Council Active Citizens website was carried out by the Digital

Accessibility Centre (DAC) user/technical team on 29

October 2019.

The site was assessed against the Web Content Accessibility Guidelines WCAG 2.1.

This document incorporates the findings regarding any accessibility barriers identified during the

testing process.

There were numerous barriers to accessibility encountered across the site which would have an

impact on some user groups ability to interact with the content.

Screen reader users were the group which found the site most difficult to interact with,

particularly the video content, which had no alternative and the Active Citizens Toolkit PDF

document, which lacked the appropriate structure for screen readers. There were other issues

such as heading structure, images, expandable content and non-descriptive links which would also

prove challenging for this user group.

Keyboard only users were able to interact with most of the content on the site with ease. There

were some issues with focus order and the skip links did not function as expected.

Users with limited vision and colour perception issues may have issues with some of the colour

combinations used on the site and some pages do not resize correctly when magnified.

There is moving content present on the site which can confuse and distract some users and may

also create problems for screen reader users.

A lot of pages on the site use parallax scrolling, which can be a problem for users with vestibular

disorders. We would recommend that users are allowed to switch off any animation and view the

pages as a static site.

6 
Copyright © 2019 Digital Accessibility Centre Limited. All Rights Reserved. 
Audit Summary 
In order for the website to be eligible for a Digital Accessibility Centre certification, and fall in line 
with WCAG 2.1 requirements, improvements need to be made in the following areas. 
 
  A 
 
Images 
Non-HTML Documents 
Video Content 
Heading Structure 
Use of Colour Alone 
Animation 
Skip Links 
Page Titles 
Focus Order 
Bleed Through 
Close Button obscured 
Focus Order 
Link Text 
Non-Descriptive Links 
Expandable Content 
Incorrect Use of Aria 
 
 AA 
 
Colour Contrast 
Text over Images 
Resizing 
Reflow 
Non-Text Contrast 
Duplicated Form Labels 
Consistent Navigation 
Status Message 
 
 AAA 
 
Animation 
Heading Structure 
 
 
   

Scope

Exact Task and/or URLs are listed below along with the specific browser and AT set.

See Appendix I for a full list of tasks and instructions

Browser matrix and Assistive Technology (AT) combinations

Desktop

Mobile/Tablet

User type

Code

Operating

System (OS)

Browser

Assistive Technology

Blind

Windows

IE11

Jaws 18 and 2019

Firefox

NVDA

MAC

Safari

VoiceOver

Mobility (iii)

Windows

IE11

Dragon Voice Activation

V15

Mobility (iii)

Windows

Chrome

Keyboard

IE11

Keyboard

Deaf (i)

Windows

Firefox

Colour blind (ii)

Windows

Chrome

System inverted colours

Dyslexia (ii)

Windows

Chrome

Low Vision

Windows

IE11

Screen Magnification

Asperger’s (i)

Windows

Firefox

Cognitive Impaired/

Panic/ Anxiety

Cog

Windows

IE11

User type

Code

Operating

System (OS)

Browser

Assistive Technology

Blind

iOS

Safari

VoiceOver

Android

Firefox

Talkback

Mobility

iOS

Safari

Mobility

Android

Browser

Deaf

Android/iOS

Android

browser/ Safari

Colour blind/

Dyslexia

CB/DX

Android/iOS

Android

browser/ Safari

System inverted colours/

colour blind checks

Low Vision

Android/iOS

Android

browser/ Safari

Screen Magnification/

Resizing content

Summary Graphs

Our analysts provided their overall feedback on the website.

This was rated from 0 – could not complete to 3 – Completed independently, no issues.

Key:

Could not complete on my own

Completed independently but with major issues

Completed independently but with minor issues

Completed independently, no issues

Task 1

User Difficulty Ratings

Cognitive Low Vision Dyslexia

Colour Blind Mobility (KO) Mobility (VA)

Screen reader JAWS Screen reader NVDA Screen reader VoiceOver

Screen Reader TalkBack

The graph below details the number of checkpoints that passed, failed or were not applicable to

the website.

Please refer to the Classification of Accessibility Issues for more information.

Priority

Level

Checkpoints

Number

Percentage

Number of

checkpoints

‘Passed’

(37%)

Number of

checkpoints

‘Failed’

(50%)

Number of

checkpoints

‘Not

Applicable

(N/A)’

4 (13%)

Priority Level

Checkpoints

Number

Percentage

Number of

checkpoints

‘Passed’

8 (40%)

Number of

checkpoints

‘Failed’

8 (40%)

Number of

checkpoints

‘Not

Applicable

(N/A)’

4 (20%)

Pass

37%

Fail

50%

N/A

13%

Pass Fail N/A

Pass

40%

Fail

40%

N/A

20%

Pass Fail N/A

AAA

Priority

Level

Checkpoints

AAA

Number

Percentage

Number of

checkpoints

‘Passed’

8 (31%)

Number of

checkpoints

‘Failed’

9 (34%)

Number of

checkpoints

‘Not

Applicable

(N/A)’

9 (35%)

Pass

31%

Fail

34%

N/A

35%

AAA

Pass Fail N/A

Audit Results

These are the results of the Digital Accessibility Centre accessibility audit by section.

Each area contains a reference to the WCAG success criteria, a brief overview of the issue

encountered, a description of issues found along with user testing commentaries and

solutions.

DAC | Accessibility Report

High Priority

Images

Decorative images should have a null alt attribute

WCAG Reference:

1.1.1 Non-text Content

Understanding Non-text Content |How to Meet Non-text Content

(Level A)

Issue ID: DAC_Images_Issue_01

Page title: Active Citizens | British Council

URL: https://active-citizens.britishcouncil.org/

Screen Shot:

There are decorative images present that have a descriptive alt attribute. This can be

frustrating for users who rely on audio feedback such as screen reader user. This issue

appears to be consistent with all images on the site.

DAC | Accessibility Report

Current Code Ref(s):

<img class="img-responsive bc-landscape blur-up lazyautosizes lazyloaded"

width="950" height="534" alt="Group of young people from Tunisia standing in the

middle of large vehicle tyres painted in bright colours" src="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

100x56/public/tunisia_withcopyright.jpg?itok=-FfoJsFm" data-sizes="auto" data-

srcset="https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-270x152/public/tunisia_withcopyright.jpg?itok=2wzEnZsZ 270w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-300x169/public/tunisia_withcopyright.jpg?itok=jsuLMAeW 300w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-630x354/public/tunisia_withcopyright.jpg?itok=AmCkmdr3 630w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-800x450/public/tunisia_withcopyright.jpg?itok=D0qbM17X 800w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-950x534/public/tunisia_withcopyright.jpg?itok=vIogjW-L 950w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-1280x720/public/tunisia_withcopyright.jpg?itok=uTOEBqmm 1280w,

https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-1440x810/public/tunisia_withcopyright.jpg?itok=UoCyzuOQ 1440w"

sizes="960px" srcset="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

270x152/public/tunisia_withcopyright.jpg?itok=2wzEnZsZ 270w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

300x169/public/tunisia_withcopyright.jpg?itok=jsuLMAeW 300w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

630x354/public/tunisia_withcopyright.jpg?itok=AmCkmdr3 630w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

800x450/public/tunisia_withcopyright.jpg?itok=D0qbM17X 800w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

950x534/public/tunisia_withcopyright.jpg?itok=vIogjW-L 950w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1280x720/public/tunisia_withcopyright.jpg?itok=uTOEBqmm 1280w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/tunisia_withcopyright.jpg?itok=UoCyzuOQ 1440w">

Screen reader comments:

“There are lots of images present on the site that have very descriptive alternative text. The

images are decorative and only increase the amount of time it takes to read the page.

Decorative images should be hidden from screen reading software with a null alt.”

Solution:

All images which are decorative should have a null alt attribute (alt="") to ensure they are

not read by screen reading software.

 
 
DAC | Accessibility Report                                
     
14 
Non-html documents  
There is a pdf document which does not have the appropriate structure for users of 
assistive technology. 
 
WCAG Reference: 
1.1.1 Non-text Content  
Understanding Non-text Content |How to Meet Non-text Content 
(Level A) 
 
1.3.1 Info and Relationships 
Understanding Info and Relationships |How to Meet Info and Relationships 
(Level A) 
 
1.3.2 Meaningful Sequence 
Understanding Meaningful Sequence |How to Meet Meaningful Sequence 
(Level A) 
 
1.4.3 Contrast (Minimum)  
Understanding Contrast (Minimum) |How to Meet Contrast (Minimum) 
(Level AA) 
 
 1.4.5 Images of Text 
Understanding Images of Text |How to Meet Images of Text 
(Level AA) 
 
 1.4.6 Contrast (Enhanced)  
Understanding Contrast (Enhanced) |How to Meet Contrast (Enhanced) 
(Level AAA) 
 
1.4.9 Images of Text (No Exception)  
Understanding Images of Text (No Exception) |How to Meet Images of Text (No Exception) 
(Level AAA) 
 
1.4.11 Non-text Contrast 
Understanding Non-text Contrast |How to Meet Non-text Contrast 
(Level AA) 
 
2.4.2 Page Titled 
Understanding Page Titled |How to Meet Page Titled 
(Level A) 

DAC | Accessibility Report

2.4.6 Headings and Labels

Understanding Headings and Labels |How to Meet Headings and Labels

(Level AA)

2.4.10 Section Headings

Understanding Section Headings |How to Meet Section Headings

(Level AAA)

Issue ID: DAC_PDF_Issue_01

Page title: active_citizens_global_toolkit_2017-18.pdf

URL: https://active-

citizens.britishcouncil.org/sites/default/files/active_citizens_global_toolkit_2017-18.pdf

Screen Shot:

The pdf document does not contain the structure to enable users of assistive technology to

interact with the document in a meaningful way. The reading order is not tagged correctly,

the document has no title, there are test elements which fail to meet the minimum

required contrast ratio. The heading structure is not correct, images are present which

convey information and have no alternative text. There are also images which do not have

alt attributes. There are tables contained within the document which do not have the

appropriate structure to enable screen reader users to understand the content.

DAC | Accessibility Report

Screen reader comments:

“I found the pdf document very difficult to read as the JAWS did not work correctly with the

document.”

Solution:

The document requires remediation to enable users of assistive technology to interact with

the document. The text elements of the document (Including images which convey

information) should meet the minimum required contrast ratios. Tables require the table

headers and table data information.

The page title should be descriptive of the content of the pdf and should not be in a file

format.

Some users may prefer an alternative version such as a .doc which may be easier to read.

 
 
DAC | Accessibility Report                                
     
17 
Video content 
There is pre-recorded video content present which is not accessible to all users. 
 
WCAG Reference: 
1.2.1 Audio-only and Video-only (Pre-recorded)  
Understanding Audio-only and Video-only (Pre-recorded) |How to Meet Audio-only and 
Video-only (Pre-recorded) 
(Level A) 
 
1.2.2 Captions (Pre-recorded)  
Understanding Captions (Pre-recorded) |How to Meet Captions (Pre-recorded) 
(Level A) 
 
1.2.3 Audio Description or Media Alternative (Pre-recorded)  
Understanding Audio Description or Media Alternative (Pre-recorded) |How to Meet Audio 
Description or Media Alternative (Pre-recorded) 
(Level A) 
 
1.2.5 Audio Description (Pre-recorded)  
Understanding Audio Description (Pre-recorded) |How to Meet Audio Description (Pre-
recorded) 
(Level AA) 
 
1.2.6 Sign Language (Pre-recorded)  
Understanding Sign Language (Pre-recorded) |How to Meet Sign Language (Pre-recorded) 
(Level AAA) 
 
1.2.7 Extended Audio Description (Pre-recorded)  
Understanding Extended Audio Description (Pre-recorded) |How to Meet Extended Audio 
Description (Pre-recorded) 
(Level AAA) 
 
1.2.8 Media Alternative (Pre-recorded)  
Understanding Media Alternative (Pre-recorded) |How to Meet Media Alternative (Pre-
recorded) 
(Level AAA) 
 
1.4.7 Low or No Background Audio 
Understanding Low or No Background Audio |How to Meet Low or No Background Audio 
(Level AAA) 

DAC | Accessibility Report

Issue ID: DAC_Video_Content_Issue_01

Page title: Active Citizens don't wait around for change to happen...

URL: https://active-citizens.britishcouncil.org/about

Screen Shot:

The video content contains no captions for users who are hearing impaired. There is also

information conveyed via text within the video which blind users will not be aware off.

DAC | Accessibility Report

Issue ID: DAC_Video_Content_issue_02

Page title: Active Citizens

URL: https://active-citizens.britishcouncil.org/global-impact-stories

Screen Shot:

The video content on the page is in multiple languages. The subtitles are not accurate on

some videos due to the language differences. Screen reader users will not hear the subtitles

and the subtitles embedded in the video will be difficult for some users to read due to the

colour combinations.

DAC | Accessibility Report

Screen reader comments:

“When I started to play the first video on this page I discovered that the speech is in a

different language. A sighted colleague advised me that the subtitles work for people who

can see the screen; however screen reader users would benefit either from audio

description or from a text English transcript of the content.”

“The video on this page is very accessible and easy to follow as it has a lot of dialogue in it,

however from listening to the sounds in it it’s clear that there are things happening that are

visual; it would really assist users who are totally blind or who lack enough vision to see the

screen if this video could include Audio description. This would help users with very low or

no vision to get the most out of the video and fully understand what is going on and what it

is about. This issue affects all screen readers and is consistent with all videos on the site.”

Solution:

Ensure the content that is presented in the pre-recorded media is accessible to all users

including sight and hearing impaired. Captions should be accurate and readable and audio

description should be provided for blind users.

We would also suggest providing a text transcript for the videos due to the complexity

presented with multiple languages.

DAC | Accessibility Report

Heading structure

The heading structure is not logical

WCAG Reference:

1.3.1 Info and Relationships

Understanding Info and Relationships |How to Meet Info and Relationships

(Level A)

2.4.6 Headings and Labels

Understanding Headings and Labels |How to Meet Headings and Labels

(Level AA)

2.4.10 Section Headings

Understanding Section Headings |How to Meet Section Headings

(Level AAA)

Issue ID: DAC_Headings_Issues_02

Page title: Active Citizens don't wait around for change to happen...

URL: https://active-citizens.britishcouncil.org/about

Screen Shot:

DAC | Accessibility Report

The heading structure on the about us page has multiple issues. Heading mark up has been

used to visually style text which can confuse users. The heading structure is also illogical

and jumps from <h1> to <h3>.

Structural heading mark-up should be used to introduce content and not for visual styling.

The heading structure should be a logical hierarchy to enable users who rely on audio

feedback such as screen reader users to understand the context of the page.

Screen reader comments:

“When viewing the headings out of context I found that the headings jump from a H1 to H3

which is not logical. A logical hierarchical heading structure will enable screen reader users

to better understand the page layout.”

Solution:

Do not use structural heading mark up for styling purposes. Headings should be used to

introduce content and should be a logical hierarchy with one <h1> on each page followed

by subheadings at <h2> to <h6>

DAC | Accessibility Report

Use of Colour Alone

There are links present which have no visual indicator and have insufficient colour contrast

ratio from the surrounding text.

WCAG Reference:

1.4.1 Use of Colour

Understanding Use of Colour |How to Meet Use of Colour

(Level A)

Issue ID: DAC_Link_Colour_Issue_01

Page title: Active Citizens | British Council

URL: https://active-citizens.britishcouncil.org/

Screen Shot:

The underline has been removed from links which may make it difficult for some users to

identify link text due to the contrast ratio of the link text compared to the surrounding text.

If the underline has been removed, links should have a contrast ratio of at least 3:1 from

surrounding text.

Link text: #307A00

Body text: #333333

The contrast ratio is: 2.4:1

DAC | Accessibility Report

Current Code Ref(s):

<nav><ul class="bc-footer-nav"><li class="first

leaf"><a href="/where-we-work">Where we work</a></li>

<li class="leaf"><a href="/annual-reports">Annual reports</a></li>

<li class="last leaf"><a href="/how-active-citizens-funded">How Active Citizens

is funded</a></li>

</ul></nav>

</div>

<ul class="bc-site-links"><li class="first leaf"><a

href="https://www.britishcouncil.org/terms?_ga=2.21676795.1521340697.1551699153-

73135822.1551196681" title="">Terms of use</a></li>

<li class="leaf"><a href="https://www.britishcouncil.org/privacy-

cookies?_ga=2.21676795.1521340697.1551699153-73135822.1551196681"

title="">Privacy and cookies</a></li>

<li class="leaf"><a

href="https://www.britishcouncil.org/accessibility?_ga=2.118156233.1521340697.155

1699153-73135822.1551196681" title="">Accessibility</a></li>

<li class="leaf"><a href="https://www.britishcouncil.org/statement-slavery"

title="">Statement on modern slavery</a></li>

<li class="last leaf"><a href="/sitemap" title="Sitemap">Sitemap</a></li>

</ul> </div>

<h2 class="h3 bc-social-media-title">Connect with

us</h2><ul class="bc-social-media"><li class="first leaf"><a

href="https://twitter.com/ActiveCitizens?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7

Ctwgr%5Eauthor" title="">Active Citizens Twitter</a></li>

<li class="last leaf"><a href="https://www.facebook.com/activecitizens/"

title="">Active Citizens Facebook</a></li>

</ul> </div>

</div>

Low Vision Analyst comments:

“I found it hard to identify what was a link and what was just text. There was no underline

on the links and the text was the same colour as the rest of the text on the page.”

Solution:

Ideally, the underline should not be removed from links as it creates difficulties for some

users as they may not be able to recognise links on the page.

If the link underline is removed, then the link text should have a minimum contrast ratio of

3:1 from surrounding text.

DAC | Accessibility Report

Animation

There is content which moves for more than five seconds with no accessible pause feature.

WCAG Reference:

2.2.2 Pause, Stop, Hide

Understanding Pause, Stop, Hide |How to Meet Pause, Stop, Hide

(Level A)

Issue ID: DAC_Animation_Issue_02

Page title: Active Citizens don't wait around for change to happen...

URL: https://active-citizens.britishcouncil.org/about

Screen Shot:

There is moving content present on the page which moves for more than 5 seconds and has

no accessible pause feature. The content is contained within video sections which auto-play

and may create issues for users of assistive technology and confuse or disorientate some

users with cognitive impairments. VoiceOver users on iOS devices commented that the

video content was being read to them as they navigated through the page content.

Current Code Ref(s):

<video data-video="true" preload="none" loop="" muted="" class="FullSize--basic

ObjectFit--cover" style="opacity: 1;" playsinline="" data-

landscape="https://active-

DAC | Accessibility Report

citizens.britishcouncil.org/sites/default/files/shorthand/287/4zyCwyaHJN/assets/A

AWQ6pr2bY/river-1-v2.mp4" data-portrait="https://active-

citizens.britishcouncil.org/sites/default/files/shorthand/287/4zyCwyaHJN/assets/A

AWQ6pr2bY/river-1-v2.mp4" data-type="video/mp4"><source type="video/mp4"

src="https://active-

citizens.britishcouncil.org/sites/default/files/shorthand/287/4zyCwyaHJN/assets/A

AWQ6pr2bY/river-1-v2.mp4"></video>

Screen reader comments:

“Starting from the heading ‘Understanding ourselves’ there are unclear images on this, and

then the next three headings after this. Voiceover announces it as ‘14 seconds 3 seconds’

then has an image with a lot of numbers. It is unclear to the user what this is actually trying

to convey as there is no clear description. It would help the user if clear descriptions could

be added showing the user exactly what it is conveying on the page. This issue only affected

iOS and was not applicable to NVDA although it may explain the issue with the blank line

mentioned above.”

Solution:

Either remove the moving content from the page or; add an accessible pause feature or;

ensure the content moves for less than 5 seconds.

Use aria-hidden-true on the video elements to hide the content from VoiceOver users.

DAC | Accessibility Report

Skip Links

There are skip links present which are not anchored correctly and will not work for some

users.

WCAG Reference:

2.4.1 Bypass Blocks

Understanding Bypass Blocks |How to Meet Bypass Blocks

(Level A)

Issue ID: DAC_Skip_Links_Issue_01

Page title: Active Citizens don't wait around for change to happen...

URL: https://active-citizens.britishcouncil.org/about

Screen Shot:

There are skip to content links at the header and footer of the page which rely on JavaScript

to move the users focus. These links are not anchored so will only move the focus visually

and will not set focus at the main content or at the top of the page. When users move

forward after selecting the link, focus will return to the next item in the DOM.

Current Code Ref(s):

<a href="#main-content" class="element-invisible element-focusable">Skip to

main content</a>

</div>

Screen reader comments:

“When implementing the skip link on the page I discovered that my focus remains on the

skip link rather than taking focus to the main content on the page. ”

DAC | Accessibility Report

Issue ID: DAC_Skip_Links_Issue_02

Page title: Active Citizens

URL: https://active-citizens.britishcouncil.org/global-impact-stories#group-Americas-

Gt1aEqWtxt

Screen Shot:

The skip links to the various world sections on the page are not anchored and will not fix

focus for users who cannot use a mouse such as keyboard only users or screen reader

users. The elements rely on JavaScript to shift focus visually.

Solution:

Ensure that the skip links work correctly, use html skip links wherever possible.

Example:

<a href="#main">skip to main content</a>

The tabindex=”-1” on the destination ensures that focus continues through the page and

does not stay on the skip link itself.

For hidden skip links that need to come visible when tabbed to suggest the following:

.screen-reader {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

white-space: nowrap;

width: 1px;

DAC | Accessibility Report

}

.screen-reader-focusable:active,

.screen-reader-focusable:focus {

clip: auto;

height: auto;

margin: 0;

overflow: visible;

position: static;

white-space: normal;

width: auto;

}

DAC | Accessibility Report

Page Titles

Page titles are not descriptive of the page content and some are duplicated.

WCAG Reference:

2.4.2 Page Titled

Understanding Page Titled |How to Meet Page Titled

(Level A)

Issue ID: DAC_Page_Titles_Issue_01

Page title: Active Citizens | British Council

Active Citizens don't wait around for change to happen...

Active Citizens

URL: https://active-citizens.britishcouncil.org/

https://active-citizens.britishcouncil.org/about

https://active-citizens.britishcouncil.org/global-impact-stories

Screen Shot:

The page titles may confuse screen reader users. Some pages have duplicated page titles,

some have titles which do not clearly describe the purpose of the page. Screen reader users

will use page titles to quickly locate and understand the content of the page, particularly

when multiple pages are open.

Current Code Ref(s):

<title>Active Citizens don't wait around for change to happen...</title>

Screen reader comments:

“When viewing the page title, I found that the page title does not reflect the purpose of the

page accurately. In order to make this simpler to understand, (about us-British council) or

something similar could be used instead.”

DAC | Accessibility Report

“This page does not have a clear page title that shows up with NVDA. I know it is the global-

impact-stories because the URL tells me this and the scope gives the names of all the pages

that need testing. Without this information it would not be clear to me until I started

looking at the information properly what this page was and where it was taking me. It

would help if the page title could be clearly displayed to show that it is the global-impact-

stories page. This issue was consistent with both NVDA and Voiceover on iPhone.”

Solution:

We would recommend using page titles which clearly describe the purpose of the page that

include details of the organisation name. Page titles should also be consistent across the

site.

Example

<title>Home | Active Citizens | British Council</title>

<title>About Us | Active Citizens | British Council</title>

<title>Global Impact Stories | Active Citizens | British Council</title>

DAC | Accessibility Report

Focus order

When a new page is selected, focus remains on the pagination links.

WCAG Reference:

2.4.3 Focus Order

Understanding Focus Order |How to Meet Focus Order

(Level A)

Issue ID: DAC_Focus_Order_Issue_01

Page title: Activities

URL: https://active-citizens.britishcouncil.org/facilitator-resources/activities

Screen Shot:

When a user selects a new page, focus is not placed at the top of the new content which

has loaded meaning keyboard only users will have to tab backwards to reach the top of the

content. Focus shifts visually with JavaScript, but it is not anchored to the top of the

content which will be frustrating.

Current Code Ref(s):

<li><a title="Go to page 2" href="/facilitator-

resources/activities?page=1">2</a></li>

<li><a title="Go to page 3" href="/facilitator-

resources/activities?page=2">3</a></li>

<li><a title="Go to page 4" href="/facilitator-

resources/activities?page=3">4</a></li>

DAC | Accessibility Report

<li><a title="Go to page 5" href="/facilitator-

resources/activities?page=4">5</a></li>

<li><a title="Go to page 6" href="/facilitator-

resources/activities?page=5">6</a></li>

<li><a title="Go to page 7" href="/facilitator-

resources/activities?page=6">7</a></li>

<li class="next"><a href="/facilitator-resources/activities?page=1"><svg

class="bc-svg bc-svg-right-open-mini bc-dir" aria-hidden="true"><use

xlink:href="#icon-right-open-mini"></use></svg>Next</a></li>

</ul>

Keyboard only comments:

“When I selected a new page from the link at the bottom of the page the content updated,

but focus only moved visually, meaning I had to tab backwards through the page content.”

Solution:

Ensure focus is set to the top of the page when the new page is selected.

DAC | Accessibility Report

Bleed Through

There is content which is not visible on the screen which is still read by screen reading

software.

WCAG Reference:

2.4.3 Focus Order

Understanding Focus Order |How to Meet Focus Order

(Level A)

Issue ID: DAC_Bleed_Through_Issue_01

Page title: Active Citizens

URL: https://active-citizens.britishcouncil.org/global-impact-stories

Screen Shot:

The content in the second menu section is not hidden correctly and can still be read by

screen reader users. This will be confusing for screen reader users.

Current Code Ref(s):

<div class="Theme-Default-Logos"><span class="Theme-Logo"><a

href="https://shorthand.com/" target="_blank"><img alt="Shorthand"

src="https://active-

citizens.britishcouncil.org/sites/default/files/shorthand/288/sgJ3p0RWq9/assets/l

ogo.png" class="Theme-BigLogo Display--none Display--md-block"><img

DAC | Accessibility Report

alt="Shorthand" src="https://active-

citizens.britishcouncil.org/sites/default/files/shorthand/288/sgJ3p0RWq9/assets/l

ogo.png" class="Theme-SmallLogo Display--md-none"></a></span></div>

</div><a href="#nav" class="Navigation__hamburger Layout__snap--xright

Layout__snap--ycenter Display--lg-none Theme-Hamburger" aria-expanded="false"

aria-controls="navigation"><span></span><span></span><span></span><span></span><i

class="Core--srOnly">Menu</i></a>

<nav class="Navigation Theme-NavigationBar" role="navigation"

id="navigation">

<ul class="Navigation__itemList Theme-Navigation-ItemList"><li

class="Navigation__item Theme-NavigationBarItem"><a href="#group-Americas-

Gt1aEqWtxt" class="Theme-NavigationLink" data-story-nav-

item="true">Americas</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-

Europe-G90shploXI" class="Theme-NavigationLink" data-story-nav-

item="true">Europe</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-UK-

RA6L8Zov1F" class="Theme-NavigationLink" data-story-nav-item="true">UK</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-

Wider-Europe-FkMEUfQv9Z" class="Theme-NavigationLink" data-story-nav-

item="true">Wider Europe</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-

East-Asia-DYMOd23YI1" class="Theme-NavigationLink" data-story-nav-

item="true">East Asia</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-

South-Asia-5yaYKVMDM9" class="Theme-NavigationLink" data-story-nav-

item="true">South Asia</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-Sub-

Saharan-Africa-0YVrkwnTF6" class="Theme-NavigationLink" data-story-nav-

item="true">Sub Saharan Africa</a></li>

<li class="Navigation__item Theme-NavigationBarItem"><a href="#group-

Middle-East-and-North-Africa-wdCH56OJ2F" class="Theme-NavigationLink" data-story-

nav-item="true">Middle East and North Africa</a></li>

</ul>

</nav>

</div>

Solution:

Ensure content is hidden correctly with Display: none and aria-hidden=true until the menu

is activated.

DAC | Accessibility Report

Close button is obscured

When a user activates a menu, the close link is obscured.

WCAG Reference:

2.4.3 Focus Order

Understanding Focus Order |How to Meet Focus Order

(Level A)

Issue ID: DAC_Focus_Order_Issue_02

Page title: Active Citizens

URL: https://active-citizens.britishcouncil.org/global-impact-stories

Screen Shot:

When a user activates the locations menu on the page on a mobile device the close button

is hidden behind the flyout menu. The button can still be activated, but some users may not

know it is there. When the page is scrolled, the close menu link appears at the top of the

page, but this is not an expected behaviour.

Current Code Ref(s):

<a href="#nav" class="Navigation__hamburger Layout__snap--xright Layout__snap--

ycenter Display--lg-none Theme-Hamburger" aria-expanded="true" aria-

controls="navigation"><span></span><span></span><span></span><span></span><i

class="Core--srOnly">Menu</i></a>

DAC | Accessibility Report

Solution:

Ensure that users have a way of closing the menu once it is opened. Users focus should also

be trapped in the flyout menu until it is closed. They should not be able to navigate the

content on the page behind.

DAC | Accessibility Report

Focus order

The focus order of the page does not follow a logical path

WCAG Reference:

2.4.3 Focus Order

Understanding Focus Order |How to Meet Focus Order

(Level A)

Issue ID: DAC_Focus_Order_Issue_03

Page title: All

URL: https://active-citizens.britishcouncil.org/

Screen Shot:

The focus order of the page is not logical. The ‘Contact Us’ and ‘Search’ components appear

above the navigation menu on the page, but receive focus after the nav menu. The

elements on the page should receive focus in a logical manner from top to bottom, left to

right to avoid confusing users.

Current Code Ref(s):

<li>

<nav>

<ul class="nav navbar-nav"><li class="first last leaf"><a

href="/contact-us" title="">Contact us </a></li>

</ul> </nav>

</li>

<li>

<a data-target=".bc-navbar-search" class="bc-btn-search bc-

search-toggle">

</svg>

DAC | Accessibility Report

Show search </a>

<form action="/search" method="get" id="views-exposed-form-elastic-search-search-

blk" accept-charset="UTF-8"><div>

Search </label>

<input placeholder="Search" class="form-control form-text" type="text" id="edit-

search-api-views-fulltext" name="search_api_views_fulltext" value="" size="30"

maxlength="128">

</div>

<button type="submit" id="edit-submit-elastic-search" name="" value="Search"

class="btn btn-primary form-submit form-submit"><svg class="bc-svg bc-svg-search"

aria-hidden="true"><use xlink:href="#icon-search"></use></svg>Search</button>

</span>

</div>

</div></form> <a href="#navbar-search-form" class="bc-btn-close

bc-search-toggle" data-target=".bc-navbar-search">

</svg>

Close search </a>

</div>

</li>

</ul>

Keyboard only comments:

“The focus appears to miss the contact us and search links at the top of the page. It is only

when I tabbed further past the navigation menu that I realised that focus was placed on the

links after the menu. This may confuse some users as the tab order of the page is not

logical.”

Solution:

Ensure the tab order of the page is logical, from top to bottom, left to right.

DAC | Accessibility Report

Link text

There are links which encapsulate text that read incorrectly to screen reader users.

WCAG Reference:

2.4.4 Link Purpose (In Context)

Understanding Link Purpose (In Context) |How to Meet Link Purpose (In Context)

(Level A)

2.4.9 Link Purpose (Link Only)

Understanding Link Purpose (Link Only) |How to Meet Link Purpose (Link Only)

(Level AAA)

Issue ID: DAC_Links_Issue_01

Page title: Active Citizens | British Council

URL: https://active-citizens.britishcouncil.org/

https://active-citizens.britishcouncil.org/facilitator-resources/activities

Screen Shot:

There are links which encapsulate an image, heading and text. All of the components within

the <a> tag will be read as links to users who rely on audio feedback. This also applies to

the links on the activities page.

Current Code Ref(s):

DAC | Accessibility Report

<img class="img-responsive bc-landscape blur-up lazyautosizes lazyloaded"

width="300" height="169" alt="Young man holding hands outstretched and giving a

speech" src="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

100x56/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=4pNyRGh8

" data-sizes="auto" data-srcset="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

270x152/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=gdSNEAB

L 270w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

300x169/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=iPwPWNB

f 300w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

630x354/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=GrnfpiU

R 630w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

800x450/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=wdeCpSH

i 800w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

950x534/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=skZ6jWb

M 950w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

1280x720/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=3AeK14

k4 1280w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=2LJDCI

pO 1440w" sizes="470px" srcset="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

270x152/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=gdSNEAB

L 270w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

300x169/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=iPwPWNB

f 300w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

630x354/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=GrnfpiU

R 630w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

800x450/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=wdeCpSH

i 800w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

950x534/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=skZ6jWb

M 950w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

1280x720/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=3AeK14

k4 1280w, https://active-

DAC | Accessibility Report

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=2LJDCI

pO 1440w">

</div>

What we look for in our partners </h2>

</header>

<p>Read on to find out the skills and qualities needed to become an

Active Citizens partner.</p>

</div>

</a>

Screen reader comments:

“I found links on the page that appeared to be the body text. This was confusing as

everything on the page was read as a link.”

Solution:

Remove the role from the tab order of the page and assign a role of presentation to the <a>

tag and role of link and tabindex of 0 to the element which is supposed to be the link. This

will prevent all elements being read as links to screen reader users.

<a role="presentation" tabindex="-1" href="/get-involved/partner-with-us/what-we-

look-for">

<img class="img-responsive bc-landscape blur-up lazyautosizes lazyloaded"

width="300" height="169" alt="" src="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

100x56/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=4pNyRGh8

" data-sizes="auto" data-srcset="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

270x152/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=gdSNEAB

L 270w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

300x169/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=iPwPWNB

f 300w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

630x354/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=GrnfpiU

DAC | Accessibility Report

R 630w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

800x450/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=wdeCpSH

i 800w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

950x534/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=skZ6jWb

M 950w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

1280x720/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=3AeK14

k4 1280w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=2LJDCI

pO 1440w" sizes="470px" srcset="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

270x152/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=gdSNEAB

L 270w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

300x169/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=iPwPWNB

f 300w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

630x354/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=GrnfpiU

R 630w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

800x450/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=wdeCpSH

i 800w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

950x534/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=skZ6jWb

M 950w, https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-

1280x720/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=3AeK14

k4 1280w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/to_accompany_europe_article_1_credit_mat_wright_1.jpg?itok=2LJDCI

pO 1440w">

</div>

What we look for in our partners </h2>

</header>

<p>Read on to find out the skills and qualities needed to become an

Active Citizens partner.</p>

</div>

</a>

DAC | Accessibility Report

Non-descriptive links

There are links present which have no text element.

WCAG Reference:

2.4.4 Link Purpose (In Context)

Understanding Link Purpose (In Context) |How to Meet Link Purpose (In Context)

(Level A)

2.4.9 Link Purpose (Link Only)

Understanding Link Purpose (Link Only) |How to Meet Link Purpose (Link Only)

(Level AAA)

Issue ID: DAC_Links_Issue_02

Page title: Get Involved

URL: https://active-citizens.britishcouncil.org/get-involved

Screen Shot:

The social media links have no readable text element for screen reader users. Screen

reading software will attempt to read the URL to users. The links have a text element

present but this has been hidden incorrectly.

Current Code Ref(s):

<div class="rrssb" style="font-size: 13.72px; padding-right: 41.41%;"><div

class="rrssb-prefix" style="position: absolute; line-height: 3.5em;">Share

this</div><ul class="rrssb-buttons" style="padding-left: 33.88%;"><li

class="rrssb-email" style="width: 60px; max-width: 25%;"><a

href="mailto:?subject=Get%20involved%20&body=https%3A%2F%2Factive-

citizens.britishcouncil.org%2Fget-involved"><span class="rrssb-icon"></span><span

class="rrssb-text">email</span></a></li><li class="rrssb-facebook" style="width:

DAC | Accessibility Report

60px; max-width: 25%;"><a

href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Factive-

citizens.britishcouncil.org%2Fget-involved" class="popup"><span class="rrssb-

icon"></span><span class="rrssb-text">facebook</span></a></li><li class="rrssb-

twitter" style="width: 60px; max-width: 25%;"><a

href="https://twitter.com/intent/tweet?text=Get%20involved%20&url=https%3A%2F

%2Factive-citizens.britishcouncil.org%2Fget-involved" class="popup"><span

class="rrssb-icon"></span><span class="rrssb-text">twitter</span></a></li><li

class="rrssb-linkedin" style="width: 60px; max-width: 25%;"><a

href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Factiv

e-citizens.britishcouncil.org%2Fget-involved&title=Get%20involved%20"

class="popup"><span class="rrssb-icon"></span><span class="rrssb-

text">linkedin</span></a></li></ul></div>

Screen reader comments:

“There are links on the page which do not have any text for screen reader users. A sighted

colleague advsied me that they were the social media links.”

Solution:

The CSS class ‘rrssb-text’ uses visibility: hidden which will hide the text from screen reader

users. This should be removed from the CSS or ideally, use the CSS class ‘sr-only’. We would

also recommend adding more text to ensure the links are fully descriptive out of context.

Example.

<ul class="rrssb-buttons" style="padding-left: 33.88%;"><li class="rrssb-email"

style="width: 60px; max-width: 25%;"><a

href="mailto:?subject=Get%20involved%20&body=https%3A%2F%2Factive-

citizens.britishcouncil.org%2Fget-involved"><span class="rrssb-icon"></span><span

class="sr-only">Share by email</span></a></li><li class="rrssb-facebook"

style="width: 60px; max-width: 25%;"><a

href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Factive-

citizens.britishcouncil.org%2Fget-involved" class="popup"><span class="rrssb-

icon"></span><span class="sr-only">Share on facebook</span></a></li><li

class="rrssb-twitter" style="width: 60px; max-width: 25%;"><a

href="https://twitter.com/intent/tweet?text=Get%20involved%20&url=https%3A%2F

%2Factive-citizens.britishcouncil.org%2Fget-involved" class="popup"><span

class="rrssb-icon"></span><span class="sr-only">Share on

twitter</span></a></li><li class="rrssb-linkedin" style="width: 60px; max-width:

25%;"><a

href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Factiv

e-citizens.britishcouncil.org%2Fget-involved&title=Get%20involved%20"

class="popup"><span class="rrssb-icon"></span><span class="sr-only">Share on

linkedin</span></a></li></ul>

DAC | Accessibility Report

Non-Descriptive Links

There are links to non-html documents present which do not inform the user of the file

type.

WCAG Reference:

2.4.4 Link Purpose (In Context)

Understanding Link Purpose (In Context) |How to Meet Link Purpose (In Context)

(Level A)

2.4.9 Link Purpose (Link Only)

Understanding Link Purpose (Link Only) |How to Meet Link Purpose (Link Only)

(Level AAA)

Issue ID: DAC_Links_Issue_03

Page title: Activities

URL: https://active-citizens.britishcouncil.org/facilitator-resources/activities

Screen Shot:

The links to ‘Download the Active Citizens Toolkit’ does not inform users of the file type.

This may cause issues for some users as specific software may be required to read the file.

Informing users of the size of the file is also best practice for users who may be using

mobile data.

The link also opens in the same window which can create issues for keyboard only users.

DAC | Accessibility Report

Current Code Ref(s):

<a href="https://active-

citizens.britishcouncil.org/sites/default/files/active_citizens_global_toolkit_20

17-18.pdf">

<img class="img-responsive bc-landscape blur-up lazyautosizes lazyloaded"

width="300" height="169" alt="" src="https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

100x56/public/journal.jpg?itok=a7VDVuB4" data-sizes="auto" data-

srcset="https://active-citizens.britishcouncil.org/sites/default/files/styles/bc-

landscape-270x152/public/journal.jpg?itok=8kOhi8Nk 270w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

300x169/public/journal.jpg?itok=y49b7BXo 300w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

630x354/public/journal.jpg?itok=l80dVXTH 630w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

800x450/public/journal.jpg?itok=zOxmjJ8U 800w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

950x534/public/journal.jpg?itok=ueIm1Zun 950w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1280x720/public/journal.jpg?itok=H8VdT5MV 1280w, https://active-

citizens.britishcouncil.org/sites/default/files/styles/bc-landscape-

1440x810/public/journal.jpg?itok=l0zmDzyB 1440w" sizes="267px"