We may earn an affiliate commission when you visit our partners.
Course image
Stefany Newman

This course has professional captions (subtitles) for all lectures.

Are you a front-end developer struggling with ARIA? Is the ARIA spec too technical and confusing? Are most online resources on ARIA outdated, and lacking in practical examples?

Read more

This course has professional captions (subtitles) for all lectures.

Are you a front-end developer struggling with ARIA? Is the ARIA spec too technical and confusing? Are most online resources on ARIA outdated, and lacking in practical examples?

Meet Stefany, your new ARIA teacher.

In Stefany’s “Introduction to ARIA for Beginners” course, you will learn the basics of ARIA with easy to understand code, and real life examples.

Stefany will start with the very basicssuch as what ARIA is, when to use it, and common mistakes beginners make.

Further in the course, she will explain how to use ARIA landmarks to structure your website.

Following that, she will demonstrate how screen readers interact with ARIA.

Finally, Stefany will teach you the basics of ARIA states, roles, and properties in an easy to understand way.

In addition, this course contains helpful quizzes along the way in order to test your knowledge.

At the end of the course, Stefany will show you how to build real life widgets with the knowledge you learned.

Enroll today and get a 30-Day Money-Back Guarantee.

Are you ready to begin your journey with WAI-ARIA? Start here.

Students are encouraged to contact the instructor with any guideline questions for fully fledged help and course support.

Enroll now

What's inside

Learning objectives

  • Working with wai-aria
  • Creating interfaces that can be accessed with the keyboard
  • Achieving wcag conformance
  • Web accessibility
  • Wai-aria best practices
  • How to add semantics and other metadata to html content
  • Aria states, roles and properties
  • Aria landmarks

Syllabus

The basics of WAI-ARIA
Introduction video with extended audio description
Should you use ARIA 1.1 or 1.2?

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies. In this lecture, we will discuss ARIA and some of the main types of attributes while providing practical examples.

Read more

In this lecture, we will discuss the main situations in which ARIA is good to use--such as with signposts/landmarks, dynamic content updates, to enhancing keyboard accessibility, and to increase the accessibility of non-semantic controls.

Many HTML elements have an accessible name. The accessible name for a HTML element is exposed in the browser’s accessibility tree. It is the piece of information used by Assistive Technologies (AT) to identify the element. The accessible name for an element can be derived from the element’s content, an attribute, or from an associated element. In this lecture, we will discuss what accessible names are, how to find them, and how to create them.

Testing your basic ARIA knowledge.

ARIA landmark roles

ARIA landmarks are attributes you add to elements to create semantically defined sections of a page that allow users of assistive technologies to navigate the page more easily. Think of ARIA landmarks as building a set of “skip to” links like “skip to main content”. In this lecture, we will discuss what landmarks are, explore practical examples, and provide landmark coding information.

A banner landmark identifies site-oriented content at the beginning of each page within a website and a contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements. In this quick lecture, we will look at banner and contentinfo examples and explore the code for both.

Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. In this lecture, we will explore the code, best creation practices, and look at examples of navigation landmarks.

The main landmark contains what is between the header and footer of a webpage. The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. In this quick lecture, we will discuss these landmarks and how they relate to each other, and look at the code for both.

The form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form. This is a form that collects and saves a user's contact information. The search landmark role is used to identify a section of the page used to search the page, site, or collection of sites. In this quick lecture, we will have a look at both and explore the code.

A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. In this lecture, we will discuss the region landmark and provide examples and code.

Testing your knowledge on ARIA landmarks.

ARIA states, roles and properties

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). In this lecture, we will discuss what ARIA roles, states, and properties are in depth and provide practical examples.

The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons. In this lecture, we will discuss the button role and its purpose, while providing practical examples and code.

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use the aria-labelledby attribute instead. In this lecture, we will discuss the aria-label attribute and provide practical examples and code.

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. In this lecture, we will discuss what aria-labelledby is and when it's used, while providing practical examples and code.

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. In this lecture, we will discuss aria-describedby and provide practical examples and code in order to better understand its functions.

