Universal Design Guide
[Author: Bill Fischer]
Device Agnosticism and attainability
- All content must be compatible with screen readers
- Interactive media should be equally accessible for a phone, tablet, or desktop computer.
- The content should be rendered on a 3g connection in 14 seconds or less when tested on Google's mobile speed tester.
- The quality of experience should be equal for a phone, tablet, or desktop computer.
- To ensure consistency, a single version of the media should be able to respond or adapt to any device size. Check your site with the Google Mobile Friendly Tester
- While developing your site, check it on multiple device sizes right on your laptop or desktop using the Responsive Design Checker
- Note: over half of all page views on the internet are from mobile devices.
- If a plugin is required to view the content, a link to a download should be provided
- Wordpress.org has been a leader in ensuring it's site building software writes compliant code. When choosing a third party theme, look for those that build-in accessibility. KCAD-DAD prefers the DIVI Builder and DIVI accessibility plug-ins in conjunction with the default Wordpress install.
- New Google Sites (not the legacy version) is the most efficient and easiest tool for building compliant websites. And, it's free.
- These website building tools write compliant code, but it remains up to the designer to make smart choices in imaging, layout, color, alt tag writing and proper use of headers to achieve an accessible site.
Graphic User interfaces (GUIs) typically exist as a means to access content. The design goal is to minimize the extraneous cognitive load and working memory required to gain that access. In the case of interactive design, extraneous cognitive load on the human brain is generated by the the manner in which information is presented.
- Position, color and contrast of screen elements should be designed in a hierarchical attentional order.
- Focus: where do we want attention to be prioritized. This should be determined by a user experience narrative that uses as little cognitive load as possible. In other words, the user should be able to easily find and obtain what they are looking for or should be provided clear options/suggestions/ instructions for what they could/should do next.
- Grouping: organizing content in intentional chunks that are separated by margins at minimum and further differentiated by design elements like color, lines, and other visual elements.
- "Discoverability' is a design method that calls for all possible actions to be visible in the navigation (not hidden).
- Working memory in our brains has limited capacity and is the system where we temporarily hold information available for processing things like navigation systems. Asking users to create mental maps of hidden navigational elements requires more working memory, which also increases cognitive load.
- Providing information that orients, and confirms the success or failure of the user's choices, is important because that can mirror the physical world, which provides constant feedback to our senses. That is the norm for most of our human experience. Digital interactive systems only provide it if the designer includes it.
Examples of feedback include:
- Page/screen titles that reinforce where we landed.
- 'submitted', 'saved' and other confirmations.
- Consistent brand/product badging that reminds us who or what we are engaging with.
- When users are provided a visual manifestation of a choice, it should be clear what the results of that choice will be.
- When a user is confronted with a navigation element, it should be clear what will happen when they interact with it. This clarity should be built on the expected, shared understanding of its demographic. That shared understanding can be based in icons that have become part of the universal language of interactive media (such as a Back Arrow, an X for Close or a Gear for Settings). However, any navigational elements outside of universal usage should include text.
Navigation Hit Zones
- Larger is better when it comes to button/text hit zone sizes. A good minimum to work with comes from Apples design guidelines:
- 48 pixels x 48 pixels for touch/click area and 8 pixels between hit zones. 60 - 72 pixels with 12 -24 pixels spacing is optimal.
- Button or text size is independent from hit zone size. It may be smaller, but should not be larger.
- Undo, Redo, and Back are essential navigational elements for usability. Without them, users must return to 'home' pages/screens to reorient themselves
Motion and Sound
- Motion and sound can engage parts of the brain that will increase attentiveness and recall as well as simple delight.
- Motion can be used to attract attention to page/screen elements in a way that can effect the overall visual hierarchy.
- The effect of delight should not be underestimated as many studies have shown that the human brain learns and solves problems more efficiently when it is 'happy'.
WCAG 2.1 level AA and Section 508 Guidelines
- The media should be navigable using a keyboard arrow and tab keys
- Should be consistent from page to page
- Links to the same location with different names should not be on the same page and avoid redundant links in general
- A "skip Menu" invisible or visible button should be included if the menu has more than 4 buttons.
- Do not differentiate categories of information using only color. Other indicators such as color value, text and iconography, borders, etc. will work better for the sight impaired.
- A site map page should be included for sites with drop down menus.
- Users should be warned of time limits that are essential or longer than 20 hours. Audio and visual warnings (20 seconds in advance) should tell the user when time limits are at hand. Ideally, time limits should be extendable.
- Links in body text should be underlined
- Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.
- Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.
- A good example: Visit our on-line knowledge resource: The Digital Learning Center.
- A bad example: Click here to visit our on-line knowledge resource: The Digital Learning Center.
- The media should be responsive to a variety of screen sizes.
- The content should be displayed in a left to right, top to bottom hierarchy.
- Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples.
- Use alphabetical, unordered or ordered lists when organizing information
- Table columns should have headers.
- No automatic pop-ups or focus changes triggered by scrolling.
- There should be ample space between navigation elements that allow for ease of use on a small phone
- Avoid overuse of parallax effects and animation triggered by scrolling. As many as 35% of people over the age of 40 are likely to feel nauseous it subtle when used, due to vestibuler disordersdisorders.
- Symantec Web Design: When all CSS styling of the page is removed, the elements on the page should still be in a logical reading order in the HTML code. Here's how you can test:
- Use Firefox Developer Edition (Click View > Page Style > No Style in the top menu)
- Use the WAVE checker (click the "no styles" tab)
- Check manually that the elements on the page are in a logical reading order.
- It is very likely that a sight impaired person will navigate a web page by tabbing through the headers. The headers should be written to maximize that process. Hierarchical/chronological use of text tags is also critical. For example:
- Title, Heading, Sub-heading, Normal
- H1, H2, H3, H4, Normal
- It's best not to rely on visual formatting alone to communicate meaning. Screen readers might not announce formatting changes, such as boldface or highlighting. For example, to mark an important section of text, add the word "Important."
- Should be high contrast against its background (light on dark or dark on light). Use the Wave Checker tool to test color combinations. Use the a combination of the Wave Checker and the NoCoffee Chrome extension to test color combinations for various color blind conditions.
- Should be sized for easy reading
- Should be left-aligned in most cases when there is a large volume of text.
- If you use image based text, the text in the image must be included, in full, in the image alt tag.
- Should be able to enlarge using devise controls.
- Avoid redundant text: especially between title and header tags
- Don't use all upper case type setting. Screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT style text will work well with screen readers.
- Images should be high contrast to ensure sight impaired persons can understand them. Reference the imaging guidelines in this site.
- Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.
- An example of a bad tag: figure 2
- An example of a good tag: cartoon of a drowning fish
- An example of a tag with a link destination: fish icon - fishing guide
- If an image contains complex information that is critical to understanding the content, a "long description" tag can be used. Wordpress has this capability built into it.
- Icons should always include text with them.
- Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.
- Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complimentary colors or stripes that may scintillate. Guidelines from Webaim.
- Purely decorative images, like those sometimes used as backgrounds in page headers, do not need alt tags.
- Captions should not be used in place of alt tags. Captions should be used for adding context to an image such as: It's source, why it is important, etc.
All of the universal design principles that center around visual hierarchy, imaging, motion, and sound apply here as well.
For the Sight Impaired
Using real text and image alt tag descriptions is a must for sight impaired persons using screen readers.
For The Hearing Impaired
Embedded video and audio should written in a visual narrative style or include an audio described version.
Write As If You're Not There
When designing slides that will be viewed when you are not present, each slide should include a summary of what you would say, in a way that can be understood as a stand-alone. This screen-capture of a slide (labeled 'Our Primal Brain') shows the narrators text on the left and the associated image on the right. The graphic in the upper right shows the viewer which section of the slide-show they are in.
Provide Captions and Transcripts
Creating a video version with Captions and Transcripts is another way to make a slide-show accessible. 3Play media has collaborated with University of South Florida to create an effective method for this that is reinforced by research performed at the university.
You can engage with the Captions and Transcripts webinar on the 3Play Media website for free.
Site Impaired Testing
JAWS Screen Reader
- The Jaws Screen Reader is the only one that will work with Blackboard because both are JAVA based.
- JAWS costs around $,1000 per user.
- JAWS was the most used screen reader but, due to competition with better, less expensive (or free software), it has dramatically decreased in popularity
- Learn more about the JAWS screenreader
- No Coffee: Chrome Extension that can simulate many site impairments
- Paletton: Color Palette that provides color blind previews (the vision simulation button is small and in the lower right corner.
A short video demonstrating MAC's, free, built-in screen reader called VoiceOver.
The video was created by Developer/advocate Rob Dobson and is available on the Google Chrome Developers YouTube channel.
Trying the MAC Voice Over Screen Reader Navigation For Yourself
- This resource by WebAim is a great place to start learning about using VoiceOver.
- Below are some of the most commonly used keyboard commands.
- Works only in the Safari browser
- Click on on the Apple icon in the upper left corner of your MAC
- Choose 'system preferences > accessibility'
- Choose 'VoiceOver > Enable VoicOver"
Using VoiceOver Keyboard Commands
- Command - f5: toggles VoiceOver on and off
- Control-option-command-h: toggles through headings
- Control-option-right arrow: reads the content under the heading
- Control-option-right arrow: navigate by arrowing around
- Control-option-a: reads the entire page
- Control-option - spacebar: select
- Control-option-u: (rotor)access to all browsing methods control
- Option-shift-down arrow: interact with web page control
- Control-option-command-arrow up/down: increase/decrease reading speed
A short video demonstrating NVDA, a free, built-in screen reader that runs on Windows.
The video was created by Developer/advocate Rob Dobson and is available on the Google Chrome Developers YouTube channel.