508 Refresh & Website Accessibility
The term 508 is most often attributed to web accessibility. Web accessibility means providing access to a website for people of all abilities. Society commonly thinks of individuals with visual disabilities when discussing web accessibility, but in reality, developers must take into consideration all types of abilities. These could include motor, auditory and cognitive disabilities along with individuals with no disabilities. Making a website accessible typically means following best practices for web development. This helps to provide a better experience for everyone viewing a site. The Section 508 Amendment to the Rehabilitation Act of 1973 provides a set of standards and guidelines to follow to ensure a website is accessible.
In January 2017, the United States Access Board announced a refresh to the Section 508 Guidelines. The refresh brings the Section 508 Guidelines in line with Web Content Accessibility Guidelines (WCAG) 2.0; which has been in place since 2008 and was adopted by the EU in 2010.
News about the refresh started to circulate a few years ago, and has since been on BGSU’s radar. Once officially announced, the web team began working hard to ensure that the BGSU website complies with these standards.
What BGSU is doing
Web accessibility has always been a priority at BGSU. However, over the last 12 months efforts have increased in order to adjust to the 508 Refresh scheduled for this coming January.
This process began with adopting better tools to help audit the BGSU website. In October 2016, the web team implemented a tool called SiteImprove, https://siteimprove.com/, which helps the team to better identify and understand any accessibility issues on the site. SiteImprove is used by several other universities who have had success with improving site accessibility and overall website quality.
Since implementing SiteImprove, four sets of accessibility-focused changes were made spanning over a period between October 2016 and September 2017. Most of these changes were “behind the scenes” and applied to templates. Using Adobe Experience Manager (AEM), the University’s content management system (CMS), will give users the benefit of these changes.
The ITS web team has already started work on the next group of changes, with a goal of launching this December. This will include a number of overall changes to the website, some of the biggest changes being Cascading Stylesheet (CSS) changes that will make links easier to distinguish on the site.
These changes have been a large focus this past year, but we also recognize 508 will be an ongoing effort shared between ITS, Marketing and Communications and Accessibility Services. A website is never a finished product; updates are continuously needed to provide users with the most relevant information. As the website changes and new features are added to AEM, the team will continue to review the website.
508 Tips & Tools
1. Do not go ROGUE. Use AEM to manage your website. Changes implemented ensure all templates and components are accessible. Just by using these tools, users are one-step closer to having an accessible website. In fact, most of the remaining tips and tools exist in AEM.
2. Use Semantic HTML. HTML has come a long way since its implementation; there are now better ways of providing meaning behind the information on a web page. Users should also make sure to use CSS to handle styling. Some examples of semantic HTML tags to use are below. AEM already includes some of these; others are coming in a future release.
<span style="text-decoration: underline; ">Underline</span>
3. Provide descriptive text for images and avoid images with text. This is one of the most common recommendations; if using an image on your website please be sure to use the alt attribute to describe the image. This helps screen-reading tools like JAWS and NVDA read the description of the image. Also, wherever possible, try to avoid images that include text, this is important because screen readers cannot interpret the text within an image and the user may not be able to change the color contrast or size of the font to make it legible.
Example: <img src="https://www.bgsu.edu/logo.png" alt="BGSU Logo" />
4. Link text should be different for each unique link. This typically occurs when the same text is used for two separate links, like “Read More” or “Contact Us”. This is important because, depending on how the audience views a webpage, the text of the link may be out of context as to how it fits in to the website. In order to keep the same text, but add more context, users can add an aria-label that further describes the link. Also, avoid using “click here” as link text because it does not provide any context. A screen reader can list all the links on a page, and if there are several named “click here”, the user will not know the context for each of them.
- <a href="https://www.bgsu.edu/admissions/contact-us.html">Contact Us</a>
- <a href="https://www.bgsu.edu/alumni/about-us.html">Contact Us</a>
- <a href="https://www.bgsu.edu/admissions/contact-us.html" aria-label="Contact BGSU Admissions">Contact Us</a>
- <a href="https://www.bgsu.edu/alumni/about-us.html" aria-label="Contact BGSU Advancement">Contact Us</a>
508 Compliance Quick Tip Video Series
Tools we Recommend
SiteImprove Chrome Plugin
AI Inspector – Firefox Plugin
The A11Y Project
To report an accessibility issue, please click the report an issue button located in the Accessibility section of the BGSU website footer.