COMPONENT LIST

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. 

      NOTES

      example: https://professionals.globalatlantic.com/work-with-us/meet-global-atlantic 

      1. Background color can't change 
      2. Image required

      card 1 (3 column)

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      card 1 (3 column)

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      card 1 (3 column)

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      579x134

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      579x134

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://professionals.globalatlantic.com/ 

      1. Background color can't change 

      [field.alt]

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://ga-test.acquia.globalatlantic.com/retirement-annuities/registered-index-linked-annuities 

      1. This card has an option to be linked or not
      2. Background color can change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://professionals.globalatlantic.com/ageless-wisdom 

      1. Image required
      2. Background color can change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://ga-test.acquia.globalatlantic.com/achieve-your-goals/income 

      1. Image can be left or right aligned
      2. Background color can't change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://professionals.globalatlantic.com/

      1. Background color can't change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. 

      NOTES

      example: https://professionals.globalatlantic.com/work-with-us/meet-global-atlantic 

      1.  Mobile: removes image - turns to solid white background
      2. Background color can't change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      NOTES

      example: https://professionals.globalatlantic.com/work-with-us/meet-global-atlantic 

      1. Can be left or right aligned
      2. Background color can change 

      Eyebrow

      Heading

      Lorem ipsum odor amet, consectetuer adipiscing elit.

      NOTES

      example: https://ga-test.acquia.globalatlantic.com/achieve-your-goals/accumulation 

      1. Image can be left or right aligned 
      2. Background color can change 

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

      Lorem ipsum odor amet, consectetuer adipiscing elit. Commodo iaculis dignissim, netus cursus hendrerit dignissim bibendum metus lacus. Natoque scelerisque vulputate placerat posuere cras.

        Eyebrow

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes nullam primis taciti justo egestas pretium sit augue.

        Eyebrow

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes nullam primis taciti justo egestas pretium sit augue.

        Eyebrow

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes nullam primis taciti justo egestas pretium sit augue.

        NOTES

        vertical tabs example: https://ga-test.globalatlantic.com/who-we-are 

        horizontal tab example: https://professionals.globalatlantic.com/ 

        1.  

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        NOTES

        example:

        1.  

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        NOTES

        example:

        1.  

        Heading

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        NOTES

        example:

        1.  

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Got it

        NOTES

        example: manage my business

        1.  

        Announcements Heading

        Item

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        10/10/24

        Item 2

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        10/10/24

        Item 3

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        10/10/24

        2022

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        2023

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        2024

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.

        Heading Text

        Lorem ipsum odor amet, consectetuer adipiscing elit. 

        Heading Text

        Lorem ipsum odor amet, consectetuer adipiscing elit. 

        Heading Text

        Lorem ipsum odor amet, consectetuer adipiscing elit. 

        Heading Text

        Lorem ipsum odor amet, consectetuer adipiscing elit. 

        Ellipse
        square wireframe
        WPC

        Lorem ipsum odor amet, consectetuer adipiscing elit. Sodales lobortis ipsum quis penatibus nunc, venenatis sollicitudin curae morbi?

        this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text

        NOTES

        example:

        1.  

        this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text

        NOTES

        example:

        1.  

        this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text

        NOTES

        example:

        1.  

        this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text this is a bunch of text

        NOTES

        example:

        1.  

        COLOR PALETTE

        Primary

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        Primary: ActivePMS 539: Activecoh-color-primary-active#BFCAD0
         
        Primary: FocusPMS 539: Focuscoh-color-primary-focus#8095A2
         
        Primary: HoverPMS 539: Hovercoh-color-primary-hover#406073
         
        Primary: InitialPMS 539: Initialcoh-color-primary-initial#002B45
         
        Process Blue: ActiveProcess Blue: Activecoh-color-process-blue-active#BFE0F2
         
        Process Blue: FocusProcess Blue: Focuscoh-color-process-blue-focus#80C2E4
         
        Process Blue: HoverProcess Blue: Hovercoh-color-process-blue-hover#40A3D7
         
        Process Blue: InitialProcess Blue: Initialcoh-color-process-blue-initial#0672AC
         
        PMS 298: ActivePMS 298: Activecoh-color-pms-298-active#D5ECF7
         
        PMS 298: FocusPMS 298: Focuscoh-color-pms-298-focus#ABDAEF
         
        PMS 298: HoverPMS 298: Hovercoh-color-pms-298-hover#81C7E8
         
        PMS 298: InitialPMS 298: Initialcoh-color-pms-298-initial#57B5E0
         
        PMS 362: ActivePMS 362: Activecoh-color-pms-362-active#CBE0CF
         
        PMS 362: FocusPMS 362: Focuscoh-color-pms-362-focus#96C29F
         
        PMS 362: HoverPMS 362: Hovercoh-color-pms-362-hover#62A370
         
        PMS 362: InitialPMS 362: Initialcoh-color-pms-362-initial#1E7330
         

        Secondary

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        PMS 7462: ActivePMS 7462: Activecoh-color-pms-7462-active#C2D6E3
         
        PMS 7462: FocusPMS 7462: Focuscoh-color-pms-7462-focus#86ADC8
         
        PMS 7462: HoverPMS 7462: Hovercoh-color-pms-7462-hover#4985AC
         
        PMS 7462: InitialPMS 7462: Initialcoh-color-pms-7462-initial#0D5C91
         
        PMS 7457: ActivePMS 7457: Activecoh-color-pms-7457-active#F5F8F9
         
        PMS 7457: FocusPMS 7457: Focuscoh-color-pms-7457-focus#EAF1F2
         
        PMS 7457: HoverPMS 7457: Hovercoh-color-pms-7457-hover#E0EAEC
         
        PMS 7457: InitialPMS 7457: Initialcoh-color-pms-7457-initial#D6E3E6
         

        Tertiary

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        Cool Grey: 700Cool Grey: 700coh-color-cool-grey-700#B5B0AD
         
        Cool Grey: 900Cool Grey: 900coh-color-cool-grey-900#666366
         
        PMS 7404:800PMS 7404:800coh-color-pms-7404-800#F7EC8C
         
        PMS 7404:900PMS 7404:900coh-color-pms-7404-900#F0D91A
         
        PMS 7729: InitialPMS 7729/900coh-color-pms-7729-initial#005745
         

        Background

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        BG BlueBG Bluecoh-color-bg-blue#EFFAFF
         
        BG GreyBG Foundation Greycoh-color-bg-grey#F8F8F8
         

        Alert

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        SuccessSuccesscoh-color-success#A3D963
         
        Warning: 600Warning: 600coh-color-warning-600#FBE1CE
         
        Warning: 900Warning: 900coh-color-warning-900#F29B5B
         
        Error: 600Error: 600coh-color-error-600#F7C8C8
         
        Error: 900Error: 900coh-color-error-900#E54848
         

        Shades

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        WhiteWhitecoh-color-white#FFFFFF
         
        BlackBlackcoh-color-black#000000
         
        PrimaryPrimarycoh-color-primary#012639
         
        White: InitialWhite: Initialcoh-color-white-initial#FFFFFF
         
        White: Disabled Opacity 35%Disabled Opacity 35%white-disabled-opacity-35#597585
         
        White: Hover Opacity 70%Hover Opacity 70%white-hover-opacity-70#B1BFC7
         

        Neutral

        Site Studio NameFigma NameStyle Sheet ClassHexReference
        Neutral: Zebra Stripes GreyNeutral: Zebra Stripe Greycoh-color-neutral-zebra-stripes-grey#F2F2F2
         
        N/AGrey (50% Black)N/A#808080
         
        Neutral: MiddleNeutral/500coh-color-neutral-middle#E2E2E2
         
        Neutral: DisabledNeutral: Disabledcoh-color-neutral-disabled#B2B1B2
         

        Breakpoints Specifications

        Breakpoints are the point where your site content will respond to provide the user with the best possible layout to consume the information. We need to define breakpoints at the exact device widths before beginning to work with responsive design.

        BreakpointMin. widthGuttersText ContainerOuter text margin
        Desktop: 1440px1440px36px1215px112.5px
        Desktop: 1215px1215px36px1215px0px
        Laptop: 1024 -1213px1024px36px 40px
        Tablet:  720-1023px720px24px 40px
        Mobile Landscape: 565-719px565px16px 40px
        Mobile Portrait: 320-564px32016px 40px

          Desktop- 12 columns
          Content Area: 1215px 

          Desktop- 12 columns
          Content Area: 1215px 
          No Gutters

          Desktop- 12 columns
          Content Area: 1215px 

          Desktop- 12 columns
          Content Area: 1215px 
          No Gutters

          NOTES

          1.  

          HEADINGS

          Heading 1

          font-weight: 900 | 32px | 40px line height

          class: .coh-style-h1

          Heading 2

          font-weight: 700 | 27px | 1.2em line height

          class: .coh-style-h2

          Heading 3

          font-weight: 700 | 24px | 1.2em line height

          class: .coh-style-h3

          Heading 4

          font weight: 700 | 20px | 1.2em line height

          class: .coh-style-h4

          Heading 5

          font weight: 700 | 18px | 1.2em line height

          class: .coh-style-h5

          Heading 6

          font weight: 700 | 16px | 1.2em line height

          class: .coh-style-h6

          HEADING MODIFIERS

          Display 1

          font-weight: 900 | 60px | 1.2em line height

          class: .coh-style-display-1

          Display 2

          font weight: 700 | 40px | 1.2em line height

          class: .coh-style-display-2

          Display 3

          font weight: 700 | 36px | 1.2 em line height

          class: .coh-style-display-3

          Bold

          font-weight: 600 | 24px

          class: .coh-style-bold

          Heading: bottom margin

          10px bottom margin

          class: .coh-style-heading-bottom-margin

          PARAGRAPHS

          Paragraph

          18px | 1.5 em line height | 15px bottom margin

          class: .coh-style-paragraph-bottom-margin

          Text: smaller

          16px | 1.5em line height

          class: .coh-style-text-small

          Text: big

          25px | 1.3em line height

          class: .coh-style-text-big

          Text: black

          Font-weight:900

          class: .coh-style-text-black

          Text: med

          24px | 1.5em line height

          class: .coh-style-text-med

          Text: small

          14px | 1.5em line height

          class: .coh-style-text-small

          Text: x-large

          32px | 1.5 em line height

          class: .coh-style-x-large

          Text: x-small

          10px | 1.5em line height

          class: .coh-style-text-x-small

          Text: xx-large

          85px | 1.0 em line height

          class: .coh-style-text-xx-large

          Text: Small Black

          font-weight: 400 | 12px | 18px line height

          class: .coh-style-text-small-black

          Text: medium-weight

          font-weight: 500

          class: .coh-style-text-medium-weight

          Text: larger

          27px | 1.5 em line height

          class: .coh-style-text-larger

          Nav Teaser

          font-weight: 700 | 20px

          class: .coh-style-nav-teaser

          Large

          20px

          class: .coh-style-large

          Text: bigger

          20px 

          class: .coh-style-text-bigger

          Text: Small gray

          Hex: #666366 | 12px | 1.5em line height

          class: .coh-style-text-small-gray

          CUSTOM STYLES

            Class name: .coh-style-pull-quote

            Default content for 'Block quote'.

            Class name: .coh-style-pull-quote-left

            Default content for 'Block quote'.

            Class name: .coh-style-toggle-button

            Not in use

            Class name: .coh-style-button-x-small

            Class name: .coh-style-rectangle

            Default content for 'Generic'.

            Class name: .coh-style-text-box-highlight

            Default content for 'Generic'.

            Class name: .coh-style-image-left-align

            Default content for 'Generic'.

            Class name: .coh-style-disclaimer-right

            Default content for 'Generic'.

            Class name: .coh-style-image-right-align

            Default content for 'Generic'.

            Class name: .coh-style-table-cell-

            Default content for 'Generic'.

            Class name: .coh-style-table-header

            Default content for 'Generic'.

            Class name: .coh-style-visible-desktop

            Default content for 'Generic'.

            Class name: .coh-style-visible-mobile

            Default content for 'Generic'.

            Class name: .coh-style-image-text-hover

            Default content for 'Generic'.

            Class name: .coh-style-disclosure-border

            Default content for 'Generic'.

            Class name: .coh-style-floatleft

            Class name: .coh-style-float-right

            Class name: .coh-style-image-border-black

            Not in use

            Class name: .coh-style-login-password-bg

            Class name: .coh-style-white-on-blue

            Default content for 'Layout'.

            Class name: .coh-style-link-dark-green

            Class name: .coh-style-link-small-green

            Class name: .coh-style-link-green

            Class name: .coh-style-duplicate-of-link-green-with-arrow

            Class name: .coh-style-link-white-with-arrow

            Class name: .coh-style-arrow

            Class name: .coh-style-link-blue

            Class name: .coh-style-link-bold

            Class name: .coh-style-link-border-bottom

            Class name: .coh-style-link-default

            Class name: .coh-style-list-order-display

            Unordered list

            • List item 1
            • List item 2
            • List item 3

             

            Ordered list

            1. List item 1
            2. List item 2
            3. List item 3

             

            Description list

            List term 1

            List description 1

            List term 2

            List description 2

            List term 3

            List description 3

            Class name: .coh-style-list-item-bottom-margin

            Unordered list

            • List item 1
            • List item 2
            • List item 3

             

            Ordered list

            1. List item 1
            2. List item 2
            3. List item 3

             

            Description list

            List term 1

            List description 1

            List term 2

            List description 2

            List term 3

            List description 3

            Class name: .coh-style-list-item-indent

            Unordered list

            • List item 1
            • List item 2
            • List item 3

             

            Ordered list

            1. List item 1
            2. List item 2
            3. List item 3

             

            Description list

            List term 1

            List description 1

            List term 2

            List description 2

            List term 3

            List description 3

            ADA Background Information

            Currently, the Department of Justice judges web accessibility by whether or not it meets the technical requirements of the Web Content Accessibility Guidelines (WCAG) 2.2.​

            There are differing levels of conformance within WCAG 2.2, the “Success Criteria”. GA is following AA Guidelines:

            1. Level A (WCAG 2.2 A), the minimum level of conformance​
            2. Level AA (WCAG 2.2 AA), the level generally relied on by the Department of Justice and the courts​
            3. Level AAA (WCAG 2.2 AAA), the maximum level of conformance​

            GA is following AA Guidelines

              Top Accessibility Guidelines

              1. Page titles are the first thing a screen reader will see​
                1. Meta Title: 50 characters max
                2. Meta Description: 160 characters max
              2. A web page has a descriptive and informative page title​
              3. Page headings and labels for form and interactive controls are informative​
              4. Avoid duplicating
              5. Screen readers can browse the page by headings if they are properly structured​
              6. Semantic markup is appropriately used to designate headings and regions​
              7. Use the H1-H6 tags in HTML to make headings ​
                1. Use headings to organize the page, and not strictly for visual presentation ​
                2. Include only one H1 heading per page ​
              8. Tables are used for tabular data and data cells are associated with their headers​
              Heading Markup

              1.  All images, image buttons, image map hot spots must have alt text
                1. all alt text must describe the image
                2. Decorative images must have empty alt text (alt-"')
              2. Embedded multimedia is identified via accessible text​
              3. Frames and iframes are appropriately titled 

              1. A descriptive transcript or audio description of relevant content is provided for non-live video-only​
              2. Synchronized captions are provided for non-live video

              Top Accessibility Guidelines

              1. Make sure all pages follow proper heading structure ( H1-H6) 
              Heading Markup

              1.  All images, image buttons, image map hot spots must have alt text
                1. all alt text must describe the image
                2. Decorative images must have empty alt text (alt-"')
              2. Text within images cannot be read by screen readers​
                1. Any text associated with an image must be separated in the form of surrounding text, header, label, or alt text. 

              1. Images must have a contrast ratio of at least 3.1 for all states (hover, focus, active, etc.)
                1. Text must be separate from an image (no text within images)
              2. Color alone is not used to distinguish links from surrounding text
              3. All text follows contrast and sizing guidelines
                1. Text and images of text have a contrast ratio of at least 4.5:1
                2. Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1. 

              1. All page functionality is available using a keyboard
                1. Pointer input target sizes are at least 24x24px
                2. If multipoint or path-based gestures (grabbing, swiping,etc.) are not essential, then the functionality can also be performed with a single point activation (ex. Button) 
              2. When a page element receives focus it does not result in change to the page, spawning of a pop-up window, or additional change of keyboard focus
              3. Information that a user must re-enter to complete a single-session process must be auto-0population or available for the user to select, unless the information is essential to the functionality, the information poses security issues, or the previous information is no longer valid​
              4. Multiple ways are available to find other web pages on the site​
              5. No loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at 320 px
                1. websites must be responsive
                2. tables, complex images, toolbars are exempted
                3. Orientation of web content is not restricted

              1. Having adequate paragraph spacing and proper spacing between letters and characters
                1. Line height should be at least 1.5 times the font size
                2. The spacing that follows paragraphs should be at least 2 times the font size
                3. Letter spacing should be at least 0.12 times the font size
                4. Word spacing should be at least 0.16 times the font size
              2. Unequal height and differences between capital and lowercase letters
              3. Characters like o, e, a, and c look similar to other letter shapes
              4. Thin-weight and narrow-width fonts are not deemed accessible
              5. Sans serif is more accessible than serif fonts
              6. minimum font size of 16 px

              Top Accessibility Guidelines

              1. Make sure all pages follow proper heading structure ( H1-H6) H1 does not need to be visually apparent to meet guidelines 
              Heading Markup

              1.  All images, image buttons, image map hot spots must have alt text
                1. all alt text must describe the image
                2. Decorative images must have empty alt text (alt-"')
              2. Text within images cannot be read by screen readers​
                1. Any text associated with an image must be separated in the form of surrounding text, header, label, or alt text. 

              1. Images must have a contrast ratio of at least 3.1 for all states (hover, focus, active, etc.)
                1. Text must be separate from an image (no text within images)
              2. Color alone is not used to distinguish links from surrounding text
              3. All text follows contrast and sizing guidelines
                1. Text and images of text have a contrast ratio of at least 4.5:1
                2. Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1. 

              1. Information that a user must re-enter to complete a single-session process must be auto-population or available for the user to select, unless the information is essential to the functionality, the information poses security issues, or the previous information is no longer valid​
              2. Multiple ways are available to find other web pages on the site​
              3. No loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at 320 px
                1. websites must be responsive
                2. tables, complex images, toolbars are exempted
                3. Orientation of web content is not restricted

              1. All page functionality is available using a keyboard
                1. Keyboard focus is never locked or trapped at one particular page element​
                2. When additional content is presented on hover or keyboard focus the newly revealed content can be dismissed by esc key without moving the pointer or keyboard focus​
              2. When a page element receives focus it does not result in change to the page, spawning of a pop-up window, or additional change of keyboard focus
              3. Pointer gestures 
                1. The pointer can be moved to the new content without the content disappearing​
                2. Pointer input target sizes are at least 24x24px
                3. If multipoint or path-based gestures (grabbing, swiping,etc.) are not essential, then the functionality can also be performed with a single point activation (ex. Button) 

              1. When a page element receives focus it does not result in change to the page, spawning of a pop-up window, or additional change of keyboard focus ​
              2. There is a visible indicator for page elements when they receive keyboard focus

              1. Having adequate paragraph spacing and proper spacing between letters and characters
                1. Line height should be at least 1.5 times the font size
                2. The spacing that follows paragraphs should be at least 2 times the font size
                3. Letter spacing should be at least 0.12 times the font size
                4. Word spacing should be at least 0.16 times the font size
              2. Unequal height and differences between capital and lowercase letters
              3. Characters like o, e, a, and c look similar to other letter shapes
              4. Thin-weight and narrow-width fonts are not deemed accessible
              5. Sans serif is more accessible than serif fonts

              PDF Guidelines

              The pervious guidelines also refer to content found within PDF files accessed from the website: including proper headings, alternative text for images, appropriate link text, reading order, etc. 

              PDF's can be modified in multiple ways depending on how they were created. Typical methods include Adobe Acrobat Pro, Adobe InDesign, or Microsoft Word

              How to use Adobe Acrobat Pro- Prepare Accessibility Tool

              1. All tools > view more > use guided actions​
              2. Make accessible​
                1. Prepare​
                  1. Add document description​
                  2. OCR​
                  3. Set tab order​
              3. Set language and tags​
                1. Language​
                2. Alt tags​
              4. Run accessibility check​
                1. Fix issues​
              5. Optimize scanned​

              Top Accessibility Guidelines

              1. Searchable text​
              2. Recognize text with OCR​
              3. Images with alternative text (alt text)​
              4. Logical reading order (especially for tables)​
                1. Screen readers read content linearly, so tables appearing in your PDF file need to have a logical reading order from left to right​
                2. Tables do not split across pages​
              5. Appropriate content hierarchy​
              6. Bookmarks for PDFs over 9 pages​
              7. Color contrast ​