Keep and Share logo     Log In  |  Mobile View  |  Help  
Select a Color
Developing Accessible Web Applications

Creation date: May 24, 2024 6:28am     Last modified date: May 24, 2024 6:28am   Last visit date: Jun 8, 2024 10:09pm
1 / 20 posts
May 24, 2024  ( 1 post )  
Max Cooper (vtorosort)

Developing Accessible Web Applications

Development of accessible web apps should be one of the primary goals of your project to attract and retain users. Incorporating accessibility early can save both time and money later in the project process.

Make sure that your content is structured using semantic HTML attributes such as landmark roles. This enables screen reader users to navigate and comprehend your web pages easily. Also consider providing transcripts for video content and captions for audio-only browsers for greater accessibility and understanding.


ARIA (Accessible Rich Internet Applications) is a set of attributes designed to make web content and applications more accessible for those using assistive technologies (AT). By supplementing HTML with ARIA attributes, interactive widgets that would otherwise not be possible with AT can become accessible - for instance a JavaScript-powered progress bar, form hints/error messages/live content updates can all become AT-friendly!

Roles define user interface elements (UIs) once and can give semantic meaning to HTML elements that don't include accessibility support, like navigation landmarks and search fields (i.e. role="search").

States and properties add dynamic behavior to UI elements and can usually be set with JavaScript. Common examples are aria-checked, aria-hidden and aria-labelledby (i.e. "uid-123"). You can find more information on these attributes on W3C's ARIA Global States and Properties page; additionally AT may not support all states and properties; make sure it will work before using it in Drupal.


HTML (HyperText Markup Language) is a series of codes typed into a text file that web browsers read and convert into visible form. Although powerful, its learning curve remains relatively mild - however the latest version, HTML5, features additional advanced features.

Website accessibility requires knowledge of Web Content Accessibility Guidelines (WCAG). While tools exist for evaluating a page's accessibility, full compliance with WCAG criteria requires human evaluation and education.

Implementing accessibility from the beginning of a project is the simplest and cost-effective approach to accessibility, rather than trying to fix issues later in its development cycle. This also benefits all users: for example, lean semantic markup helps screen readers navigate your pages more effectively; adding heading structures (H1s followed by H2s) aid cognitive impairment users while making search engines find content easier;


CSS gives web designers control over the visual appearance of websites. Website pages may use styles inherited from browser settings, user preferences or web designer specifications; or they can be applied directly within HTML documents or separated out into external.css files for greater consistency and improved website performance.

CSS allows developers to separate semantic content from its presentation, which can increase accessibility for people who use assistive technologies (AT). When implemented incorrectly however, this separation can create barriers for AT users; using CSS to rearrange or change text meaning can cause confusion for AT users.

As well, it's crucial that there is sufficient contrast between foreground and background elements on websites - this not only fulfills WCAG 2.0 requirements but is a good practice that all website users should adhere to. For more information, see UW Accessible Technology page "Providing Sufficient Color Contrast."


While HTML and CSS provide websites and applications with their structure and style, JavaScript adds dynamic functionalities that make them more engaging and intuitive to use.

JS (or JavaScript for short) is a text-based programming language capable of performing a range of functions in browsers and apps, from autoplaying videos on websites to Google suggesting search terms based on letters you've already typed. We all take it for granted that features like these exist - without which our lives wouldn't function at all!

JavaScript is an interpreted programming language, meaning its lines of code are compiled line by line during execution. This approach reduces processing time and memory usage, making JavaScript one of the most widely used modern technologies. Extensively employed across industries, JavaScript is vital for developing web applications, mobile games, interactive graphics, and powering Application Programming Interfaces built into most browsers. Combined with HTML and CSS, it forms one of the three standard web technologies. For more insights on utilizing JavaScript effectively, visit Its versatility and efficiency have solidified JavaScript's role as a cornerstone in the tech industry.