Enterprise Architecture – what is it?
Much like an architect’s drawing incorporating structure and support to develop a building design, Virginia’s Enterprise Architecture (EA) establishes basic guidelines and requirements to develop IT resources for the enterprise of Virginia government.
EA contains both policies and processes to provide IT direction and technical requirements for executive branch agencies. Its chief benefit to us as website stakeholders is that it standardizes the way that we work, and the output of our work.
EA is divided into relevant domain areas—such as event logging, data availability, and smart devices—of which the website requirements are just one. It incorporates important requirements from across the IT landscape, including security, usability and accessibility, into a shared and common resource.
Who are Enterprise Architecture Users, and how do they use it?
Agency employees and agency- selected vendors use EA as a single, consolidated list of requirements. Its use guides rather than restricts work output; it assists agencies in creating IT assets that can be used by citizens, business and other government agencies in a confident and competent manner.
If agency work, such as creating websites and applications, is outsourced to a vendor partner, use of EA will ensure that the vendor follows needed requirements shared by all, rather than each agency having to recreate these requirements.
It also allows agency staff to work toward common goals and speak a shared language across all agencies. It is a set of requirements built once, and then shared and reused many times.
Commonwealth Design System
How does the Commonwealth Design System Tie into EA?
The Commonwealth design system is a set of components that is built to support the EA web standard, making it easier for agencies across the state to create and maintain websites that align with its guidance. VITA maintains this system under section WEB-01 in EA. The design system is split into four different sections:
- Commonwealth Banner: The Commonwealth Design System houses the Commonwealth banner, a mandatory aspect of the Design System that every agency must display at the top of its website to denote that the site is an official website of the Commonwealth of Virginia. Color variants and code generation of the Commonwealth Banner can be found on developer.virginia.gov/commonwealth-branding-bar.
- Website components: Optional components and utilities that agency web developers can reference when designing websites. Use cases, code, and accessibility guidance is provided for these components for agency web developers, as well as native Sketch, Figma, and Adobe XD design files for agency web and UX designers. Components are built to be accessible and responsive across a wide variety of devices.
- Branded template framework: A series of optional templates and code snippets that agencies can use as either a base for websites or taken in chunks, piecemeal, from the design system’s pattern library, to create sites using the design system’s website components. Templates are developed to be accessible and responsive across a wide variety of devices.
- Software Resources: A guide for software that is used across the Commonwealth and the standards maintained for each of them, both to develop in conjunction with the design system (such as Terminal 4, Wordpress, and Drupal) and monitoring or conjunctive sites for stability, accessibility, and assistive services (such as Site Improve).
- Best Practice Guidelines: Best practice guidelines are additional development and design guidelines that extend beyond requirements. While these guidelines are optional, it is recommended they are followed. They encompass best practices for accessibility, new component generation, website maintenance, etc.
What parts of the design system am I required to use on our agency website?
WEB-06 states agencies are required to follow VITA-designed principles and guidance for the development of COV web systems, but are not required to use the design system components except as noted below.
These parts of the design system are mandatory:
- Implementation and use of the Commonwealth Banner
- Assistive software as outlined in the software resources section
- Accessibility practices as laid out in the accessibility section of EA (and as found in the accessibility section in the Design System, which gives a quick start guide of the principles to be followed).
What are some things our website needs as defined by EA that I can find in the design system?
The design system provides code and design components that can make EA-compliant sites simple and easy. The following links below provide guidance and component resources for parts of your agency website that EA deems mandatory:
- The Commonwealth Branding Bar
- An agency site search box which shall appear on every page (WEB-27)
- A footer that contains the following at minimum (WEB-28):
- Agency name
- Copyright information
- Text or an approved icon link stating Web Accessibility Initiative (WAI) compliance
- Link to the agency’s Internet Privacy Policy Statement
- Link to FOIA information
- Translation disclaimer
- A Contact Us page that is accessible from the page footer that contains the following at minimum (WEB-29):
- Mailing address
- FAX number, if available
- Phone number, including a toll-free number and/or TTY number if available
- Email link or contact form to an agency contact.