Creating Accessible Content in WordPress

Slides:



Advertisements
Similar presentations
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Advertisements

Creating Section 508 Compliant Excel Documents ASPA Web Communications and New Media Division.
Chapter 3 – Web Design Tables & Page Layout
ADA Compliant Websites & Documents What the heck am I supposed to do?
Creating Accessible Word Documents by Debbie Lyn Jones, IT Manager I, NSU Webmaster FRIDAY, JANUARY 23, 2015.
A Beginners Guide to Web Site Design. What we will cover…. Planning your site. Creating a template. Images and Fonts. Absolute vs. Relative Links.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Adobe Reader and Acrobat Professional Adobe LiveCycle Designer Microsoft Office Word PowerPoint.
Accessible Word Document Training Microsoft Word 2010.
Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Technologies Website Development Trade & Industrial Education
Accessible Web Design Carolyn Fiori Assistive Technology Specialist, College of San Mateo November 2011.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
Website Development with Dreamweaver
Web Accessibility PRESENTED BY CINDY BARRY, LITS.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Measuring PDF Accessibility PDF a11y Testing for the Rest of a11yBOS 2013 Deque Systems, Inc.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Developing Accessible PDF Documents Carolyn Kelley Klinger October 10, 2009 Accessibility Camp DC.
Retrofitting Websites for Accessibility David Mulder, Academic Technology Services.
Creating Accessible PDFs Professional Development Day Fall 2015.
WEB ACCESSIBILITY TRAINING FOR CONTENT MANAGERS.
Accessibility – Standards and Guidelines April 1, 2015.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 4: Favicons Tables and.
Elizabeth Pyatt, Blockers: What do I REALLY Need to Fix?
Accessible Word Document Creation Using Microsoft Word 2010.
+ Publishing Your First Post USING WORDPRESS. + A CMS (content management system) is an application that allows you to publish, edit, modify, organize,
CHAPTER TWO HTML TAGS. 1.Basic HTML Tags 1.1 HTML: Hypertext Markup Language  HTML stands for Hypertext Markup Language.  It is the markup language.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
MVCC WEB CMS Updates Everything you should know about managing your department content! Spring 2015.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Elements of Accessibility in Online Courses Dallas County Community College District Technology Summer Institute June 10, :45-12:45.
Accessibility and Teaching Online Beth Case Program Manager for Digital, Emerging, and Assistive Technologies University of Louisville, Delphi Center.
Web Accessibility training An introduction to web accessibility.
Accessibility issues: Images and the use of ALT Text
HTML Basics.
Seven Steps to Creating an Accessible Microsoft Word Document
How to get the best results from your website and images.
Web & accessibility resources
Making the Web Accessible to Impaired Users
Elements of HTML Web Design – Sec 3-2
Creating Accessible Microsoft Files
MUG Tuesday, May 31, 2016.
Creating Accessible PDFs from Word Docs
Information Architecture and Design I
Elements of HTML Web Design – Sec 3-2
Microsoft Word Accessibility
Creating Accessible Electronic Content
Creating ADA Compliant Resources
Objective % Explain concepts used to create websites.
Getting Started with Accessibility: Accessibility Checkers
MS PowerPoint Accessibility Tutorial
Context Is Everything Meaningful Alternative Text
Computers and Scientific Thinking David Reed, Creighton University
Creating Accessible PowerPoint Slides
Web Accessibility Clinic – Common Issues
Information Architecture and Design I
ADA Compliant Website & Documents
Creating Accessible Electronic Documents
Introduction to Web Accessibility
Introduction to the ISB Intranet
How To Make Accessible Word Documents
Objective Explain concepts used to create websites.
Creating Accessible Microsoft Word Documents
WebAIM Screen Reader Survey Results
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Creating Accessible Content in WordPress WashU Web Accessibility Users Group

Introduction This presentation will focus on accessibility areas that WordPress admins and editors have control over. Topics covered apply not only to WordPress but any CMS (SharePoint, Drupal, etc.)

Topics Headings Formatting Links Alternate image text Simple Tables

Headings <h1> <h2> <h3>

Proper heading use & logical site structure Screen reader and other assistive technologies rely on heading tags to navigate websites. Use of heading tags (h1, h2, etc.) allows for quick and efficient navigation of content. Avoid large blocks of text. Proper heading usage increases SEO results.

Proper heading use & logical site structure (continued) Use only one h1 h1 should be page title / description of page content or purpose Avoid using heading tags out of order (ex: h2 -> h4 ) Avoid using bold text (<b> or <strong>) as section headings; use heading tags. Don’t use empty heading tags (<h3></h3>)

WordPress Headings

WashU Sites Lead Paragraphs Lead paragraph text is larger but they are not headings. Read as normal text by screen readers.

<a href=“http://…”> Formatting Links <a href=“http://…”> </a>

