Main Menu

Accessibility Reviews

Web Accessibility Testing Best Practices for Developers and Designers

Introduction

The University of Maryland is committed to making all of our websites and digital properties accessible to all users, including our community with disabilities. Developers and designers need to check all websites and digital properties for accessibility through both automated and manual testing in order to meet with the University of Maryland web accessibility policy, improve search engine optimization (SEO), and continuously work towards providing an inclusive and equitable experience for all.

This document gives a high-level overview and best practices of what to check for on your website manually and with automated tools prior to a launch. These best practices should also be incorporated during the post-launch and maintenance phases of a website and can serve as a reference for third-party vendors. All new components and elements added to a website should be continuously created and evaluated with accessibility in mind and following WCAG 2 Guidelines, content creators and those seeking general web accessibility evaluation guidance may also refer to the UMD Web Accessibility Evaluation Guidelines.

Accessibility is the responsibility of everyone and is something that should be continuously integrated into every phase of the website and digital content development process.

Automated Checks

Automated checks are performed using testing tools to scan a website’s code and find potential common accessibility barriers such as heading structures, alternative text, meaningful link text, contrast errors, and form field labels. These scans give an overview of how the website adheres to web accessibility standards and highlights potential areas for improvement. Automated scans are not an absolute indicator of the state of the website’s accessibility, but they are good starting points. All automated checks should always be followed with a thorough manual review of the website.

SiteImprove

SiteImprove is a third-party web-governance software solution that can be used to perform quality checks on your website. With SiteImprove, you can set a target score that matches WCAG 2.0 AA (the current standard for University of Maryland web properties). The university’s target SiteImprove score for all websites is 751. All University of Maryland campus partners have access to SiteImprove. It is required that all university websites be added to the SiteImprove platform so that they can go through an automated scan. Contact UMD DIT Accessibility team to request your site to be added to Siteimprove.

WAVE

All website homepages should be checked with the WAVE browser extension, available for both Chrome and Firefox browsers, that is provided by WebAIM. WAVE can give a quick indication of any accessibility barriers (such as color and contrast, form labels, heading structure, alternative text, and meaningful link text) on your website. It is to be noted that WAVE scans the current page and not the entire website.

Lighthouse

Additionally, developers may also use in-browser tools, such as Lighthouse within Chrome DevTools to identify any potential accessibility barriers.

1 SiteImprove has a new NextGen Accessibility module, based on the WCAG 2.1 and ACT Rules Format 1.0 , therefore current metrics are subject to change.

Manual Checks

