Web Accessibility: The Eye Test

Join us for a non-technical accessibility testing session. Learn how to evaluate the basic accessibility of your webpage by simply using your keyboard and other built-in elements. We will also review a few free tools that provide another layer of accessibility information.

Introduction

Headshot of Katie Lane

Katie Lane

Assistant Director, Digital + User Experience

Learning Outcomes

  • the types of accessibility testing completed on uc websites. 
  • use browser inspect mode to check heading levels and alt text
  • proper keyboard focus and order.
  • check if youtube videos have automated or manual captions. 
  • how inaccessible forms can create barriers. 
  • use the access assistant plugin and what can it check for. 

Soapbox Sidebar

Yes, really anything can be turned into web content, including this presentation! Challenge yourself to think outside the box when imagining your content. Nobody is downloading and opening powerpoints off your website to consume content, however they might read it if it's right on the page. 

Accessibility Testing at UC

There are two types of accessibility scans performed on UC websites and pages. 

  • Manual Testing: This is completed by an actual person on the UCIT QA team and requires the use of assistive technology to test an extensive list of elements. A manual scan provides a very complete picture of the accessibility of the page, but can be time consuming to complete. They are typically completd on a small samping of pages. 
  • Automated Testing: These tests are completed using the The Accessibility Management Platform (AMP) through Level Access. Scans can be scheduled and completed automatically, however, estimates on the percentage of issues that can be caught in an automated scan range from 25-60%. 
That's cool, but, can I spot check my site? Or review a student's page before publishing? Basically, I should be able to look at the page and know something, right?

Every Web Author

The benefit of a content management system, and one of the goals of the web refresh project we've nearly completed here at UC was to get all sites on consistent templates. With the accessibility of the templates being managed by the web team, web authors and apex users are able to focus on the content. 

Access Assistant Plug in

  • Anyone can download the plugin through Chrome, as long as you sign into AMP to download it. 
  • Everyone with a UC username (6+2) has access to AMP. 
  • bearcat.levelaccess.net will send you to the SSO login screen.

Headings


What Can I Check For?

  • Ony one H1 on the page
    • This is locked down for AEM users
  • Ensure that all text intended to be a heading level is marked properly 
  • Verify that all heading levels go in logical order
  • Heading text is reasonable length

Tools for Checking Heading Levels

  • Browser inspect mode or view page source
  • Level Access - Access Assistant Plugin

Examples

Latest Updates 

  • This update won't be included when a screen reader user jumps between heading levels. 
  • It will be included as text under the previous heading. 

Latest Updates

A screen reader user will be able to navigate directly to this heading because it uses a coded heading. Reminder "coded" heading doesn't mean you need to know code, just know how to use the appropriate component or widget that creates heading levels in your site.

Soapbox Sidebar No. 2

This is one of the most common issues we see web authors making across our sites. Next time you go to create a single line of bold text, stop and use a heading component!


Images

What Can I Check For?

  • First, ensure that alt text should be used for the image. Decorative images actually should not use alt text as it creates more noise for a screen reader user. 
  • If an image requires alt text, verify that it is accurate and sufficient. 
  • If there is an image that contains text on it, that text must be included in the content of the page. There cannot be any information that a user can only obtain through visually reading the text on the image. 
    • A common use case for this would be event flyers. You can use the flyer as a visual supplement, as long as it is isn't the sole way any of that information is conveyed. 

Tools for Checking Images

  • Browser inspect mode or view page source
    • Decorative Image: role="presentation"
  • Level Access - Access Assistant Plugin
  • Click an image and drag it to visually see if text is flattened on the image. 

Examples

Online Library resources are available to all UC students. 

Stock images tend to be a common use for decorative images, since the image itself is meant to be non-descript or generic. There likely isn't any information a user would gain from the alt text of this image, that they wouldn't get from a proper heading and a descriptive link in the copy. 

  • I want to put an image on the page.
  • i want to put THIS image on the page.

If the text on this image is only contained in the alt text of the image, several users could be missing out on the promotion. Ensure that this text is also included in the body copy of your webpage. 


Videos

What Can I Check For?

  • The most important issue we run into is ensuring that our videos are professionally captioned instead of automatic captions which tend to be pretty unreliable, specifically in a higher ed setting. 
  • Do captions accurately reflect the audio?
  • Does the timing of captions coincide with the audio?
  • Is it clear from the captions exactly who is speaking?
  • Are meaningful sound effects and speaker tone described?
  • Does placement, size, and pace of captions provide for easy readability of both caption content and screen content?

Tools for Checking Videos

  • Play the video either on youtube or embedded on your site. 
  • Click the closed caption icon located in the bottom right of the video controls. 
  • "English (auto-generated)"
    • This is an indicator that the video captions are basically youtube's best guess. 
  • "English - Default"
    • This is an indicator that the video captions have been attended to by the creator of the video. However, whenever using a video that we don't own, you should always spot check areas of the video

Examples


Links

What Can I Check For?

  • Do the links on the page use text that is descriptive of where the link will send someone rather than using phrases like "click here" or "learn more"?
  • Only use a full URL If the URL is relatively short (such as a site's homepage). The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.
  • Avoid linking the space before/after the text
  • Avoid copying text that contains links, particularly from email. 

Tools for Checking Links

  • No tools required

Examples


Keyboard Focus and Order

What Can I Check For?

  • Check that the tabbing order is logical and compatible to how a sighted user would navigate through the site. 
  • Is there a way for someone to skip the navigation elements
    • This is handled for AEM through UC's template. 
  • Check that each time you tab, you are able to easily locate on the screen where the tab has focused. 

Tools for Checking Keyboard Focus and Order

  • keyboard

Examples

  • Nike
    • Search bar turns into a loop
    • Large focus indicators that can't be seen in their entirety. 
    • Inconsistent focus indicators appear to be cut off
    • Skips "Sign up for Email" link in footer.
  • Johnson & Johnson
    • The visual focus goes to the sub menus but they don't open so you cannot see what you are focused on. 
    • Then tabs through the carousel without showing the user what they are focused on. 
    • Reminder - We don't like carousels
  • Disney
    • The first ad on the screen has four links that all open in the same place. 

Forms

What Can I Check For?

  • Can you tab through all of the form fields with a visual indicator showing where your keyboard is focused?
  • Is placeholder text used?
  • Does each field have a label?

Tools for Checking Forms

  • Our keyboard

Reminder

It's important to remember that while we can check the accessibility of the form we want to use, we may not be able to make our form fully accessible if the issues are outside the content creation. 

Many accessibility issues will need to be addressed by developers of the third-party form tool. Neither you as the form creator or an accessibility resources team will be able to change some elements.

Examples

  • Nike
    • Send us feedback form

Zoom

What Can I Check For?

  • Anticipate users will not use your website strictly at 100% zoom. 
  • Several users with low vision use sites zoomed in at 200%
  • Virtual work and smaller screens has several users now zooming out on content in order to see more on a single screen. 
  • On UC's templates, your site zoomed at 200% is a good way to check how your site will be viewed on mobile. 

Tools for Checking Zoom

  • Our keyboard