COMPONENT LIST
NOTES
example: https://professionals.globalatlantic.com/resources/imo-sales-hub
- Tall card is not in use
- Background color can't change

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
- Background color can't change
- Image required

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.

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.

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.

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.

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/accumulation
- Background color can change
NOTES
example: https://professionals.globalatlantic.com/thriving-practice
- Whole card is clickable
- Background color can't change
![[field.alt]](/sites/globalatlantic/files/styles/original/public/2024-10/icon%20card%20image%20top.png.webp?itok=_j2WLU_X)
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
- This card has an option to be linked or not
- 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
- Image required
- Background color can change
NOTES
example: https://ga-test.acquia.globalatlantic.com/achieve-your-goals/income
- Image can be left or right aligned
- 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.
Eyebrow
Heading
Lorem ipsum odor amet, consectetuer adipiscing elit.
NOTES
example: https://professionals.globalatlantic.com/work-with-us/meet-global-atlantic
- Mobile: removes image - turns to solid white background
- Background color can't change
NOTES
example: https://professionals.globalatlantic.com/work-with-us/meet-global-atlantic
- Can be left or right aligned
- 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
- Image can be left or right aligned
- 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.
NOTES
vertical tabs example: https://ga-test.globalatlantic.com/who-we-are
horizontal tab example: https://professionals.globalatlantic.com/
NOTES
example: https://ga-test.acquia.globalatlantic.com/achieve-your-goals/income
- Mobile: 719x flex height
NOTES
example: https://ga-test.acquia.globalatlantic.com/achieve-your-goals/accumulation
- Mobile: 719x400px
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:
Heading
Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.
NOTES
example:
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:
Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate ac inceptos sem gravida integer donec, adipiscing ut molestie.
NOTES
example: manage my business
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.



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:
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:
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:
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:
COLOR PALETTE
Primary
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
Primary: Active | PMS 539: Active | coh-color-primary-active | #BFCAD0 | |
Primary: Focus | PMS 539: Focus | coh-color-primary-focus | #8095A2 | |
Primary: Hover | PMS 539: Hover | coh-color-primary-hover | #406073 | |
Primary: Initial | PMS 539: Initial | coh-color-primary-initial | #002B45 | |
Process Blue: Active | Process Blue: Active | coh-color-process-blue-active | #BFE0F2 | |
Process Blue: Focus | Process Blue: Focus | coh-color-process-blue-focus | #80C2E4 | |
Process Blue: Hover | Process Blue: Hover | coh-color-process-blue-hover | #40A3D7 | |
Process Blue: Initial | Process Blue: Initial | coh-color-process-blue-initial | #0672AC | |
PMS 298: Active | PMS 298: Active | coh-color-pms-298-active | #D5ECF7 | |
PMS 298: Focus | PMS 298: Focus | coh-color-pms-298-focus | #ABDAEF | |
PMS 298: Hover | PMS 298: Hover | coh-color-pms-298-hover | #81C7E8 | |
PMS 298: Initial | PMS 298: Initial | coh-color-pms-298-initial | #57B5E0 | |
PMS 362: Active | PMS 362: Active | coh-color-pms-362-active | #CBE0CF | |
PMS 362: Focus | PMS 362: Focus | coh-color-pms-362-focus | #96C29F | |
PMS 362: Hover | PMS 362: Hover | coh-color-pms-362-hover | #62A370 | |
PMS 362: Initial | PMS 362: Initial | coh-color-pms-362-initial | #1E7330 |
Secondary
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
PMS 7462: Active | PMS 7462: Active | coh-color-pms-7462-active | #C2D6E3 | |
PMS 7462: Focus | PMS 7462: Focus | coh-color-pms-7462-focus | #86ADC8 | |
PMS 7462: Hover | PMS 7462: Hover | coh-color-pms-7462-hover | #4985AC | |
PMS 7462: Initial | PMS 7462: Initial | coh-color-pms-7462-initial | #0D5C91 | |
PMS 7457: Active | PMS 7457: Active | coh-color-pms-7457-active | #F5F8F9 | |
PMS 7457: Focus | PMS 7457: Focus | coh-color-pms-7457-focus | #EAF1F2 | |
PMS 7457: Hover | PMS 7457: Hover | coh-color-pms-7457-hover | #E0EAEC | |
PMS 7457: Initial | PMS 7457: Initial | coh-color-pms-7457-initial | #D6E3E6 |
Tertiary
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
Cool Grey: 700 | Cool Grey: 700 | coh-color-cool-grey-700 | #B5B0AD | |
Cool Grey: 900 | Cool Grey: 900 | coh-color-cool-grey-900 | #666366 | |
PMS 7404:800 | PMS 7404:800 | coh-color-pms-7404-800 | #F7EC8C | |
PMS 7404:900 | PMS 7404:900 | coh-color-pms-7404-900 | #F0D91A | |
PMS 7729: Initial | PMS 7729/900 | coh-color-pms-7729-initial | #005745 |
Background
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
BG Blue | BG Blue | coh-color-bg-blue | #EFFAFF | |
BG Grey | BG Foundation Grey | coh-color-bg-grey | #F8F8F8 |
Alert
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
Success | Success | coh-color-success | #A3D963 | |
Warning: 600 | Warning: 600 | coh-color-warning-600 | #FBE1CE | |
Warning: 900 | Warning: 900 | coh-color-warning-900 | #F29B5B | |
Error: 600 | Error: 600 | coh-color-error-600 | #F7C8C8 | |
Error: 900 | Error: 900 | coh-color-error-900 | #E54848 |
Shades
Site Studio Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
White | White | coh-color-white | #FFFFFF | |
Black | Black | coh-color-black | #000000 | |
Primary | Primary | coh-color-primary | #012639 | |
White: Initial | White: Initial | coh-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 Name | Figma Name | Style Sheet Class | Hex | Reference |
---|---|---|---|---|
Neutral: Zebra Stripes Grey | Neutral: Zebra Stripe Grey | coh-color-neutral-zebra-stripes-grey | #F2F2F2 | |
N/A | Grey (50% Black) | N/A | #808080 | |
Neutral: Middle | Neutral/500 | coh-color-neutral-middle | #E2E2E2 | |
Neutral: Disabled | Neutral: Disabled | coh-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.
Breakpoint | Min. width | Gutters | Text Container | Outer text margin |
Desktop: 1440px | 1440px | 36px | 1215px | 112.5px |
Desktop: 1215px | 1215px | 36px | 1215px | 0px |
Laptop: 1024 -1213px | 1024px | 36px | 40px | |
Tablet: 720-1023px | 720px | 24px | 40px | |
Mobile Landscape: 565-719px | 565px | 16px | 40px | |
Mobile Portrait: 320-564px | 320 | 16px | 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
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
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-basic-content-tabs
Class name: .coh-style-basic-content-tabs---dark-background
Class name: .coh-style-vertical-tabs
Class name: .coh-style-large-content-tabs
Class name: .coh-style-large-accordion
Class name: .coh-style-featured
Class name: .coh-style-green-checkbox
Class name: .coh-style-blue-large
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
Class name: .coh-style-text-box-highlight
Class name: .coh-style-image-left-align
Class name: .coh-style-disclaimer-right
Class name: .coh-style-image-right-align
Class name: .coh-style-table-cell-
Class name: .coh-style-table-header
Class name: .coh-style-visible-desktop
Class name: .coh-style-visible-mobile
Class name: .coh-style-image-text-hover
Class name: .coh-style-disclosure-border
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
Class name: .coh-style-link-dark-green
Class name: .coh-style-link-align-right
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
- List item 1
- List item 2
- 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-breadcrumb
Unordered list
Ordered list
Description list
Class name: .coh-style-list-item-bottom-margin
Unordered list
- List item 1
- List item 2
- List item 3
Ordered list
- List item 1
- List item 2
- 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
- List item 1
- List item 2
- 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:
- Level A (WCAG 2.2 A), the minimum level of conformance
- Level AA (WCAG 2.2 AA), the level generally relied on by the Department of Justice and the courts
- Level AAA (WCAG 2.2 AAA), the maximum level of conformance
GA is following AA Guidelines
Top Accessibility Guidelines
- Page titles are the first thing a screen reader will see
- Meta Title: 50 characters max
- Meta Description: 160 characters max
- A web page has a descriptive and informative page title
- Page headings and labels for form and interactive controls are informative
- Avoid duplicating
- Screen readers can browse the page by headings if they are properly structured
- Semantic markup is appropriately used to designate headings and regions
- Use the H1-H6 tags in HTML to make headings
- Use headings to organize the page, and not strictly for visual presentation
- Include only one H1 heading per page
- Tables are used for tabular data and data cells are associated with their headers
- The purpose of each link (or image button or image map hotspot) can be determined from the link text alone
- Instructions do not rely upon shape, size, or visual location (e.g) "Instructions are in the right-hand column
- All images, image buttons, image map hot spots must have alt text
- all alt text must describe the image
- Decorative images must have empty alt text (alt-"')
- Embedded multimedia is identified via accessible text
- Frames and iframes are appropriately titled
- A descriptive transcript or audio description of relevant content is provided for non-live video-only
- Synchronized captions are provided for non-live video
Top Accessibility Guidelines
- Make sure all pages follow proper heading structure ( H1-H6)
- The purpose of each link (or image button or image map hotspot) can be determined from the link text alone
- Instructions do not rely upon shape, size, or visual location (e.g) "Instructions are in the right-hand column
- All images, image buttons, image map hot spots must have alt text
- all alt text must describe the image
- Decorative images must have empty alt text (alt-"')
- Text within images cannot be read by screen readers
- Any text associated with an image must be separated in the form of surrounding text, header, label, or alt text.
- Images must have a contrast ratio of at least 3.1 for all states (hover, focus, active, etc.)
- Text must be separate from an image (no text within images)
- Color alone is not used to distinguish links from surrounding text
- All text follows contrast and sizing guidelines
- Text and images of text have a contrast ratio of at least 4.5:1
- 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.
- All page functionality is available using a keyboard
- Pointer input target sizes are at least 24x24px
- 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)
- 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
- 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
- Multiple ways are available to find other web pages on the site
- No loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at 320 px
- websites must be responsive
- tables, complex images, toolbars are exempted
- Orientation of web content is not restricted
- Having adequate paragraph spacing and proper spacing between letters and characters
- Line height should be at least 1.5 times the font size
- The spacing that follows paragraphs should be at least 2 times the font size
- Letter spacing should be at least 0.12 times the font size
- Word spacing should be at least 0.16 times the font size
- Unequal height and differences between capital and lowercase letters
- Characters like o, e, a, and c look similar to other letter shapes
- Thin-weight and narrow-width fonts are not deemed accessible
- Sans serif is more accessible than serif fonts
- minimum font size of 16 px
Top Accessibility Guidelines
- Make sure all pages follow proper heading structure ( H1-H6) H1 does not need to be visually apparent to meet guidelines
- The purpose of each link (or image button or image map hotspot) can be determined from the link text alone
- Instructions do not rely upon shape, size, or visual location (e.g) "Instructions are in the right-hand column
- All images, image buttons, image map hot spots must have alt text
- all alt text must describe the image
- Decorative images must have empty alt text (alt-"')
- Text within images cannot be read by screen readers
- Any text associated with an image must be separated in the form of surrounding text, header, label, or alt text.
- Images must have a contrast ratio of at least 3.1 for all states (hover, focus, active, etc.)
- Text must be separate from an image (no text within images)
- Color alone is not used to distinguish links from surrounding text
- All text follows contrast and sizing guidelines
- Text and images of text have a contrast ratio of at least 4.5:1
- 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.
- 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
- Multiple ways are available to find other web pages on the site
- No loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at 320 px
- websites must be responsive
- tables, complex images, toolbars are exempted
- Orientation of web content is not restricted
- All page functionality is available using a keyboard
- Keyboard focus is never locked or trapped at one particular page element
- 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
- 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
- Pointer gestures
- The pointer can be moved to the new content without the content disappearing
- Pointer input target sizes are at least 24x24px
- 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)
- 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
- There is a visible indicator for page elements when they receive keyboard focus
- Having adequate paragraph spacing and proper spacing between letters and characters
- Line height should be at least 1.5 times the font size
- The spacing that follows paragraphs should be at least 2 times the font size
- Letter spacing should be at least 0.12 times the font size
- Word spacing should be at least 0.16 times the font size
- Unequal height and differences between capital and lowercase letters
- Characters like o, e, a, and c look similar to other letter shapes
- Thin-weight and narrow-width fonts are not deemed accessible
- 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
- All tools > view more > use guided actions
- Make accessible
- Prepare
- Add document description
- OCR
- Set tab order
- Prepare
- Set language and tags
- Language
- Alt tags
- Run accessibility check
- Fix issues
- Optimize scanned
Top Accessibility Guidelines
- Searchable text
- Recognize text with OCR
- Images with alternative text (alt text)
- Logical reading order (especially for tables)
- Screen readers read content linearly, so tables appearing in your PDF file need to have a logical reading order from left to right
- Tables do not split across pages
- Appropriate content hierarchy
- Bookmarks for PDFs over 9 pages
- Color contrast