Automated tests can only detect up to 30 percent of issues on websites that cause accessibility barriers. It is important to manually review all components of a website in different ways to ensure that information is being conveyed accurately and appropriately. A website must undergo a manual evaluation with consideration to the listed components prior to a launch. Manual checks should be conducted iteratively during the post-launch and maintenance phases.

  1. Keyboard Navigation: Is the website operable with keyboard only? (no mouse)
    Thumbnail for video to introduce keyboard navigation. Select the image and use the Option + Enter keys to open the video. In the video there is a mini overview of navigating through the Office of the President’s site homepage with only a keyboard. Focus lands on all interactive elements and links.
    Thumbnail for video to introduce keyboard navigation. Select the image and use the Option + Enter keys to open the video. In the video there is a mini overview of navigating through the Office of the President’s site homepage with only a keyboard. Focus lands on all interactive elements and links.
    1. Tab navigation (Can you tab to all interactive elements on the website in a logical order?)
      1. Are there focus indicator borders around all interactive elements (links, buttons, menu items, form fields)?
        Example of a focus indicator being present around interactive elements. In this example, there is a focus indicator around the “University of Maryland” link in the global header because it is a link to the main university website.
        Example of a focus indicator being present around interactive elements. In this example, there is a focus indicator around the “University of Maryland” link in the global header because it is a link to the main university website.
    2. Can you use the up and down arrow keys to navigate within a dropdown? (including drop down menu navigation)
    3. Can you navigate to submenu items within a menu?
    4. Enter/Return keys for submission and selection
    5. Can you use the ESC key to leave an opened element? (i.e. pop up window, open menu, etc.)
    6. Can you select radio buttons and checkboxes with the space bar (enter/return keys also)?
    7. Is the focus order logical?
  2. Semantic HTML: Ensure that HTML is semantically structured.
    1. Are proper tags being used?
    2. For form fields, are there appropriate input types?
      1. Not every field should be a text field.
    3. Can something within a divbe replaced with a more appropriate element? (instead of div Play Video use button Play Video)
    4. Are the correct input types being used? (i.e. “submit” for submit buttons)
    5. Do all pages have a title? (Do they use the title tag?)
    6. Are there heading levels that are being skipped? (i.e. jumping from h1 to h3)
    7. Are subheadings nested properly under one another? (i.e. if you have “News Articles” as an h2, are the article titles h3?
    8. Are there empty headings? (remove or add the necessary content if this is the case)
    9. Developers should continuously use WAVE and inspect code using Chrome DevTools.
  3. Responsive: Ensure that the website is responsive and can operate on multiple displays of varying sizes (i.e. mobile, tablet, laptop, monitor).
  4. Browser Compatibility: Ensure that the website is compatible and can degrade gracefully without limiting access to content within common browsers such as Chrome, Firefox, Safari, and Microsoft Edge.
  5. Page Language: Ensure that the language of the page has been established in the html tag. WAVE, SiteImprove and most automated scanners can detect this (Note: University of Maryland campus partners have access to SiteImprove).
  6. Flashing Content: Flashing or flickering content on a page should not flash longer than three times per second (ideally flashing content should not be present on the website at all).
  7. Color and Contrast: All text and backgrounds should have a color contrast ratio of 4.5:1 (for regular sized text) or 3:1 (for larger sized text).
    1. Error messages should have proper color/contrast.
    2. Check link button background and foreground color to ensure it complies with contrast ratios.
      1. Ensure that hover and focus states on links and buttons do not affect the contrast ratios.
    3. Evaluate the contrast of images and graphics using the Color Contrast Analyzer tool to make sure that they comply with the minimum requirements.
    4. Color should not be the only way to convey important information (example: red equals danger/error and green equals good/passing).
  8. Carousels and Video Players: Ensure that carousels and video players do not play on their own (Note: carousels are not recommended for presenting important content, however if one must be used, then please check Deque University’s example of an accessible carousel.).
    1. Is there a play/pause button present on the video player or carousel?
    2. Does the carousel or video autoplay?
    3. Is the carousel or video player navigable with a keyboard?
  9. Labels and Inputs: Ensure that proper labels and input types are being used.
    1. Are labels being used accordingly? (i.e. are checkboxes identified as checkboxes and not as buttons?)
    2. Are there form labels associated with input fields?
    3. Are there empty labels or buttons? (remove or add the necessary content if this is the case)
  10. Skip to Main Content Links: All websites should have a “Skip to main content” link that should be one of the first items on a page.
    1. When embedding social media feeds, ensure that there is a “Skip social media feed” link (Note: it is not recommended to add social media embeds on the site due to tedious keyboard and screen reader navigation)
    2. Refer to WebAIM’s examples of accessible Skip Navigation Links.
  11. Hoverable Links: Ensure that links have a hover effect on mouseover (i.e. changing color, underlining).
  12. Tables: Ensure that all tables have the appropriate table headers and table summaries.
    1. Is the markup appropriate for the table? (proper usage of th, td, col, row)
    2. Do tables with multiple header cells have ids associated with them?
  13. Zoom Magnification: Ensure that content on the website does not get distorted from a zoom magnification of 200 - 400 percent. This is a large indicator of what the website will look like on mobile devices.
    A view of the University of Maryland’s president site without any magnification (100 percent).
    A view of the University of Maryland’s president site without any magnification (100 percent).
    A view of the University of Maryland’s president site at 200 percent magnification. The menu style changes into a hamburger menu.
     A view of the University of Maryland’s president site at 200 percent magnification. The menu style changes into a hamburger menu.
    A view of the expanded menu at 200 percent magnification.
    A view of the expanded menu at 200 percent magnification.
    A view of the statistics block converting into an information carousel at 250 percent magnification.
     A view of the statistics block converting into an information carousel at 250 percent magnification.
  14. Usage of ARIA: Ensure that Accessible Rich Internet Applications (ARIA) is only being used when appropriate.
    1. ARIA is beneficial for dynamic screen reader notifications such as: displaying search results, notification of form field errors, announcing alerts, page loading notifications, etc. Please see W3C’s recommendations on when ARIA is appropriate to use.
    2. Ensure that proper roles are set accordingly.
    3. Do not use ARIA for anything that can be resolved by using a proper input, label, heading, etc. (first rule of ARIA - is to not use it; ARIA should not be resolving unsemantic HTML).

Content

  1. Per the University of Maryland Web Accessibility Policy, all University of Maryland properties need to have the university’s Web Accessibility statement link in the footer.
  2. Images and Alternative Text: Ensure all images and graphics of importance have meaningful alternative text.
    1. Does the alternative text on an image convey the information needed to a non-sighted user?
      1. Do images have alternative text that start with “image of”, “photo of”, or “graphic of”? (this is not a recommended practice, and is redundant and confusing to screen reader users)
      2. In this example, the alternative text for the image being described is “President Darryll J. Pines at the Investiture Ceremony on April 22, 2021.” This alternative text conveys enough information about the context of the image without going into excessive detail.
        An example of an image from the University of Maryland’s President site which has the alternative text, “President Darryll J. Pines At the Investiture Ceremony on April 22, 2021”.

        An example of an image from the University of Maryland’s
        President site which has the alternative text, “President Darryll J. Pines
        At the Investiture Ceremony on April 22, 2021”.
    2. Are there images that do not need alternative text and can be marked decorative? Please check W3’s alt decision tree to determine whether an image needs alternative text.
      1. Images do not convey any context (i.e. decorative borders), do not need alternative text and can be marked as decorative.
      2. alt = “” is used to mark any image that is decorative.
    3. Are there captions present on relevant images and figures?
    4. For images of text, are all of the text on the images being put into the alternative text and summarizing the image properly?
  3. Links and Link Text: Ensure that all links are within context.
    1. Keep URL structures simple and readable.
      1. Use hyphens instead of underscores (such as example.com/news-articles instead of example.com/news_articles).
    2. Are long URLs being used in a sentence instead of contextual anchor text?
    3. Are link texts conveying enough information to a screen reader user who is not sighted?
      1. Avoid phrasing links in ways such as: “Click here”, “this”, “read more."
      2. Reword link phrases to have specific locations, for example: Go to the Office of the President’s website to find more information on the inauguration.
    4. Are all URLs valid? (check for any 404 errors)
    5. Are all emails displayed as links using the “mailto:” attribute?
  4. Abbreviations and Misspellings: Ensure that uncommon abbreviations are written out and check for any misspelled words.
    1. Are there abbreviations that can be written out?
    2. Are there uncommon abbreviations present (i.e. “Pos.”, “Ht.”, “Wt.”)? (these should be written out).
    3. Are there abbreviations that are common with other abbreviations and words? (i.e. APR, Dr., IT, etc.).
  5. Video and Audio: Ensure that video and audio content of relevance is presented in an accessible format.
    1. Do all videos with dialogue and sound have closed captioning?
      1. For video players that do not have a customizable closed captioning option, open captions should be embedded within the video.
      2. Do captions have a proper and visible foreground and background?
      3. Are the captions too long? (check to make sure captions do not take up a significant portion of the screen and are broken up adequately)
    2. Do all videos and audio (i.e. podcast episodes) have transcripts?
    3. Do videos have audio descriptions? (dependent on context; please check W3’s checklist on when videos need audio descriptions)
      1. If videos simply have a person speaking and giving information, audio descriptions are likely not needed (i.e. a commencement speech).
      2. Videos that describe something in particular would benefit from audio descriptions (i.e. describing an island on a virtual tour).
    4. Do videos have American Sign Language (ASL) interpretation? (dependent on context)
    5. Do all podcast episodes have transcripts associated with them?

Tools and Resources

Screen Readers

Testing Tools

Other Resources

Back to Top