Embed Size (px)
Citation preview
DIG AA- UK Science Festival28th October 2020- 4th November 2020
Purpose of product: The UK Science Festivals Network website is operated by British Science Association and aims to unite and celebrate science festivals across the UK.
Prepared by: Darius Huntly, Ksenia Blake, Noah BroomeReport date: 04.11.2020
DIG AA Report v0.2
IntroductionAccessibility Standard: Web Content Accessibility Guidelines (WCAG) 2.1.The report provides details of any accessibility or design issues that need to be addressed for the site to meet WCAG 2.1 AA conformance.The executive summary may also reference additional recommendations for improving the accessibility of the site.Information about applying recommendations, methodology and further information can be found near the end of the report.Darius HuntlyDig Inclusion
Page 2 of 68
DIG AA Report v0.2
Using the audit reportThis style of audit report is spread over two documents:
● This report, which identifies issues found during the audit and offers suggested solutions.
● A spreadsheet containing the URLs or pages of the application each measured against individual WCAG 2.1 AA criterion.
A brief explanation of Dig evaluation methodology and WCAG 2.1 can be found at the end of this report under Standards and methodology.Please remember that we can only carry out a detailed assessment of a sample of pages from any one website, unless the site is very small. So, the examples we provide in the "Detailed analysis" section are just that, examples, and should not be regarded as a definitive list of all instances of a specific accessibility problem. Please use these examples to help you identify and correct all other instances of the issue.Each issue also includes related solutions. The solutions provided by Dig Inclusion are not proscriptive but are examples to help developers in creating accessible components. A full list of our solutions can be found on our solutions website. While we make every effort to identify all existing accessibility issues, the size of most commercial websites means that it is impossible for us to guarantee that we have found every problem that exists, particularly where issues may only occur on one or two pages deep within a site.
Page 3 of 68
DIG AA Report v0.2
Who may be affected?
People who are BlindBlind people use text-to-speech software called screen readers to listen to the content of the web page or application. Even if they have some vision, it’s difficult or impossible for them to follow a cursor, so they will use a keyboard rather than a mouse to navigate the screen content.It’s critical that all components are built with accessibility in mind so that blind people understand what they are for
and how to operate them.
People who are partially sightedPeople who are partially sighted may need to adapt the screen content to meet their needs. This typically means increasing the contrast and size of text and interface components so that they are easier to see.People who are partially sighted will often use magnification. Because they may only see a small part of the screen at a time, the positioning of related components e.g. form fields and labels
needs to be carefully considered.
People who are mobility impairedPeople who are mobility impaired may not be able to use a mouse. They may not be able to use a physical keyboard but are typically able to use a virtual on-screen keyboard. People with mobility impairments will often have very limited movement and
Page 4 of 68
DIG AA Report v0.2will use specialised hardware to interact with a computer. There are many devices on the market that can help people use computers and mobile phones.
People who are deafPeople who are deaf need to be able to access alternatives to audio content. Most commonly this refers to the audio track in a video presentation. Designers and developers must also consider deaf people when using audio prompts such as notification tones and provide a visual alternative.
People who are cognitively impairedDyslexia, ADHD, Autism and other cognitive attributes mean that people with these attributes may have difficulty with complex interfaces or interactions. People may also find themselves easily distracted by content that is moving or changing. Providing simple interfaces with little or no movement ensures that cognitive
distractions are kept to a minimum.
Page 5 of 68
DIG AA Report v0.2
Executive summaryKey issuesThe main barriers to disabled users are:Image text is usedImages of text could be problematic for people with vision impairments and people with cognitive impairments. The standard web text could be styled to suit the needs of the user. For example, people with dyslexia may need to adjust the word and letter spacing to better understand each word. It is not possible to style an image of text. In extreme situations, this may prevent someone from accessing the content.
Image links do not have a text alternativeThere are links which use images to inform the user about what is the destination page. However, those images do not have a text alternative. It means that screen reader users will not know what page they are about to explore when they activate one of those links. An example of such a link is the “READ MORE” link that is positioned below the “Become a member” heading on the home page.
There is no text alternative for the information contained in the Google Maps viewThere is an embedded Google Maps content which indicates the locations of the science festivals in the United Kingdom. Screen reader users are not provided with this information. The events are marked using interactive components that provide additional information about each event, but they are not keyboard accessible. It is important that the location of the event and the additional information are available on the same web page as the Google Maps content. Ideally, those should be presented in the list format under the map.
Interactive components do not indicate keyboard focusPeople with mobility impairments may not be able to use the mouse device. Therefore, they may rely on the keyboard-only to access all of the content that is on a web page. In those situations, it is important to provide a good indication of keyboard focus so that the user knows which interactive component is currently active and will not accidentally activate a component they did not intend to activate.
Against WCAG 2.1 AA criteria, the following non-conformant issues were found:_Toc55405234DIG001: Content images don’t have appropriate alt text.........................9DIG002: Decorative images should have an empty alt attribute............11
Page 6 of 68
DIG AA Report v0.2DIG003: Link images do not describe the destination page...................13DIG006: Image text is used....................................................................15DIG203: Heading order is illogical..........................................................19DIG242: Provide landmarks for page navigation....................................21DIG407: Errors are missing.....................................................................24DIG503: Links are visually distinguishable using colour alone................27DIG505: Dynamic changes or status updates are not being conveyed to assistive technologies.............................................................................28DIG601: Colour contrast of text is insufficient for users with low vision. 30MOB604: Colour contrast on UI elements is insufficient for users with low vision......................................................................................................36DIG801: Content is not keyboard accessible..........................................37DIG805: There is no indication of focus for keyboard users....................40DIG1101: Movement on the page cannot be paused, stopped or hidden...............................................................................................................43DIG1401: Link text is not descriptive of the destination page................48DIG1408: A link has a redundant title attribute......................................50DIG1305: There should be an alternative to main navigation (search or site map)................................................................................................51DIG1901: Code quality issues (parsing) mean that some of the content may not be accessible via software used by people with disabilities.....56DIG2001: Tab controls need appropriate name, role and value.............58DIG2003: Components are missing appropriate name, role or value.....60
We hope that you find the following analysis useful and informative. If you have any questions, please do get in touch – we are here to help.
Page 7 of 68
DIG AA Report v0.2
Detailed AnalysisThis section contains the analysis of the product against WCAG 2.1 AA success criteria. We have included references to each checkpoint in the guidelines, any conformance issues found with examples and screenshots, and recommendations that we feel can be made to resolve issues.
Page 8 of 68
DIG AA Report v0.2
Images
Image Alternatives
Test Result: FailSummary: All images must have a text alternative that can be read by an assistive
technology. The text alternative will describe the content or purpose of the image. Where an image is purely decorative and provides no important content then an empty alt attribute or equivalent should be provided to enable assistive technologies to ignore the image.
DIG001: Content images don’t have appropriate alt text
Issue: Some content images have inaccurate text alternatives. Content images are the types of images that present information such as a chart, a graph, an infographic or diagram. The image is important to the user's understanding of information. Content images that have no text alternative or an alternative that is inaccurate or incomplete can cause the user to make mistakes or to miss important information. Note: Content images that contain text embedded in the image will pass single-A criteria as long as they have a text alternative that matches the image text. However, image text will not pass WCAG success criterion 1.4.5: Images of text (AA). Image text cannot be used if AA conformance is required.
Severity: High
Examples:
Page 9 of 68
DIG AA Report v0.2
UKSFN-DIG001-03: Google Maps content does not have a text alternative. This could be addressed by providing a list of events with their locations and the additional information that is available when clicking on the event pin elements.
(AP001, AP002) [Our Members, Swansea Science Festival]
WCAG 2.1 ref(s):
○ 1.1.1 Non-text Content (Level A) [text-equiv-all]
Affected users:
○ blind○ low-vision○ cognitively-impaired
Impact on users:
Screen reader users rely on text alternatives to make sense of the images that are displayed on the screen. Without accurate text alternatives, users who are unable to see them may miss important information if it is not included in the alt attribute or described in nearby text. Another issue can be that overly verbose text alternatives increase reading time and the amount of time a user needs to spend on a page.
Related Solutions:
○ AP001: Ensure alt attributes for all <img> elements are provided.
○ AP002: Ensure alt attributes accurately describe the image.○ AP003: Ensure logo alt text represents the brand accurately.○ AP053: Ensure CSS images have a text alternative
Page 10 of 68
DIG AA Report v0.2
DIG002: Decorative images should have an empty alt attribute
Issue: Decorative images are generally included for branding or visual engagement or design but they do not provide any information that the user needs to understand and if they were removed there would be no impact on the user's understanding of the surrounding content. If an image is interactive in any way (used as a link or button), then its function is not decorative. Decorative images may include background images, supplementary icons, borders and hero images. Decorative images need no text alternative. Adding text alternatives to a decorative image will cause that text to be read to a screen reader user and it may take them some time to realise that the description of the image is not helpful or useful.
Severity: Low
Examples:
UKSFN-DIG002-01: Each link on the Latest page has a decorative image that is associated with it. Those images need an empty `alt` attribute (`alt=””`) so that the screen reader software can recognise them as being decorative. (AP005) [Latest]
WCAG 2.1 ref(s):
○ 1.1.1 Non-text Content (Level A) [text-equiv-all]
Page 11 of 68
DIG AA Report v0.2
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users:
The alt attribute in HTML supports disabled users by providing a description of the image. This can be critical when the image contains important information or content, or when the image is a link (in which case the destination page should be described rather than the image content). Decorative images such as the ones shown in the examples need to have an empty alt attribute (alt="") otherwise screen readers may attempt to read the filename for the image which is not often useful, and potentially confusing. An empty alt attribute lets text to speech software (screen readers) know that the image has no significant content and ignores it.
Related Solutions:
○ AP005: Ensure decorative images have a blank alt attribute.
Page 12 of 68
DIG AA Report v0.2
DIG003: Link images do not describe the destination page
Issue: When an image is used as a link or as a functional component, it is the purpose of the link that needs to be described and not the appearance of the image. For example, a link to the home page may use a house icon. An appropriate text alternative in such an instance would be "Home page" and not "House icon". Note: Link images that contain text embedded in the image will pass single-A criteria as long as they have a text alternative that matches the image text. However, image text will not pass WCAG success criterion 1.4.5: Images of text (AA) so cannot be used if AA conformance is required.
Severity: High
Examples:
UKSFN-DIG003-01: There is an image link with the text "Read more". The graphic has an empty `alt` attribute. It means that screen reader users will not know what the destination page of that link is. (AP002) [Homepage]
WCAG 2.1 ref(s): ○ 1.1.1 Non-text Content (Level A) [text-equiv-all]○ 2.4.4 Link Purpose (In Context) (Level A) [link-purpose-in-
context]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Page 13 of 68
DIG AA Report v0.2
Impact on users: Software used by people who are blind rely on image alt attributes to describe the destination page or underlying function. If the alt attribute is empty or describes the appearance of the image rather than the destination, then there is little or no information available to a non-sighted user about the link destination or purpose.
Related Solutions:
○ AP001: Ensure alt attributes for all <img> elements are provided.
○ AP002: Ensure alt attributes accurately describe the image.○ AP003: Ensure logo alt text represents the brand
accurately.○ AP004: Ensure alt text for linked images accurately
described the destination.
Page 14 of 68
DIG AA Report v0.2
Images of text
Test Result: FailSummary: Images of text shouldn’t be used unless the equivalent function or appearance
can’t be achieved using plain text. This is because image text isn’t as clear as plain text and pixelates when magnified. Additionally, users cannot control the foreground or background colour of the text using the browser or special tools.
DIG006: Image text is used
Issue: People with visual impairments may not need to use a screen reader, but they may need to change the appearance of text by making it larger or using software to change the colour contrast of it. People with dyslexia may want to change the colour of the text to make it easier for them to read. Image text (text that is part of an image), cannot be manipulated by the user. It cannot be made larger, or the contrast changed. Image text cannot be easily read by people with visual impairments who may need to magnify the text to be able to read it. In addition, the text cannot be cut and pasted into another document to make it easier to read, and it cannot be changed (font size, type, colour, background colour) in the browser settings to meet user needs. A common assumption is that almost everyone who is visually impaired uses a screen reader which can read the alt attribute for an image and so image text isn’t much of an issue. But many visually impaired users have some useful vision, do not use a screen reader, and will prefer to increase the text size through the browser or use another piece of software called a screen magnifier.
Severity: High
Examples:
Page 15 of 68
DIG AA Report v0.2
UKSFN-DIG006-01: There is an image with the text "Read more". Users with low vision who need to magnify the text may struggle to read what is in the image. It is because the png format image that is used on the website pixelates when the content is zoomed in. (AP035) [Homepage, Our Members, Swansea Science Festival]
Page 16 of 68
DIG AA Report v0.2
UKSFN-DIG006-02: There is an image with the text "Submit". It is used on a submit button. Users with low vision who need to magnify the text may struggle to read what is in the image. It is because the png format image that is used on the website pixelates when the content is zoomed in.
(AP035) [About Us, Partnerships and Opportunities, Join the Network, Contact Us]
WCAG 2.1 ref(s):
○ 1.4.5 Images of Text (Level AA) [images-of-text]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users:
Users with visual impairments may not be able to read the information conveyed in the image text.
Related Solutions:
○ AP035: Do not use image text in place of text content.
Page 17 of 68
DIG AA Report v0.2
Multimedia
Audio-only files have a text alternative
Test Result: PassSummary: Sound files need to have a text alternative (typically a transcript) that can be
opened and read by people who have hearing impairments.
Video-only files have a text or audio alternative
Test Result: PassSummary: Video content needs either to have a text alternative (typically a transcript) that
can be opened and read by people who are blind, or an audio track that presents an equivalent to the visual information in the video.
Videos with an audio track have captions and audio description
Test Result: PassSummary: Where video content has an audio track that conveys information such as
speech or sounds that are important for understanding the content, captions are provided for people who are hearing impaired, and an audio description is provided for people who have visual impairments. Captions are also required for live video content for AA conformance, but audio description is not.
Audio doesn’t play automatically or can be controlled
Test Result: PassSummary: Audio that play when a page opens or at any other time unexpectedly can
interfere with a screen reader user’s ability to listen to the page. Unexpected sound can be distracting and make screen reader operation difficult. Where sounds play automatically, there must be a control that allows the user to turn the sound off or adjust the volume independently of the system volume.
Page 18 of 68
DIG AA Report v0.2
Structure
Headings are identified using appropriate markup
Test Result: FailSummary: Headings within the page content are marked up using appropriate H1-H6
markup.
DIG203: Heading order is illogical
Issue: Some pages feature heading content which does not appear in a logical order, (for example, content that is dependent on the previous heading at level 4 might have a heading at level 2), which to a non-sighted user would give the impression that the content is not related.
Severity: Advisory
Examples:
UKSFN-DIG203-01: Heading level 1 is missing. Screen reader users generally expect the first heading on the page to be a heading at level 1. It helps users find the start of the main content. (AP068) [About Us, Partnerships and Opportunities, Join the Network, Contact Us, Latest]
Page 19 of 68
DIG AA Report v0.2
WCAG 2.1 ref(s):
○ 1.3.1 Info and Relationships (Level A) [info-and-relationships]○ 2.4.6 Headings and Labels (Level AA) [headings-and-labels]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users:
Screen reader users use heading markup to understand the importance of information on the page and frequently use them as a form of navigation. If content is presented in an illogical way, it can be very difficult for non-sighted users to make sense of the content based on the heading levels alone.
Related Solutions:
○ AP007: Headings should be used to provide structure and context.
○ AP068: Headings should follow a hierarchical structure.
Data tables are marked up in a manner that makes the information and data relationships clear
Test Result: PassSummary: Data tables must be constructed in a way that makes the relationship between
each cell clear and unambiguous to a screen reader user. Simple data tables must use th markup to identify header cells. More complex tables where multiple headers apply to one cell, id, scope and headers markup must be used to explicitly associate the data in the cell with the relevant headers so that the relationship is clear to screen reader users.
Page 20 of 68
DIG AA Report v0.2
Other structural markup is used appropriately
Test Result: FailSummary: Lists, Blockquotes and quotes have appropriate structural markup, and this
markup is not used for visual formatting such as indenting text.
DIG242: Provide landmarks for page navigation
Issue: Landmarks allow for users to skip or navigate to certain types of content. Not having landmarks slows the user journey and can cause frustration and confusion when trying to find specific content.
Severity: Advisory
Examples:
UKSFN-DIG242-01: The web page has three landmarks- banner, navigation, and footer. It would also benefit from having the main landmark. Screen reader users can use keyboard shortcuts to move from one landmark to another. It is a quick and efficient way to bypass a repeatable block of content such as the navigation in the banner section. If there was the main landmark, they would be able to do so and land on the main section of the page.
(AP235) [Homepage, About Us, Partnerships and Opportunities, Join the Network, Our Members, Contact Us, Latest, Members List, Swansea Science Festival]
Page 21 of 68
DIG AA Report v0.2
WCAG 2.1 ref(s):
○ 1.3.1 Info and Relationships (Level A) [info-and-relationships]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users:
Landmarks allow users of assistive technology to easily identify the purpose of page content and traverse the page. When this is missing or not marked up correctly, they may be unable to find content or understand its purpose.
Related Solutions:
○ AP213: Use the Region Landmark for specialised components.
○ AP235: Provide landmarks to help with navigation of the page
Page 22 of 68
DIG AA Report v0.2
Forms
Form controls have accurate and correctly marked up labels
Test Result: PassSummary: Form labels must be clear and programmatically associated with the relevant
form. Mandatory fields must be clearly indicated within the label or using aria-required. Where the purpose of a radio button within a group is not clear from the label alone (e.g. a list of yes, no answers), a fieldset and legend provide context.
Instructions for completing forms are accurate and correctly positioned
Test Result: PassSummary: Instructions for completing forms should be clear, concise and positioned
before the form, or the specific field to which it relates.
Page 23 of 68
DIG AA Report v0.2
Error Handling
Errors are identified in text and where possible provide advice for correction
Test Result: FailSummary: Where input errors can be detected, the user is informed. The information
must identify the field in error, by its visible label, and provide clear information about the type of error. For instance, if a field cannot be left empty, or a specific format is required, then the user must be given this information, rather than just being told that errors exist.
DIG407: Errors are missing
Issue: No errors are present when the user enters an incorrect format or does not fill out the required field.
Severity: Advisory
Examples:
UKSFN-DIG407-01: The contact us form appears over several pages. There is no validation, meaning that the form can be submitted blank. It could create issues if the entered data was incorrect.
(AP231) [About Us, Partnerships and Opportunities, Join the Network, Contact Us]
Page 24 of 68
DIG AA Report v0.2
WCAG 2.1 ref(s): ○ 3.3.1 Error Identification (Level A) [error-identification]
Affected users: ○ blind○ low-vision○ cognitively-impaired○ deaf○ motor-impaired
Impact on users: Users may be unaware that an error has occurred or how to correct it.
Related Solutions: ○ AP231: Ensure error messages are provided and focus is managed
Page 25 of 68
DIG AA Report v0.2
Users are given the opportunity to check that forms that cause a legal or financial commitment or that delete data are correct before submission
Test Result: PassSummary: A mechanism must be provided to help users prevent errors in the submission
of information that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses.
Page 26 of 68
DIG AA Report v0.2
Sensory Dependency
Understanding or operation of content is not dependent on sensory ability
Test Result: FailSummary: Navigation or understanding of content isn’t dependent on a user possessing a
sensory ability such as hearing or sight. Referring to the size, colour, shape or orientation of a piece of content such as the position of a button on the screen, or using a sound to prompt a response from the user may present a barrier to people who do not possess a specific ability.
DIG503: Links are visually distinguishable using colour alone
Issue: The only visual cue used to differentiate a link from surrounding text is the colour.
Severity: Advisory
Examples:
UKSFN-DIG503-01: In the footer section, there are green links which do not have any visual clues that would help to distinguish them from a standard text (British Science Association and [email protected]). Links at least need to have at least the 3:1 contrast ratio with the surrounding static text. Ideally, they should also be underlined. (AP026) [Footer]
WCAG 2.1 ref(s): ○ 1.4.1 Use of Color (Level A) [use-of-color]
Affected users: ○ low-vision○ cognitively-impaired
Impact on users: People who cannot perceive colour or have difficulty with vision will struggle to identify links in a page.
Related Solutions: ○ AP026: Links should use at least 2 visual cues.
Page 27 of 68
DIG AA Report v0.2
DIG505: Dynamic changes or status updates are not being conveyed to assistive technologies
Issue: Content on the screen changes in response to user interaction, but there is no non-visual indication that a change has occurred. Screen reader users who depend on non-visual prompts may be expecting notification of a change may be confused by or not adequately informed of important changes.
Severity: High
Examples:
UKSFN-DIG505-01: Activating the elements that change the carousel slide do not provide a status update to screen reader users. For more information on how to make the carousel more accessible, please see the example from the below link. https://www.w3.org/TR/wai-aria-practices-1.2/examples/carousel/carousel-1.html[Homepage]
WCAG 2.1 ref(s):
○ 1.3.3 Sensory Characteristics (Level A) [sensory-characteristics]
○ 4.1.3 Status Messages (Level AA) [status-messages]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on Screen reader users may be left waiting for notification of a change that
Page 28 of 68
DIG AA Report v0.2
users: has already occurred, or they may be left searching for an update that they expected to see. This will result in slower navigation and some uncertainty about the status of some content.
Related Solutions:
○ AP044: Ensure changes in the page are communicated to assistive technology.
○ AP061: Dynamic changes in content should use modals.○ AP129: Ensure dynamic search results are associated and
announced to assistive technology.
Page 29 of 68
DIG AA Report v0.2
Contrast
Foreground and background colour combinations provide adequate contrast
Test Result: FailSummary: Text needs to have a sufficient contrast with its background so that people with
low vision can read it without having to use special software.
DIG601: Colour contrast of text is insufficient for users with low vision
Issue: Some text does not meet minimum contrast requirements against the background colour and may be difficult for some users with vision impairments to read and interpret.
Severity: High
Examples:
UKSFN-DIG601-01: Dark blue text over light blue background (e.g. the read more image link) has a contrast ratio 2.2:1. It is below the minimum requirement of 4.5:1. (AP027, AP028) [Homepage]
Page 30 of 68
DIG AA Report v0.2
UKSFN-DIG601-02: Blue text over white background has a contrast ratio of 4.05:1. It needs to be increased to at least 4.5:1 to meet the minimum requirements.(AP027) [About Us, Partnerships and Opportunities, Join the Network, Our Members, Contact Us, Swansea Science Festival]
UKSFN-DIG601-03: Colour contrast on red text is as low as 3.39. It is below the required contrast of 4.5:1. This is particularly serious as it is supposed to be noticeable.
(AP027) [Our Members]
Page 31 of 68
DIG AA Report v0.2
UKSFN-DIG601-04: Tab titles have a contrast ratio of 3.55, which is below the minimum requirement of 4.5:1. (AP027) [Latest]
UKSFN-DIG601-05: Terms of use text has a low contrast ratio of 1.28, which is far below the minimum requirement of 4.5. (AP027) [Swansea Science Festival]
Page 32 of 68
DIG AA Report v0.2
UKSFN-DIG601-06: White text over red background has a contrast ratio of 3.8:1. It needs to be increased to at least 4.5:1. (AP027) [Our Members]
UKSFN-DIG601-07: Green text over grey background has a contrast ratio of 3.62:1. It needs to be increased to at least 4.5:1. (AP027) [Header]
UKSFN-DIG601-08: Blue text in the footer section has a contrast ratio of 3.55:1 against the grey background. The minimum requirement is 4.5:1. (AP027) [Footer]
Page 33 of 68
DIG AA Report v0.2
UKSFN-DIG601-09: Parts of green text over image background has a contrast ratio of 1.11:1. It is below the minimum requirement of 3:1 (AP028) [About Us]
UKSFN-DIG601-10: Contrast ratio of the green text used in the calendar on both the numbers and on the letters is 3.6:1. The minimum requirement is 4.5:1 (AP027) [Date picker]
WCAG 2.1 ref(s): ○ 1.4.3 Contrast (Minimum) (Level AA) [contrast-minimum]
Affected users: ○ low-vision○ cognitively-impaired
Impact on users: Users who have low vision may have difficulty reading text that is not of sufficient contrast.
Page 34 of 68
DIG AA Report v0.2
Related Solutions:
○ AP027: Ensure contrast ratio for small text exceeds 4.5:1.○ AP028: Ensure contrast ratio for large text exceeds 3:1.○ AP091: Ensure contrast ratio for small text exceeds 7:1
(Level AAA).○ AP092: Ensure contrast ratio for large text exceeds 4.5:1
(Level AAA).
Page 35 of 68
DIG AA Report v0.2
MOB604: Colour contrast on UI elements is insufficient for users with low vision
Issue: UI elements such as icons do not have sufficient contrast, do not meet minimum contrast requirements and may be difficult for some users with vision impairments to see.
Severity: High
Examples:
UKSFN-MOB604-01: The elements which change carousel slides do not meet the minimum contrast ratio requirement of 3:1. It means that users with vision impairments may find it difficult to distinguish them from the background. (AP029) [Homepage]
WCAG 2.1 ref(s): ○ 1.4.11 Non-text Contrast (Level AA) [non-text-contrast]
Affected users: ○ low-vision○ cognitively-impaired
Impact on users: Users who have low vision may have difficulty viewing UI elements and have difficulty understanding or interacting with the page.
Related Solutions: ○ AP029: Ensure contrast ratio for UI icons exceeds 3:1.
Page 36 of 68
DIG AA Report v0.2
Resize text
Text sizes can be changed without loss of content
Test Result: PassSummary: Text size can be increased by 200 percent using native browser controls
without text becoming obscured or lost.
Keyboard and Focus
All components can be operated using keyboard-only controls
Test Result: FailSummary: All components of the page are keyboard operable, and all parts of the page
can be reached using keyboard-only controls. There must be no part of the page where a keyboard-only user would get stuck (e.g. by tabbing into an area on the page and not being able to move away).
DIG801: Content is not keyboard accessible
Issue: Some items within the content cannot be operated using only the keyboard and require a pointing device such as a mouse.
Severity: Critical
Examples:
Page 37 of 68
DIG AA Report v0.2
UKSFN-DIG801-01: There are interactive components which allow changing slides in the carousel. It is possible to operate them using the mouse device, but it is not possible to operate them using the keyboard only. As such, a wide range of keyboard-only users will not be able to choose the slide they would like to. (AP071) [Homepage]
UKSFN-DIG801-03: Month edit buttons in the date picker component are neutral markup and do not gain keyboard focus. It is problematic for keyboard-only users.(AP163) [Date picker]
Page 38 of 68
DIG AA Report v0.2
UKSFN-DIG801-04: Keyboard users need to be able to open and close the event pins on the Goggle Maps content.(AP071, AP072, AP163) [Our Members]
WCAG 2.1 ref(s): ○ 2.1.1 Keyboard (Level A) [keyboard]
Affected users: ○ blind○ low-vision○ cognitively-impaired○ motor-impaired
Impact on users: Users who are unable to use a pointing device (such as people with motor control impairments, those with limb difference or who rely on keyboard-only or switch controls) will be unable to access or use some of the controls on the page.
Related Solutions:
○ AP071: Avoid using neutral markup for interactive elements.
○ AP072: Ensure interactive elements gain keyboard focus.○ AP163: All interactive content can be reached and
operated using keyboard controls alone
Page 39 of 68
DIG AA Report v0.2
For keyboard-only users, there is a clear indication of focus for active items
Test Result: FailSummary: Keyboard focus indicators for links and form controls must be allowed to be (or
made) visible so that people who can't use a mouse can see which link or control has focus.
DIG805: There is no indication of focus for keyboard users
Issue: It is not possible to track all the components on the page due to the lack of indication of focus.
Severity: Critical
Examples:
UKSFN-DIG805-01: None of the interactive components on the page indicates keyboard focus. It means that a wide range of users will find it challenging to track their location when they navigate through the content using the Tab keyboard key. (AP033) [Homepage, About Us, Partnerships and Opportunities, Join the Network, Our Members, Contact Us, Latest, Members List, Swansea Science Festival]
WCAG 2.1 ref(s):
○ 2.4.7 Focus Visible (Level AA) [focus-visible]
Affected users: ○ low-vision○ cognitively-impaired
Page 40 of 68
DIG AA Report v0.2○ motor-impaired
Impact on users:
Users who use keyboard controls (or switches) to navigate a page cannot see which of the controls (links, forms and other interactive elements) has focus. This means that they are likely to have significant difficulty navigating and using the page. Even if they can work out where they are, this will take time to do and may result in incorrect entry.
Related Solutions:
○ AP033: Avoid removing outline on focus.○ AP034: Ensure clear indication of focus is provided.○ AP114: The focus state for interactive components meets or
exceeds a contrast ratio of 3:1.
Page 41 of 68
DIG AA Report v0.2
Enough Time
Users can control page updates, refreshes or timeouts
Test Result: PassSummary: People with disabilities may take longer to complete tasks so it’s important that
they are given enough time to do what’s required without interruption from partial or full page refreshes or from session timeouts.
Page 42 of 68
DIG AA Report v0.2
Pause, Stop, Hide
Moving, blinking or scrolling content can be paused or hidden by users
Test Result: FailSummary: Movement on the page can be especially distracting to people with certain
cognitive disabilities and hinder them completing tasks. Therefore, content that automatically moves or updates visually in any way must have a control that allows users to stop or pause the movement or hide the content altogether.
DIG1101: Movement on the page cannot be paused, stopped or hidden
Issue: Content that is moving and cannot be paused, stopped or hidden is a severe distraction for some users who then have difficulty using the rest of the information on the page.
Severity: High
Examples:
UKSFN-DIG1101-01: There is an image carousel which rotates graphics. It is not possible to pause the movement. Some users may find it challenging to read and understand the content if it moves automatically. (AP036) [Homepage]
WCAG 2.1 ref(s): ○ 2.2.2 Pause, Stop, Hide (Level A) [pause-stop-hide]
Affected users: ○ cognitively-impaired○ motor-impaired
Page 43 of 68
DIG AA Report v0.2
Impact on users: If content cannot be stopped, paused or hidden, it can cause users with balance issues to experience dizziness. Other users may find the content distracting and prevent them from concentrating on the content of the page.
Related Solutions:
○ AP036: Ensure a method of stopping or hiding moving content is provided.
Page 44 of 68
DIG AA Report v0.2
Flashing Content
Any flashing content is within safe limits
Test Result: PassSummary: Flashing content can cause seizures in people with photosensitive epilepsy;
therefore, content must not include anything that Flashes more than three times per second.
Page 45 of 68
DIG AA Report v0.2
Navigation
It is possible to bypass blocks of content that are repeated across multiple pages
Test Result: PassSummary: Repetitive content such as navigation can take a long time to navigate for
certain groups of users, for example, keyboard-only users who use the tab key to navigate, may be forced to ‘tab’ through every item in the menu before they reach the content of the page. A mechanism to bypass the navigation allows users to reach the content much more quickly.
Page titles accurately describe page content
Test Result: PassSummary: Page titles introduce screen readers to the contents of the page. For this
reason, concise and relevant page titles must be used for each page on the site.
Page 46 of 68
DIG AA Report v0.2
Order
Content has a meaningful sequence
Test Result: PassSummary: The order that paragraphs, lines and words appear visually is the same as how
they are read by screen readers. CSS, tables and read order issues within non-HTML documents can affect the order in which text is read.
Components that receive focus do so in a logical order
Test Result: PassSummary: Screen reader and Keyboard-only users should be able to move through the
page in a logical order from one component to the next. The order that components receive focus shouldn’t be confusing or unpredictable. For this reason, HTML forms should be tested with keyboard-only controls and in general the HTML attribute tabindex should be avoided as this is known to cause issues with tab order.
Page 47 of 68
DIG AA Report v0.2
Links and Buttons
The destination or purpose of links can be programmatically determined
Test Result: FailSummary: Link text should be clear and informative, and the same link text should not be
used multiple times on the same page to link to different pages unless the difference can be determined by contextual structure. If linking to something other than a web page, the link text should make that clear.
DIG1401: Link text is not descriptive of the destination page
Issue: **Image links**: As highlighted in 3.1 (images) there are issues with images not having the appropriate text alternative that describes the destination page. **Text links**: The page features text links that don’t make sense in context. **PDF links**: Where a link is to a PDF document, this should be explicitly stated in the link, preferably along with the file size.
Severity: Medium
Examples:
UKSFN-DIG1401-01: Links in the date picker only say 16 and not the day or month. Low vision and keyboard users will not know what the destination of the link is. (AP039) [Date picker]
WCAG 2.1 ref(s):
○ 2.4.4 Link Purpose (In Context) (Level A) [link-purpose-in-context]
Affected users: ○ blind
Page 48 of 68
DIG AA Report v0.2○ low-vision○ cognitively-impaired
Impact on users:
Links will seem ambiguous for screen reader users. Without any context for an ambiguous link, users may follow the wrong link and end up on a page (or perform and action) that they did not expect.
Related Solutions:
○ AP039: Do not use ambiguous text for links where no additional context is given.
○ AP040: Ensure links are uniquely distinguishable without additional text.
○ AP054: Ensure information about download files is provided to screen reader users.
○ AP120: Do not use empty aria-label attributes○ AP122: Do not hide non-decorative content from assistive
technology
Page 49 of 68
DIG AA Report v0.2
DIG1408: A link has a redundant title attribute
Issue: A link has both the original text and a title attribute that duplicates the original text.
Severity: Advisory
Examples:
UKSFN-DIG1408-01: The title attribute for each read more link is duplicating the link text that is before it (including the <br> tag). This causes the screen reader to repeat content unnecessarily. (AP019) [Partnerships and Opportunities]
WCAG 2.1 ref(s): ○ 1.3.1 Info and Relationships (Level A) [info-and-relationships]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users: When both the text and title attributes are read by screen readers, it duplicates information unnecessarily. This could cause confusion to some users and will lengthen the user journey.
Related Solutions:
○ AP019: Avoid using the title attribute inappropriately.
Page 50 of 68
DIG AA Report v0.2
Multiple Ways
There is more than one way of finding content within a set of web pages
Test Result: FailSummary: The use of main navigation controls can be difficult for people with certain
disabilities, therefore alternative ways must be available. The provision of a search facility helps users to find content on a website quickly. A sitemap can also prove to be a useful navigation feature.
DIG1305: There should be an alternative to main navigation (search or site map)
Issue: The site does not have a search facility or site map that can be used by users if they are having difficulty with the main navigation, or if they prefer to use alternative means of finding relevant content.
Severity: Medium
Examples:
UKSFN-DIG1305-01: There is no alternative to the main navigation. Users will need either a search facility or a sitemap to help them find a web page without using the main navigation. [Homepage]
WCAG 2.1 ref(s):
○ 2.4.5 Multiple Ways (Level AA) [multiple-ways]
Affected users:
○ blind○ cognitively-impaired○ low-vision○ motor-impaired
Page 51 of 68
DIG AA Report v0.2
Impact on users:
If users are having difficulty finding content using the main navigation, then they are likely to want to search for information or use a sitemap which displays all of the pages on of the site in a single view. If they are unable to use such an alternative, then they may not be able to reach or find relevant information.
Page 52 of 68
DIG AA Report v0.2
Language
The human language of each page is identified
Test Result: PassSummary: For screen reader software to be able to use the correct speech options to read
the page content, the default human language of the page must be identified and set within the document header e.g. <lang="en">.
Changes in the human language in content are identified
Test Result: PassSummary: When there is a change to the primary language on the page (for example, a
phrase in French appearing on a page with a primary language of English), the change in language must be identified programmatically so that screen readers can change the speech algorithm and read text correctly.
The language of the page content is clear
Test Result: PassSummary: Throughout the pages of content the language used is clear and effective,
providing information without being overly complicated and being of a reasonable length.
Page 53 of 68
DIG AA Report v0.2
Predictability
When a component receives focus or has its value changed, there is no unexpected change of context
Test Result: PassSummary: On focus: When a component of a page receives focus, there is no
unpredictable action that might make the user disorientated. For example, opening a pop-up window when a user moves focus to a link is likely to be unexpected, and for non-sighted screen reader users, it can be very disorientating. On input: When a user changes the value of a control to another value (such as viewing options in a drop down menu), this must not fire an event that causes the user to become disorientated; like opening a new window, or moving focus to a different part of the page unexpectedly.
Page 54 of 68
DIG AA Report v0.2
Consistent Identification and Operation
Components that can receive focus are identified consistently
Test Result: PassSummary: Interactive elements or components with the same functions across several
pages must be identified consistently. In addition, users should be able to recognise and use active elements in line with their purpose: links have destinations, buttons perform actions. Without consistency, users may make mistakes that waste time and cause frustration.
Page 55 of 68
DIG AA Report v0.2
Parsing
Markup is clear of validation errors that create accessibility issues
Test Result: FailSummary: Parsing errors such as incomplete tags for elements, duplicate IDs or poorly
nested attributes may cause accessibility issues for users of certain assistive technologies, for example failing to close a list in markup may render the list invisible to screen readers.
DIG1901: Code quality issues (parsing) mean that some of the content may not be accessible via software used by people with disabilities
Issue: Some of the code contains errors which may cause the page to be read incorrectly or not as intended. Visually a page can look fine and work without errors caused by code quality issues. However, for people depending on non-visual cues or using specialist browsers or software that depend on valid code, errors in code can cause issues that are difficult to predict.
Severity: Medium
Examples:
UKSFN-DIG1901-01: The code from all the pages across the sample has been entered into a validator to check for code quality. Across the pages, there were issues that may affect accessibility. The highest number of issues was 38, and the lowest was 1. These issues include duplicate ID attributes, inappropriately nested elements, unclosed elements and
Page 56 of 68
DIG AA Report v0.2
stray end tags. (AP161) [Homepage, About Us, Partnerships and Opportunities, Join the Network, Our Members, Swansea Science Festival, Contact Us, Latest, Members List]
WCAG 2.1 ref(s):
○ 4.1.1 Parsing (Level A) [parsing]
Affected users: ○ blind○ low-vision○ cognitively-impaired○ deaf○ motor-impaired
Impact on users:
Due to the vast array of technologies used by people with a wide range of disabilities, it is difficult to predict when a code quality issue is going to have a real-world negative impact. However, by eliminating parsing errors (such as duplicate IDs and poor nesting of elements), we can be confident that the product will work properly with tools designed for digital access.
Related Solutions:
○ AP161: Parsing errors in code need to be resolved
Page 57 of 68
DIG AA Report v0.2
Name, Role and Value
Every interactive component has a name, role and value
Test Result: FailSummary: Interactive components of the page including links, forms, tabs, buttons, and
accordions must have a name, role and value that can be read by assistive technologies so that users know what components are, what they do and how to interact with them.
DIG2001: Tab controls need appropriate name, role and value
Issue: Tab controls are often used to present discrete sections of data within the same real estate. For sighted users, tab controls are usually easy to recognise and their function is normally obvious. For non-sighted users, tabs are typically presented as links or sometimes as buttons, headings or divs, but the links have no link function. Instead, new content appears without the user’s knowledge and they are left guessing what has happened when a link has not taken them to a new destination. It is only by navigating past the other links in the tab group that they are able to discover the changed content, but it is not clear to a non-sighted user whether this is actual dynamic tab content or static content.
Severity: High
Examples:
Page 58 of 68
DIG AA Report v0.2
UKSFN-DIG2001-01: There is a component which switches the link view between All, Events, and The Network. They act as tab control. However, they have the role of a button. Screen reader users aren't made aware that content is changing below these controls because they do not have the correct tab roles. For an accessible design pattern for tab controls, please visit the following link: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html(AP055) [Latest]
WCAG 2.1 ref(s):
○ 4.1.2 Name, Role, Value (Level A) [name-role-value]
Affected users:
○ blind○ low-vision○ cognitively-impaired
Impact on users:
Non-sighted users, in particular, have difficulty with inaccessible tab controls. The user must be able to recognise the control and have an idea of how to operate it. If they do not, then they are unlikely to appreciate that it is operable and exposes content that was not previously visible. Additionally, keyboard-only controls and predictable operation can be an issue with inaccessible controls.
Related Solutions:
○ AP055: Ensure tab controls have the correct markup.
Page 59 of 68
DIG AA Report v0.2
DIG2003: Components are missing appropriate name, role or value
Issue: Scripted page elements do not have an appropriate Name, Role, or Value. This information is critical for users to be able to interact with the page component effectively.
Severity: High
Examples:
UKSFN-DIG2003-01: The image carousel does not have an accessible role and an accessible name. The `aria-roledescription="carousel"` attribute would be the most suitable.
For a reference on how to make this component accessible, please see the below link: https://www.w3.org/TR/wai-aria-practices-1.2/examples/carousel/carousel-1.html# [Homepage]
Page 60 of 68
DIG AA Report v0.2
UKSFN-DIG2003-02: A screen reader user won't know which page they are currently on. Use aria-current="page" to indicate the current page and this will be announced by the screen reader. (AP060) [Latest]
WCAG 2.1 ref(s): ○ 4.1.2 Name, Role, Value (Level A) [name-role-value]
Affected users: ○ blind○ low-vision○ cognitively-impaired
Impact on users: Users who rely on assistive technologies, such as screen readers, need to know the identifying name, purpose and current value of any component so that they are confident that they have identified the component correctly, and understand its role and current value. HTML components have this information built-in, for example, a properly labelled ‘First name’ input field includes the following information: **Name**: First Name **Role**: Input; type text **Value**: Blank (or the actual value inputted by the user). Screen readers are designed to convey all this information back to the user. Any bespoke scripted component also needs to provide this information programmatically and remember to include any updated user-inputted value.
Related Solutions:
○ AP015: Ensure Switchable buttons have correct aria markup.
○ AP051: Ensure slider has correct aria markup.○ AP069: Buttons that affect another element should inform
assistive technology of its relationship.○ AP171: Ensure listbox components have correct aria
markup.
Page 61 of 68
DIG AA Report v0.2
FRAME and IFRAME elements are correctly identified
Test Result: PassSummary: Screen readers announce the presence of FRAME and IFRAME elements when
encountering them. If no better information is available, they will identify the frame by the URI of the page within it, which is most probably not understandable to humans. These elements need a NAME and a TITLE attribute which give a clear indication of the content to be found in each frame.
Page 62 of 68
DIG AA Report v0.2
Mobile Specific
Websites should respond appropriately on mobile devices
Test Result: PassSummary: Websites should be designed in such a way that they adapt to the requirements
of being on a mobile device. This means that content can be viewed clearly and remain interactive.
Page 63 of 68
DIG AA Report v0.2
Adaptability
Content must remain consistent but present itself clearly across different contexts.
Test Result: PassSummary: All content that is presented must adjust itself to the height and width of a
page. Furthermore, content must be presented in a clear and consistent manner so that it can be understood.
Page 64 of 68
DIG AA Report v0.2
Standards and methodologyThis audit measures web products against the Web Content Accessibility Guidelines (WCAG) 2. 1 . The level of conformance tested in this document is AA.We also include any additional information that we feel may go beyond conformance to further reduce risk of pages being inaccessible to some groups of users. One example of this is where we recommend that a transcript of video is always provided to ensure access by people who are deaf-blind. WCAG 2.1 AA conformance does not require this.Our audit process is based on a sample pages that are thoroughly checked for all AA non-conformances. It is important that these pages are chosen to include all the main content types that a person may encounter elsewhere on the website. We will liaise with a member of your team to ensure that sufficient pages of the right type are chosen that truly representative of the site.The audit process begins with a detailed page-by-page analysis of all the pages in the sample to ensure that all non-conformances are detected. We use browser tools, assistive technologies such as screen readers, and code inspection to test the site against WCAG requirements.We don’t use automated tools in our audits to “spider” large numbers of pages as they are typically wildly inaccurate and of very limited use. We estimate that only 5% of accessibility issues can be detected accurately without any form of manual verification.We then consolidate that information into this document and provide examples and screenshots to illustrate where the non-conformance occurs and suggest how it should be fixed.It is very important to us that you get the most out of our report, so we always recommend that we follow up the report with a call to walk you through our findings, or if you prefer we can present the report to you on-site. Whichever you choose, this follow up call provides an opportunity for you and your team to ask about anything that might be unclear or ask for advice on how an issue can be resolved.
Page 65 of 68
DIG AA Report v0.2
What happens next?Arranging for the site recheckWe know that you will be keen to have your site checked again once you’ve been able to implement the fixes highlighted in this report. You may have already arranged for a site recheck at the same time as commissioning this original audit.Our rechecks focus on validating that issues found in the original report have now been corrected. We do a minimum amount of work testing parts of the site that have already achieved conformance. For this reason, we limit the recheck timeframe to 6 months, and unfortunately, we can’t provide a recheck for site re-builds.To arrange a recheck, feel free to get in touch with the Dig Inclusion team member that arranged your original audit, or use the contact information provided on the cover of this document.Help desk supportWe provide comprehensive help desk support for all our customers. This makes a Dig Inclusion accessibility consultant available during normal office hours to answer any queries you might have about making your website more accessible. We can provide general advice and support, clarification of WCAG guideline requirements and even write new code for you.If you are interested in finding out more about our help desk support, please get in touch.Annual follow-up auditWe recommend that your website is checked at least annually to ensure that it is being maintained in an accessible way. Please let us know if you would like to arrange for us to conduct annual audits. Normally these can be provided at a reduced cost due to our familiarity with the site and the ability to reference the results of earlier reports.Making changes to a site following our reportYou are responsible for ensuring that any changes you make to your site does not reduce the standard of accessibility attained. If you are unsure, you should contact us for advice. Depending on the nature and extent of the changes you are proposing, there may be a charge for assessing these changes, to establish if there is any impact on the accessibility of the site.If you completely change the design of the site, we would always recommend that you get in touch so that we can assist you in how to build sites with accessibility in mind.
Page 66 of 68
DIG AA Report v0.2
CopyrightThis report is provided on the understanding that the copyright of the report remains with Dig Inclusion. It may be copied and circulated internally (including relevant subcontractors). No changes may be made to this report, nor may it be quoted publicly (other than allowed by "fair use"), without written permission from Dig Inclusion.
Page 67 of 68
DIG AA Report v0.2
Contact details● Phone Laura on 01507 363356● Email Dig at [email protected]● Visit the Dig website at diginclusion.com
End of document.
Page 68 of 68
