Connecticut State Sitecore Training and Fundamentals

Accessibility Compliance

Accessibility is providing equal access to electronic content and technologies no matter ones abilities. Creating a website with accessibility in mind also increases usability for all.

Laws and Guidelines

 The State of Connecticut follows federal laws, guidelines and best practices for website accessibility. Section 508 of the Federal Rehabilitation Act of 1973 is a federal law that requires all agencies or any agency that receives federal funding to make their electronic and information technology accessible to people with disabilities.

In January of 2017, the United States Access Board published a final rule that updated the Section 508 Standards. This update includes the incorporation of the Web Content Accessibility Guidelines (WCAG) 2.0 A and AA criteria. The update went into effect in January of 2018.

According to the W3C website: 

“The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including natural information such as text, images, and sounds and code or markup that defines structure, presentation, etc.”

The new addition of the WCAG 2.0 guidelines puts more focus on the content of the website and not just the access to the content.

The State of Connecticut also has an accessibility policy for all state agency websites to follow. 
 

 

Why Make Website Content Accessible

Making website accessible provides a better experience for all website users. 26% of adults in the US have some type of disability and 19% of adults in Connecticut have some type of disability. Website accessibility is about giving all users the best experience possible regardless of limitations or disabilities. In addition to those who are permanently affected, there are many people who experience a temporary disability due to an injury, environmental factors or age-related issues. When websites are made accessible, it allows the content to be accessed by anyone, no matter their ability. 

 

Types of Disabilities

Disabilities can be in a variety of forms. Below are the general categories covered by accessibility standards: 

  • Visual
    • Blindness
    • Low Visions
    • Color-blindness
  • Auditory
  • Motor/Mobility
  • Cognitive and Intellectual
  • Seizure

 

4 Ways to Make Content Accessible

Website accessibility can be overwhelming and hard to know where to start. There are four simple things you can do to help make your content accessible and compliant. 

 
1. Add Alternative Text for Images

Alternative text provides a text alternative to non-text content in web pages. Alternative text typically applies to these items:

  • images
  • graphs
  • diagrams
  • buttons
  • design elements

It provides a non-visual alternative for the visually impaired. Those who use assistive technology have the website read to them. The alternative text provides a description of the image or diagram. Without alternative text, individuals who are visually impaired will not be able to understand what the image or diagram is about. The content is less informative. 

Alternative text is also read by search engines like Google or Bing. It provides additional information or keywords about the content on the page.

 

Guidelines for Writing Alternative Text
Sitecore makes it easy to include alternative text to any images, graphs or diagrams you upload into the system. Sitecore will also give you a warning, alerting you when alt text is missing and needed. 

Alternative text for images should be: 

  • short
  • meaningful
  • descriptive 

When writing alternative text, ask “What information am I trying to convey with this image?”. Answering this question can help you write descriptive text. Avoid using phrase such as “image of…” or graphic of...”. This information is relayed to the user by default using assisted technology and would be redundant.

 

2. Create Descriptive Links

In the Writing for the Web section, creating descriptive links makes content easy to read and understand. In addition, they also are beneficial for accessible content. 

Links should make sense out of context to the surrounding sentence or paragraph. Screen reader users often navigate from link to link, skipping the text between. Tabbing from link to link is a way of skimming website content. These users would need to rely on remembering what was read before and after the link for context.

Link text should be concise and meaningful. Similar to alternative text, links should be descriptive and tell the user where it will take them or if it leads to a download. 

When creating links, some additional items to avoid are:

  • Avoid using non-descriptive words like “click here”, “more” or “learn more”
  • Avoid using the word “link” as part of the description. Assistive technology will identify a link as such and would be repetitive. 
  • Avoid using the actual URL as link text. URL’s are usually long and can be made of random letters, characters and numbers which can be tedious and confusing to a screen reader user. They are not human-readable or screen-reader friendly.
 
3. Color and Color Contrast

Color can be problematic for users who have poor eyesight or are colorblind. If only color is used to denote importance, a user who is colorblind will not be able to distinguish or understand. Avoid using color to denote importance for content. Instead, use bold or italics to differentiate from the rest of the page. 

Color contrast can also be problematic. If the contrast between colors is too low, users who have low vision won’t be able to read or see the text. For example, if the body font is small and in a light gray on a white background, it will be too hard for a person with low vision to see. Some poor color combinations include blue links on a black background or red text on green backgrounds. The contrast between these colors is too low. 

The contrast between text and background color should be a ratio of 4.5:1 for normal text and 3:1 for large text. There are many tools that can help check for the right color contrast. WebAIM has a helpful color contrast checker with additional information about color contrast. 

 
4. Tables

In the early days of website design, tables were used for layout. This was due to the lack of layout options. Tables could easily be adjusted to any size or shape to fit the needs of the website’s content. Today, with the advancement of Cascading Style Sheets (CSS), responsive and mobile design and the requirement for accessible websites, tables are now best used for what they were designed for, tabular data.

 

Tables for Data 

Tabular data is data contained in a table and displayed in rows and columns. Large amounts of data can be organized easily in a table and it provides a comparison of the data within.

When tables are used for layout, they can also be problematic in responsive design.  Tables should be fluid so they can easily respond to any device width or screen size. When they are not, on smaller screens content can be cut off and not accessible to the user. 

 

Making Tables Accessible

When tables are not accessible, there is no relationship identified between the row and column headings and the rest of the content in the table. Without the connection of headings and table content, the screen reader user may not be able to understand the relationship between the content in the table, leaving them confused.

 

Tips for Better, More Accessible Tables

Use the simplest table possible. When using tables, avoid having nested tables or unnecessary rows and columns. Also avoid using spanned rows and columns as it can change the logical order of the rows and columns. When screen reader users try to navigate from one area to another within the table, they may become disoriented. the best practice is the simpler, the better.   

 

Include Table Captions

Table captions provide the user with an idea of what the table is about. The caption is tied to the table and screen readers will read it first before it begins to read the content of the table providing context to the content within. 

 

Identify Row and Column Headings

An important step to making tables accessible is designating a row and/or column header. Headers are the main categories for a table. It is the identifier for the corresponding content below. 

Below is an example of a table with a row heading and a column heading. The row headers are Ball and Block. The column headers are Name, Color, Shape and Size. 

 

Characteristics of Objects
 Name Color Shape Size
Ball Red Circle Small
Block Blue Square Medium

 

Sitecore makes it easy to make tables accessible. See the Sitecore tutorial for how to make tables accessible. 

 

Resources

There is so much more to making websites and content accessible. Below are resources that can provide further information.