Accessibility Core Skills

“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)

Color wheel

  • 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. 

Resources

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.