easy accessibility in drupal 8: practical, compassionate, cost-effective
TRANSCRIPT
![Page 1: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/1.jpg)
Practical, Compassionate, and Cost Effective
EASY ACCESSIBILITY IN DRUPAL 8
CATHARINE MCNALLY | DAVID SPIRA
![Page 2: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/2.jpg)
@cmcnally @dbspira
![Page 3: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/3.jpg)
285 MILLION WITH VISUAL IMPAIRMENT
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 4: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/4.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
360 MILLION WITH HEARING LOSS
![Page 5: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/5.jpg)
THAT’S MORE THAN THE POPULATION OF…
360 MILLION WITH HEARING LOSS
285 MILLION WITH VISUAL IMPAIRMENT
COMBINED,
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 6: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/6.jpg)
THE UNITED STATES
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 7: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/7.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
THE EUROPEAN UNION
![Page 8: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/8.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
SOUTH AMERICA
![Page 9: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/9.jpg)
1 IN 10 PEOPLE NEED SOME KIND OF ACCOMMODATION
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 10: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/10.jpg)
ACCESSIBLE USERS INTERACT WITH YOUR SITE
algorithmicallyPhase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 11: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/11.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
Accessibility greatly reduces the design options.
MYTH:
![Page 12: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/12.jpg)
Color Contrast
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 13: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/13.jpg)
Normal Vision
![Page 14: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/14.jpg)
Red Blind
![Page 15: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/15.jpg)
Blue-Blind
![Page 16: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/16.jpg)
Red-Weak
![Page 17: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/17.jpg)
Black & White
![Page 18: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/18.jpg)
http://www.color-blindness.com/coblis-color-blindness-simulator/
![Page 19: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/19.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
4.5% of the world is colorblind
.5% of the population are women.
8% of the population are men.
Source: colorblindawareness.org
![Page 20: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/20.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
High Color Contrast makes it easier to view under bright sunlight.
![Page 21: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/21.jpg)
TEXT OVER IMAGEOne thing we see often are text on top of images, such as a front page masthead image.
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
Pay attention to the variables: Can the text color change?
If not, could a background gradient be applied?
Or a solid color background?
![Page 22: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/22.jpg)
THEME CUSTOMIZATIONOut of the box, Bartik achieves the optimal color contrast between foreground and background.
To check on customization to ensure its contrast ratios are maintained:
D8 Module Opportunity: Check the Theme for Color Contrast?
WCAG Color Contrast Checker (FIREFOX)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 23: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/23.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
THEME CUSTOMIZATION
![Page 24: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/24.jpg)
COLOR CONTRAST RECAP
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
AVOID LOW CONTRAST
TAKE NOTE OF TEXT COLOR OVER IMAGES
TAKE NOTE OF FONT WEIGHT
USE COLOR CONTRAST CHECKERS
![Page 25: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/25.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
Alt text doesn’t make a difference.
MYTH:
![Page 26: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/26.jpg)
Hey, at least I ran out of staples
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 27: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/27.jpg)
![Page 28: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/28.jpg)
![Page 29: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/29.jpg)
ACCESSIBLE IMAGES FOR EVERYONE
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 30: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/30.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
INCLUDING DRUPAL8EVERYONE’S DOING IT
![Page 31: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/31.jpg)
IMAGE ALT TEXT A REQUIRED FIELD*
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 32: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/32.jpg)
![Page 33: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/33.jpg)
The problem with Alt Text by default
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 34: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/34.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 35: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/35.jpg)
YOUR TURN@CMCNALLY | @DBSPIRA
![Page 36: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/36.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: ALT TEXT
IMPROVEMENT: ALT TEXT REQUIRED
IMPACT: BETTER SEO IMAGES DESCRIBED FOR BLIND
![Page 37: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/37.jpg)
ALT TEXT RECAP
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
AVOID COPYING TITLE TEXT
AVOID NONSENSICAL TEXT
USE KEYWORDS
USE SHORT DESCRIPTIVE PHRASES
![Page 38: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/38.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
Accessibility breaks the budget. It’s too expensive!
MYTH:
![Page 39: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/39.jpg)
Closed Captions & Subtitles
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 40: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/40.jpg)
![Page 41: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/41.jpg)
![Page 42: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/42.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 43: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/43.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
YOU TUBE AUTOMATIC CAPTIONING
![Page 44: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/44.jpg)
Subtitles are great for silent autoplay
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
Subtitles are great for silent autoplay
![Page 45: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/45.jpg)
CAPTIONING RECAP
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
DO LEVERAGE YOUTUBE AUTOMATIC CC
DO DOWNLOAD & EDIT TEXT FILE
DO RE-UPLOAD NEW FILE, OR ADD TO YOUR SITE
![Page 46: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/46.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
HEADINGS
![Page 47: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/47.jpg)
![Page 48: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/48.jpg)
![Page 49: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/49.jpg)
HEADINGS RECAP
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
AVOID USE OF HEADINGS FOR STYLING
AVOID SKIPPING OF HEADINGS
USE HEADINGS FOR HIERARCHY
![Page 50: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/50.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
LINKS
![Page 51: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/51.jpg)
Identifying links for a screen reader
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 52: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/52.jpg)
![Page 53: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/53.jpg)
Better Implementation of Links
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 54: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/54.jpg)
![Page 55: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/55.jpg)
LINKS RECAPAVOID “HERE” | “CLICK HERE”
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
USE DESCRIPTIVE LINKSExample: For more information, E-mail Joe
Example: For more information, click here
![Page 56: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/56.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
It’s all or nothing!
MYTH:
![Page 57: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/57.jpg)
First, let’s thank the Drupal Accessibility Group!
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
JesseBeach
mgifford
Nathan Briggs
Bowersox
Cliff
![Page 58: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/58.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
SEARCH
![Page 59: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/59.jpg)
Making search (and forms in general)
friendly for screen reader
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 60: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/60.jpg)
![Page 61: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/61.jpg)
FORM ACCESSIBILITY OUT OF THE BOX
FORM LABELS (D7) SEARCH ENGINE FORM & PRESENTATION (D7) RADIOS & CHECKBOXES (D8) INLINE FORM ERRORS (D8)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 62: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/62.jpg)
LABELS
INPUT
ACTION
HELP + MESSAGE
Display FORM Label KEYBOARD ACCESSIBLE LABEL announced BEFORE INPUT
KEYBOARD ACCESSIBLE FIELD TYPE OF INPUT IS ANNOUNCED RADIO GROUPS LABELED
LINKS OR BUTTONS THAT SUBMIT FORM LINK + BUTTONS HAVE CONTEXT KEYBOARD ACCESSIBLE
HELP TEXT BETWEEN FORM LABEL + INPUT MESSAGE TO VERIFY SUBMIT; ENSURE USER IS ALERTED OF CHANGE IN CONTENT
IF YOU MODIFY THE FORMS…
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 63: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/63.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: FIELDSETS
IMPROVEMENT: RADIOS & CHECKBOXES
IMPACT: SCREEN-READER AWARENESS USE OF KEYBOARD BETTER USER EXPERIENCE
![Page 64: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/64.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
LANDMARKS
![Page 65: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/65.jpg)
Identifying page regions
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 66: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/66.jpg)
![Page 67: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/67.jpg)
![Page 68: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/68.jpg)
INPUT
SKIP NAVIGATION LINKS, PROPER TABBING ORDER / STRUCTURE ARE STILL BASELINE REQUIREMENT;
IN D8; SKIP TO MAIN IS NOW PART OF CORE TABBING ORDER ALSO GOT ATTENTION IN D8
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 69: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/69.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: ARIA
IMPROVEMENT: WAI-ARIA, LANDMARKS, LIVE REGIONS, ROLE + PROPERTIES
IMPACT: EASIER “SCAN-ABILITY” OF A SITE FOR SCREEN-READER
![Page 70: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/70.jpg)
ERROR!
INPUT
INLINE ERRORSNOW AVAILABLEIN D8 (FORM API)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 71: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/71.jpg)
![Page 72: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/72.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: ERRORS
IMPROVEMENT: INLINE ERROR MESSAGES
IMPACT: IMPROVED USER EXPERIENCE SCREEN-READERS AWARE OF ERROR
![Page 73: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/73.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: ANNOUNCEIMPROVEMENT: ALERTS SCREEN-READERS OF CHANGE IN CONTENT (aria-live)
IMPACT: REFRESHED CONTENT ANNOUNCED TO SCREEN- READERIMMEDIATE ALERT FOR CHANGE IN CONTENT
![Page 74: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/74.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
CONTENT AUTHORS: THE UNSUNG HEROES
![Page 75: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/75.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
MAINTAINING ACCESSIBILITY: CONTENT AUTHORING ELEMENTS
ALT TEXTSUBTITLES
HEADINGSLINKS
![Page 76: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/76.jpg)
NEED TO MAKE THE SITE ACCESSIBLE?
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 77: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/77.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
DON’T PANIC
![Page 78: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/78.jpg)
1 2 3
4
56
7
![Page 79: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/79.jpg)
1
2
3
4
5
![Page 80: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/80.jpg)
1 2
![Page 81: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/81.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
http://leaverou.github.io/contrast-ratio/
D8 ACCESSIBILITY IMPROVEMENTS: TABBING
IMPROVEMENT: CONSTRAINS A SET OF TABS TOGETHER
IMPACT: BETTER CONTEXT OF TAB W/KEYBOARD MINIMIZED CONFUSION WITH SCREENREADER
![Page 82: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/82.jpg)
WRAPPING UP
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 83: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/83.jpg)
LCD
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 84: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/84.jpg)
For a copy of our D8 ACCESSIBILITY
CHEAT SHEET
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 85: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/85.jpg)
Fight for accessibility
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 86: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/86.jpg)
It’s the right thing to do
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 87: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/87.jpg)
It’s the selfish thing to do
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 88: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/88.jpg)
It’s easier to start with accessibility then it is to tack it on later.
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 89: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/89.jpg)
Americans with Disabilities Act
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 90: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/90.jpg)
Your users Yourself
Your lawyer Usability
SEO Because it’s the right thing to do
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
DO IT FOR:
![Page 91: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/91.jpg)
Accessibility is for everyone
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
![Page 92: Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective](https://reader031.vdocuments.mx/reader031/viewer/2022011722/58efb2261a28aba46a8b45f7/html5/thumbnails/92.jpg)
Phase2 | CATHARINE MCNALLY | DAVID SPIRA
BOOTH 101CATHARINE MCNALLY | DAVID SPIRA
@CMCNALLY | @DBSPIRA