Code overview
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.
Who should use this guide
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. Reach out to Web Development if you need assistance interpreting the content.
What services are within scope
All online spaces with a University Libraries presence including but not limited to: the main website, HSL website, LibGuides, Drupal Lite websites where Libraries is a primary partner, and any other Libraries-owned sites or web content.
The design system code meets the outlined principles, focusing on optimization, accessibility, as well as responsiveness. Modifying the code architecture 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.
Suggest improvements or changes to the code using pull requests.
-
General
Guidelines for global or overarching code features.
-
Content blocking
Content groupings on pages.
-
Quotations
Using HTML elements to display quotations.
-
Citing sources
Code patterns for correctly writing references including citations and footnotes.
-
Dates and times
How to code dates and times meaningfully for machine reading and assistive technology.
-
Links
Different methods to code hyperlinks for different scenarios such as internal and external linking.
-
Buttons
Appropriate use of buttons and how to code them.
-
Images
Instructions for processing images and what file types to use.
-
Lists
Different list styling options.
-
Cards
Modified list option to allow more complex content groupings.
-
Forms
All web form considerations and coding recommendations for the most effective accessibility and usability.
-
Tables
Proper use and layout of data tables.
-
Navigation
Primary, skip links, subsection, breadcrumb navigation patterns.
-
Alerts
Information notices, error alerts, and warnings for forms, outages, and more.
-
Tooltips
For informational descriptions, tooltips provide context. Use sparingly.
-
Code snippets
To expose code, primarily for use in the design system.
Further reading
The most performant[, sustainable], accessible and easily maintainable feature of a website is the one that you don’t make in the first place.