| Table of Contents | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
|
Instructions
Section 1.1: Fonts
Google Docs gives you 25 different fonts to use. Many of these fonts are accessible but some are not.
...
When using fonts, you want to use fonts that are easily readable and not distracting or fancy. Fonts like Times New Roman, Verdana and Georgia are examples of good fonts to use. It is not recommended to use fonts like Pacifico, Caveat, or Amatic SC.
...
| Warning |
|---|
While these fonts look more interesting, they are very hard to read for some users. |
...
 |
| Tip |
|---|
These fonts are much easier for people to read.  |
Section 1.2: Font Size
To keep things simple and easy to read, make sure the font is over 12 points in size.
...
Go to the Main Tool Bar.
Select the font size button and select the font size you want.
Section 1.3
...
When typing in text you want to consider the color contrast between the text and the background. For small text (under size 18), a good contrast ratio to aim for is 4.5:1 or higher. For bigger text (over size 18) a good contrast ratio is 3:1 or higher. Black text on a white background or 21:1 is the highest and best ratio you could have.
To change the color of your font,
Go to the Main Tool Bar.
Select the text color button and select a color you want from the grid.
To see if your color provides a strong color contrast ratio, use the Adobe Color Contrast Analyzer. If you can get all of your previews to pass, then you can use that font color.
...
| Warning |
|---|
The text examples have a very low color contrast ratio of 1.25:1 and 1.07:1, which is well below the standard. |
...
:
...
As you can see in the example, good color contrast makes the text easier to read for the viewer.
...
Capitalization
Screen readers do not recognize capitalized letters, so there is no point to relying on capital letters to emphasize text.
...
| Warning |
|---|
This example shows capital letters that are not needed. Screen readers will not emphasize the text even when it is in all caps. |
...
 |
| Tip |
|---|
This example shows a new way to show the important content. Screen readers will read the (covered) label and tell the reader that it will be on the test.  |
| Tip |
|---|
Only use capital letters to show the IMPORTANT text. |
Section 1.
...
4: Bold, Italic, Strikethrough and Underlined Text
Screen readers by default do not recognize text that is bold, italic, strikethrough or underlined. The text will be read as normal text. There are settings available in NVDA to make the text be read as bold, italic or underlined, but very few people change these settings. A good rule is to use bold text, italics, underlined, or strikethrough text sparingly.
...
| Tip |
|---|
This example uses bold, italics, and underlining text sparingly. Only change the important words. This will make the content easier to read. |
Section 1.5: Highlighting
When highlighting, it is important to be sure it is not the only way to convey meaning. Screen readers will not recognize the highlighted text as highlighted text. So it will only read it as normal text. This will be confusing to someone with visual disabilities.
| Warning |
|---|
This example only highlights the text and does not provide an additional queue for a screen reader to tell the reader that the highlighted text means something.  |
| Tip |
|---|
This example gives a second queue for the screen reader to read. This will help a reader understand the meaning and context behind a highlighted text.  |
Section 1.6: NVDA Settings for
...
Text
If you have a document that has strikethrough textWhen you use text that is bold, italic, strikethrough, or underlined, be sure you change to modify the Document Formatting settings in NVDA. To do thissettings in the screen readers. This will allow the screen reader to tell the reader of any bold, italic, strikethrough, or underlined text. To change the settings,
In NVDA, go to the Preference Tab, then click Document Formatting.
Select the Font Attributes check box in the pop up box. Click Apply in the bottom right corner.
In JAWS, you can examine the font attributes at the cursor, including whether or not there is strikethrough, by pressing INSERT + F.
To make your screen reader read the document, go to your document and click on the Menu Search box in the Main Tool Bar and type in Accessibility.
In the Accessibility Support pop-up box, check “Turn on screen reader support.” and click OK. An Accessibility Tab will appear in the Main Tool Bar. Now when your screen reader is active, it can read your document.
Section 1.7:
...
When highlighting, it is important to be sure it is not the only way to convey meaning. Screen readers will not recognize the highlighted text as highlighted text. So it will only read it as normal text. This will be confusing to someone with visual disabilities.
...
Symbols and Special Characters
You can use many different symbols and special characters. However, only 17 characters can be read by most screen readers. The list of symbols and special characters that can be read are as follows.
The AT Symbol.
Ampersand.
Slash
Copyright
Registered
Trademark
Paragraph
US Dollar
Euro
British Pound
Japanese Yen
Percent
Bullet
Degrees
One Half
One Fourth
Three Fourths
If you use other symbols or special characters, they must always be shown in regular text as well. This must be done so the screen readers will read the symbol properly to the reader.
To create a symbol or special character,
Go to the Insert Tab.
Go to the Symbols section and click Symbol.
A dropdown menu will appear, click more symbols to get a wider variety of symbols to choose from.
Example of using symbols…
| Warning |
|---|
This example only highlights shows the text and does not provide an additional queue for a screen reader to tell the reader that the highlighted text means something. |
...
symbols and fails to explain to the readers what the symbols mean. Screen readers will not read the symbol without an additional queue.  |
| Tip |
|---|
This example gives a second queue for the screen reader to read. This will help a reader understand the meaning and context behind a highlighted text.shows two ways to type in information and give the same outcomes for readers. You can just type it in text. Another way is to type the symbols, then type in the text in parenthesis. Both ways give readers and screen readers an easier understanding of the information provided.  |
Section 1.8:
...
Background colors are fine to use, as long as they have a good contrast ratio. It is also a good idea to avoid strong background gradients or patterns. They can make the text very hard to read and are usually very distracting.
...
| Warning |
|---|
This example has a background and text that is too dark and do not have a good contrast ratio. The brown background is also very distracting to readers. |
...
| Tip |
|---|
This example has a good color contrast ratio. It is also very easy to read and is not distracting to readers. |
...
| Warning |
|---|
This example has a very distracting background and is very hard to read. The color contrast ratio is also very low. |
...
Color Contrast
When typing in text you want to consider the color contrast between the text and the background. For small text (under size 18), a good contrast ratio to aim for is 4.5:1 or higher. For bigger text (over size 18) a good contrast ratio is 3:1 or higher. Black text on a white background or 21:1 is the highest and best ratio you could have.
To change the color of your font,
Go to the Main Tool Bar.
Select the text color button and select a color you want from the grid.
To see if your color provides a strong color contrast ratio, use the Adobe Color Contrast Analyzer. If you can get all of your previews to pass, then you can use that font color.
| Warning |
|---|
The text examples have a very low color contrast ratio of 1.25:1 and 1.07:1, which is well below the standard.  |
| Tip |
|---|
The text examples have a color contrast ratio that is over 4.5:1.  |
As you can see in the example, good color contrast makes the text easier to read for the viewer.
Section 1.9: Using Color to Convey Meaning
When using color in a project to convey information, you should include a text alternative.
...
Rule 1: Include Text Alternatives
| Warning |
|---|
This example only has color conveying meaning. If Dan was colorblind for red and green colors, how would he have known if he made the team? |
...
 |
