Accessibility With(out) Priorities

By Chen Hui Jing / @hj_chen

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈
Chen Hui Jing
Jing
@hj_chen

Disclaimer

This talk is purely a sharing based off my personal experiences and I do not believe this represents the full picture of the situation in my region.

I am also by no means an expert on accessibility but I am trying my best to learn and get better at it.

a11y

accessibility

Web Accessibility Initiative (WAI)

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.
https://www.w3.org/WAI/

Why isn't accessibility explicitly taught during the basics of web development? 🤔

The 80-20 rule

Web Accessibility Laws in Asia

Country Name Date enacted Type Scope Web only? WCAG version
China Law on the Protection of Persons with Disabilities 1990, as amended 2008 Accessibility law Public sector,
Private sector
No None
China Voluntary Web Accessibility Standard 2008 Recommendation Government Yes WCAG 2.0 derivative
Hong Kong Guidelines on Dissemination of Information through Government Websites 1999 Mandatory policy Government No WCAG 2.0
India Rights of Persons with Disabilities Act, 2016 (RPD) 2016 Non-discrimination law Public sector,
Private sector
No None
India Guidelines for Indian Government Websites 2009 Mandatory policy Government No WCAG 2.0
Japan Basic Act on the Formation of an Advanced Information and Telecommunications Network Society 2000 Accessibility law Public sector,
Private sector
No None
Republic of Korea Act on Welfare of Persons with Disabilities 2008 Non-discrimination law Public sector,
Private sector
No WCAG 2.0
Taiwan Web Accessibility Guidelines 2.0 2017 Mandatory policy Public sector Yes WCAG 2.0 derivative
Singapore Website Interface Standards (WIS) for the Singapore Government 2004 Recommendation Government Yes W3C WCAG 1.0
Thailand A Guideline on ICT Accessibility for Persons with Disabilities 2003 Recommendation Government No W3C WCAG 1.0

But what can I do?

Use your own best judgement

Level 1: No one can tell you're doing it

Kitten with a waving tail

Page titles

Instead of…

                Welcome to the home of the fluffiest musicians in the universe the Fluffy Philharmonic
              
                Fluffy Philharmonic - Musicians
              
                Fluffy Philharmonic | Life at FP
              

Try doing…

                Fluffy Philharmonic home page
              
                Musicians - Fluffy Philharmonic
              
                Life at FP | Fluffy Philharmonic
              

Image text alternatives (alt text)

Every image must have an alt attribute

If the image conveys useful information, then it needs alt text.

If the image is purely decorative, set the alt attribute to empty.

Context is everything

Text should be functional and provide an equivalent user experience, not necessarily describe the image.

Reference: WebAIM alternative text guidelines
Viola, the red panda

Even though Viola the red panda had played the violin for many years, she wasn't exactly passionate about it. But the first time she tried the viola, she finally knew what love was.

Pick the appropriate option:

  1. "Image of Viola the red panda"
  2. "Viola, the red panda who fell in love with the viola"
  3. An empty alt attribute is enough
  4. "Viola, the red panda"
Viola, the red panda

Even though Viola the red panda had played the violin for many years, she wasn't exactly passionate about it. But the first time she tried the viola, she finally knew what love was.

Pick the appropriate option:

  1. "Viola, the red panda"
  2. An empty alt attribute is enough
  3. "Image"
  4. No alt attribute is required

Use the lang attribute

Declare the document language using the lang attribute on the html element

Indicate if there are language changes with the lang attribute on specific elements

<html lang="en">

The fourth animal in the Chinese Zodiac is Rabbit (兔子).

Use semantic mark-up (1/3)

The <div> element is not a magical hammer

Reference: HTML elements reference 🧡

Use semantic mark-up (2/3)

Buttons and links have different semantic meaning

Use buttons for actions

The fluffiest musicians you've ever met

Use links for changes in location

CSS lets you style them both however you want

Reference: A Complete Guide to Links and Buttons

Use semantic mark-up (3/3)

Keyboard accessibility by default

Interaction Keystrokes Notes
Navigate to most elements Tab
Shift + Tab - navigate backward
Keyboard focus indicators must be present.
Navigation order should be logical and intuitive.
Link Enter
Button Enter or Spacebar Ensure elements with ARIA role="button" can be activated with both key commands.
Checkbox Spacebar - check/uncheck a checkbox Checkboxes should be used when one or more option can be selected.
Radio buttons / or / - select an option.
Tab - move to the next element.
Radio buttons should be used when only one option from a group can be selected.
Select (dropdown) menu / - navigate between menu options
Spacebar - expand
You can also filter by typing letters, but this behavior varies by
browser. Some will filter as you type, like autocomplete. Others will
only sort by first letter.
Autocomplete Type to begin filtering
/ - navigate to an option
Enter - select an option
Link: Form elements

Level 2: Get designers/writers involved

A yellow and a black shiba sitting up

Resize text

Don't break zooming

Let users control text size

Reference: Accessibility in browsers: zoom level vs. font size

Write meaningful link text

“Click here” isn't very helpful

Write link text so that it describes the content of the link target

Instead of…

Click here to visit our sticker store.
                Click here to visit our sticker store.
              

Try doing…

Visit our sticker store.
                Visit our sticker store.
              

Use spacing and proper sectioning

Negative space and proximity can help make relationships between content more apparent.

Ties back to use of semantic mark-up for headings and content.

Content should be easy to scan.

Colour issues (1/2)

Provide enough contrast between text and background

Instead of…

This is a pretty unreadable combination. I mean, sure I'm using the browser default sans-serif, and the content is not particularly interesting, but still. I'm giving everyone the access to read my shitty content and judge for themselves.

Try doing…

Clearly a better combination. It didn't make the content any better, I'm still using the browser default sans-serif, and the content has not improved at all, but still. I'm giving everyone the access to read my shitty content and judge for themselves.

Colour issues (2/2)

Colour alone is not enough to convey information

Instead of…

Required fields are in red

Try doing…

Required fields are in red and marked with an *

Make interactive elements obvious

Links and buttons should have distinct styles from the rest of the text

Keep them consistent throughout the site

RedViolaPanda is a nonsensical side-project between Hui Jing and Wei

Form elements must have labels

Placeholder text is not a substitute for labels

Make sure the association between the field and label is clear

Instead of…

Try doing…

Why so hard…?

Viola the red panda looking tired

People I've learned from 🥰

And many more folks who share their knowledge about accessibility…

More relevant links

Thank you

Websitehttps://chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Red Viola Panda