Group Outreach: Learning Web Navigation with Creativity and Games
Have you ever heard of "region" (or "landmark") when navigating a website with a screen reader? If so, what are they, what do they do, and why are they important?
These were some of the questions asked and answered when PRCVI did a group outreach visit near the end of the 2021-22 school year. Several TSVIs and visually impaired students came together to tackle some web navigation concepts and challenges in some fun and creative ways! The goals of the outreach session were to review the most common website elements (links, headings, form controls) and tackle the sometimes complicated topic of website navigation. The students worked through several activities to build knowledge and practice their skills as new online navigators!
Constructing Tactile Diagrams
The first activity involved the students constructing a tactile diagram of a hypothetical website using common layout techniques. Modern websites use a block approach to design, where content is grouped into visually distinctive sections, such as a header across the top, a site navigation bar or menu, a main content area, sidebars or boxes, and a website footer section. If a website is designed to be accessible, these visual regions will also be indicated to the screen reader through the underlying code, so that it will read out things like "banner region" for the header at the top or "navigation region" for the site navigation or "main region" for the main content area. (Of course, one of the challenges of screen reader instruction is that many sites may not be accessible and may not include such information.) Additional information about website regions can be found on Page Regions from WebAIM.
Students were provided with a large vinyl braille book cover as the backing for their diagram and with several pieces of cardstock cut to various sizes to represent different regions of a web page. The following regions were labelled on the cardstock rectangles and squares in print and braille:
- Banner/header region
- Nav region
- Main region
- Complimentary/aside region
- Footer/contentinfo region
Students organized these regions in a way that fit onto their backing and made sense - for example, the banner/header region was at the top of the page, the main region was in the middle, and the footer/contentinfo region was at the bottom - the remaining regions could be anywhere since web pages vary in their layout! Students then opened an envelope with various website elements such as headings (levels 1 and 2) and links (website navigation links, links to related articles), form controls (a search box, a login button), and text (text from an article, company contact information) labels in print and braille on adhesive-backed plastic. A discussion about the various elements found on websites and common locations where they might be found followed. For example, contact information for a company is usually located near the bottom of the page, in the footer region. A search box for the site or a login button for the site is usually found near the top of the page in the banner/header region. Text of an article is usually found somewhere in the middle of a page within the main region. As the discussion progressed, students places the adhesive labels where they felt was most appropriate - and since website layouts vary, the student diagrams ended up looking unique, too!
Web Chase Game
In the second part of the session, students had an opportunity to apply the information they had learned about regions and elements in constructing their diagrams to play a modified version of APH's Web Chase game to literally chase elements across a website! Using the game board, tactile player pieces, and tactile dice form the Web Chase game, students rolled the dice and draw from a stack of cards that contained phrases like:
- Find the navigation region
- Find an image/graphic
- Find any form field
- Find a level 2 heading
- Find the main region
- Find the website contact information
- Find any button
Students then had to use their devices to locate the element specified on the card on their school's website. Each student was provided with a braille reference sheet with web navigation commands (such as how to jump to headings, images/graphics, regions, and other elements). They also used the tactile diagrams they had created as a reference - for example, finding which region they might search for to find the website contact information. If a student got stuck on their turn, the rule was that they had to see if their peers could assist them before asking one of the teachers.
Both students and TSVIs had a great time with these activities, and the students were able to take the tactile diagrams they created home to share with family and continue to use as a reference as they further explored navigating on the World Wide Web!
About the author
Jen Jesso
I have worked in various roles in the field of visual impairment since 2007. In addition to working as a teacher of students with visual impairments, I recently completed coursework to become an orientation and mobility specialist. I have been fortunate to work with the fantastic team at PRCVI since 2014.
I enjoy many aspects of my role at PRCVI, but highlights include working with teachers of students with visual impairments and their students on outreach visits and working on PRCVI initiatives and projects.
Outside of work, my interests include reading, computer programming, swimming, and spending time with friends and family.