aria‑label, aria‑labelledby, and aria‑describedby can all be used to bring extra clarity to a given element when it's exposed to assistive technology.

  • aria‑label overrides an element's name with contents you specify.

  • aria‑labelledby replaces an element's name with contents from another node on the page. You'd use this when you already have a visible label anyways.

  • aria‑describedby sets your element's description to the contents of another node on the page. This is great for noncritical, supplemental information.

In this lecture, we will discuss the differences among the functions of these three ARIA attributes with practical examples.

The aria-hidden attribute can either expose or hide non-interactive content from the accessibility API. In this lecture, we will discuss what aria-hidden is, while providing practical examples and code to better understand its functions.

The presentation role is used to remove semantic meaning from an element and any of its related child elements. Presentational roles are used when elements need to be in the DOM, but the semantics of them are inaccurate or unnecessary. We’re basically telling a screen reader that the semantics of an element are wrong, so ignore them. In this lecture, we will explore and discuss the presentation role with practical examples and code.

The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned. In this lecture, we will explore the aria required attribute with practical examples and code.

The aria-expanded attribute provides information about whether an element is in an expanded or collapsed state. For example, if you have a collapsible element which contains a text, then a screen reader would know that the text is not currently displayed on the screen when the aria-expanded attribute is set to true. In this lecture, we will discuss and explore the aria-expanded attribute, while providing practical examples and code.

Test your roles, states, and properties knowledge
ARIA widgets
Disclosure widget

The hamburger menu or hamburger icon is a name given to the menu icon found in newer programs and websites that hides the traditional file menu. Using the hamburger menu makes it easier to view program options on mobile devices, but this often comes at the cost of accessibility. In this lecture, we will explore the step by step procedure used to code an accessible hamburger menu using ARIA.

Bonus section

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!

Web Accessibility Education Facebook Group:
https://www.facebook.com/groups/webaccessibilityeducation

Web Accessibility Education Discord: https://discord.com/channels/682250650003701773/682250653414064150

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches web accessibility best practices
Suitable for beginners with entry-level computer skills
Develops understanding of WAI-ARIA that directly corresponds with WCAG conformance
Introduces students to the basics of WAI-ARIA
Develops a deep understanding of ARIA states, roles, and properties
Taught by Stefany Newman, a recognized expert on web accessibility
Teaches how to use ARIA landmarks to structure a website
Teaches how to add semantics and other metadata to HTML content
Teaches how to create interfaces that can be accessed with a keyboard
May require students to acquire additional resources to complete quizzes and activities
Provides helpful quizzes along the way
Includes real-life example widgets built using the knowledge learned in the course

Save this course

Save Introduction to WAI-ARIA for Beginners to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Introduction to WAI-ARIA for Beginners with these activities:
Refresh JavaScript skills
Reviewing JavaScript skills provides a strong foundation for understanding ARIA implementation.
Browse courses on JavaScript
Show steps
  • Revisit notes or online resources on JavaScript
  • Complete practice exercises on JavaScript
Refresh on HTML and CSS
Reviewing foundational concepts in HTML and CSS helps strengthen understanding of accessibility principles.
Browse courses on HTML
Show steps
  • Revisit notes or online resources on HTML
  • Complete practice exercises on HTML
  • Repeat process for CSS
Connect with experienced web accessibility professionals
Seeking guidance from experienced professionals strengthens understanding and provides valuable insights.
Browse courses on Web Accessibility
Show steps
  • Identify potential mentors through industry events or online platforms
  • Reach out and express interest in mentorship
  • Establish a plan for regular communication and guidance
Five other activities
Expand to see all activities and additional details
Show all eight activities
Participate in a study group
Reviewing course material with peers strengthens understanding by clarifying concepts and deepening knowledge.
Show steps
  • Identify Individuals to form a study group
  • Plan regular meetings for group
  • Plan a structured approach to topics
Explore ARIA best practices
Engaging in guided tutorials deepens understanding of accessibility best practices.
Browse courses on ARIA
Show steps
  • Identify tutorials or online resources on ARIA best practices
  • Select a tutorial and work through it
  • Complete any exercises or quizzes associated with the tutorial
