/ Published in Communications & Narrative, Research and Reports

Website Accessibility with Heather Nelson

a wavy green, blue, and organge background with text that reads

A Food Solutions New England Conversation

(Click anywhere in the box below to play audio)

 

A note from Heather Nelson, 2022 and 2023 FSNE Intern – “In our current digital age, websites are a crucial part of disseminating information and reaching new people. We spend countless time and money designing website layouts that are pleasing to the eye and organized in an intuitive and helpful way for our audience. However, many of these same lovely websites only end up catering to a certain kind of user. Those same pleasing color palettes may make it impossible for color-blind users to navigate. That interesting graphic may be completely skipped over by a screen reader. The simple list of links may be nearly impossible to access with a keyboard alone.

This is where website accessibility comes in. Proper website accessibility adds an entirely new dimension of web design and complexity, and the result is that the website opens up to an entirely new audience, including far more people than an inaccessible website ever can. Simply put, proper accessibility will make or break a user experience.

Despite its importance, however, there are very few resources on building proper accessibility websites. Where does one even begin?”

Join Heather Nelson and Shane Rogers, communication director for FSNE, for a conversation about website accessibility and the work Heather has been doing at FSNE over the past few years. You can find a full transcript of the conversation here and a list of resources and templates for pursuing website accessibility work below.

Website Accessibility Resources

Guideline-specific resources

Helpful Tips for WCAG 2.1 Guidelines

  • Identify most-trafficked web pages and focus on those
  • Start with the basics (look under general resources for these)
    • It is okay to focus on level A first and then move to level AA later
  • Check the platform your website is built on for accessibility resources that may be built in
  • There are services (many of them paid) that will review your website for accessibility concerns. Whether they are a good fit is up to you and your own research on them
  • Tracking your progress
    • Here is an example checklist of what going through Level A looked like for FSNE.
      • Each important webpage has a column that can be checked off as it is finished.
      • This sheet is also coded so that the “status” column changes colors based on the status. Typing “in progress” will turn the cell pink. Typing “done” turns the cell grey. This makes it easier to track your progress at a glance.
    • Each website is different. However, if you wish to use this checklist, you can go to “File -> Make a copy” and then edit it to suit your needs.

WCAG At-a-Glance for Levels A-AA