| Tip |
|---|
This example shows two ways to indicate that Dan made the team. The first is that his name is colored red, and there is (callback) next to his name. Now Dan can easily read the list and know he made it to the Olympic Team.  |
...
Rule 2: The
...
Text Alternative Must Mean the Same Thing as the Color
| Warning |
|---|
In this table, only the red section is accurately labeled. Yellow and Green have no indication on what they mean for a reader who struggles to see the difference in color. |
...
 |
| Tip |
|---|
In this table, all three sections are accurately labeled. Now all readers will be able to tell what each section means and their color. |
This last example shows the importance of using multiple factors of indication in a Pie Chart.
...
 |
Rule 3: Make Sure Your Content Can be Read with Multiple Indicators
| Warning |
|---|
In this pie chart, we only have lines to point out which sport belongs to each section. For people who have visual disabilities, they may struggle seeing the line. Another thing to note, is the percentage labels are light gray, so they have a very low color contrast ratio. |
...
 |
| Tip |
|---|
In this pie chart, we have added a second percentage label inside the slices. Now the data is much easier to see.  |
Section 1.10:
...
You can use many different symbols and special characters. However, they must always be shown in regular text as well. This must be done so the screen readers will read the symbol properly to the reader.
To create a symbol or special character,
Go to the Insert Tab.
Go to the Symbols section and click Symbol.
A dropdown menu will appear, click more symbols to get a wider variety of symbols to choose from.
Example of using symbols…
...
| Warning |
|---|
This example only shows the symbols and fails to explain to the readers what the symbols mean. Screen readers will not read the symbol without an additional queue. |
...
| Tip |
|---|
This example shows two ways to type in information and give the same outcomes for readers. You can just type it in text. Another way is to type the symbols, then type in the text in parenthesis. Both ways give readers and screen readers an easier understanding of the information provided. |
Section 1.11: Acronyms
When using acronyms you want to be sure that you type out the whole name in parenthesis after giving the acronym. After you have typed in the acronym and full name, you may continue to use the acronym without typing the full name for the rest of the document. This is because the reader will now know what you are referring to.
| Tip |
|---|
Example: WCAG 2.1 (Web Accessibility Guidelines Version 2.1) |
| Warning |
|---|
Bad Example: WCAG 2.1 |
...
Background Colors
Background colors are fine to use, as long as they have a good contrast ratio. It is also a good idea to avoid strong background gradients or patterns. They can make the text very hard to read and are usually very distracting.
| Warning |
|---|
This example has a background and text that is too dark and do not have a good contrast ratio. The brown background is also very distracting to readers.  |
| Tip |
|---|
This example has a good color contrast ratio. It is also very easy to read and is not distracting to readers.  |
| Warning |
|---|
This example has a very distracting background and is very hard to read. The color contrast ratio is also very low.  |
| Tip |
|---|
This example has a more subtle background and a good color contrast ratio. This one is much easier to read and wont overwhelm the readers.  |
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|