Link text identifiable out of context Use phrases that describes link destination that would make sense out of context. Avoid using phrases like: “click here” “read more” “here” “info” “link to [link destination] Screen readers already add “link” when announcing

Linking to downloadable documents Alert users to any links to non-HTML resources. Includes PDFs, Word, PowerPoint, etc. Ideally content should be available on the web page. Add document type tag to end of link (PDF), (PowerPoint), (docx)

Linking to downloadable documents (cont.) Include file type inside the link, otherwise screen readers will not announce. Use <a href=”washu18_stats.pdf">WashU 2018 Stats (PDF)</a> rather than <a href=”washu18_stats.pdf">WashU 2018 Stats</a> (PDF) WashU 2018 Stats (PDF) vs.

Avoid using URLs as link text Web addresses are not easy to read. Not screen reader friendly.

Avoid using URLs as link text (cont.) Instead of: SLSO receives $45,000 NEA Grant http://www.stltoday.com/entertainment/arts-and-theatre/culture-club/slso-receives-nea-grant/article_e234a28b-a9e2-54ec-a467-1864717b69af.html Use:

Avoid URLs as link text FERPA Family Educational Rights and Privacy Act protects the privacy of student education records. http://www.ed.gov/policy/gen/guid/fpco/ferpa/index.html CHEMICAL FACILITY ANTI-TERRORISM STANDARDS The Department of Homeland Security has issued Chemical Facility Anti-Terrorism Standards for any facility that manufactures, uses, stores, or distributes certain chemicals above a specified quantity. Environmental Health & Safety and other information sources that track DHS identified Chemicals. http://www.dhs.gov/xprevprot/laws/gc_1166796969417.shtm FISMA Federal Information Security Management Act – requirements for security controls to be in place when federally regulated information is stored. Departments that produce, use, store or transmit information to the Veterans Affairs patient database. http://iase.disa.mil/fisma/index.html

Descriptive Link Text instead of URLs FERPA Family Educational Rights and Privacy Act protects the privacy of student education records. CHEMICAL FACILITY ANTI-TERRORISM STANDARDS The Department of Homeland Security has issued Chemical Facility Anti-Terrorism Standards for any facility that manufactures, uses, stores, or distributes certain chemicals above a specified quantity. Environmental Health & Safety and other information sources that track DHS identified Chemicals. FISMA Federal Information Security Management Act – requirements for security controls to be in place when federally regulated information is stored. Departments that produce, use, store or transmit information to the Veterans Affairs patient database.

Open links in current window or tab Whenever possible avoid opening links in a new tab. Users can be confused by the new window or tab. Newer screen readers may announce a new window, older versions do not. In a new tab the back button is “broken” due to not having previous links. If you do open a new tab, let the user know by using an appropriate icon or text.

Alternate Text Alt=“Brookings Hall”

Why Use Alternate Text? It’s read by screen readers, describes content and function of the image. Used to display in place of images if browsers unable to load images or user has chosen to disable images. Provides semantic meaning and description to images for search engines.

Using alternate text with images All images should have alternate text (alt = attribute) and should: Be succinct Not be redundant (repeating adjacent text) Not include “image”, “graphic”, “photo”, etc. Be equivalent to the same content or function of the image Be in context of the surrounding text

Decorative Alternative Text Images that don’t present important content or are used for layout. Decorative images are ignored by screen readers. Alt = “” (empty quotes) Do not decorative alt text if image is hyperlinked. If image is linked then alt text should describe the link destination.

Decorative Images in WordPress When adding an image leave the Alt Text field blank (no need to add empty quotes) WordPress will insert alt=“” designating it as a decorative image.

Avoid using images with text overlay Screen readers can’t read text embedded in an image. Recommend avoiding altogether. If absolutely must use: Use sufficient contrast (for colorblind users) Provide same text in a caption or somewhere in the alt text.

Too much embedded text

Avoid Linking to Media File When inserting an image into content, avoid linking the image to “Media File” unless absolutely necessary. Select “None” instead. Linking to media file when an image is decorative results in an empty link.

Simple Tables <table>

Creating Simple Tables Use caption to describe table content <caption>Academic Calendar</caption> Insert caption right after <table> Designate row and column headers <td> is used for table data cells <th> is used for header cells Use scope attribute to associate data cells with correct header. scope = “col” / “row”

Simple Table in WashU Sites

Simple Table Example <table> <caption>Academic Calendar</caption> <tr> <th scope="col">Year</th> <th scope="col">Fall</th> <th scope="col">Spring</th> </tr> <th scope="row">2018/2019</th> <td>August 23, 2018</td> <td>January 16, 2019</td> <th scope="row">2019/2020</th> <td>August 26, 2019</td> <td>January 14, 2020</td> </table>

Resources Tools WAVE (Web Accessibility Evaluation Tool) WAVE Chrome & Firefox Extentions Further Reading: Links and Hypertext (WebAIM) Alternative Text (WebAIM) Creating Accessible Tables (WebAIM)