2 April 2023
Table of Contents
I. PURPOSE .............................................................................................................................................................................. 5
II. MOBILE-FIRST CONTENT STRATEGY ................................................................................................................................... 6
Why Mobile-first? ............................................................................................................................................................... 6
II. MOBILE-FIRST CONTENT STRATEGY Writing for the web ............................................................................................. 7
Resources ........................................................................................................................................................................... 7
II. MOBILE-FIRST CONTENT STRATEGY PDFs versus web pages .......................................................................................... 8
II. MOBILE-FIRST CONTENT STRATEGY Images ..................................................................................................................... 8
II. MOBILE-FIRST CONTENT STRATEGY Capitalization .......................................................................................................... 9
Title case ............................................................................................................................................................................ 9
Sentence case .................................................................................................................................................................. 9
Capitalization within a sentence .................................................................................................................................. 10
Resources ......................................................................................................................................................................... 10
II. MOBILE-FIRST CONTENT STRATEGY Common Internet terms ...................................................................................... 11
Email ................................................................................................................................................................................. 11
When E stands for electronic ......................................................................................................................................... 11
When to use login and logout versus log in and log out ........................................................................................... 11
Username ......................................................................................................................................................................... 11
Internet, web, intranet .................................................................................................................................................... 12
Online, offline .................................................................................................................................................................. 12
Uniform Resource Locator ............................................................................................................................................. 12
Resources ......................................................................................................................................................................... 12
III. ACCESSIBILITY .................................................................................................................................................................. 13
Siteimprove ...................................................................................................................................................................... 13
III. ACCESSIBILITY Page titles ............................................................................................................................................... 14
The title ............................................................................................................................................................................. 14
III. ACCESSIBILITY Headings ................................................................................................................................................ 15
Do: .................................................................................................................................................................................... 15
Do not: .............................................................................................................................................................................. 15
III. ACCESSIBILITY Images including charts and graphs .................................................................................................. 16
Include in the alt text field ............................................................................................................................................. 16
III. ACCESSIBILITY Data table design ............................................................................................................................. 16
Resource .......................................................................................................................................................................... 18
III. ACCESSIBILITY Color and contrast ................................................................................................................................ 19
III. ACCESSIBILITY Keyboard navigation ............................................................................................................................ 20
Accessing main content ................................................................................................................................................ 20
Tabbed navigation ......................................................................................................................................................... 20
Headings .......................................................................................................................................................................... 20
III. ACCESSIBILITY Visual focus ............................................................................................................................................ 21
3 April 2023
Resource .......................................................................................................................................................................... 21
III. ACCESSIBILITY Video and audio ................................................................................................................................... 22
Video placement ........................................................................................................................................................... 22
Video and audio guidelines .......................................................................................................................................... 22
Captions and transcripts ................................................................................................................................................ 23
Resources ......................................................................................................................................................................... 23
III. ACCESSIBILITY Making PDFs Accessible ....................................................................................................................... 24
Pictures ............................................................................................................................................................................. 24
Captions ........................................................................................................................................................................... 24
Hyperlink to a webpage ................................................................................................................................................ 25
Headings .......................................................................................................................................................................... 25
Line spacing and page breaks ..................................................................................................................................... 26
Watermarks ...................................................................................................................................................................... 26
Saving the document .................................................................................................................................................... 26
19005-1 compliant (PDF/A)—When should you select this option? ......................................................................... 27
Save a file in this format if: ............................................................................................................................................. 27
Do not save a file in this format if: ................................................................................................................................. 27
Use Adobe Acrobat Professional to check the accessibility of a document ......................................................... 27
5. Important for archived documents: Under PDF options, check the box, ISO 19005-1 ................................... 28
Resources ......................................................................................................................................................................... 28
III. ACCESSIBILITY .................................................................................................................................................................. 29
Creating effective link text ............................................................................................................................................ 29
Creating useful links ........................................................................................................................................................ 29
Button links ....................................................................................................................................................................... 31
Link behavior ................................................................................................................................................................... 31
Link standards .................................................................................................................................................................. 31
Resources ......................................................................................................................................................................... 31
Link Tips ............................................................................................................................................................................. 32
III. ACCESSIBILITY Banner blindness and sidebars ............................................................................................................ 33
Banner blindness ............................................................................................................................................................. 33
Resource .......................................................................................................................................................................... 33
Sidebars ............................................................................................................................................................................ 33
Resources ......................................................................................................................................................................... 34
IV Plain language ............................................................................................................................................................... 34
Resources ......................................................................................................................................................................... 35
V. FONTS 36
VI. FILE NAMING CONVENTIONS ........................................................................................................................................ 37
VII. COMMON PAGE ELEMENTS ......................................................................................................................................... 38
Header ............................................................................................................................................................................. 38
4 April 2023
Footer ............................................................................................................................................................................... 38
Page width ...................................................................................................................................................................... 38
Breadcrumbs ................................................................................................................................................................... 38
Oregon.gov logo ............................................................................................................................................................ 39
Resources ......................................................................................................................................................................... 39
I. ONLINE DATABASES AND DIRECTORIES ............................................................................................................ 40
APPENDIX A ......................................................................................................................................................................... 42
Rules to follow for web-based applications ................................................................................................................ 42
APPENDIX B .......................................................................................................................................................................... 43
Rules to follow for embedding on a web page ......................................................................................................... 43
APPENDIX C ......................................................................................................................................................................... 44
MOBILE-FIRST REFERENCES .............................................................................................................................................. 44
ACCESSIBILITY REFERENCES ............................................................................................................................................ 45
RESOURCES ...................................................................................................................................................................... 47
APPENDIX D Tools (as of September 2022) ...................................................................................................................... 48
APPENDIX E ACRONYMS .................................................................................................................................................... 51
If you have comments, questions or corrections to this document let us know: Oregon Website Guidelines
Feedback ............................................................................................................................................................................ 51
5 April 2023
I. PURPOSE
The State Website Guidelines are designed with the end-user in mind.
It's the E-Governance Board’s goal to have consistent Oregon.gov websites to better serve Oregonians. To
meet this goal, these guidelines aim to help website professionals create content that is:
• easy-to-read,
• accessible,
• translatable, and
• optimized for mobile devices.
Since 2013, the website contractor provides mobile-first web design templates for state agencies. Other
integrated tools assist with the accessibility of data and content.
All state websites should adhere to the following State Website Guidelines.
Oregon.gov website governance roles:
• Hosted and administered by Tyler Oregon
• The E-Governance Program
manages the state contract for website services
• The E-Governance Board produced and maintains this document.
• Electronic Portal Advisory Board advises State Government about the State's web services, websites,
and eCommerce applications.
6 April 2023
II. MOBILE-FIRST CONTENT STRATEGY
A mobile-first content strategy means designing website structure and content for mobile devices first (for
example: smart phones, tablets, etc.) and desktop computers second. This strategy is about creating content
that goes everywhere with your users, without sacrificing quality.
Why Mobile-first?
This strategy provides accessibility for more citizens.
• In 2023 85% of Americans are now smartphone owners.
• Some smartphone owners—particularly younger adults, minorities, and lower-income Americans—
depend on their smartphone for internet access.
• Many Americans rely on a mobile device for accessing online services and information.
• In a 2015 Survey of Oregonians
, 71% of Oregon residents agreed that it is important that state websites
be mobile-friendly.
• A 2022 Survey of Oregonians found mobile resources are becoming more important, especially to lower
income households.
Oregon state government requires that you use a mobile-first, responsive design. We recommend using a
SharePoint platform and state-approved templates.
Find current mobile technology statistics from the Pew Research Center
.
7 April 2023
II. MOBILE-FIRST CONTENT STRATEGY Writing for the web
• Think first about your users’ needs and tasks and then how to deliver information effectively.
• Use plain language; be clear and concise.
• Write short paragraphs; minimize unnecessary words.
• Always left justify text for ease of reading and to meet ADA guidelines.
• Help readers quickly scan your webpages by:
o Using short easy headings
o Putting most important information first
o Using bulleted lists, when possible
• Chunk your content. Use headings to break up long articles and provide better accessibility. Cover only
one topic per paragraph.
• Write in an active voice instead of passive. For example, “Tim taught the class,” instead of “The class
was taught by Tim.”
• Use descriptive text for links. Avoid non-descript phrases such as “click here” or “more info.”
• Use numerals when writing numbers; do not spell them out. For example, “There are 4 locations for
testing.”
• Use images strategically, not for decoration.
o Make sure images aid or support text
o Optimize images before placing on the web
o Free optimization tool
Resources
New York University writing for the web
7 best practices for improving your website’s usability
Breaking development: Mobile content strategy
Hemingway Editor for testing readability
8 April 2023
II. MOBILE-FIRST CONTENT STRATEGY PDFs versus web pages
The most important thing to ask yourself when you are not sure if you should create a PDF versus a web page is,
“What is its intended use?” Use the following tips to help you decide.
Create an HTML page if it is:
• Time-sensitive information
• Intended for online reading
• A list of links
• Information that changes frequently
• Going to spread on social media
Create a PDF if it is:
• A large document or manual
• Meant to be printed
• A document with a layout that needs to
remain as it is
• A document that includes special symbols
or mathematic equations
II. MOBILE-FIRST CONTENT STRATEGY Images
Bitmap-based image file formats for use on the web include JPG, GIF, PNG and WebP. Your choice of which file
format to use depends on usage needs.
• JPGs (JPEG) can be compressed and handle millions of colors. These are a good choice for
photographs. Learn about JPEG on Wikipedia
.
• GIFs only handle up to 256 colors and are good for things like logos with only a few colors or short
animations. Learn about GIF on Wikipedia
.
• PNGs usually result in higher quality images over JPG or GIFs, can handle photos logos, but file size can
be larger. Learn about PNG on Wikipedia
.
• WebP is a newer image file format that offers the best of all three worlds – reduced file size, great image
quality, and animation is possible. WebP is supported in all of the major browsers as of 2020, however
not all graphics programs can output WebP. Learn about WebP on Adobe.com
.
When in doubt, we recommend sticking with JPG/PNG so that you know your users are not dealing with support
issues. As WebP technology matures, we may recommend going with that format in the future.
9 April 2023
II. MOBILE-FIRST CONTENT STRATEGY Capitalization
Title case
Title case refers to a capitalization style in which most words are capitalized. If you choose to use title case in
page titles, capitalize all major words (nouns, verbs, adjectives, adverbs, and pronouns) in the title and
heading, including the second part of hyphenated words (for example: Self-Report, not Self-report).
Use title case in button labels, too.
Examples:
1.
Figure 1 - This is an example of breadcrumbs using title case.
2.
Figure 2- This is an example of navigation text using title case.
3.
Figure 3 - This is an example of a button using title case.
Sentence case
Use sentence case in body text. Sentence case refers to a capitalization style in which most words are
lowercased.
Capitalize the first word of the title or heading and any subtitle and subheading. Capitalize proper nouns and
use lowercase for everything else.
Example:
• The Governor’s speech was insightful.
10 April 2023
Capitalization within a sentence
Capitalize proper nouns.
Examples:
• The state of Oregon*
• State Department of Administrative Services
• Oregon State University
• Oregon Legislature
*Minimize use of “state of Oregon.” The following choices describe your meaning more accurately: state government, state
agencies, Oregon.
Capitalize titles when they are used before names, unless the title is followed by a comma. Do not capitalize
the title if it is used after a name or instead of a name.
Examples:
• DAS Director Sally Jones will preside at the conference.
• The DAS director, Sally Jones, will preside at the conference.
• The director will address the employees.
Do not capitalize occupations. Occupations are not the same as titles.
Examples:
• George Smith is the director of DAS.
• Other occupations: board, commission, committee, council, work group and team
Exceptions
• Governor, Governor’s Office
• Legislatively created boards, commissions and councils may capitalize Board, Commission and Council.
Within a paragraph, capitalize the first word after a colon if it is a proper noun or if it begins a complete
sentence.
Resources
DAS editorial stylesheet
Title case and sentence case capitalization in APA style
Capitalization rules (Grammarbook.com)
11 April 2023
II. MOBILE-FIRST CONTENT STRATEGY Common Internet terms
Refer to the list below for correct spelling of the most common internet terms.
Email
A hyphen is not needed in the word email; it is spelled as one word.
Example:
• Email is usually handled by a webmail service.
When E stands for electronic
Use a hyphen when spelling e-commerce and e-government and other compounds in which e stands for
electronic; except email.
Use uppercase E only in titles or at the beginning of a sentence.
Examples:
• E-government is the wave of the future.
• The UN Public Administrations Network conducts an e-government survey.
• The state’s E-commerce service has grown significantly in the last few years.
• Many e-commerce templates are available for free.
When to use login and logout versus log in and log out
The words login and logout are spelled together if they are used in a sentence as nouns or adjectives.
Example:
• The information you use to sign into your email is your login (noun), and the page where you sign in is the
login (adjective) page.
The words log in, log on, log out, and log off are spelled separately if they are used as verbs.
Examples:
• You log in (verb) with your login information.
• Don’t forget to log out (verb).
Username
The word username, also known as user ID, is spelled as one word if it is a name that someone uses for
identification purposes when logging onto a computer, using chat rooms, or as part of his or her email address.
Example:
• Log in with your username and password.
12 April 2023
Internet, web, intranet
Do not capitalize the words internet and web. Also, use a lowercase “w” when spelling the words website,
webpage, webcam, webcast, webmaster.
Examples:
• The internet houses many layers of information, including the web, FTP, Telnet, instant messaging, and
email.
• We found a really good webpage about global warming.
The related term intranet (a private, usually restricted network) is written lowercase.
Example:
• Our company has an intranet to access its business records.
Online, offline
A hyphen is not needed in the words online and offline.
Example:
• The city libraries are all online.
Uniform Resource Locator
The acronym for Uniform Resource Locator (URL) should be written with all uppercase letters.
Example:
• The URL for the Oregon state homepage is http://www.oregon.gov.
Resources
DAS editorial stylesheet
Dictionary.com
Computer terms, dictionary, and glossary (Computerhope.com)
Online Merriam-Webster dictionary
13 April 2023
III. ACCESSIBILITY
Oregon state websites must provide equal access to people with a wide range of abilities. The UN Convention
on the Rights of Persons with Disabilities recognizes that equal access to the web is a basic human right.
Accessibility law (Section 508, American Rehabilitation Act) and Oregon state law require websites to be
accessible. Oregon is also committed to following the WCAG 2.0 guidelines. These guidelines will help ensure
your website is accessible to visitors of all abilities.
See Guidance on Accessibility for E-Government Program Services.
Siteimprove
Siteimprove is a service that monitors your website for issues related to content quality, accessibility, and other
factors. It is available to all website SPOCs whose public website is hosted by the E-Government Program. See:
How to start improving your website with Siteimprove.
Siteimprove can help you identify and resolve accessibility issues on your website. See the Key Accessibility
features available in Siteimprove and how to use them.
14 April 2023
III. ACCESSIBILITY Page titles
Each web page requires a unique page title.
The title
• Describes the contents of the page
• Should match the name of the link used to reach the page
• Should not contain acronyms
• Helps users identify the page by placing the title in the browser tab
• Is used by search engines to help find your page
• Is used as the default name for bookmarks
(for example, the Oregon.gov homepage title is currently set as “oregon.gov Home”)
• Is read by assistive devices (for example: screen readers) to uniquely identify the page
15 April 2023
III. ACCESSIBILITY Headings
Use correct heading hierarchy in all documents and on all webpages. Headings should be meaningful and
follow proper outline standards.
Do:
• Use properly marked-up headings to help orient sight-challenged users. Screen readers read the
headings to help the user know what is on the page without having to read every word.
• Use headings to help orient sighted users to easily scan the page for content they need.
• Use headings to optimize search engine results.
Do not:
• Use headings to format your text (for example: font size, font color, bold, typographical emphasis).
• Underline headings (underlining is reserved for links).
• Use headings out of order.
• Skip headings.
Figure 4 – How to use headings in text Figure 5 - How to use headings on a homepage
16 April 2023
III. ACCESSIBILITY Images including charts and graphs
Alt text is used to describe an image, which allows assistive devices to read them to users who are unable to
view them. When using an image to enhance your text, it must have a description in the alt field.
Include in the alt text field
• Any text that is in an image or logo
• Short descriptive text describing information in the image
o For images with complex information, such as a chart or a graph, also include a long description
or an alternate form of the information. Alternate forms of a chart or graph, for example, could
include a text version with a full description or a table with source data that is readable by a
screen reader (for example: not an image of a table).
Figure 6 - Insert full description in the Description field.
• A functional equivalent for buttons or linked images (for example: a submit button might have alt text
that reads “submit your application”)
o Do not use words like link, image or button in the alt text, because the code used to create
these buttons will already include those words when read by a screen reader.
• Ensure that double quotation marks (“”) are added in the alt text field for images that don’t convey any
information and are purely decorative (they do not enhance the text). This will instruct the screen
reader to skip the image. SharePoint adds the double quotes automatically. Do not leave the alt text
field blank.
Figure 7 Figure 8
III. ACCESSIBILITY Data table design
As a rule, avoid confusion by using CSS rather than tables for layout positioning. Use tables for displaying tabular
data, not layout.
Tables should be read left to right, top to bottom – this is how a screen reader will read them.
Be sure to use header tags for data tables. Using header elements enables the screen reader to associate
column heads with data cells so that the user hears the context of the data.
17 April 2023
1) Column alignment
a) Left align in most cases.
b) Align column headers to match the data below them.
c) Right align all numbers.
Last name
First name
Amount owed
Smith
John
$10.50
Jones
Alice
$1,200.00
2) Table appearance
a) Use alternate row background shading to allow for easy scanning of data. Keep shading color
saturation down to 10-20 percent.
b) Consider using horizontal and vertical lines to make the columns clear.
c) Don’t use any shading unless the table has at least five rows of data.
Last name
First name
Due Date
Amount owed
Smith
John
11/11/2015
$10.50
Jones Alice 11/15/2015 $1,200.00
Graham Joe 11/28/2015 $150.00
Howard
Karen
11/30/2015
$900.00
Brown Sam 12/1/2015 $45.00
Harrington
George
12/5/2015
$100.50
3) Filtering
a) Consider adding filtering capabilities for longer tables.
b) Indicate sortable columns by including up and down carets next to header labels.
4) Keep text in cells short.
5) Avoid using complex tables. Some screen readers do not fully support complex tables with spanned or
multiple levels of row and/or column headers.
If your audience is not technical, break up your complex table into simple tables that are readable by screen
readers. Complex tables are allowed only for engineers or for technical documents. See sample below.
19 April 2023
III. ACCESSIBILITY Color and contrast
Never use color as the only means to identify information. Accessibility law, Section 508
, states that, “Web
pages shall be designed so that all information conveyed with color is also available without color.”
Online tools are available to test your website:
• Test for contrast with WAVE
, a tool that will give you a pass or fail result for contrast on your page.
Figure 9 - Sample test for contrast using the WAVE tool
• Test for contrast by entering the color codes on Color Contrast Checker.
• Download Color Oracle, a free tool to test for color blindness.
20 April 2023
III. ACCESSIBILITY Keyboard navigation
Section 508 accessibility law (1194.21(A)) requires that all webpages and applications designed to run on a
computer must be accessible using a keyboard and not rely on the use of a mouse to perform an action.
Accessing main content
Users relying on assistive technology or a keyboard without a mouse often have to tab through many items prior
to reaching the main content of a webpage. To prevent this frustration, a “skip to main content” link should be
added at the beginning of each page. This can be hidden but must become visible for users who are tabbing.
More information about “skip to main content
.”
Figure 10 - Example of a “skip to main content” link that appears when using a keyboard to navigate the page.
Tabbed navigation
Users with mobility issues rely on a keyboard and must use the tab key to move forward or shift-tab to move
backward through a webpage. Test your pages for problems in multiple browsers. Examples of what to check
for when using tabbed navigation:
• Access to all top navigation and sub-menus
• Return from any location to navigating the page
• Access to all interactive maps or applications
• Move through a webpage without getting stuck in a widget (for example: news feed, Twitter,
Facebook)
Figure 11- Example of a “skip Twitter feed” link that appears when using a keyboard to navigate the page.
Headings
If a page was created using correct headings, most assistive technology will allow use of the keyboard controls
to tab through the headings of the page.
See the “Accessibility Headings” section in this document.
21 April 2023
III. ACCESSIBILITY Visual focus
Accessibility laws and WCAG 2.0 Success Criterion 2.4.7
require a visual indication of focus on a webpage. A
focus indicator provides a visible mark to show the position on the screen where an action can take place.
Unlike mouse users who point to page elements, keyboard-only users need a clear on-screen indicator to know
where they are as they navigate a webpage.
Figure 12 - This screenshot is an example of a focus indicator (blue box) on a webpage.
Figure 13 - This screenshot shows the same webpage in a different browser that does not display a focus indicator.
Web browsers (and other software applications) are responsible for providing visual focus for interactive page
elements. However, a website’s CSS can be written to override the default. Always check for visual focus in
multiple browsers by using the tab key to navigate through menus and pages. If visual focus is missing or not
functioning in all areas, follow up with your developer to correct it.
Be wary of using embedded widgets, such as those for a Twitter or Facebook feed, where the focus indicator
may become stuck, forcing the user to tab through every item. Consider inserting “skip to next link.” See the
“Accessibility Keyboard Navigation” section in this document.
Resource
Why focus indicators are key to web accessibility (interactiveaccessibility.com)
The following guidelines include technical language most appropriate for web developers.
Potential problems with custom focus indicators
Web developers should take care if they override the operating system (OS) focus setting. An accessibility audit
would identify the following focus issues as accessibility problems:
• No focus indicator
• Partially hidden focus indicator
• Visual effects that obscure the focus indicator
• Poor color contrast for the focus indicator
Default versus custom keyboard focus indicators
You do not need to avoid custom focus indicators, but you must ensure that content, including visual effects,
do not interfere with visual focus.
The only hard-and-fast rule is that you should not use JavaScript or CSS to remove the focus indicator. But if the
focus indicator is obscured, then you may want to create a custom keyboard focus indicator:
• Create an on-focus effect, which is similar to creating a mouse-over effect. Use the CSS :focus class as
you would use :hover. a:focus does not work in Internet Explorer v7. Consider using a:active, as well.
• Use the JavaScript event handler onFocus as you would use the event handler onMouseOver. Also, use
onBlur as you would use onMouseOut.
22 April 2023
Ensure that the color contrast is sufficient so that low-vision keyboard-only users can see the focus indicator.
III. ACCESSIBILITY Video and audio
Video placement
Determine if the video is the primary focus of the webpage or supplementary, such as text or graphics.
• If the primary content is the video, consider putting it near the top of the page at a size that uses the
horizontal width of the content area.
• If the video is supplemental material, such as a television news report that accompanies a written
article, consider embedding it further down on the page or off to the side.
Video and audio guidelines
• If you have videos, it is best practice to have an agency-level video channel through a video hosting
website such as YouTube or Vimeo.
o Disable any advertising banners and ads linked to videos.
State channels registered correctly as a branded channel with YouTube (see next
section) will not display ads.
o Disable “recommended videos” which automatically display after your video finishes. These
videos are based on a comparison of the “tags.”
For YouTube add ?rel=0 to your embed code like this:
http://www.youtube.com/video?rel=0.
• Section 508 requires that video and audio auto-play features be turned off. Let the user decide to play
the video or audio.
o You must make video and audio controls visible for the user to operate including play, stop,
volume, and resize adjustments (for video).
• Always place a descriptive heading or title above the video or audio.
• If you use an image linked to a video, create a high-quality thumbnail image.
o The image link should include an “Alt” tag with the word “video” in the description. See the
“Accessibility Images including charts and graphs” section in this document.
• A web part has been developed for SharePoint users to display video on webpages.
o Instructions for embedding the video web part in SharePoint
(requires login)
23 April 2023
Captions and transcripts
• All videos must provide closed captioning or a transcript in text format. Audio files must have a
transcript.
o YouTube creates automatic captions, but you must review and edit them for accuracy.
o Include the transcript in text or provide a link to the transcript on the same page.
• If you do not have closed captioning or a transcript on the webpage, you must be prepared to provide
the information in an alternate format upon request. Include text on the page noting that the
information is available in an alternate format and list appropriate contact information to make the
request.
• There are third party transcription services who may be contracted to help with transcript writing. See
the “Appendix D Tools” section in this document.
Resources
LNS Captioning – Offers captioning and transcript services out of Portland, OR
Google Voice Typing – Allows you to speak to type in a Google Doc
SpeakWrite is a transcription service and mobile dictation application.
SoundCloud is a social platform for uploading and sharing audio files both publicly and privately.
Vimeo is a video-sharing website in which users can upload, share and view videos.
Web Resizer is an online photo resizing tool.
YouTube is a video-sharing website in which users can upload, share and view videos.
24 April 2023
III. ACCESSIBILITY Making PDFs Accessible
Use these instructions on any Microsoft Word document that will be made into an accessible PDF. Accessible
PDF files are “tagged” documents and provide alternative text for images. Tags are hidden accessible
elements that provide structure for screen readers.
The following examples are from one version of Microsoft Word and are specific to PC users.
Microsoft Word for Mac does not have the ability to create a tagged PDF. The best way to create accessible
PDF files using a Mac is to use OpenOffice for Mac or Adobe Acrobat Pro. OpenOffice is a free, open source,
office suite software. See the Resources section at the end of this document for more instructions.
Pictures
Open your document, right-click on a picture and select Format Picture. Enter your alt text in the description
field.
Figure 14 - How to insert alternate text for a picture in Microsoft Word.
Captions
Captions are titles of tables, figures, equations, boxes and other pieces of content, which are separate from the
main text. A series of labels can be created for each of these types of content. Each series of labels have their
own numbering system (for example: Figure 1, Figure 2, Table 1, Table 2). You can also create new labels
specific to your content (for example: Photo 1).
When you add, remove or move around your captions, Microsoft Word automatically renumbers them to retain
the correct sequence.
Give each piece of content in the document (as mentioned above) a caption. First, select the item to caption
and then follow the applicable instructions below.
1. In Microsoft Windows, under the References tab, select Insert Caption.
2. Enter the appropriate label, select the position (above or below the content), and click OK.
3. After the caption label is inserted, you can type additional descriptive text, which will become part of
the caption.
25 April 2023
Figure 15 - How to insert a caption in Microsoft Word for Windows.
Hyperlink to a webpage
1. Place the cursor where you want the hyperlink.
2. Click on the Insert tab in the Links group and select Hyperlink to open the hyperlink dialog box.
3. In the Text to display field, type in the name or phrase that will briefly describe the link destination.
4. In the Address field, type the link URL.
5. Add any ScreenTips (these will be read by screen readers and people using hover with a mouse).
6. Click OK.
Figure 16 - How to insert a hyperlink in Microsoft Word for Window. (Numbers correspond to instructions above.)
Headings
You must use Microsoft Word styles and correct headings for your document to be ADA compliant. Do not
create a heading by making the text bold and bigger.
Use headings in order as you would in an outline. For example, if you start with Heading 1, your next sub-
heading should be Heading 2, etc.
Figure 17 - How to find heading styles in Microsoft Word.
26 April 2023
Line spacing and page breaks
• To format whitespace around a paragraph, do the following:
o Select the text, then right-click and choose Paragraph from the drop down.
o Select values for Indentation and Spacing to create whitespace.
• Insert “page breaks” (do not hit “Enter” multiple times) to start a new page.
Watermarks
Watermarks are generally not accessible; it is best practice not to use them. Instead, type the word (for
example: DRAFT) somewhere in your document. You can put it in the title, in the logo, or in the header or
footer, etc.
Saving the document
Follow these instructions when saving your document. Do all 8 steps the first time you save it. Thereafter, you
can skip steps 4 through 6.
1. Click the Office Button or the “File” tab and then click Save As.
2. In the Save As dialog box, click the down arrow in the Save as type list, and select PDF.
3. Select Standard or Minimum Optimizing
4. Click Options.
5. Make sure to check Headings in the Create Bookmarks using area.
6. Make sure that the Document structure tags for accessibility check box is selected.
7. Click OK.
8. Click Save.
Figure 18 - How to save an accessible PDF in Microsoft Word for Windows (Numbers correspond to instructions above.)
27 April 2023
19005-1 compliant (PDF/A)—When should you select this option?
PDF/A is an ISO-standardized version of the Portable Document Format (PDF) specialized for the digital
preservation of electronic documents.
Figure 19 - ISO 19005-1 compliant (PDF/A) option in Microsoft Word for Windows
Save a file in this format if:
• You need to submit the file to a government agency that requires this format.
• You need the file for long-term archiving, and you want the file to include all the information needed to
be displayed in the future in a way as similar as possible to the way it is displayed today.
• The version needs to stay the same. (For example: it has a life-cycle of 20+ years.) Technology might
change, but the version will not.
• The file should be saved in a language that will always be readable (by law).
Do not save a file in this format if:
• You do not need it archived.
• It is temporary and topical and has an end date.
• File appearance is a major concern and you want the PDF to look as much like your original document
as possible. Design features, such as effects and transparency, are enabled.
• File size is a major concern. You want to make the file as small as possible.
Use Adobe Acrobat Professional to check the accessibility of a document
1. In Acrobat Pro, make sure that the Accessibility option under Tools is viewable (Select View, Tools,
Accessibility) – this only needs to be done once.
2. Under the Tools Tab, select Accessibility.
3. Acrobat Pro (v.11) offers a “Make Accessible” option to see if the document was saved in an accessible
way. In previous versions, it’s called Quick Check. In Acrobat DC, go to “Tools,” “Accessibility” then “Full
Check.” Most other types of PDF creators have a wizard available.
28 April 2023
o In Acrobat Pro (v.11) to get to “Make Accessible,” open your document in Acrobat Pro, under
Tools > Action Wizard > Actions, click Make Accessible.
o Make Accessible is a wizard that lets you make corrections as you go.
Figure 20 - Steps to get to “Make Accessible” in Acrobat Pro (v.11)
4. Full Check will provide you with a report showing if the headings are lined up correctly, if pictures have
alt tags and hyperlinks are titled, etc.
5. Important for archived documents: Under PDF options, check the box, ISO 19005-1 compliant (PDF/A).
Resources
• Foxit Reader
• WebAIM – PDF Accessibility
• WebAIM – PDF Accessibility in Adobe Acrobat X and XI
• Creating Accessible PDF files
• Creating accessible Word documents
• Convert a document to PDF
29 April 2023
III. ACCESSIBILITY Links - web linking guidelines
Creating effective link text
You must think like your customers to create useful links. Consider the tasks your customers need to complete
and how you can help them accomplish them easily and efficiently.
You only have a moment to grab your reader’s attention. Descriptive links help users navigate your site and
locate information. Easy-to-understand links engage users and enhance Search Engine Optimization (SEO).
Creating useful links
• Embed meaningful links in a sentence. For example: “Refer to the online voter registration pamphlet.”
Links should make sense without reading the surrounding static text. Make sure that links are always
underlined.
• U
se action words to begin your link text. For example, Upgrade your subscription. The first 2-3 words are
the most important as users scan text. Have unique beginnings for your links and “lead with the need.”
• Do not use non-descriptive or repetitive link text such as, “click here” or “more information.” Make sure
the link text tells users where they will go next.
• Note if a link opens into another format such as a PDF or Word document, but do not include this in the
link text. Include a document type image or note the document type in parenthesis after the link. If
using an image, be sure to include alt text for the image.
o When you post a link to a PDF, Word, Excel or other type of file in SharePoint, an associated icon
is automatically added. Alt text is not needed for icons such as this because they are
decorative, not descriptive.
Figure 21 - Example of a list with icons and document titles showing an accessible way to list publications. The PDF icon
does not require alt text.
• Make link text unique. Links to the same URL need to have the same link text. Links to different URLs
should have unique text.
30 April 2023
Figure 22 - Incorrect. The two links in the example go to the same URL. The text should cover both topics with a single link.
Figure 23 - Incorrect. Links to different URLs should have unique text.
• Put the most important links within the main body of content. Group supplementary or less-critical links at
the bottom of the page or in a sidebar. Consider if less-critical content is even necessary, as it may
distract users from completing their tasks.
Figure 24 - Example of in-line links and a list of links in a sidebar.
31 April 2023
Button links
• Tie the button link text to the task. For example, “Start Your Subscription” or “Learn About Bugs.” Link text
should be concise, but unique and descriptive. Button links do not need to be underlined.
Figure 25 - Example of a button with link text tied to the task.
Link behavior
To be in compliance with WCAG 2.0 Guideline 3.2 (Predictable), hyperlinks on your website should always open
in the same page or tab of the browser window.
Figure 26 - Example of an “open in new tab” option for hyperlinks. Do not use this option.
Users should retain control over whether pages will open in a new tab or a new window. If there is a business
need to open links in a new window, advanced warning, such as anchor text “opens in a new window,” should
be included.
Link standards
Oregon agencies are responsible for the integrity of the content on their websites. Follow these rules to avoid
any conflict of interest:
1) Websites and website links must only be used to further your agency’s constitutional or statutory
responsibilities.
2) Take care before linking to a non-governmental entity’s website. Agency officials with responsibility for the
website must disclose if they or their relatives have a relationship to the entity. If the official or their relative
could benefit financially or avoid financial harm by promoting the site, don’t link to it.
3) Do not link to a site that promotes or opposes a political committee, measure initiative or referendum
petition, or candidate.
4) Include a disclaimer for websites that are only for the convenience and information of the public. The
disclaimer should state that, “Neither the State of Oregon nor the agency endorse or sponsor the products,
services or information provided by the link.” Guidelines 1-3 still apply whether or not you use a disclaimer.
5) Agencies are not allowed to post advertising by private entities on their websites. You cannot endorse or
sponsor the products, services, or information appearing on privately owned websites.
Resources
Stop Asking Me to “Sign Up” (gkogan.co)
State of Oregon privacy statement
WCAG 2.0 Guideline 3.2 (Predictable)
32 April 2023
Link Tips
• Give, don’t take. “Get Access” and “Sign Up” both lead to the same thing, but one makes the visitor
feel like they are getting something rather than solicitation.
• Compel people to act. Use action verbs such as get, start and try.
33 April 2023
III. ACCESSIBILITY Banner blindness and sidebars
Banner blindness
People ignore web banners. This decline in attention to banners began right around the time when banner
advertising became very popular. Hundreds of usability and eye-tracking tests show that banners are not
effective at conveying information. Users almost never look at anything that looks like an advertisement, even if
it is not actually an ad.
• Experience has taught users that ads distract them from their tasks and often are not relevant.
• Users do not notice design elements that resemble ads.
• Place information where users most expect to find it.
• Use visual elements, but make sure they are relevant to the site’s content and purpose.
Resource
Image-Focused Design: Is Bigger Better? (nngroup.com)
Sidebars
Figure 27 - Sample webpage with sidebar
Sidebars can be distracting for a user, taking the focus away from the main content of the page. If your
website design is not responsive, the design does not adjust to accommodate viewing on mobile devices so do
not use sidebars.
Eye-tracking studies demonstrate that many users do not see sidebars. When text is organized into paragraphs,
users’ eye movements can form an F-shaped pattern (for Westerners who read left to right). The F refers to the
side of the screen, looking for keywords or points of interest. When the reader finds something they like, they
begin reading normally, forming horizontal lines.
34 April 2023
Figures 28 - Scientific studies show that web users read the screen in an “F” pattern – focusing on the top, upper left corner and left
side.
If your website includes a responsive design, you may choose to use a sidebar. It is important to keep in mind
what actions you want users to take. The sidebar should assist, not distract the users from their primary path
through a website. Be aware that some designs will move the sidebar information to the bottom of the page
when viewed on a mobile device.
If you choose to include a sidebar:
• Keep it simple.
• Be sure the information is relevant to the body of the page.
• Place the most important information at the top of your sidebar.
Resources
How to design websites that mirror how our eyes work (thenextweb.com)
Does your website need a sidebar? (roundpeg.biz)
IV Plain language
Oregon law requires all state agencies to prepare public communications in language that is as clear and
simple as possible (ORS 183.750
). This includes publications, forms and instructions, licenses, agency notices, and
administrative rules. HB 2702 specifies additional standards for written documents.
1) To meet the plain language law, use:
a) Everyday words that convey meanings clearly and directly
b) Present tense and the active voice
c) Short, simple sentences
d) Definitions of only those words that cannot be properly explained or qualified in the text
e) Type of a readable size
f) Layout and spacing that separate the paragraphs and sections of the document from one another
g) No “agency speak” or bureaucratic phrases and words
h) No higher than eighth-grade level writing
2) If an abbreviation has only one meaning on a page, expand or explain the abbreviation immediately
before the abbreviation.
a) For example, “The Department of Administrative Services (DAS) is open from 8 a.m. to 5 p.m.”
b) As an alternative, you may wrap the abbreviation in an <abbr> element and use its expanded form in
the title attribute. This is also appropriate if an abbreviation has more than one meaning on the page.
c) Abbreviations: WCAG 2.0 Success Criterion 3.1.4
35 April 2023
3) Ensure that all writing on a department/agency website conforms to Oregon’s plain language website.
4) Proofread and edit webpages carefully to correct errors.
Siteimprove
Siteimprove can help with the Readability of your website. See Readability: All you need to know in the
Siteimprove Help Center.
Siteimprove will also find misspellings on your site so you can fix them. The Spelling and Readability tools are
under the Quality Assurance section of the dashboard. See How do I locate and correct a misspelling in the
Siteimprove Help Center.
Siteimprove is available to all website SPOCs whose public website is hosted by the E-Government Program.
See: How to start improving your website with Siteimprove.
Resources
Use plain language to improve your writing (PDF)
Oregon’s plain language website
Writing for easy reading
Hemingway Editor
Evaluating cognitive web accessibility with WAVE
Abbreviations: WCAG 2.0 Success Criterion 3.1.4
36 April 2023
V. FONTS
If you want people to read your content, give them legible text. Best practice is to use these font standards
when creating cascading style sheets (CSS). To make your content accessible and your site easy to read:
• Use a sans serif font as the default. Choose fonts that most site visitors have on their computers, for
example, Arial, Tahoma or Verdana.
• Make the default body text size at least 12 point, preferably 14 point.
• Minimize the use of bold or italics.
• Use upper and lowercase text, not all capital letters.
• Use plain text or normal text as the standard and use italics sparingly. Never use italics for headings.
Contact your webmaster to have style changes made to the CSS.
For more information on the proper use of headings, see the “Accessibility Headings” section in this document.
37 April 2023
VI. FILE NAMING CONVENTIONS
Organization is important on your website. Make a plan for your file naming convention before naming files.
1) Create a file naming convention and stick to it.
a) For example: If you start naming a group of files “0001agency,” don’t change midstream to
“agency0001.”
2) Keep file names short, but meaningful.
3) Avoid using blank spaces, symbols, or underscores in file names. Use capital letters or hyphens to separate
words. Hyphen-separated words are preferable for improved search engine optimization (SEO) results.
a) For example: “My file.pdf” should be named MyFile.pdf or My-file.pdf
b) For example: If you are using SharePoint and you use a blank space in a file name, SharePoint will fill the
blank space with “%20” and your URL will look messy and be difficult to communicate.
For example: www.oregon.gov/my%20file.aspx
c) If you use an underscore in a file name, it may be difficult to see when the URL is underlined in text. For
example: www.oregon.gov/my_file.aspx
4) For documents or webpages that you will update over time, avoid using a date in the file name as this will
change when the file is updated. File names that change when updated will break all old links.
a) If you must include a date, place it at the end of the file name and state the date back to front (for
example, YYMMDD) to keep all of your files in chronological order. For example: MyFile151202.pdf
5) When updating an existing file, keep the file name exactly the same to avoid breaking existing links. The
system will overwrite the old file with the new version if the file name and location is the same.
38 April 2023
VII. COMMON PAGE ELEMENTS
The “Header” and “Footer” elements are required on all Oregon.gov pages.
Header
a) The header includes a link to Oregon.gov from the Oregon.gov logo.
b) The home button in the top navigation is a link to the agency’s home page.
c) The navigation bar is located along the top of each page.
d) The search box is located in the upper right of each page. It searches for information only on your
agency’s site.
Figure 29 - Header
Footer
a) The right-hand column under “About Oregon.gov” contains statewide links and next to that is the agency
contact information.
b) We recommend the use of a translation widget.
Figure 30 - Footer
Page width
a) Primary content should be visible without scrolling.
Breadcrumbs
a) Breadcrumbs are a recommended sequence of elements separated by a character or graphic that shows
the user the optimal trail from the current page back to the home page. Breadcrumbs enhance the usability
of a website.
Figure 31 - Breadcrumbs
39 April 2023
Oregon.gov logo
The Oregon.gov logo is a required branding element on every page. The examples below are the only
approved versions of the Oregon.gov logo. Be sure to maintain the proportions of the logo and do not crop.
Figure 32 - Multi-colored version
a) Colors
i) Tree: #8B9C43
ii) Path: #AE9F76
iii) Oregon.gov: #231F20
b) Font
i) Optima
Figure 33 - Single-colored versions
a) You may choose to use a single color version of the logo.
b) Use only black or white for the logo against a contrasting background color.
Resources
SharePoint Website Elements (Zendesk – requires log in)
40 April 2023
I. ONLINE DATABASES AND DIRECTORIES
1) Use a simplified header that harmonizes with the site template and colors.
a) Always include clearly identifiable links back to the Oregon.gov portal and your agency’s homepage.
2) Maintain site identity and branding.
a) Use official artwork available from your agency. Use the Oregon.gov logo (see “Resources” in this
document) and be sure to include your agency’s name.
b) Match the look and feel of the custom application to the agency’s website style.
c) The following shows an example of an agency’s homepage and an application that is not embedded
on an agency’s webpage, but is hosted separately. By using a wrapper, the application displays a
consistent look and feel that is similar to the agency website branding.
Figure 34 - Department of Agriculture’s home page
Figure 35 - Department of Agriculture’s Resource Guide
d) The following shows an example of an agency’s home page and one of their applications that is not
using a wrapper. It would be better if they were visually consistent with their agency’s look and feel.
Figure 36 - Department of Agriculture’s home page
41 April 2023
Figure 37 - Department of Agriculture’s login screen to one of their applications
3. Include Contact Us and Help links specific to the application.
a) Set copyright to “last changed date” for the application.
4. Make use of the whole page. Optimize for responsive design.
5. Follow accessibility guidelines. See Appendix A in this document for ADA requirements for developers.
42 April 2023
APPENDIX A
Rules to follow for web-based applications
(for example: online tax payment systems, online business registries, etc.)
Section 508 1194 – Application and Administration
The following Section 508 accessibility requirements are laws for software applications and operating systems.
This information includes technical language most appropriate for application developers.
(a) When software is designed to run on a system that has a keyboard, product functions shall be
executable from a keyboard where the function itself or the result of performing a function can be
discerned textually.
(b) Applications shall not disrupt or disable activated features of other products that are identified as
accessibility features, where those features are developed and documented according to industry
standards. Applications also shall not disrupt or disable activated features of any operating system that are
identified as accessibility features where the application programming interface for those accessibility
features has been documented by the manufacturer of the operating system and is available to the
product developer.
(c) A well-defined on-screen indication of the current focus shall be provided that moves among
interactive interface elements as the input focus changes. The focus shall be programmatically exposed so
that assistive technology can track focus and focus changes.
(d) Sufficient information about a user interface element including the identity, operation and state of the
element shall be available to assistive technology. When an image represents a program element, the
information conveyed by the image must also be available in text.
(e) When bitmap images are used to identify controls, status indicators, or other programmatic elements,
the meaning assigned to those images shall be consistent throughout an application’s performance.
(f) Textual information shall be provided through operating system functions for displaying text. The
minimum information that shall be made available is text content, text input caret location, and text
attributes.
(g) Applications shall not override user selected contrast and color selections and other individual display
attributes.
(h) When animation is displayed, the information shall be displayable in at least one non-animated
presentation mode at the option of the user.
(i) Color coding shall not be used as the only means of conveying information, indicating an action,
prompting a response, or distinguishing a visual element.
(j) When a product permits a user to adjust color and contrast settings, a variety of color selections capable
of producing a range of contrast levels shall be provided.
(k) Software shall not use flashing or blinking text, objects, or other elements having a flash or blink
frequency greater than 2 Hz and lower than 55 Hz.
(l) When electronic forms are used, the form shall allow people using assistive technology to access the
information, field elements, and functionality required for completion and submission of the form, including
all directions and cues.
43 April 2023
APPENDIX B
Rules to follow for embedding on a web page
Section 508 1194.22 – Web-based intranet and internet information and applications
The following Section 508 accessibility requirements are laws for software applications and operating systems.
Please be aware that the following information includes technical language most appropriate for application
developers.
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element
content).
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
(c) Web pages shall be designed so that all information conveyed with color is also available without color,
for example from context or markup.
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
(e) Redundant text links shall be provided for each active region of a server-side image map.
(f) Client-side image maps shall be provided instead of server-side image maps except where the regions
cannot be defined with an available geometric shape.
(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more
logical levels of row or column headers.
(i) Frames shall be titled with text that facilitates frame identification and navigation.
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and
lower than 55 Hz.
(k) A text-only page, with equivalent information or functionality, shall be provided to make a website
comply with the provisions of these standards, when compliance cannot be accomplished in any other
way. The content of the text-only page shall be updated whenever the primary page changes.
(l) When pages utilize scripting languages to display content, or to create interface elements, the
information provided by the script shall be identified with functional text that can be read by assistive
technology.
(m) When a webpage requires that an applet, plug-in or other application be present on the client system
to interpret page content, the page must provide a link to a plug-in or applet that complies with
§1194.21(a) through (l).
(n) When electronic forms are designed to be completed online, the form shall allow people using assistive
technology to access the information, field elements, and functionality required for completion and
submission of the form, including all directions and cues.
(o) A method shall be provided that permits users to skip repetitive navigation links.
(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more
time is required.
44 April 2023
APPENDIX C References and Resources
MOBILE-FIRST REFERENCES
MOBILE-FIRST CONTENT STRATEGY (pg. 5)
Find current mobile technology statistics from the Pew Research Center
MOBILE-FIRST CONTENT STRATEGY Writing for the web (pg. 6)
New York University writing for the web
7 best practices for improving your website’s usability
Breaking development: Mobile content strategy
Free optimization tool
Hemingway editor for testing readability
MOBILE-FIRST CONTENT STRATEGY Plain language (pg. 7)
ORS 183.750
HB 2702
Use plain language to improve your writing (PDF)
Oregon’s plain language website
Writing for easy reading
Evaluating cognitive web accessibility with WAVE
Hemingway editor for testing readability
Abbreviations: WCAG 2.0 Success Criterion 3.1.4
MOBILE-FIRST CONTENT STRATEGY Capitalization (pg. 10)
DAS editorial stylesheet
Title case and sentence case capitalization in APA style
Capitalization rules (Grammarbook.com)
MOBILE-FIRST CONTENT STRATEGY Common internet terms (pg. 12)
DAS editorial stylesheet
Dictionary.com
Computer terms, dictionary, and glossary (Computerhope.com)
Online Merriam-Webster dictionary
Guidance on Accessibility for E-Government Program Services
45 April 2023
ACCESSIBILITY REFERENCES
UN Convention on the Rights of Persons with Disabilities (pg. 13)
WCAG 2.0 guidelines (pg. 13)
Accessibility compliance (pg. 13)
Section 508, American Rehabilitation Act (pg. 13)
ACCESSIBILITY Images including charts and graphs (pg. 16)
WCAG 2.0 guidelines
(Guideline 2.1)
ACCESSIBILITY Data table design (pg. 18)
Creating accessible tables (webaim.org)
ACCESSIBILITY Color and contrast (pg. 19)
WAVE
Color Contrast Checker
Color Oracle
ACCESSIBILITY Keyboard navigation (pg. 20)
Code for: skip to main content
ACCESSIBILITY Visual focus (pg. 21)
WCAG 2.0 Success Criterion 2.4.7
Why focus indicators are key to web accessibility (interactiveaccessibility.com)
ACCESSIBILITY Video and audio (pgs. 22-23)
LNS Captioning
Google Voice Typing
SpeakWrite
SoundCloud
Vimeo
Web Resizer
YouTube
ACCESSIBILITY Making PDFs accessible (pg. 28)
Foxit Reader
WebAIM – PDF Accessibility
46 April 2023
WebAIM – PDF Accessibility in Adobe Acrobat X and XI
Creating Accessible PDF files
Microsoft Office - Creating accessible Word documents
Microsoft Office – Convert a document to PDF
ACCESSIBILITY Links – web linking guidelines (pg. 31)
Stop Asking Me to “Sign Up”
(gkogan.co)
State of Oregon privacy statement
WCAG 2.0 Guideline 3.2 (Predictable)
ACCESSIBILITY Banner blindness and sidebars (pg. 33-34)
Image-Focused Design: Is Bigger Better?
How to design websites that mirror how our eyes work (thenextweb.com)
Does your website need a sidebar? (roundpeg.biz)
COMMON PAGE ELEMENTS (pg. 38)
SharePoint Website Elements
(Zendesk – requires log in)
47 April 2023
RESOURCES
ACCESSIBILITY
Review supporting documents relating to accessibility
Access the Section 508 website accessibility standards
Read the web content accessibility guidelines (WCAG) 2.0
WebAIM - web accessibility in mind
Infographic for principles of accessible design
Standards excerpted from Section 508 of the Rehabilitation Act, §1194.22
Full text of Section 508
Accessibility evaluator
Accessibility check tool
Making web applications accessible (short videos)
MISCELLANEOUS
A brief crash course for web/CSS
Federal website guidelines
BOOKS
O’Reilly Online Books – Free to state employees through the Oregon State Library
• Content Strategy for the Web, 2
nd
edition (2012), Kristina Halvorson and Melissa Rach
• Don't Make Me Think: Revisited (2014), Steve Krug
• Rocket Surgery Made Easy (2010), Steve Krug
• Letting Go of the Words (2012), Janice (Ginny) Redish
• Designing for Mobile First (2011), Luke Wroblewski
E-GOVERNMENT SERVICE DESK
[email protected]gon.gov
503-378-3126
SHAREPOINT TRAINING
E-GOVERNMENT SERVICE DESK
[email protected]gon.gov
503-378-3126
SHAREPOINT V4X TEMPLATE UPDATES
48 April 2023
Tyler Technologies provides regular updates to the v4x templates. To see a list of these updates, view the v4x
Template Releases article within the Tyler Technologies Help Center. Note that you need to have a login to
Zendesk to view this article. You can get a login by filling out the registration form.
APPENDIX D Tools (as of September 2022)
Tools
Description
Third party tool
or state resource
AdobeConnect
(requires login to
OregonBuys
Carahsoft (AdobeConnect) will help you easily deliver
webinars, seminars and trainings through their cutting
edge tool. Once in OregonBuys, enter 5751 in the search
to find the contract for Web-based Conferencing.
If you are in local government or a non-profit and don’t
have a login, email [email protected]
.
State resource
Color Contrast
Checker
Enter foreground and background colors to determine the
contrast ratio and meet accessibility guidelines.
Third party tool
Color Oracle
Color Oracle is a downloadable color blindness simulator
that shows what people with common color vision
impairments will see.
Third party tool
Data.Oregon.gov
(requires login)
This website provides Oregonians the ability to view,
search, sort, filter, download or build applications to
access public data. (For example: maps, calendars, etc.)
State resource
ESRI / ArcGIS
ArcGIS is a suite of GIS software products, which operate
on desktop, server, and mobile platforms. The suite's
components, ArcMap, ArcCatalog and ArcToolbox, allow
users to author, analyze, map, manage, share, and publish
geographic information.
Third party tool
Facebook
(requires login)
Facebook is an online social networking application.
Third party tool
Google Analytics
(requires login)
This is a website analytics service offered by Google that
tracks and reports website traffic.
Third party tool
Google Calendar
This is a calendar time-management web application and
mobile app created by Google.
Third party tool
Google Maps
This is a web mapping service application and technology
provided by Google, powering many map-based services.
Third party tool
Google Translate
Google offers two options to help you translate your
content:
Free Website Translator
This is a lightweight, straight-forward option. It’s free to use
and easy to set up.
Translate API
Google also has a more robust paid offering. The Translate
Third party tool
49 April 2023
API can be used to power web apps, as well as translate
website content.
Google Search
The Google Search tool can be embedded on your
website to search for information in your site.
Third party tool
Google Voice
Typing
Need a transcription service? Google provides an easy
way to put words on a page by typing with your voice in a
document. At the moment, this feature is only available in
Chrome browsers. Many Android and iOS phones and
tablets have built-in microphones that you can use with a
Google Docs document. Look for the microphone icon on
your mobile keyboard.
Third party tool
GovDelivery
(merged with
Granicus)
GovDelivery is a cloud-based e-newsletter subscription
service. It allows customers to create, track and send
emails, SMS text messages and social media messages. It
also allows agencies to embed “page watch” tracking
code that alerts subscribers every time a page is updated.
GovDelivery also tracks analytics and provides reports.
Third party tool
Hemingway
Editor
Hemingway allows you to copy and paste text and get a
measure of readability and suggestions for making text
clearer.
Third party tool
iContact
An online service provider of email marketing and social
media marketing that allows customers to create, track,
and send HTML-based emails and social media messages.
Third party tool
Instagram
Instagram is an online mobile photo-sharing, video-sharing
and social networking service that enables users to edit
and share pictures and videos on a variety of social
networking platforms.
Third party tool
LNS Captioning
Located in Portland, LNS Captioning offers post-production
and live captioning, as well as transcription and subtitling
services for video, film, DVD and live events.
Third party tool
Mobile-Friendly
Test by Google
Enter a webpage URL to analyze and report if the page
has a mobile-friendly design.
Third party tool
Optimal
Workshop
A suite of usability tools to help improve your website
navigation, define information architecture, understand
first-clicks, capture qualitative research, conduct card-
sorting and user interface testing, and more. Monthly
subscriptions are available.
Third party tool
Prezi.com
Prezi is a cloud-based (SaaS) presentation software and
storytelling tool for presenting ideas on a virtual canvas. Be
sure to check ADA accessibility if you use this tool.
Third party tool
O’Reilly Learning
Platform
O’Reilly is an online resource available through the Oregon
State Library that offers access to online e-books, audio
State resource
50 April 2023
books, videos, tutorials and technical conferences. Topics
covered include in-depth IT/Technology subjects as well as
a large collection of business and professional
development resources.
Siteimprove
Siteimprove is web governance software that helps you
better manage and maintain your website through quality
assurance, accessibility, web analytics, search engine
optimization (SEO), and response – all in one tool.
Third party tool
Siteimprove
Accessibility
Check for
Google Chrome
A free extension for Google Chrome. Test any webpage
for accessibility issues right in your browser. The checker
highlights errors and gives you recommendations on how
to fix them.
Third party tool
SlideShare
LinkedIn SlideShare is a hosting service that allows users to
upload, host and share slideshow presentations. Slideshows
can then be viewed on the site itself, on hand-held
devices or embedded on other sites.
Third party tool
SpeakWrite
SpeakWrite is a transcription service and a mobile
dictation app.
Third party tool
SoundCloud
SoundCloud is a social platform for uploading and sharing
audio files privately or publicly. SoundCloud can be
accessed anywhere using a computer or various mobile
apps.
Third party tool
Survey Monkey
SurveyMonkey provides free, customizable surveys, as well
as a suite of paid back-end programs that include data
analysis, sample selection, bias elimination, and data
representation tools.
Third party tool
Twitter
Twitter is an online social networking service that enables
users to send and read short 140-character messages
called "tweets."
Third party tool
Vimeo
Vimeo is a video-sharing website in which users can
upload, share and view videos.
Third party tool
WAVE web
accessibility
evaluation tool
An online tool that checks webpages for accessibility and
displays the page with tags to show errors, alerts, and
features that are formatted correctly.
Third party tool
Web Resizer
Web Resizer is an online photo resizing tool.
Third party tool
WordPress
A free and open source blogging tool which runs on a
web hosting service. Features include a plug-in
architecture and a template system.
Third party tool
YouTube
YouTube is a video-sharing website in which users can
upload, share and view videos.
Third party tool
51 April 2023
APPENDIX E ACRONYMS
APA style American Psychological Association (APA) – a citation and format style of writing
API Application Program Interface - a set of routines, protocols, and tools for building software
applications
CSS Cascading Style Sheets
DAS Department of Administrative Services
GIS Geographic Information System - a system designed to capture, store, manipulate, analyze,
manage, and present all types of spatial or geographical data
HTML Hyper Text Markup Language
ISO International Organization for Standardization
NASCIO National Association of State Chief Information Officers
ORPIN Oregon Procurement Information Network
ORS Oregon Revised Statute
OS Operating System
PDF Portable Document Format
PDF/A Portable Document Format - an ISO-standardized version of a portable document format
TOS Terms of service
URL Uniform Resource Locator
WCAG Web Content Accessibility Guidelines
Feedback
If you have comments, questions or corrections to this document let us know:
Oregon Website Guidelines
Feedback