Implement ARIA landmarks
Implementing ARIA landmarks provides hands-on practice in using accessibility principles.
Browse courses on ARIA
Show steps
  • Identify a website or web application to work on
  • Identify potential areas to implement ARIA landmarks
  • Implement ARIA landmarks using appropriate HTML attributes
  • Test the implementation using assistive technology
Build a sample widget with ARIA
Creating a sample widget with ARIA provides a practical application of the learned concepts.
Browse courses on ARIA
Show steps
  • Choose a type of widget to create
  • Design and plan the widget's functionality
  • Implement the widget using HTML, CSS, and JavaScript
  • Incorporate ARIA attributes for accessibility
  • Test the widget with assistive technology
Volunteer with a web accessibility organization
Volunteering with an accessibility organization provides real-world experience and insights.
Browse courses on Web Accessibility
Show steps
  • Identify organizations providing accessibility-related services
  • Reach out and inquire about volunteer opportunities
  • Commit to a specific volunteer role
  • Actively participate in accessibility-related tasks

Career center

Learners who complete Introduction to WAI-ARIA for Beginners will develop knowledge and skills that may be useful to these careers:
Web Accessibility Specialist
Web Accessibility Specialists are responsible for ensuring that websites and applications are accessible to people with disabilities. This course may lead to a career as a Web Accessibility Specialist by teaching the basics of ARIA, which is essential for creating accessible websites and applications. Learning how to use ARIA can help Web Accessibility Specialists create more inclusive and user-friendly websites and applications.
Accessibility Consultant
Accessibility Consultants help organizations make their websites and applications accessible to people with disabilities. This course may lead to a career as an Accessibility Consultant by teaching the basics of ARIA, which is essential for creating accessible websites and applications. Learning how to use ARIA can help Accessibility Consultants create more inclusive and user-friendly websites and applications, which can help people with disabilities participate more fully in society.
Web Accessibility Auditor
Web Accessibility Auditors review websites and applications to ensure that they are accessible to people with disabilities. This course may lead to a career as a Web Accessibility Auditor by teaching the basics of ARIA, which is essential for creating accessible websites and applications. Learning how to use ARIA can help Web Accessibility Auditors create more inclusive and user-friendly websites and applications, which can help people with disabilities participate more fully in society.
User Experience (UX) Designer
User Experience (UX) Designers focus on the user's experience when interacting with a website or application. This course may lead to a career as a UX Designer by teaching the basics of ARIA, which is essential for creating accessible and user-friendly interfaces. Learning how to use ARIA can help UX Designers create websites and applications that are easy to use and navigate for everyone.
Assistive Technology Specialist
Assistive Technology Specialists help people with disabilities use computers and other electronic devices. This course may lead to a career as an Assistive Technology Specialist by teaching the basics of ARIA, which is essential for creating accessible websites and applications that can be used by people with disabilities. Learning how to use ARIA can help Assistive Technology Specialists better support people with disabilities in using computers and other electronic devices.
Information Architect
Information Architects design and organize the structure and content of websites and applications. This course may lead to a career as an Information Architect by teaching the basics of ARIA, which is essential for creating accessible websites and applications that can be used by people with disabilities. Learning how to use ARIA can help Information Architects create more inclusive and user-friendly websites and applications.
Instructional Designer
Instructional Designers create and develop educational materials and programs. This course may lead to a career as an Instructional Designer by teaching the basics of ARIA, which is essential for creating accessible educational materials that can be used by people with disabilities. Learning how to use ARIA can help Instructional Designers create more inclusive and user-friendly educational materials, which can help people with disabilities learn more effectively.
Disability Advocate
Disability Advocates work to ensure that people with disabilities have equal rights and opportunities. This course may lead to a career as a Disability Advocate by teaching the basics of ARIA, which is essential for creating accessible websites and applications that can be used by people with disabilities. Learning how to use ARIA can help Disability Advocates create more inclusive and user-friendly websites and applications, which can help people with disabilities participate more fully in society.
Web Developer
Web Developers are responsible for building and maintaining websites and applications. This course may lead to a career as a Web Developer by teaching the basics of ARIA, which is essential for creating accessible websites and applications that can be used by people with disabilities. Learning how to use ARIA can help Web Developers create more inclusive and user-friendly websites and applications.
Front-End Developer
Front-End Developers design, build, and implement online user interfaces. This course may lead to a career as a Front-End Developer by teaching the basics of ARIA, which is essential for creating accessible interfaces that can be used by people with disabilities. Learning how to use ARIA can help Front-End Developers create more inclusive and user-friendly websites and applications.
Technical Writer
Technical Writers create documentation for software, hardware, and other technical products. This course may lead to a career as a Technical Writer by teaching the basics of ARIA, which is essential for creating accessible documentation that can be used by people with disabilities. Learning how to use ARIA can help Technical Writers create more inclusive and user-friendly documentation, which can help people with disabilities use technical products more effectively.
Content Strategist
Content Strategists develop and manage the content of websites and applications. This course may lead to a career as a Content Strategist by teaching the basics of ARIA, which is essential for creating accessible content that can be used by people with disabilities. Learning how to use ARIA can help Content Strategists create more inclusive and user-friendly content, which can help people with disabilities participate more fully in society.
Quality Assurance (QA) Analyst
Quality Assurance (QA) Analysts test software to ensure that it meets quality standards. This course may lead to a career as a QA Analyst by teaching the basics of ARIA, which is essential for creating accessible software that can be used by people with disabilities. Learning how to use ARIA can help QA Analysts create more inclusive and user-friendly software, which can help people with disabilities participate more fully in society.
Product Manager
Product Managers are responsible for the development and launch of new products. This course may lead to a career as a Product Manager by teaching the basics of ARIA, which is essential for creating accessible products that can be used by people with disabilities. Learning how to use ARIA can help Product Managers create more inclusive and user-friendly products, which can help reach a wider audience.
Software Engineer
Software Engineers design, develop, and maintain software systems. This course may lead to a career as a Software Engineer by teaching the basics of ARIA, which is essential for creating accessible software that can be used by people with disabilities. Learning how to use ARIA can help Software Engineers create more inclusive and user-friendly software, which can help people with disabilities participate more fully in society.

