| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
\uD83D\uDCD8 Instructions
...
Go to the Main Tool Bar.
Select the font size button and select the font size you want.
Section 1.3: 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.3: Capitalization
Screen readers do not recognize capitalized letters, so there is no point to relying on capital letters to emphasize text.
...
| 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
...
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 textshows 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
...
| 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) |
...
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. |
\uD83D\uDCCB Related articles
...