Automated accessibility checks

Failed elements: WCAG 4.1.1, WCAG 4.1.2

  • Aria-allowed-attr: Elements must only use allowed ARIA attributes

Failed elements: WCAG 4.1.2

  • The testimonials slider has an ARIA attribute set on one of the buttons as aria-required=”false” which is being flagged as not allowed
  • The testimonials slider has an ARIA attribute set on one of the slides as aria-selected=”true” which is being flagged as not allowed aria-hidden-focus: ARIA hidden element must not contain focusable elements

Failed elements: WCAG 1.3.1

  • The testimonials slider has all the navigation dots set to aria-hidden=”true” but contains focusable elements that are interacted with aria-required-children: Certain ARIA roles must contain particular children

Failed elements: WCAG 4.1.1, WCAG 4.1.2

  • The testimonials slider navigation row is being flagged for having the role tablist but not having any child elements with the role tab. aria-valid-attr-value: ARIA attributes must conform to valid values

Failed elements: WCAG 4.1.2

  • The slider on the ‘our heritage’ page has invalid ARIA attribute values
  • The testimonials slider has invalid ARIA attribute value of aria-selected=”true” and aria controls=” navigation00” button-name: Buttons must have discernible text

Failed elements: WCAG 1.4.3

  • The embedded issuu element contains multiple buttons that don’t have discernible text color-contrast: Elements must have sufficient color contrast

Failed elements: WCAG 4.1.1

  • Text on header banners
  • The hover background colour on the nav menu needs to be darker
  • The headings in the footer (quick links etc.) need to be lighter
  • Orange headings on white backgrounds
  • Some of the text on quote backgrounds are hard to read, we need to better space these out so text never goes over the speech marks
  • The hover on the filter buttons on Our stories page
  • For the contact page form, webinar sign up form and probably any other embedded forms for the site, placeholder text and text used in the rows with checkboxes fail
  • Orange bold text on light grey background in the overview box and in the sidebar box on the course pages
  • The red MORE text in the flip boxes on the top right of some pages
  • The red text on the light grey background on the testimonials pages does not pass for regular text size
  • The white text on Alumni blue background fails
  • The Alumni blue font on white background fails (used in the Update your details form iframe)
  • On the apply now landing page, the white text on Orange fails duplicate-id-active: IDs of active elements must be unique

Failed elements: WCAG 4.1.1

  • Pages with multiple search boxes (like course pages, FAQs, testimonials and 404 page) return elements with the same IDs duplicate-id-aria: IDs used in ARIA and labels must be unique

Failed elements: WCAG 4.1.1

  • Pages with multiple search boxes (like course pages, FAQ, testimonials and 404 page) return elements with the same IDs used in labels duplicate-id: id attribute value must be unique

Failed elements: WCAG 2.4.1

  • Pages with multiple search boxes (like course pages, FAQs and testimonials) return elements with the same IDs
  • The Our people page has Helen Edwards twice, so the id for selection is duplicated frame-title: Frames must have title attribute

Failed elements: WCAG 3.1.1

  • Any embedded iframes for forms like the Contact forms need titles added
  • The embedded iframes for course stats also need titles added
  • The AutoFill with LinkedIn button iframe needs a title on acquisition landing pages html-has-lang: <html> element must have a lang attribute

Failed elements: WCAG 1.1.1

  • The HTML content that appears within the form iframes on the site must have a lang attribute
  • The HTML content that appears within the course stats iframes on the site must have a lang attribute
  • The HTML content that appears within the issuu embedded iframes on the site must have a lang attribute
  • The landing pages like acquisition etc. we need to make sure all have a lang set of “en-GB”
  • The preference centre needs to have a lang set of “en-GB”
  • The AutoFill with LinkedIn iframe needs a html lang set image-alt: Images must have alternate text

Failed elements: WCAG 1.3.1, WCAG 3.3.2

  • Multiple images on the site are uploaded without alt descriptions.
  • There is an image in the issuu embedded iframe that has no alt tag label: Form elements must have labels

Failed elements: WCAG 2.4.4, WCAG 4.1.2

  • Form elements within the iframes on the site must have labels
  • The search other programmes box on course pages needs a label added
  • The search FAQs box on the FAQ pages needs a label added
  • The search other programmes box on testimonials pages needs a label added
  • The issuu embedded content is missing labels for form elements
  • The choose a category dropdown on the Blog page needs a label
  • The 404 page search box needs a label
  • The acquisition landing page form fields need labels
  • The preference centre options need to be wrapped in label tags for each checkbox
  • link-name: Links must have discernible text

Failed elements: WCAG 1.4.4

  • The arrow icon under Fees & funding on the course pages overview box does not have a text alternative for the link that is discernible
  • The issuu content within the iframes have multiple links without discernible text
  • The Latest Publications page has links around the thumbnails without alt text, so the links do not have discernible text meta-viewport: Zooming and scaling must not be disabled

