The Web is for Everyone — An Accessible Path to Search Engine Optimization

Shepherdstown, West Virginia | September 12, 2018

Roy Hewitt

Southeast Region Web Developer

Agenda

Definitions
The link between Accessibility and SEO
What about the CMS?
Auditing your work
Questions

Slides are online!

slides.royhewitt.com/the-web-is-for-everyone/ **Press the “S” key for speaker notes.

Let's start with some definitions

Search engine optimization (SEO) is often about making small modifications to parts of your website. When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site's user experience and performance in organic search results.

— Google

Accessibility is the practice of making your websites usable by as many people as possible — we traditionally think of this as being about people with disabilities, but really it also covers other groups such as those using mobile devices, or those with slow network connections.

— Mozilla

Impairments

Visual - Blindness/low vision, color blindness
Auditory - Deafness, degenerative hearing loss
Mobility - Paralysis, stroke, MS
Cognition - Epilepsy, autism

Letting a website know you’re using a screen reader means running around the web waving a red flag that shouts “here, I’m visually impaired or blind!” at anyone who is willing to look. It would take away the one place where we as blind people can be relatively undetected without our white cane or guide dog screaming at everybody around us that we’re blind or visually impaired, and therefore giving others a chance to treat us like true equals. Because let’s face it, the vast majority of non-disabled people are apprehensive in one way or another when encountering a person with a disability.

— Marco Zehe, Mozilla Accessibility Engineer — Why screen reader detection on the web is a bad thing

The link between SEO and Accessibility

Where do we begin?

via GIPHY

Starting with semantics

An example of well crafted HTML that describes the content accurately

The right tool for the job

Separation of concerns

Icons for the three pilars of web development: HTML, CSS and JavaScript

Proper use of headings

A screenshot of a scrollnav on the Southeast region website. The tool allows users to quickly jump between section headings.

Proper use of buttons and links

An example of poor link text -- the word 'here' is highlighted.

Wolf Creek NFH

Mobile friendly design

Desktop layout for the Nature's good neighbors campaign website

In 2016, Google adds mobile considerations to it's search algorithm.

Performance

Google now considers site speed in search results.

Transcripts

Podcasts
Audio files
Video - 'Audio description'

What about the CMS?

An example of a page created by the new CMS

Leveraging templates

Different content files run through the same template to produce different news stories

Content creation

A screenshot of a potential data entry for to produce content in the new CMS

Producing content for the CMS will be much more like filling out a standard web form. There will be fields for page title, tags, description, page content, etc. While employees will fill out a single form, the information provided will be used to generate a page using a series of page templates.

Content producers will be able to fill out page metadata like page titles, descriptions, tags, etc. and have a content area that will be injected into our page templates. Knowing what we know now, we’ll need to use the editor’s premade options for inserting various headings (h1, h2s, h3s, etc.) into the rich text editor and be sure to include meaningful link text, while the majority of accessibility and SEO implementation will be abstracted away. That’s not to say we can ignore what we’ve learned and everything will be peachy.

Auditing your work

Ever tried a screen reader?

Site Improve

Surface quantitative data on site quality
Segment data by program or region
Gamification: compete for the best score!
Works best if you leverage templates

fws.gov

fws.gov/southeast

*Data accessed on September 9, 2018

Siteimprove allows us to compare our region or program to all of FWS.gov, to other regions, or to the Government average.

Notice below the scores Site Improve mentions the areas where a single error that occurs on many pages can have a huge impact on your score. The software does a great job of identifying simple fixes that can have the greatest impact on your scores.

These tools are giving scores based on an algorithm. For example, my score is dinged because I have too many internal links in my site navigation. A user navigating the regional site by keyboard will actually skip all of the navigation links unless they activate the menu.

It's also not possible to automate all accessibility testing. If you embed text within an image there's no way for SiteImprove to detect an error. A certain amount of manual review is required; the more you test your site with different methods of navigation the better you'll serve your users.

Google's Lighthouse

fws.gov/southeast

Make an impact

Questions?

via GIPHY

slides.royhewitt.com/the-web-is-for-everyone/

How does your site stack up?

via GIPHY