Web Accessibility 101

By Mashhood Rastgar @ Recurship

Strongly recommend going through the whole course

https://classroom.udacity.com/courses/ud891

What is Accessibility?

• Ease with which you can access a web site or a web app.

E.g.

• Using a website on mobile made for desktop only

​

More focus is on making the web accessible to all users, including those with impairments or disabilities.

Understanding Diversity

Types of impairments:

• Visual
• Hearing
• Motor / dexterity
• Cognitive impairments (ADT)

​

We need to ensure our content can be consumed by everyone.

Disability can be of 3 types

• Temporary (Broken arm) �
• Situational (Holding something)�
• Permanent (Blindness)

Visual Impairment

• Short/Long sightedness�
• Color blindness�
• Completely blind

They use the tools around them using screen readers or braille readers. For them keyboard navigation is very important.

For people with color vision problem, high contrast is important when creating / implementing design.

Improvement: FOcus

• Determines where keyboard events in the page.�
• E.g. using tab to switch between elements�
• Be care about DOM order (especially when using float)

Improvement: Tabindex

• Allows you to customize the tab selection�
• Also allows you to have focus on custom elements like (fancy button)�
• “-1” means its not in tab order, can only be focused on programmatically�
• “0” and more will configure the tab focus likewise (lower number has higher priority)�
• Tabindex > 0 is not recommended.

Note: Focus (tab-index) is only to be used on INTERACTIVE ELEMENTS

Do not use it on HEADERS, or paragraphs.

​

IMPROVEMENT: Skip LINKs

• Jump to content or navigation using a shortcut.�
• Hidden link is added, which shows on keyboard focus�
• Allows use to jump to main content instead of tabbing through all the links in �The navbar.

Improvement: Write SEmantic HTML

• Tools like screen readers are using information about the role (type), name (name of the input), state (checked or not) and value of the element to tell the user what it is. �
• If we use a div instead of a button, it will look and work fine, however it will not behave like a button for the screenreader.�
• We can also create “landmarks” using tags like nav or article, etc.

IMPROVEMENT: WAI-ARIA spec

• Adds additional semantic information to the elements�
• We do this by adding attributes to give extra information.�
• E.g. �adding aria-label to a button with just an icon.���Adding a role=”checkbox” for a custom checkbox

Continue: ARIA

Check out the full spec to see all the functionality, however some important ones are listed on the right.

Important thing to know is what most of the time libraries will add these attributes for us (like Bootstrap). However if we are making custom elements we need to have these attributes and their values adjusted accordingly.

• Aria-label
• Aria-describedby
• Aria-labelledBy
• Aria-controls
• Aria-expanded
• Aria-busy
• Aria-owns
• Aria-pressed
• Aria-hidden
• Role (checkbox, alert etc)

IMPROVEMENT: Style

• Styling like adding a high constrast mode helps people with low vision. Sometimes its about just checking how the website will look in the in system contrast mode.�
• We should be styling using ARIA attibutes rather than adding custom state styles (like Aria-checked=”true”)�
• Make sure all design is responsive and works well across all standard device widths.�
• Don’t convey information only with color! (input invalid with just border color)

How do I test for accessibility?

You can just use your keyboard for testing the navigation.

You can also use extensions like ChromVox Lite which convert the webpage into what a screenreader would be looking at (removed styles etc).

You can ask people with disabilities to test and give feedback.

Chrome dev tools has an excellent Audit option now, reports in seconds on possible improvements. Also has ability to check for responsiveness.

Thank You!