Making School Website Navigation More Accessible for Screen Readers
Navigation is one of the most critical components of website accessibility. Just as thoughtful architectural design can help to make the physical environment easier for people with diverse abilities to navigate, effective web design strategies can make it easier for visitors using screen readers to navigate through your school website. Here are some easy tips you can implement right now.
Start with Good Navigation Principles
Whether visitors are using a mouse, keyboard shortcuts, or a screen reader, everyone appreciates a website with simple, easy-to-understand navigation. They should be able to find what they are looking for in as few clicks as possible.
Start by developing your menus for easy navigation.
- Think MECE: Mutually Exclusive and Collectively Exhaustive. "Mutually Exclusive" means that each piece of information is found under just one menu item, with no overlap. "Collectively Exhaustive" means that all of the information people will look for can be found somewhere within the menu.
- Keep menu labels simple and obvious—don't try to get clever. "Enrollment Forms" tells everyone exactly what they will find when they click. "Welcome Wagon" will leave most visitors guessing.
- Limit the number of menu items in each tier, and limit the number of tiers. For maximum accessibility, don't use more than ten main menu items (fewer is even better). The second tier underneath each main menu may have up to 15-20 items. Avoid adding a third tier. Instead of adding a third menu tier under "Academic DepartmentsàEnglish/Language Arts", consider using quick links on the English/Language Arts landing page to help people navigate to further information.
- Make sure menus are easily navigable using keyboard shortcuts.
Use ARIA Landmarks to Identify Menus and Page Elements
ARIA (for “Accessible Rich Internet Applications”) is a W3C specification for markup that can be added to HTML to communicate information about various user interface elements on a webpage. ARIA landmarks are used to identify elements on a webpage by role. There are eight basic ARIA landmark roles:
- Banner
- Navigation (e.g., menu)
- Main (the main content of the page)
- Complementary (e.g., a sidebar)
- Contentinfo (meta data about the page, such as copyright)
- Search
- Form
- Application (a separate web application with its own keyboard interface)
ARIA landmarks allow users using screen readers to quickly jump to the portion of the page they are interested in. Instead of going sequentially through all of the menu items and all of the content areas until they stumble upon what they are looking for, users can quickly skip through the ARIA landmarks to find the content they are interested in right now, whether it is the main content or the search bar. This saves visitors using screen readers a lot of time and lets them skip over repetitive content (such as menus and static sidebars) they are already familiar with.
When there is more than one area on the page with the same role, an aria-label attribute can be added to distinguish between them. For example, different areas of a school website navigation may be labeled as follows:
<div role="navigation" aria-label="Academic Departments">
<div role="navigation" aria-label="Extracurricular Activities">
Similar labels can be added to main and complementary content blocks such as the Principal's Message, Announcements, Events, and Quick Links. Name them with simple, descriptive names so that visitors using screen readers will know what to expect in each block. Using ARIA tags and labels will allow vision-impaired visitors to skim over the content they don't need and skip to what they are looking for, just like sighted visitors.
Use Headings and Subheadings Appropriately
"H1" and "H2" tags aren’t just a shortcut for what font you should use—they convey important information about the structure of your content to screen readers and search engines. Some school website CMS programs, like eChalk, will take care of this automatically for you. If your CMS does not, you will want to make sure these tags get added to the headings and subheadings on the page.
Sometimes, web authors will simply use formatting tags to make text LOOK like a heading—for example, increasing the font size, making it bold, and changing the color. But these visual cues do not help visitors using screen readers. It's important to actually use the "H1", "H2", H3", etc. tags so that screen readers and search engines understand how different sections of text relate to each other.
Remember that there should only be ONE H1 tag on the page—your main title. Everything else is a subhead.
Label, Label, Label
Don't leave vision impaired visitors guessing about the content they will find in each content block on your website. Label everything, using simple, descriptive language. This includes:
- Adding Alt-text to images
- Adding descriptions to video content
Make Your Link Language Descriptive
Screen reader users often navigate by skipping directly to the links on a page. If the language for every link is a variation of "click here," they'll be lost. All links, whether they are part of a Quick Links section of the page or embedded in a paragraph of content, should have enough descriptive language to tell screen reader users exactly what they will find after the click.
These are just a few tips for accessible school website navigation. For more, check out the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines.
For Further Reading: