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.

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.