Creating Accessible Websites

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. Learning how to write Semantic HTML is the first step in designing accessible websites.

Accessible web design includes designing for people who are color blind. Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color blindness.

ARIA is an acronym for Accessible Rich Internet Applications. ARIA is a set of attributes you can add to HTML elements that define ways to make web content and applications accessible to users with disabilities who use assistive technologies (AT).

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. The text alternative needs to be determined by the author, depending on the usage, context, and content of an image. For example, the exact type and look of a bird in an image might be less relevant and described only briefly on a website about parks, but may be appropriate on a website specifically about birds.

The outline property provides visual feedback for links that have "focus" when navigating a web document using the Tab key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline, you are making your site inaccessible for these people.

Defining a focus outline is an accessibility requirement and is clearly stated in the Web Content Accessibility Guidelines:
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Tabindex is a global attribute that can be applied to most HTML elements with content that you want to make interactable. It is also used with role="button" and role="link" if applied to non native elements.

• If an element is focusable, either by an input method such as the keyboard, or programatically such as with the focus() method; and

• At what point an element becomes focusable when a user is interacting with the page via a keyboard

Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

The intent of this WCAG success criterion is to provide a skip mechanism that will enable the users skip the repeated content blocks such as navigational menus and advertisements or help the users to jump to a particular location on the web page. The mechanism can comprise of “skip links,” landmarks and/or headings, or a combination of any of these.

While Assistive technologies such as screen readers provide a mechanism to jump according to headings, landmarks, lists & form controls; it is always best to provide a skip link at the top of the page & wherever it is appropriate.

Accessible audio and video is essential for people with disabilities and benefits organizations. Depending on the content of your media, it might need captions/subtitles (a text version of the audio that is shown synchronized in the media player), a transcript (a separate text version of the audio), audio description of visual information (usually an additional audio stream that describes important visual content), or other accessibility functionality/features.

This video introduces the inaccessible website that we'll be coding and revising to make fully accessible. We'll go through why this website is inaccessible and, in the following videos, work on remedying the errors.

Navigation is the way users find and traverse the different pages available on your site. For this reason, it is imperative that navigation is accessible. By their nature, links are tab-able and all keyboard users and screen readers will read them–so, if your navigation is coded with links, a screen reader should find them.

With more and more web usage being performed on mobile devices, the now common hamburger menu is here to stay. One of the main problems that needs addressing is the usability and accessibility of the menu.

An iFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The iFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. In this lecture, will discuss iFrame in relation to Google Maps and Accessibility with a practical animal hospital example.

Accessible forms are easy to understand, complete, and submit. Instructions, cues, required form fields, and field formatting requirements must be clearly identified to users. Error recovery must be intuitive and descriptive.

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information.

Accessible icons are those that can be understood by all website visitors regardless of impairments or disabilities. When possible, make sure you pair text and icons together, to make it easier for users to understand icon meaning.

Links are used on almost every site on the web and it's important and (luckily!) easy to create links that are accessible to all.

We will be testing out website with NVDA screen reader on Chrome to make sure the site is optimized correctly for assistive technologies. We will be testing the form, landmarks, links, and any content. The test will be limited to a desktop screen reader.

In this lecture, we'll explore how to test any website for accessibility using the a11y project checklist: https://www.a11yproject.com/checklist/

Part 1: Overview

In this tutorial, we’ll enhance our skills by learning to build an accessible to-do app with Vanilla JavaScript. With this app, users will be able to add tasks, mark them as complete, and remove them.

Accessible To Do List: https://github.com/Stefany93/accessible-to-do-list

Part 2: Coding the HTML

In this tutorial, we’ll enhance our skills by learning to build an accessible to-do app with Vanilla JavaScript. With this app, users will be able to add tasks, mark them as complete, and remove them.

Accessible To Do List: https://github.com/Stefany93/accessible-to-do-list

Part 3: Coding the JavaScript

In this tutorial, we’ll enhance our skills by learning to build an accessible to-do app with Vanilla JavaScript. With this app, users will be able to add tasks, mark them as complete, and remove them.

Accessible To Do List: https://github.com/Stefany93/accessible-to-do-list

Congratulations on completing the course and thank you so much for taking the initiative to learn about web accessibility! If you'd like to learn more and interact with me and other web accessibility developers and students, I highly encourage you to join my web accessibility Facebook group and/or Discord server. See you there!

Facebook Group:
https://www.facebook.com/groups/webaccessibilityeducation

Discord:
https://discord.gg/H3tGnKnGka