**this is a reference made to help organize the WGAC Guidelines. It is not intended to convey the complete information from the WCAG standards. Make sure to read through the guidelines themselves.

  • Levels
    • A: minimum
    • AA: standard
    • AAA: highest, not included for now
  • Principle 1: Perceivable
    • 1.1 Text alternatives
      • Level A: All non-text content has an equivalent text alternative
        • Keep to 125 characters or less, some screen readers cut it off then
    • 1.2 Time-based Media
      • 1.2.1 Audio-only and video-only (prerecorded)
        • Level A: audio-only, an equivalent alternative is provided, video-only, equivalent alternative or audio track is provided
      • 1.2.2 Captions (prerecorded)
        • Level A: Captions provided for all prerecorded audio
      • 1.2.3 Audio Description/Media Alternative
        • Level A: alternative or audio description provided for time-based media
      • 1.2.4 Captions (live)
        • Level AA: Captions provided for live audio
      • 1.2.5 Audio description
        • Level AA: Audio description provided for prerecorded video
    • 1.3 Adaptable
      • 1.3.1 Info and relationships
        • Level A: presentations available as text/can be programmatically determined
      • 1.3.2 Meaningful sequence
        • Level A: when the order of content is important, the reading sequence can be programmatically determined
      • 1.3.3 Sensory Characteristics
        • Level A: Instructions do not rely on sensory characteristics
      • 1.3.4 Orientation
        • Level AA: Content not restricted to one display orientation unless essential
      • 1.3.5 Identify Input Purpose
        • Level AA: Purpose of input fields collecting user information can be programmatically determined
    • 1.4 Distinguishable
      • 1.4.1 Use of color
        • Level A: Color is not the only visual means of conveying information
      • 1.4.2 Audio control
        • Level A: automatic audio can be easily paused or its volume controlled w/out changing system volume
      • 1.4.3 Contrast (Minimum)
        • Level AA: visual presentation of text and images of text has a contrast ratio of 4:5:1
      • 1.4.4 Resize text
        • Level AA: except for captions and images of text, text can be resized w/out loss of functionality
      • 1.4.5 Images of text
        • Level AA: text rather than images of text conveys information, w/ exceptions
      • 1.4.10 Reflow
        • Level AA: scrolling in two dimensions not needed, consult og doc for width specs
      • 1.4.11 Non-text contrast
        • Level AA: contrast ratio of 3:1 against adjacent colors
      • 1.4.12 Text spacing
        • Level AA: no loss of content from modifying spacing
      • 1.4.13 Content on hover or focus
        • Level AA: dismissible, hoverable, persistent
  • Principle 2: Operable
    • 2.1 Keyboard accessible
      • 2.1.1 keyboard
        • Level A: all functionality operable through a keyboard
      • 2.1.2 No keyboard trap
      • 2.1.4 Character Key shortcuts
    • 2.2 Enough Time
      • 2.2.1 timing adjustable
        • Level A: time limits can be changed or turned off
      • 2.2.2 pause, stop, hide
        • Level A: moving information can be modified via the above
    • 2.3 Seizures and physical reactions
      • 2.3.1 three flashes/below threshold
        • Level A: nothing flashes three times/sec or flash is below threshold
    • 2.4 Navigable
      • 2.4.1 Bypass blocks
        • Level A: mechanism available to bypass blocks of content repeated on multiple web pages
      • 2.4.2 Page Titled
        • Level A: titles describe topic/purpose
      • 2.4.3 focus order
        • Level A: concerns if navigation sequences are necessary
      • 2.4.4 link purpose
        • Level A: purpose of link can be determined from link text alone or programmatically determined link context
      • 2.4.5 multiple ways
        • Level AA: more than one way to locate web pages within a set
      • 2.4.6 headings and labels
        • Level AA: headings and labels describe topic/purpose
      • 2.4.7 Focus visible
        • Level AA: visible keyboard focus indicator
    • 2.5 Input modalities
      • 2.5.1 pointer gestures
        • Level A: path-based gestures can be operated w/ a single pointer
      • 2.5.2 pointer cancellation
        • Level A: concerns functionality operated w/ a single pointer
      • 2.5.3 label in name
        • Level A: in components w/ labels, the name contains the text that is presented visually
      • 2.5.4 motion actuation
        • Level A: Functionality operated by device motion can be disabled
  • Principle 3: Understandable
    • 3.1 Readable
      • 3.1.1 language of page
        • Level A: default human language can be programmatically determined
      • 3.1.2 language of parts
        • Level AA: language of each passage can be programmatically determined unless proper noun/specific term/etc
    • 3.2 Predictable
      • 3.2.1 On focus
        • Level A: components in focus do not initiate change of context
      • 3.2.2 on input
        • Level A: changing ui settings does not initiate change of context w/out warning
      • 3.2.3 consistent navigation
        • Level AA: repeated navigational mechanisms are the same relative order
      • 3.2.4 Consistent identification
        • Level AA: components w/ same functionality are identified consistently
    • 3.3 input assistance
      • 3.3.1 Error identification
        • Level A: detected input errors are identified and described to user in text
      • 3.3.3 labels and instructions
        • Level A: required when content requires user input
      • 3.3.3 Error suggestion
        • Level AA: when suggestions for correction are known, they are provided to user if safe to do so
      • 3.3.4 Error prevention
        • Level AA: concerning legal commitments and financial transactions
  • Principle 4: Robust
    • 4.1 compatible
      • 4.1.1 Parsing
        • Level A: when markup languages are used, specifies how
    • 4.1.2 Name, role, value
      • Level A: name and role of all user interface components can be programmatically determined
    • 4.1.3 Status messages
      • Level AA: markup language status messages can be programmatically determined

Do you have any resources, insights, or experience you’d like to share? Don’t hesitate to contact us.

Tagged under: , , ,