Digital Accessibility Learning Path:
Web & Content Contributors

Accessibility resources for anyone who creates provides or manages digital content

Accessible Web Content and Design – Part 2

Table of Contents

Easy to Read, Follow and Understand

The content of a document should always be easy to read and understand for all users.

  • Always use text that is consistently high contrast against the background.
  • Larger text sizes are often easier to read and actual text is always better than images of text.
  • Avoid using text over photos and other graphics. Otherwise make sure the text is clear and easy to read.
  • Ensure the purpose or destination of a hyperlink is clear to everyone, even out of context. Link text should be descriptive and identifiable without the surrounding content. Avoid “Learn More” or “Click Here” links, unless additional descriptive text is included.
  • Provide guidance for tasks, especially when required tasks are submitted unsuccessfully.
  • All language should be simple, identifiable and easy to comprehend.
  • If color is used to convey information, also include another visual indicator such as an asterisk, and refer to it with instruction.

Example of Color Alone being used to convey information.

See the times indicated in Green, for available options
10:00AM 11:30AM 1:00PM 2:30PM

Example of how the use of color may appear, for some people without color vision

See the times indicated in Green, for available options
10:00AM 11:30AM 1:00PM 2:30PM

Example using Color as well as a visual indicator to convey information that does not rely on color vision.

See the times indicated with an asterisk*, for available options
10:00AM* 11:30AM 1:00PM* 2:30PM

Easy to Use

  • Avoid flashing or blinking content. If it is necessary to include, make sure you warn your audience, as it could potentially cause a seizure or discomfort.
  • Make sure people have enough time to complete a task.
  • Nothing should start automatically. This includes slideshows, videos or music. Media should always have play/stop controls.
  • Interactive controls have large target areas.
  • Provide clear text based instruction for tasks that may be new to users, or contain multiple steps.
  • Be consistent: Use the same language and visual representations throughout your content. For example, if underlines are used to represent links, do not use them to emphasize text; instead use bold font styles.
  • Identify downloadable content and file formats such as PDF.
  • Always ensure linked and downloadable content is accessible.
  • Ensure your content is readable and usable when zoom is used and on smaller devices.
Example Warning: The following contains flashing lights and imagery that may cause discomfort and/or seizures for those with photosensitive epilepsy. Viewer discretion is advised.

Usable without a Mouse (or trackpad)

Interacting with Digital Content must not require a certain amount of dexterity or specific device such as a mouse. Your content should be accessible to people who use a keyboard alone, or other Assistive Technology such as a switch device.

  • All interactive content must be usable by all kinds of people, for example; include alternatives for tasks that require click and drag or other activities designed for a mouse user.
  • The experience and functionality must be equivalent for everyone and the experience must be intuitive and not difficult.
  • Content that is non-crucial which is redundant or extensive can be skipped by the user.
  • Ensure a visual indication of focus for people who do not use a mouse and require a visual cue for orientation.
  • Accessible or hidden labels for interactive controls must be accurate and language must be consistent with visual presentations (to support Voice Control, and other Assistive Technology).
Keyboard with Braille Display
Keyboard with Braille Display

Accessibility Testing

The most accurate testing is done by people who use assistive technology in their daily lives, experienced users who can give you an accurate report of the usability of the site content. However, many of the things that make digital content difficult or impossible to use, can be detected with a little bit of testing by any user. We highly recommend considering the following tests before publishing a website or sharing other digital materials. If you need any additional assistance or would like to request an assessment of your digital content, send a message to the Digital Experience team at digital-accessibility@northeastern.edu.

  • Color:
    • Look for any text that uses colors or images that make reading difficult.
  • Media:
    • Play videos and make sure there are appropriate captions and audio descriptions available.
  • Keyboard usability:
    • Basic keyboard testing –
      • After a webpage is loaded, use the tab key to navigate the page (Shift + tab to go backwards). The esc key can sometimes be used to close and dismiss content like an open menu.
        • There should be a visible way to tell where you are at all times, such as a box around a button or link. For forms, it may just be a blinking cursor.
      • You should be able to use all interactive items. Try using the return/Enter ⏎ key or the spacebar to follow links or push buttons. Some items such as menus and tabs may use right → and left ← or up ↑ and down ↓ arrows.
      • Make sure you can perform all actions that a mouse user can, fill out any forms and submit them successfully.
  • Magnification and smaller screen sizes:
    • Use the zoom function of your browser to increase the zoom level (200% is a good level to test).
      • All content should remain visible and in a logical order. If content is hidden (or collapsed) intentionally, make sure it’s easy to get to.
      • Make sure you can still use things like the main menu with a just a keyboard.
  • Additional testing tools:
    • Automated accessibility tools are only recommended for use in tandem with manual testing. To request access to NU’s supported automated accessibility checker, see the following article: How do I request access to Siteimprove?. This tool can be integrated into your WordPress dashboard.
    • Screen Reader testing is a great way to assess the accessibility of digital components for users who do not rely on vision. See the following for additional information: (link to Note on SR testing for Developers)

A Note on Accessibility Overlays

Due to the documented failures and shortcomings of accessibility overlays, the Northeastern University Digital Experience team recommends against using any kind of accessibility overlay or plug-in, in attempt to improve the accessibility of web content. Instead, it is advised to test digital content for compliance to applicable standards and ensure adherence to Northeastern Policy on Digital Accessibility without the use of such tools.

< Part 1

Resources

Easy to Read and Understand

Easy to Use

Usable without a Mouse (or trackpad)

Additional Resources:

Images and Infographics

Use the resources provided on this page to understand how to best present images and informational graphics so that they are conveyed appropriately to all people including those who perceive them non-visually

Accessible Social Media

Use resources to understand how to best present Social Media so that it is available and accessible to the widest audience possible, within the Northeastern University community.

Web Accessibility

There are a range of principals to consider, when creating and sharing content on the web. The World Wide Web Consortium (W3C) provides tips for Writing for Web Accessibility, and WCAG 2.1 at a Glance, which provides a simplified presentation of the Web Content Accessibility Guidelines (WCAG).

Design

Designing for Web Accessibility (W3C) and Microsoft Inclusive Design

We would love to hear your thoughts on this learning content. Please let us know if you have completed any of the modules, have any feedback or just want to say hello. Email us at digital-accessibility@northeastern.edu.