Skip to main content

Websites

Improving your website’s digital accessibility can enhance the usability and inclusivity of the site. If you have any questions about your website’s accessibility, contact the DAO.

Web Content

Our Top 10 Tips apply to content for website. You should review and apply these tips to your web content.

Code

Validation

Validate your HTML. Using semantic HTML elements and valid code helps the accessibility of your website. If you use a website template or theme, use the search features to look for accessibility-ready 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, so you will still need a manual testing review of your site.

We recommend trying these free browser extensions for single web page scans:

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

Other recommended tools includ Web Developer Toolbar and Accessibility Insights. Both tools outline headings, display alternative text, and more. See the W3C’s Web Accessibility Evaluation Tools List for a comprehensive list of free and paid accessibility tools.

Skip Navigation

Skip navigation allows users to bypass repeated content like a website’s navigation.

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). Each cell provides values of properties of the thing described by the row. You should NOT use 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).

Landmarks

Landmarks add structure to elements like navigation, main content, and footers. Use the resources below to learn more about semantic elements and using landmarks on your website:

Need help?

If you have questions or concerns, you can submit an online help request for a consultation with the Digital Accessibility Office.