WordPress Tutorials for the Granite School District
Category: Accessibility Tutorials
As a school district, we’re required to be ADA Compliant at the WCAG AA level. Learn how to write and adapt your content to meet the needs of all your patrons.
There are many websites out there dedicated to accessibility and its different pieces, and a quick Google search can likely answer any of your questions. That being said, it’s always nice to have some of those resources already gathered for you.
PDFs are great in that they can be opened by anyone, anywhere. However, their static nature makes it slightly more difficult for accessibility, especially when translations or images are concerned.
Before uploading a PDF to your website, it’s important to first verify that it was created with accessibility in mind. If you’re following the same rules for your PDFs as you are for writing on the web (including the rules for underlines, all-caps, and color) you’re mostly there.
Key Takeaways
When possible, write content directly on the web instead of using a PDF.
Follow the same guidelines that you would when writing and creating online content.
Check for accessibility support in whatever program you’re using to create a PDF.
Images in PDFs also need alternative text.
Avoid underlines (except for links), all-caps, and centered text.
Adding Images to a document and then saving it as a PDF doesn’t bypass the alt-text requirement.
Microsoft Products and Accessibility
Microsoft products, such as Word and Excel have a built-in Accessibility checker that you can enable while creating your document, or that you can run at the end of document creation. Depending on your workflow, you may find it more efficient to have it enabled as you create your files. As these options have changed through the years, it’s important to search the product’s current help docs for updated information.
Adobe Acrobat is what most people use to read and manipulate PDFs. The free version that will let people read PDFs, but the paid version will let you change them and add accessibility features as needed. However, it’s always best to create your PDFs with accessibility in mind to begin with to prevent having to go back in and retro-fit your content.
Section508.gov has created a robust guide to creating PDFs for accessibility, as well as guides to using Adobe Acrobat to test and remediate PDFs. As an added resources, you may find their tutorials helpful.
As a reminder, the simplest way to make a PDF accessible is to create it with accessibility in mind in the first place. It’s much easier to run your documents through an accessibility checker when available, then to have to go back into a PDF and make it accessible after-the-fact.
If you’re managing a school or district-related social media account, you will want to be sure to also add alt-text and captions as needed. Because these platforms and their methodologies may change, it’s best to refer to their own documentation on how to make your content accessible.
No matter the social channel that you’re using, chances are they have built in (at the very least) a way to add alternative text to their images. Take a moment to search through their help files. When searching for a11y options, useful terms may include “accessibility,” “video captions,” “explanatory text,” and “alternative text.”
The navigation of your website needs to be consistent, no matter what page your visitor is on. A good rule of thumb is to keep your navigation as simple as possible.
Key Takeaways
Navigation menus are the same on every page.
Order of items should be the same (and at the very least, labeled consistently)
Drop downs on menus should be kept to a minimum (shoot for 5 or fewer)
Off-site links or links to files should be content on a page and not in the menu (webstore exception)
Parent pages should also have a table of contents of sub-pages in the page content itself.
Menu items should not take people to a blank or empty page, or do nothing.
Consistent Navigation
Consistent navigation means that no matter what page you’re visiting on the website, the menu structure, positioning, labeling, and order is consistent. Main navigations and their items should display on every page.
To help with consistency, here are some tips:
The first link in a primary navigation should lead the user back to your homepage.
Navigation links should keep people on-site (as much as possible) and not link to PDFs.
Main (and secondary) navigation should be at the top of the content area.
Sidebar navigation should be used for page-specific items only and not be used as your site’s main navigation.
Simple Navigation
Essentially, keep your menu items as simple as possible, avoiding complicated and nested drop downs whenever possible. It’s not necessary to pack your menus with links to everything on your website. You can use page-specific links, or links within a page’s content for access to many areas.
For many, the menus must be read to them, and finding a menu item within a sea of menu links can be difficult and burdensome. A decent rule of thumb is to have menu items be high-level or conceptual, and then have links within the page content itself sorted by headings.
Navigation Items and Their Destinations
The expected use in a primary and secondary navigation is to keep people on site. When a menu item does the unexpected, such as leading off-site or to a PDF, it can throw people off and result in confusion and frustration.
Whenever possible, make sure your menus keep users on-site. There can be some exceptions, for example menu items that lead to your school’s web store or athletics site. Link to PDFs in a page’s content and not in the menu.
Menu items should not be left to do nothing, even if that menu item has sub-menu items. Instead, a page should be created and have a table of contents for the sub-menu items.
Sub-Menu Items as a Table of Contents
Anytime a primary navigation menu has submenu items (a.k.a. children), the resulting main page should also have a table of contents at the top that lists those submenu items. This allows for those submenu items to be accessed quickly without having the entire menu be read out loud.
For example, let’s say your website’s menu is relatively simple, as indicated in the ‘Example Menu Setup’ table:
Home
Community
Directory
Support Materials
PTA
Admin & Front Office
Community Council
Teachers
Family Engagement Center
Support Staff
Example Menu Setup
The Community menu item has three sub-menu items. When a user visits the main Community page, it should have a table of contents at the top of it with links to PTA, Community Council, and Family Engagement Center. In this way, those three sub-menu items can be accessed in two different ways, and affected users can simply bookmark the Community page instead of having the entire menu read to them each time.
The PTA, Community Council, and Family Engagement Center pages would not need that same table of contents unless they too had sub-menu items associated with them.
Directory would have the same thing, but both Home and Support Materials would not need a table of contents on them because they don’t have sub-menu items.
Please don’t use sliders (also known as slideshows and carousels) on any Granite School District or related website. Sliders create their own challenges for disabilities, and because of the labor-intensive upkeep to make and keep them compliant, we’ve decided as a district to not use them.
For more information on why sliders, slideshows, and carousels should not be used, visit Should I Use a Carousel?
Put simply, when you create a form in either Google Docs or Gravity Forms, each input area needs to be clearly labeled to indicate the type of information the user needs to input.
If you’re asking for a date, label the field with the date format required.
If you’re asking for a URL or email, label the field accordingly and indicate the required pieces.
As a district, we have provided the use of Gravity Forms on your website, and as part of this, it will check for some ADA issues.