Checklist of Federal and State Requirements for Developing an Accessible Website in Oregon
Designing a website that’s “accessible” means you’re providing an equivalent experience for all users, regardless of the physical or cognitive ability an individual user may or may not have. The World Wide Web Consortium (W3C) puts it this way: “Accessibility means that people with disabilities can perceive, understand, navigate, and interact” with your website without barriers.
Who is the W3C? They’re an international non-governmental association that develops technical specifications for HTML and CSS, as well as recommendations and best practices for security, online payments, and accessibility. The W3C’s international gold standard for website accessibility rules is called the Web Content Accessibility Guidelines (WCAG).
What federal law says
Section 508 of The Rehabilitation Act, first adopted in 1973 and amended by Congress in 1998, requires federal agencies to make their electronic information accessible to people with disabilities. The rules were originally established in the fairly early days of the Internet, but Section 508 was modernized in 2017 to align with WCAG.
What this means in practical terms is, adhering to Section 508 for website development is synonymous with WCAG compliance. And while these standards are merely best-practice “recommendations” according to the W3C, for all U.S. government agencies — as well as for businesses and organizations that receive federal funding — these accessibility standards are requirements under Section 508.
What’s the difference between ADA and Section 508?
The Americans with Disabilities Act (ADA), which became law in 1990, requires state and local governments, businesses, nonprofit organizations, and labor unions make “reasonable accommodations” for employees with disabilities. ADA is a broad law against disability discrimination that applies to agencies and organizations with 15 or more employees. While it doesn’t go into technical details about website development, Section 508, on the other hand, essentially tells employers how to comply with ADA. How so? By following the WCAG.
In addition to ADA and Section 508, there are other federal laws that touch on the subjects of website development and access to electronic information. The Connected Government Act of 2018, for example, requires all new and redesigned federal agency websites to be accessible using mobile devices.
What state law says
Oregon’s Department of Administrative Services has developed a set of guidelines for usability and accessibility for state agency websites. Effective March 2017, all Oregon state agency websites must:
- Follow WCAG accessibility standards
- Follow a mobile-first content strategy
- Follow state law on using plain language (no “agency speak”, and nothing higher than eighth-grade writing level)
- Use HTML pages instead of PDFs, with limited exceptions
- Use a default body text size of at least 12 point, and preferably 14 point
- Include the Oregon.gov logo on every page
WCAG accessibility checklist
The Web Content Accessibility Guidelines (WCAG) are separated into three levels of conformance. These roughly translate into “basic stuff” (level A), “essential stuff” (level AA), and “shootin’ for the moon stuff” (level AAA). The W3C acknowledges that AAA may be impossible to achieve, so for the most part we’ve only included rules from the first two levels here. Also, for the sake of brevity — and to prevent eyes from going crossed — we’ve omitted highly technical and fine point recommendations. (If you care to dig deeper into the geeky details, W3C has more than 1,100 technical specs.)
Here’s our quick reference checklist for developing a website that conforms to WCAG and Section 508 standards.
1. Provide text alternatives for non-text content
- Captions are provided for video
- Transcripts are provided for podcasts and other audio-based content
- Alt tags are used to describe images, or set to null (i.e. alt=“ ”) when decorative images should be ignored by assistive technology
- Labels are used for buttons and form elements
- With the exception of logos, text is not placed within images
2. Make page layout and content adaptable
- CSS is used to control visual presentation of content
- The structure and relationships between elements are consistent on various screen sizes
- Content is presented in a correct, meaningful reading sequence on both desktop and mobile devices
- Content reflows without the use of both horizontal and vertical scrolling
3. Use color appropriately
- Body copy has a contrast ratio of at least 4.5:1 with the surrounding area
- Headlines and large text have a contrast ratio of at least 3:1 with the surrounding area
- Information conveyed using color is also available in text
4. Make text readable
- CSS is used to control the visual presentation of text
- Spacing between lines of text (known as line spacing, line height, or leading) is at least 1.5 times the font size
- Spacing between paragraphs is at least 2 times the font size
- Spacing between letters (known as letter spacing or tracking) is at least 0.12 times the font size
5. Provide keyboard and user controls
- Allow ability to pause, stop, or hide any moving, blinking, or scrolling information
- Allow ability to pause or stop audio
- Allow ability to resize text — up to 200% — either with on-screen controls or through a web browser’s zoom function
- If content is presented on hover, provide ability to dismiss/hide the content
- Tab order (in forms, for example) is correctly set
6. Avoid negative physical reactions (seizures)
- Nothing on the website flashes more than three times per second
7. Use page titles
- For HTML pages, the Title tag is used to describe each page’s topic or purpose
- For PDFs, the document Title is used
8. Make the website easy to navigate
- The user’s location is always visible within a set of pages. For example, this could be achieved with an indicator on a navigation bar (highlighting the active page), a breadcrumb trail, or by providing page numbers in a PDF.
- At least two ways are provided to locate each page within a website. For example, in addition to a standard navigation bar this could include a site map, a list of page links on the homepage, or a search box. An exception to this rule is for pages which are part of a step or process, e.g. a multi-page survey or shopping cart checkout.
- When navigational mechanisms are repeated on multiple pages (i.e. within a navigation bar), menu items display in the same order each time they are repeated.
- Link text describes the purpose of the link, including anchor links that jump within a page. (In other words, don’t use “click here.”)
While accessible website design isn’t rocket surgery, it does require an approach to planning that starts at the very beginning. Done right, accessibility is woven into all phases and stages of website development: content strategy and information architecture, user experience and visual design, and programming.
Need help implementing these accessibility standards for your website? Contact Logan Hoffman at email@example.com or call 541.971.4113 ext. 711.
This article is also published on Medium.
ArticleAre breadcrumbs still fresh for UX?
For the better part of 16 years I’ve been designing websites and other screen interfaces, and during this time I...
ArticleHow to build a higher ed website that achieves excellence
It’s one thing to deliver an excellent student experience on campus; quite another to build an excellent website. Between us...
ArticleHow to match your marketing funnel with web content strategy
In the rare case, a visitor comes to your website and immediately signs up for your service or purchases your...