The document discusses the importance of website accessibility, specifically adherence to the Web Content Accessibility Guidelines (WCAG). It reviews a specific website, southernliterarytrail.org, detailing issues discovered during testing with a screen reader, including HTML structure and navigation problems. Recommendations are made for improving user experience, particularly for users relying on assistive technologies.

1. Website Review with
a screen reader
How to make an
accessible site usable

2. WCAG:
Making a
website
compliant
Web Content Accessibility Guidelines (WCAG)
• Well-structured HTML
• Understandable by assistive technology like
screen readers
• Keyboard-only navigation
Accessibility Checker – SiteImprove
• Checks website using each guideline and
reports any issues
Does a perfect score mean the website is
accessible?

3. What is a
screen reader?
• Assistive Technology – reads out the computer
screen
• Many screen readers available each with their
own rules
• Screen readers are customizable
• Users create their own work-arounds
• Impossible to have the exact experience of
another user
• We can test our alt-text, ARIA labels, and screen
reader-only content

4. southernliterarytrail.org
• Checked with SiteImprove
• All issues cleared
• Tested with screen reader
• More than a dozen issues
• None identified by SiteImprove
• Made the site nearly unusable

5. 1) HTML page title
Homepage | Southern Literary Trail
• Text that appears on browser
tab
• First thing read by screen reader
"homepage vertical line southern literary trail"
Homepage – Southern Literary Trail
• Replace vertical spacer with
hyphen
• Screen reader reads with a slight
pause
"homepage, southern literary trail"

6. 2) Home link in nav bar
• Drupal options – display home link
several different ways
• Hidden visually, but still there!
• Screen reader repeats link
"link, home, link southern literary trail, link, the
writers..."
• Be sure to only set the home link in one
place in Drupal!
• Visual and screen reader versions
should be the same

7. 4) Slide Show
• Background image changes every few
seconds
• Images hidden from screen reader,
controls are not
• Keyboard-only control must be present
• Website title on the slide will be read
out once for each slide!
• Static background image set to
"role=presentation"
• Random slide presented on page load

8. 10) Location Cards
• "Cards" are a style for presenting
content
• Location cards include image, title,
and city. Each are links.
"image link, andalusia farm in
milledgeville georgia, title link andalusia, link
atlanta, link georgia"
• Wrap the entire "card" in the link
• Remove all links inside
• Give the image a "role=presentation"
"link andalusia"

10. Thank you Questions?
Full blog post about this website review:
https://helpdesk.library.msstate.edu/docs/display/ACCESSIBILITY/2019/11/26/Website+Review+with+Apple+VoiceOver