Code is intentionally written in pure HTML and CSS as agnostic output. It is the developer’s discretion to translate the output into the language dictated by the project.
Anyone comfortable with HTML and wishes to create a more inclusive online experience.
The code content is written for developers who are familiar with HTML and CSS. Please reach out to Web Development if you need assistance understanding the content.
All places with a University Libraries presence including but not limited to: the main website, HSL website, LibGuides (open or WYSIWYG code blocks only), Drupal Lite websites where Libraries is a primary partner.
The code in the design system is recommended to meet the outlined principles, focusing on optimization, accessibility, as well as responsiveness. Modifying the architecture of the code is not recommended, as well as some CSS patterns that may disable assistive technology features.
For example, changing a <table>’s display default from table to block will remove all native table navigation features, such as a screen reader announcing the column and row headers. If modification is necessary or desired, ensure the output code is heavily tested.
To reiterate, modification of code output is NOT recommended. Rather, suggest improvements or changes to the code using pull requests.
Guidelines for global or overarching features of code.
Building content groupings on pages.
Using HTML elements to display quotations.
Code patterns for correctly writing references including citations and footnotes.
How to code dates and times meaningfully for machine reading and assistive technology.
Different methods to code hyperlinks for different scenarios such as internal and external linking.
Appropriate use of buttons and how to code them.
Instructions for processing images and what file types to use.
Different list styling options.
Modified list option to allow more complex content groupings.
All web form considerations and coding recommendations for the most effective accessibility and usability.
Proper use and layout of data tables.
Primary, skip links, subsection, breadcrumb navigation patterns.
Information notices, error alerts, and warnings for forms, outages, and more.
For informational descriptions, tooltips provide context. Use sparingly.
To expose code, primarily for use in the design system.
The most performant[, sustainable], accessible and easily maintainable feature of a website is the one that you don’t make in the first place.