Web accessibility is the practice of removing barriers that prevent access to and interaction with websites by people with disabilities.
When creating content on the Barnard site, there are general best practices to follow and tools to use within the content management system (CMS) to facilitate accessibility.
Disabilities include visual impairment, physical inability to use mouse or keyboard, hearing impairment and cognitive disabilities. Following the guidelines and using the tools ensure that users using screen magnifiers, screen readers or alternative input devices can "read" the content, discern links and navigate through a page or form.
For more information on guidelines, please visit the WCAG page.
Keeping content accessible:
- add alternative text to all images
- do not put essential information into a graphic
- use headings formats for headers and subheaders
- add table captions and summaries
- use table column and/or row labels
- make sure Webforms have appropriate labels and use fieldsets whenever possible
- make sure Links use descriptive or action phrases
- do not underline text that is not a link - this is why there is no underline option in the editing tools; use italics or bold for emphasis or heading styles for subheaders
Image alternative text, also known as an alt tag, is a description of an image which is read aloud to visually impaired users on a screen reader. Adding alternative text allows authors to include images, but still provide the content in an alternative text based format.
It’s important to not only provide alternative text, but also provide text that is useful in the context of the document.
Instead of the broken image icon, it would provide a few words that describe the image
- There are two easy ways to add alt text within the CMS
- Alternative text should be short and simple to describe an image
- Do not begin text with "image of" or "graph of"
How to add alternative text to images:
- When adding an image via an image field, there will be a field for “Alternative text” after uploading.
- Or if the image is already uploaded, select Edit image, add the text and save
- Once the image has been added via the media module tool, select the image, and click ‘image’ button in the toolbar
- Enter description in the ‘Alternative Text’ box just below the URL
Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/font face. Users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. For this reason, the content editor does not offer the option to change font size. Instead, the headings must be used so that a screen reader can both identify headings and provide a list as a page or table of contents (see image below).
- Click the cursor into the line of text that should be a header
- In the toolbar, select Normal
- Select the type of heading starting from Heading 2
- Use Heading 2 tags for top level content headings
(Heading 1 is reserved for page titles)
- Use Heading 3 and Heading 4 tags for sub-headings
- Use them consistently as one would in a document outline
The purpose of a table is to present information in a grid to allow people to understand the meaning of information by visually scanning the table. Someone who cannot see the table will not be able to make these visual associations, and so proper markup must be used when creating the table. When the proper markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.
To create an accessible table:
Add Table Caption & Summary
- The caption is a table identifier and acts like a title or heading for the table. It is displayed on the page.
- The summary indicates the content of the table and of how data has been organized into a table or a brief explanation of how to navigate the table. The summary is hidden from the display.
- The summary attribute may be used whether or not the table includes a caption element.
Use Row and/or Column Headers
- These two elements are used so that people know the relationship between the cells, most importantly the connections between headers and their rows of data cells
How to add caption and summary:
- Select the table tool in the toolbar
Or right-click on the table in the WYSIWYG (like you would in Word) and select Table properties from the pop-up menu and skip to #4
- Set the table settings as described in Editing a page
- Set whether headers are in the first row, first column or both
- Enter the Caption in the caption field (visible to all - serves as a title for the table)
- Enter the Summary in the summary field (hidden from display)
Simple Tables vs. Complex Tables
A simple table here means that there is a maximum of one header row and/or one header column. In addition, there are no merged cells within a simple table. Below are examples of simple and complex tables. Because screen readers present information linearly (i.e. table cell by table cell), it is encouraged to only use simple table.
The following is an example between the difference between a simple and complex table. The simple table shows a table caption, "Top 2008 Presidential Candidates by Party...", and uses table header in the first row, "Democratic" and "Republican".
|1. Barack Obama (1828.5)||1. John McCain (1575)|
|2. Hillary Rodham Clinton (1726.5)||2. Micke Huckabee (278)|
|3. John Edwrds (4.5)||3. Mitt Romney (271)|
By contrast, the table below uses merged cells, doesn't designate column headers, doesn't have a caption or summary or even a heading format for the table label. Notice that the website's table styles also don't work well with complex tables.
|Top Presidential Candidates 2008|
|Barack Obama||1828.5||Hillary Rodham Clinton||1726.5||John Edwards||4.5||John McCain||1575||Mike Huckabee||278||John Edwards||271|
- Avoid spanned cells and multiple levels of header cells.
- Do not merge cells: Even with headers properly marked, a screen reader could find it difficult to determine which cell to read.
- To avoid the above, split complex tables into multiple simple tables or reorganize data, taking advantage of captions and header options
- Do not use tables for page layout
Forms need to be designed in a logical, consistent way so that if the information is read by a screen reader, the user is receiving the information in a logical way. Barnard's CMS employs accessibility-friendly markup and structure behind the scenes, so there is not much more that content managers need to do when building a webform besides fill out the required information
There are two important components of webforms that should be included to improve accessibility:
Labels, which are required via the CMS. Screen readers will announce the form label when the cursor is moved to the corresponding form field.
Fieldsets, which aren't required, but are easy to create. Fieldsets group related sections of forms both visually and semantically which is helpful to all of our users.
- Keep label names simple yet accurate, e.g., full name vs. name
- Do not repeat any label names
- Group related information, e.g. address data, into a fieldset
Helping users understand the destination or purpose of links is an important step towards increasing the usability and accessibility of a document.
Examples of unclear links:
- Click here for instructions on how to use these tools
- Learn more about color and accesibility here and here
- Story 1 (read more) & Story 2 (read more)
- Pottery Class (register)
Examples of useful links:
- Instructions for these tools are available online
- Learn more about HTML | Learn more about CSS
- Read Story 1 & Story 2
- Register for Pottery Class
- Write links that make sense out of context instead of using generic phrases like “click here”
- Make sure the link is not only one word but also includes action words such as 'Watch' or 'Click'