Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service (HRMS)
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Starfish
    • Digital Measures
  • Calendar
  • Directory
  • Scope of this search:
Campus Services
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
University of North Dakota
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
Scope of this search:
Scope of this search:
  • Home
  • Campus Services & Resources
  • Web Support
  • Developer Information
Skip Section Navigation
  • Web Support
  • Directory Instructions
  • Web Policy Show/hide children
    • Website Content Standards
  • CMS Support Show/hide children
    • Accordions/Tabs
    • Alerts
    • Analytics
    • Assets
    • Images
    • Snippets
  • WordPress Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs
  •  

Developer Information

This page contains information for developers working with UND templates and themes regarding accessibility as well as guidance on other topics.

Accessibility

Required Level: WCAG AA

Tools

  • SiteImprove
    • Chrome Plugin and SiteImprove subscription.
    • The extension instantly highlights issues on the page and provides clear explanations of how they impact your visitors.
  • WAVE
    • Chrome Plugin. Check the document outline/heading structure.
  • Chrome Dev Tools
    • Screenshot A: Inspect an element with the Inspect Element Tool, popup will have Contrast at the bottom with a numeric value and a pass/fail (checkmark/exe) displayed.
    • Screenshot B: Select an element from the Elements tab in Chrome Dev Tools. Then find the color property for that element and click the color box. Popup will have Contrast values and pass/fail (checkmark/exe) displayed.
    • Note: Not all background color/image implementations can be detected by Chrome Dev Tools and the color pairing will need to be replicated and independently tested. i.e. background arrows – inspecting text over each variation of green/gray does not work.

Common issues

The following section covers the primary issues we've seen on our site so far.

Color contrast

  • Review contrast - especially when dealing with center themes.
  • Use tools above to meet AA.
    • Note: Color contrast can fail at one font size and succeed at a larger font size.

Headings

"According to WebAim's annual survey the #1 approach to finding info in a page is navigating through the page headings. So having a clear, sane heading structure is a top priority for accessibility for screen reader users." - Will Martin Head of Digital Initiatives, Systems & Services

Screen Reader User Survey #8 Results

Remember, screen reader users often view headings out of context of the rest of the page.

  • Semantics: Make sure true headings are marked up as such and non headings are not. https://webaim.org/techniques/semanticstructure/#contentstructure
  • Make sure headings are flexible enough to work in our templates and snippet structure.
  • Don't skip over headings.
  • Make sure headings are present.
  • Watch out for long text and how it works in a variety of components.

Links

  • Link text should be descriptive of the destination of the link.
  • Image alternate text is very important for links to be meaningful to screen readers.
  • [Web Team - elaborate on this.] How they work with images, buttons, etc.

Images

  • Image alternate text is very important for links to be meaningful to screen readers.
  • [Web Team - elaborate on this.] How they work with links, screen readers, mobile views.

Landmarks/Semantic HTML

  • In general, semantic HTML has been incorrectly implemented
  • Common issues:
    • Too many <section> elements.
    • Content outside of landmarks.
    • Indistinguishable landmarks.
    • Overabundance of landmarks where a more simple heading structure with divs can achieve the same semantic effect.
    • Aria attributes misapplied. i.e. aria-labelledby pointing to a heading that is "marketing text" or "splash text" and not a section heading.)

Keyboard

  • Tab order and focus styles are often missing and/or not ideal.
  • Check tab order at variety of viewports.
  • Check focus styles at variety of viewports.

More Resources

Name/Link Resource Type Summary
Mac: Voice Over Assistive Technology Every Mac is built with assistive technologies to support people who are blind or have low vision. The VoiceOver screen reader describes exactly what’s happening on your screen.
JAWS; Job Access With Speech Assistive Technology JAWS provides speech and Braille output for the most popular computer applications on your PC
Color Blind Pal Assistive Technology/Auditing Tool Helps people who are color blind see the colors around them. It also lets people with normal vision see what it's like to be color blind.
SiteImprove Extension Auditing Tool The extension instantly highlights issues on the page and provides clear explanations of how they impact your visitors.
Wave Extension Auditing Tool Great for seeing page outline/structure. (WAVE Web Accessibility Evaluation Tool)
Mac: Sim Daltonism Auditing Tool Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness.
Landmarks Assistive Technoloy/Auditing Tool Easily see what landmarks are coded into the page.
WebAIM Contrast Checker Auditing Tool Check color contrast of two colors.
WebAIM (Web "Accessibility in Mind") Reference and Information Digestable information about top accessibility concerns.
MDN Accessibility Learning Area Reference and Information Contains modern, up-to-date tutorials covering accessibility essentials
World Wide Web Consortium (W3C) Accessibility Reference and Information Fundamentals and basics for accessibility in web design.
UND's Accessibility Technologies Reference and Information Resources UND uses for accessibility.

Help Ticket

    We use cookies on this site to enhance your user experience.

    By clicking any link on this page you are giving your consent for us to set cookies, Privacy Information.

    UND.info@UND.edu  |  701.777.3000
    • YouTube
    • Instagram
    • Facebook
    • TikTok
    • Twitter
    • LinkedIn
    • Campus Map
    • Employment
    • Vector Solutions Training
    • UND Today
    • U Letter
    • Campus Renewal
    University of North Dakota

    © 2022 University of North Dakota - Grand Forks, ND - Member of ND University System

    • Accessibility & Website Feedback
    • Terms of Use & Privacy
    • Notice of Nondiscrimination
    • Student Disclosure Information
    • Title IX
    ©