Javascript is for progressive enhancement only. Where javascript is used, implement it 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, elements, and attributes must have 98% or greater browser coverage 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.
An example is the main Libraries site. Each page is set to American English and the reading direction identified as left-to-right, <html lang="en-us" dir="ltr">.
When using a language outside of the page-level defined one, 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 &emdash; 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-motiony, 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 University-related website must provide closed captions and preferably transcripts.