Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective

Practical, Compassionate, and Cost Effective

EASY ACCESSIBILITY IN DRUPAL 8

CATHARINE MCNALLY | DAVID SPIRA

@cmcnally @dbspira

285 MILLION WITH VISUAL IMPAIRMENT

Phase2 | CATHARINE MCNALLY | DAVID SPIRA


360 MILLION WITH HEARING LOSS

THAT’S MORE THAN THE POPULATION OF…

360 MILLION WITH HEARING LOSS

285 MILLION WITH VISUAL IMPAIRMENT

COMBINED,


THE UNITED STATES



THE EUROPEAN UNION


SOUTH AMERICA

1 IN 10 PEOPLE NEED SOME KIND OF ACCOMMODATION


ACCESSIBLE USERS INTERACT WITH YOUR SITE

algorithmicallyPhase2 | CATHARINE MCNALLY | DAVID SPIRA


Accessibility greatly reduces the design options.

MYTH:

Color Contrast


Normal Vision

Red Blind

Blue-Blind

Red-Weak

Black & White

http://www.color-blindness.com/coblis-color-blindness-simulator/


4.5% of the world is colorblind

.5% of the population are women.

8% of the population are men.

Source: colorblindawareness.org

http://colorblindawareness.org


High Color Contrast makes it easier to view under bright sunlight.

TEXT OVER IMAGEOne thing we see often are text on top of images, such as a front page masthead image.


Pay attention to the variables: Can the text color change?

If not, could a background gradient be applied?

Or a solid color background?

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)



http://leaverou.github.io/contrast-ratio/

THEME CUSTOMIZATION

COLOR CONTRAST RECAP


AVOID LOW CONTRAST

TAKE NOTE OF TEXT COLOR OVER IMAGES

TAKE NOTE OF FONT WEIGHT

USE COLOR CONTRAST CHECKERS


Alt text doesn’t make a difference.

MYTH:

Hey, at least I ran out of staples


ACCESSIBLE IMAGES FOR EVERYONE

TWITTER



INCLUDING DRUPAL8EVERYONE’S DOING IT

IMAGE ALT TEXT A REQUIRED FIELD*


The problem with Alt Text by default



YOUR TURN@CMCNALLY | @DBSPIRA



D8 ACCESSIBILITY IMPROVEMENTS: ALT TEXT

IMPROVEMENT: ALT TEXT REQUIRED

IMPACT: BETTER SEO IMAGES DESCRIBED FOR BLIND

ALT TEXT RECAP


AVOID COPYING TITLE TEXT

AVOID NONSENSICAL TEXT

USE KEYWORDS

USE SHORT DESCRIPTIVE PHRASES


Accessibility breaks the budget. It’s too expensive!

MYTH:

Closed Captions & Subtitles




YOU TUBE AUTOMATIC CAPTIONING

Subtitles are great for silent autoplay


Subtitles are great for silent autoplay

CAPTIONING RECAP


DO LEVERAGE YOUTUBE AUTOMATIC CC

DO DOWNLOAD & EDIT TEXT FILE

DO RE-UPLOAD NEW FILE, OR ADD TO YOUR SITE


HEADINGS

HEADINGS RECAP


AVOID USE OF HEADINGS FOR STYLING

AVOID SKIPPING OF HEADINGS

USE HEADINGS FOR HIERARCHY


LINKS

Identifying links for a screen reader


Better Implementation of Links


LINKS RECAPAVOID “HERE” | “CLICK HERE”


USE DESCRIPTIVE LINKSExample: For more information, E-mail Joe

Example: For more information, click here


It’s all or nothing!

MYTH:

First, let’s thank the Drupal Accessibility Group!


JesseBeach

mgifford

Nathan Briggs

Bowersox

Cliff


SEARCH

Making search (and forms in general)

friendly for screen reader


FORM ACCESSIBILITY OUT OF THE BOX

FORM LABELS (D7) SEARCH ENGINE FORM & PRESENTATION (D7) RADIOS & CHECKBOXES (D8) INLINE FORM ERRORS (D8)


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…




D8 ACCESSIBILITY IMPROVEMENTS: FIELDSETS

IMPROVEMENT: RADIOS & CHECKBOXES

IMPACT: SCREEN-READER AWARENESS USE OF KEYBOARD BETTER USER EXPERIENCE


LANDMARKS

Identifying page regions


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




D8 ACCESSIBILITY IMPROVEMENTS: ARIA

IMPROVEMENT: WAI-ARIA, LANDMARKS, LIVE REGIONS, ROLE + PROPERTIES

IMPACT: EASIER “SCAN-ABILITY” OF A SITE FOR SCREEN-READER

ERROR!

INPUT

INLINE ERRORSNOW AVAILABLEIN D8 (FORM API)




D8 ACCESSIBILITY IMPROVEMENTS: ERRORS

IMPROVEMENT: INLINE ERROR MESSAGES

IMPACT: IMPROVED USER EXPERIENCE SCREEN-READERS AWARE OF ERROR



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


CONTENT AUTHORS: THE UNSUNG HEROES


MAINTAINING ACCESSIBILITY: CONTENT AUTHORING ELEMENTS

ALT TEXTSUBTITLES

HEADINGSLINKS

NEED TO MAKE THE SITE ACCESSIBLE?



DON’T PANIC

1 2 3

4

56

7

1

2

3

4

5

1 2



D8 ACCESSIBILITY IMPROVEMENTS: TABBING

IMPROVEMENT: CONSTRAINS A SET OF TABS TOGETHER

IMPACT: BETTER CONTEXT OF TAB W/KEYBOARD MINIMIZED CONFUSION WITH SCREENREADER

WRAPPING UP


LCD


For a copy of our D8 ACCESSIBILITY

CHEAT SHEET


Fight for accessibility


It’s the right thing to do


It’s the selfish thing to do


It’s easier to start with accessibility then it is to tack it on later.


Americans with Disabilities Act


Your users Yourself

Your lawyer Usability

SEO Because it’s the right thing to do


DO IT FOR:

Accessibility is for everyone



BOOTH 101CATHARINE MCNALLY | DAVID SPIRA

@CMCNALLY | @DBSPIRA

Easy Accessibility in Drupal 8: Practical, Compassionate, Cost-Effective

Technology