Skip to main content

Overview

Improving your website’s digital accessibility can enhance the usability and inclusivity of the site.

If you have any questions regarding your website’s accessibility, contact the DAO.

Content

The Top 10 Tips apply to content for website.

Code

Validation

Validate your HTML. Using semantic HTML elements and valid code helps the accessibility of your website.

If you are looking for website templates, try using the search features to look for accessible templates.

Keyboard Testing

Keyboard testing checks for a lot of accessibility features. WebAIM’s keyboard testing article will show some keyboard shortcuts to use.

For basic keyboard testing, open a web page and use the TAB key instead of your mouse to navigate

  • Ask yourself these questions:
  • Can I tell where I am on the page?
  • Does the order make sense based on the layout of the page?
  • Am I able to access all interactive elements on the page?

If you answer no to any of them, there are accessibility issues to address

Automated Checkers

Automatic accessibility checkers can be a great way to learn and see WCAG in action​. They can quickly check a web page for accessibility issues with:

  • Headings and semantic page structure
  • Form labels and inputs
  • Alternative text (but not if the alt text makes sense)
  • And more

Downside: they only catch about 25-29% of issues

UNC has access to the full Siteimprove platform. Visit UNC’s Siteimprove ​site for more information and to request access​.

Numerous online and browser extensions available for single page scans only​:

Web Developer Toolbar​ outlines headings and other semantic elements, displays alternative text, and more.

W3C’s Web Accessibility Evaluation Tools List​ is a comprehensive list of free and paid accessibility tools.

Skip Navigation

Skip navigation allows users to bypass repeated navigation or other elements.

WebAIM’s article on skip navigation

WebAIM’s article on hidden text

Animated Content

Animated content needs to have controls like pause, play, stop. This includes, but is not limited to: videos, gifs, and carousels.

Carousels are difficult to make accessible. A different layout design would be better whenever possible.

Tables

Use tables for tabular data.

As defined by the W3C, tabular data is data that is structured into rows, each of which contains information about some thing. Each row contains the same number of cells (although some of these cells may be empty), which provide values of properties of the thing described by the row.

Tables should NOT be used for layouts, such as, aligning an image to the right of a paragraph.

ARIA (Accessible Rich Internet Applications)

Using standard HTML and CSS code is your first step at making digital content accessible.

Do NOT use ARIA if you do not have to. According to WebAIM, “home pages with ARIA present averaged 26.7 more detectable errors than pages without ARIA!”

ARIA works with assistive technologies like screen readers. Add ARIA attributes to HTML to provide users with information from dynamic and interactive elements.

Sometimes listed as WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications).

The A11y Project’s Getting Started with ARIA

W3C’s WAI-ARIA

W3C’s WAI-ARIA Authoring Practices 1.1