All University websites are required to be compliant with the Americans with Disabilities Act and are encouraged to adhere to Section 508 of the Rehabilitation Act of 1973 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications).
...
(See all Aurora WordPress Training.)
Quick Tips to Keep Your Pages Accessible
Use
...
Alt Text for Images
Alternate text, or alt text, is a textual description of an image. Alt text is applicable when inserting pictures into a webpage; it describes what knowledge or functionality the reader is supposed to gain from the inserted image. Alt text is only helpful when it fully describes the form and function of the image. WordPress uses the file name of an image as the alt text, but this is generally not good enough to pass an accessibility review.
| Note |
|---|
When using the Cynder theme on Aurora, having alt text on images is required unless that image is being used in a decorative way (as a background image, for instance). Non-decorative images without an alt text will be grayed out with a link to this article. To set an image as decorative – and to bypass this check – find the image in the media library and click the button that says “Decorative image” in the lower right. There is also a toggle button in the block editor sidebar that is displayed when selecting an inserted image. This should be used sparingly, though, as alt text should be added whenever possible to increase the accessibility of your site. |
Good alternative text provides the information conveyed in the image, including all text seen in the image and relevant details. It can be difficult to choose where to focus the description, so here are a few rules of thumb:
...
No Table Layouts
Layouts of rows and columns should be done with Bootstrap code, not HTML Tables. Besides being inaccessible, HTML tables also break your pages in mobile views. Tables should only be used when the content in a cell is defined by what row and column it belongs to.
...
Avoid ‘Click Here’ and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it helps with your Google search rankings. For example, “for more information about our admissions process, click here” should be written as “more information about our admissions process“.
Use Headings
Use headings to organize your page content. For example, this page uses Heading 2 (h2) and Heading 3 (h3) tags. “Quick Tips to Keep Your Pages Accessible” is a Heading 2, and “Use Headings” is a Heading 3. Besides bringing in a larger font and adding white space, these headings are great for accessibility. They allow impaired users to skip through the heading tags the same way you would visually scan a page for headlines. Heading 3 would be a subsection within a Heading 2 section. You can add headings by going to Format > Formats > Headings or by using the keyboard shortcut (Control + 2, Control + 3, etc. on Windows or Command + 2, Command + 3, etc. on Mac). Headings help your site to look great, be more accessible, and they really help your search engine rankings.
...
Be sure to have contact information clearly visible on the homepage. Please Also add a link in the Footer called Contact, and link to the contact page. A link to a Contact page in the Top Navigation is optional, or in a sub menu. This provides the ability to request alternate versions of inaccessible material to viewers with disabilities.
| Note |
|---|
Before the site goes live, it will be reviewed by University Communications, the Department Communicators (if applicable) as well as ITS Accessibility to ensure the site is Accessible and following the Standard Guidelines. To avoid delays in the site going live, please make sure you have addressed any Standards and Accessibility issues before sending the Site Review and Go Live Request. Sites will NOT go live until they have been approved, please allow time for this process (1-2 weeks). |
| Info |
|---|
Documents that are linked to from a website also need to be accessible, see how to make Documents accessible. If you have questions please contact the ITS Accessibility Coordinator. |
Resources
Please note that while these tools will help issues, many aspects of web accessibility require a degree of judgment. For example, a tool can detect if you are missing alt text for an image, but it will not be able to figure out if alt text accurately describes the image. Visit the IT accessibility website to learn about more tools for automatically testing a web page's accessibility.
Tool | Description | Instructions |
|---|---|---|
A website that scans a single page of your site. | After scanning, click the Flag icon, and then change the filter to WCAG 2.0 AA. | |
A Chrome plugin that allows you to quickly run scans on any webpage. | After installing the plugin, it can be found in developer tools by right-clicking, selecting Inspect, and scrolling through the tools at the top of the inspect pane. | |
A bookmarklet that allows you to quickly run scans on any webpage in any browser. | After bookmarking ANDI, navigate to the web page you wish to audit and click on the ANDI bookmark. |
Related Articles
...
| Page Properties | ||
|---|---|---|
| ||
|