Code overview

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

  Includes web form content, language, accesibility, and component code.

• 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.