Accessibility IMPORTANCE AND HOW-TO. Kai Raymer, Web and New Media

Size: px

Start display at page:

Download "Accessibility IMPORTANCE AND HOW-TO. Kai Raymer, Web and New Media"

Erika Bradford
5 years ago
Views:

1 Accessibility IMPORTANCE AND HOW-TO Kai Raymer, Web and New Media Sept. 29, 2017

2 Accessibility WHAT WE LL COVER What it means Why it matters: legal, ethical and benefits Best practices 2

3 Accessibility WHAT IT MEANS People with disabilities can use the web Web accessibility encompasses all disabilities Also can include people without disabilities Via W3.org 3

4 4 Things to consider ASK YOURSELF THESE QUESTIONS ANALYZE How accessible is your website? CONSIDER Are people of all abilities able to access the information on your website? EVALUATE When will you know your website is accessible?

5 Federal guidelines AKA WHY IT S IMPORTANT MSU, which receives federal funding, must comply. Not doing so could lead to a lawsuit. It s the right thing to do. The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. 5

6 Compliance WHAT DOES MSU FOLLOW? * MSU must comply with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA You should think of the Web as a public space. 6

7 Benefits PRACTICAL FOR BUSINESS PURPOSES BEST PRACTICES Mobile web design Usability SEO optimization BETTER WEBSITES Search results Maintenance costs Audience reach 7

8 Best practices FOR ACCESSIBILITY What we ll cover: Alt text Headings Descriptive links 8

9 Alt text WHAT DOES IT DO? Several functions: Used by screen readers; allows function and content of image to be accessible. Displayed in place of images (load failure or user choosing). Provides context and description for SEO. Alt text is crucial for accessibility, but context and interpretation are key. Via webaim.org 9

equivalent Describe the destination if the

10 Alt text DO S AND DON TS Imagine you re describing the image to someone via text or phone call. DO Briefly describe the image Be accurate and equivalent Describe the destination if the image is a link DON T Begin the alt text with an image or a a photo of Repeat the caption 10

11 Alt text DEMO Updating Missouri State blogs and webpages. 11

12 Alt text LET S PRACTICE Create alt text for these two images 12

13 Alt text LET S PRACTICE Create alt text for these two images Check with WAVE. 13

14 Headings BEST PRACTICES Why headings? They serve as a guide for your text. Visitors can easily scan your site to find the most important information. Screen readers read headings aloud, giving visitors a helpful outline of your site. Use actual headings, not font adjustments. 14

15 Headings BEST PRACTICES Typically, you ll use H2 and H3. Most page titles are already H1. Example. Compliment your headings with lists. 15

16 Headings HOW TO IMPLEMENT Add headings in WordPress and WebPress. WordPress: format->formats->headings WebPress: open rich text block->edit content->format (drop-down box) YouTube demo 16

17 Descriptive links BEST PRACTICES Have you done this before? 17

18 Descriptive links THERE S A BETTER WAY You should describe the link s destination. A user should know where the link goes without having to read the surrounding content for context. Avoid generic, non-specific terms. It s better for SEO. 18

19 Descriptive links CONTEXT AND VALUE Which link makes you want to keep reading? Click here to read about MSU s mascot. We ve just uncovered Boomer s birth story. 19

20 Descriptive links WHAT YOU SHOULD INCLUDE Use brief but meaningful text that: Provides info when read out of context Explains what the link offers Doesn t talk about mechanics (download, visit, etc.) or verb phrases (get, go, click, etc.) Remember: not everyone clicks. Via w3.org 20

21 For more information BLOG SERIES Our Accessibility blog series covers these topics, and more: Alt text Descriptive links Color contrast Data tables 21

22 Accessibility EVALUATE How can you determine if a website is inaccessible or accessible? Non-accessible Accessible 22

23 Tools TRY THESE ON YOUR WEBSITE Improve your website accessibility with these helpful tools. Web Accessibility Evaluation Tool (WAVE) Google Chrome Accessibility Developer Tools Color Contrast Checker 23

24 Accessibility IMPORTANCE AND HOW-TO Thank you! Questions? 24

AN SEO GUIDE FOR SALONS

AN SEO GUIDE FOR SALONS AN SEO GUIDE FOR SALONS Set Up Time 2/5 The basics of SEO are quick and easy to implement. Management Time 3/5 You ll need a continued commitment to make SEO work for you. WHAT