Reading list

We've selected eight books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Introduction to WAI-ARIA for Beginners.
Provides a practical guide to using WAI-ARIA to create accessible web content. It valuable resource for anyone who wants to learn how to use WAI-ARIA effectively.
Provides a collection of inclusive design patterns that can be used to create accessible web content. It good resource for designers and developers who want to learn more about inclusive design.
Provides a practical guide to building accessible websites. It covers a wide range of topics, including how to create accessible content, how to test for accessibility, and how to implement accessibility features. It good resource for developers and designers who want to learn more about web accessibility.
Provides a practical guide to inclusive web design. It covers a wide range of topics, including how to create accessible content, how to test for accessibility, and how to implement accessibility features. It good resource for designers and developers who want to learn more about inclusive design.
Provides a comprehensive overview of inclusive design. It covers a wide range of topics, including how to create accessible content, how to test for accessibility, and how to implement accessibility features. It good resource for designers and developers who want to learn more about inclusive design.
Provides a practical guide to inclusive web design. It covers a wide range of topics, including WAI-ARIA, and valuable resource for anyone who wants to learn more about inclusive web design.
Provides a practical guide to web accessibility. It covers a wide range of topics, including how to use WAI-ARIA, how to create accessible forms, and how to test for accessibility. It good resource for developers who want to learn more about web accessibility.
Provides a comprehensive guide to web accessibility. It covers a wide range of topics, including WAI-ARIA, and valuable resource for anyone who wants to learn more about web accessibility.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Introduction to WAI-ARIA for Beginners.
Introduction to Developing Custom Components with ARIA 1
Creating Accessible Websites
Web Design Accessibility Certificate
vSphere 8: Monitoring a vSphere Implementation
Aromatherapy Foundational Concepts
Tai Chi for Women (or anyone!) 10-Form: Master Helen Liang
Web Accessibility Training Course WCAG 2.1 & 2.2...
Become a Calculus 2 Master
Simplified Tai Chi 24 Form with Master Helen Liang / YMAA
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser