Javascript is a progressive enhancement only. Where javascript is used, it is implemented minimally with thorough unit testing for user experience including accessibility. Avoid frameworks, and any javascript, to deliver critical content where possible.
BuzzFeed monitored javascript timeouts noting 1% failed to load equalling 13 million requests per month. Web assets must be designed for resiliency with graceful degradation.
Web tools and languages must have 98% or greater coverage for the audience (e.g. use University Libraries website analytics for https://www.lib.umn.edu)
Only use elements, attributes, and features that have at least 98% or greater coverage for lib.umn.edu (or intended website audience) on caniuse.com. Analytics data used for rate determination is for the entire semester (if the current semester is less than three months, move the start point to include the previous semester data).
Title attributeDo not use the title attribute unless specifically recommended. Better tools exist for most cases where title might be considered, and all of them are more accessible.
title is never used for images, always use alt.
Lang attributeIdentifying the language of a content block is essential for technology to interpret content correctly, such as text-to-speech readers applying different language rules for pronunciation.
Each page is set to present American English at the top of each web document and specified reading direction is left-to-right, <html lang="en-us" dir="ltr">. This may not be modified.
When using any language outside of American English, identify the words using the lang attribute. The lang attribute may be added to most elements but is recommended specifically for: span, p, and blockquote. Use the ISO 639-1 2-letter code to identify the language.
<p>The world is full of languages. As the saying goes, <span lang="fr">Une seule langue n’est jamais suffisante</span>.</p>
<p lang="de">Anfangen ist leicht, Beharren eine Kunst.</p>
If you have a vestibular disorder or have certain kinds of migraine or seizure triggers, navigating the web can be a lot like walking through a minefield - you’re perpetually one click away from activating an unannounced animation. And that’s just for casual browsing.
Animation is a progressive enhancement.
For any pages that might have motion, such as animated graphics, utilize prefers-reduced-motion to stop animation effects. This honors a person’s choice to prevent animation that may cause motion sensitivities or distraction, among other negative health effects.
@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
transition-duration: 0.001ms !important;
}
}
Code from Revisiting prefers-reduced-motion, the reduced motion media query, CSS Tricks
Never embed social media threads.
If content must be embedded, such as a hosted video or a LibGuides widget, attribute it correctly and provide a link to the original content.
Utilize HTML5 embedding methods, or <iframe> if necessary, over javascript.
All content presented on the website must meet University accessibility requirements, including embedded content. Video hosted elsewhere but embedded on a Libraries website must provide closed captions and preferably transcripts.