Failed elements: WCAG 2.1.1

  • Site wide code change for the UCEM page
  • This also needs changing on the landing pages like apply-now and acquisition etc.
  • The issuu iframe also needs this to be disabled
  • Keyboard navigation: Users must be able to navigate to all interactive interface components using a keyboard

Failed elements: WCAG 3.2.1

  • On smaller screens, opening and closing the menu with keyboard only is difficult
  • The images content cannot be navigated to or opened by the keyboard only
  • The FAQ dropdowns cannot be focused too by the keyboard
  • The timeline on Our heritage cannot be navigated using the keyboard
  • The content inside the tabs on Our people page cannot be navigated using the keyboard
  • On the testimonials pages, you cannot interact with the arrows or the content with just the keyboard
  • On the page with dropdowns template you cannot select dropdowns with just the keyboard
  • The Sign up to our monthly blog email button on the News and Events header banner can’t be selected with just the keyboard
  • The keyboard only navigation on the apply-now landing page breaks the page
  • On focus: Navigating to a component must not trigger any unexpected change of context

Failed elements: WCAG 2.4.7

  • The keyboard only navigation on the apply-now landing page breaks the page
  • Visible focus: Components must provide a visible indication when they have the input focus

Failed elements: WCAG 2.4.3

  • LiveChat doesn’t seem to have a focus highlight
  • Revealing content: Activating a component that reveals hidden content must move input focus into the revealed content

Failed elements: WCAG 2.4.3

  • The content boxes don’t show the text on focus, only on hover
  • The boxes on the 100 years of UCEM page don’t show the back on hover
  • All the boxes on the Our stories page for 100 years should show the hover effect on focus
  • The content links don’t show the other side on focus, only on hover
  • Closing content: Closing revealed content must return input focus to the component that revealed it

Failed elements: WCAG 1.3.1, WCAG 2.4.6

  • On smaller screens, opening and closing the menu with keyboard only is difficult
  • Heading function: An element coded as a heading must function as a heading

Failed elements: WCAG 1.3.1

  • Some heading tags are used in areas like the links behind the Become a student and Sponsor a student boxes, or the links in the other 3 home page boxes
  • The logo is also classed as a heading on the homepage
  • Heading level: A heading’s programmatic level must match the level that’s presented visually

Failed elements: WCAG 2.4.1

  • The logo on the homepage is a heading but not styled as one as it is an image
  • Bypass blocks: A page must provide a keyboard-accessible method to bypass repetitive content

Failed elements: WCAG 2.4.4

  • Add a skip to content link for screen readers (site wide code change)
  • Link purpose: The purpose of a link must be described by its link text alone, or by the link text together with preceding page context

Failed elements: WCAG 2.2.2

  • The marking email link in the footer of all pages just says “Media”
  • Moving content: If content moves, blinks, or scrolls automatically for more than five seconds, users must be able to pause, stop, or hide it

Failed elements: WCAG 2.2.2

  • The third box on the homepage flips automatically
  • The boxes in the top right of internal pages flip automatically
  • Auto-updating content: If content updates automatically, users must be able to pause, stop, hide, or control frequency of the updates

Failed elements: WCAG 4.1.1

  • The third box on the homepage flips automatically
  • The boxes in the top right of internal pages flip automatically
  • Parsing: Elements must have complete start and end tags, must not contain duplicate attributes, and must be nested according to their specifications

Failed elements: WCAG 4.1.2

  • https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fwww.ucem.ac.uk
  • Frame title: A frame or iframe must have a title that describes its content –

Failed elements: WCAG 1.1.1

  • Any embedded iframes for forms like the Contact forms need titles added
  • The embedded iframes for course stats also need titles added
  • The AutoFill with LinkedIn button iframe needs a title on acquisition landing pages
  • Image function: Every image must be coded as either meaningful or decorative

Failed elements: WCAG 1.4.5

  • Some coded images could be considered decorative only, but have an alt tag. This needs to be checked in screen reader to make sure it makes sense with the rest of the page.
  • Images of text: Images of text are allowed only where a specific appearance is required (e.g., logotypes)

Failed elements: WCAG 1.1.1

  • Some of the thumbnails for Blog and News posts were found to have text on them
  • Text alternative: A meaningful image must have a text alternative that serves the equivalent purpose

Failed elements: WCAG 1.4.3

  • Multiple images on the site are uploaded without alt descriptions.
  • Text legibility
  • Contrast: Text elements must have sufficient contrast

Failed elements: WCAG 1.4.12

  • Text on header banners
  • Text spacing: Users must be able to adjust text spacing with no loss of content or functionality

Failed elements:

  • At 400% view (as outlined in instructions for test) there is text clipped on the homepage.