“Color contrast is the difference in light between font (or anything in the foreground)
and its background. In web accessibility, how well one color stands out from another
color determines whether or not most people will be able to read the information.”
(Bureau of Internet Accessibility)
Due to the various perceptions of color, it is important to not rely on color by itself
to communicate information. While it may appear to you one way while designing a document,
it can look different to your audience for different reasons.
Users who are colorblind
Users who look at the document while in bright sunlight
Adaptive technologies may change how colors appear on devices
Instead of relying solely on color for distinguishing different things, utilize other
elements such as bold, italics, size, shapes, etc.
Don’t use underline as it may make it appear as a hyperlink
Don’t use italics in large amounts
Black text on a white background always ensures good contrast. However, there are
different methods to test contrast for color and fonts.
The WCAG guidelines have different contrast ratios for the size and weight of a font.
3:1 for normal text less than 14 points
4:5:1 for 14-point bold or 18-point non-bold text
The WebAIM Color Contrast Checker shows whether a document passes or fails the WCAG
requirements for contrast.Color Reliance uses hue, shade, tint, or tone to convey
information in different forms. However, issues arise when color reliance is the only
form of conveying this information, the same as a contrast.
Headings are a form of organization. They provide structure and are useful for everyone.
Who needs headings?
Without the use of headings, screen readers will read the document as a single long
section.
Everyone! For sighted users, a simple way to scan through the document would be to
look for the headings, or even use a keystroke to jump from one heading to the next.
For those using a screen reader, the screen reader can scan through all the headings
so the user doesn’t have to listen to every body of text. Screen readers also identify
the headings when the text is being read, enabling the user to identify the section
they are in.
Those with cognitive/learning disabilities may need a well-structured document in
order to help them visually process and understand the content, and heading provides
that organization!
Main components
Most software applications or web content management systems will have a styles menu that allows you to organize and manage all your headings.
If you are developing a website, a style of all headings can be set through CSS.
The main heading, Heading 1, typically begins the document and is usually in big,
bold text that describes the entire document.
Generally, there is only one Heading 1.
Heading 2 is a large category that relates to Heading 1. And the order continues.
Heading 3 is a subcategory of Heading 2, then Heading 4 is a sub-sub category of Heading
3.
Since headings define a document’s structure, do not skip heading levels or go out
of order.
A Heading 4 should not follow a Heading 2.
Headings are not as simple as making the font size bigger or a different color either.
If in Word or Google Docs, it is important to utilize the platform's Styles.
Headings need to follow a specific order and hierarchy.
Windows and Mac
To create heading levels in Word, navigate to the Home tab and inside the Styles section, there is a Headings feature.
Editing your document is also easier when headings are used. To modify a heading style,
click the Styles gallery and then right-click a Heading type. This is where you can reformat the appearance of headings and it will apply
to all current and future headings.
Having a table of contents allows for easier navigation and preview for long documents
or web pages.
By utilizing the styles feature, a table of contents can be generated in Word.
For Mac, click Insert on the menu bar and select Index and Tables. Then you can select the Table of Contents tab and create your own table of contents.
For Windows, select References from the menu bar and then select Table of Contents. From there, select an Automatic Table.
Don’t replace a table of contents with anchor links to different sections of a page,
unless you indicate what the links do.
Links (contextual/descriptive)
A link is a form of navigation that is connected to another location such as a website
or file. When a link is used, they usually appear as the URL which can be a random
assortment of letters and numbers that usually isn’t descriptive of what you are navigating
to. A link should be descriptive, contextual, and meaningful out of context.
Specified links are important as sighted readers may scan a page for links. Those
with a screen reader can do something similar, where they listen to a list of all
the links on the page. Speech recognition users can also use voice commands to click
on a link by stating “click ---” following it with the link text.
Guide - do's and don't
Avoid using “click here” or “more” which cannot be understood without context
Long URLs should be avoided
Don’t link entire sentences
Two links should not have the same text, specifically, if they link to different places
as this can create confusion
Make links visually distinct so sighted users understand they are links (such as the
default light blue with underline).
A useful way of utilizing links would be to embed them with other text. Insert the
link into a part of the text that is being explained. This can be done by highlighting
the text that can be the link text and using the keyboard shortcut control+K on Windows
or command+K on Mac.
Email addresses shouldn’t be linked in other text. When this is done, users won’t
know the link will open an email client instead of a web page, PDF, etc.
Ensure links aren’t confused for buttons
Links lead to new pages while buttons submit information or perform actions. Buttons
are also operable with the spacebar and enter key.
Examples of issues this creates:
This presents issues as people utilizing voice control may tell their software to
“click button” however the software cannot respond correctly.
It can create confusion for those with low vision when the screen reader says “link”
however they see a button.
Tables (header rows, etc.)
Tables are a great way of formatting information, however, it can be very confusing
if done incorrectly. If not formatted correctly, tables can be read by a screen reader
in one giant block, with none of the information organized in an understandable manner.
It is simple to create accessible tables. Simple solutions such as identifying a header
row and including a table summary (as a caption or alt. text) will aid screen reader
users.
A sighted user follows a table cell by looking at the rows and columns and scanning
up/down and left/right. A screen reader can only read each cell individually, therefore
when the formatting is incorrect, it makes it difficult to determine the label of
a cell.
Simplify complex tables
Only have a max. of one header row and one header column.
Spell out abbreviations and acronyms
It may be easier to create two or simpler tables rather than have multiple header
rows, merged cells, or another table embedded within.
Guide - Do's and Don't
Use descriptive text
While captions are not necessary for each table, they can be useful for screen readers.
Don’t repeat the heading by including the same text in the caption.
Don’t repeat information in a caption if it’s already in a summary
Don’t use tables to design a webpage. These layout tables can make web pages more
difficult for screen readers to read cells in the proper order.
Don’t create tables without table headers.
Designate at least one row or column header.
This enables screen readers to read the row and column header before the content in
the cell.
Changing the formatting of the text doesn’t create a table header as screen readers
can’t tell the headers with the correct cells.
Don’t leave empty cells
If a cell is left empty, both visual and screen reader users may suspect that information
is mistakenly missing.
Screen readers may skip data causing a misalignment with header rows and the correct
data cells.
Use n/a, none, not applicable, etc., instead of leaving a cell blank.
Layout tables vs data tables
Layout tables are less accessible than data tables. They can be, but it is typically
easier/simpler to utilize data tables.
Both layout and data table’s meanings are affected by the order in which the content
is presented.
Despite this, they are different. Screen readers read the content of the table based
on the source code order for layout tables.
Screen readers identify the presence of the table in data tables. This includes reading
the columns and rows and the numbers. Screen readers, for data tables, also provide
table navigation functionality.
Screen readers are able to distinguish between data and layout tables by performing
an analysis of the table markup and structure and are able to ‘guess’ which table.
Layout tables are typically used for having flexible control over elements on a page.
The concern with layout tables is due to a lack of flexibility for content adjustments
such as text sizing.
The main guide with layout tables is simple is better. It is common for layout tables
to be overused for design which creates confusion for the screen reader and its user.