Accessability for Web Applications

Here are some notes that I took on accessability for web applications. Accessability was / is something that I try to keep in mind when adding things to this site. It's definitely something to think of when putting together a web application, and I hope that this site has adequate accessability. It is probably something that I will look into again by testing this site against a screen reader.

DOWNLOAD MARKDOWN

2 471

Make sure to have your headings in correct order
Make sure to add aria-label to sections
aria-labelledby="{HTML Element ID}"
Sections Should have a heading in them anyway
Use aria-labels for navs - e.g., primary,
table of contents, breadcrumbs
Use nav for navigation through own site, not for social links (use OL for that)
aria-current="page" for tabs
Use aria-expanded on dropdowns
Use element for htmx-indicators
Rule: No aria is better than bad aria. Try to use semantic html elements correctly
Aria Roles
- ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. ARIA roles can be used to describe elements that don't natively exist in HTML or exist but don't yet have full browser support.
- By default, many semantic elements in HTML have a role; for example, <input type="radio"> has the "radio" role. Non-semantic elements in HTML do not have a role; <div> and <span> without added semantics return null. The role attribute can provide semantics.
- There are 6 categories of ARIA roles:
  1. Document Structure Roles
    - Document Structure roles are used to provide a structural description for a section of content. Most of these roles should no longer be used as browsers now support semantic HTML element with the same meaning. The roles without HTML equivalents, such as presentation, toolbar and tooltip roles, provide information on the document structure to assistive technologies such as screen readers as equivalent native HTML tags are not available.
      - toolbar
        The toolbar role defines the containing element as a collection of commonly used function buttons or controls represented in a compact visual form.
      - tooltip
        A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.
      - presentation
        The presentation role and its synonym none remove an element's implicit ARIA semantics from being exposed to the accessibility tree.
  2. Widget roles
    - The various widget role are used to define common interactive patterns. Similar to the document structure roles, some of these roles duplicate the semantics of native HTML elements that are well supported, and should not be used. The difference between the two lists is that, generally, the widget roles require JavaScript interaction and the document structure roles don't necessarily.
  3. Landmark roles
    - Landmark roles provide a way to identify the organization and structure of a web page. By classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. Screen readers use landmark roles to provide keyboard navigation to important sections of a page. Use these sparingly. Too many landmark roles create "noise" in screen readers, making it difficult to understand the overall layout of the page.
  4. Live region roles
    - Live Region roles are used to define elements with content that will be dynamically changed. Sighted users can see dynamic changes when they are visually noticeable. These roles help low vision and blind users know if content has been updated. Assistive technologies, like screen readers, can be made to announce dynamic content changes:
  5. Window roles
    - Window roles define sub-windows to the main document window, within the same window, such as pop up modal dialogs:
  6. Abstract Roles
    - Abstract roles are only intended for use by browsers to help organize and streamline a document. They should not be used by developers writing HTML markup. Doing so will not result in any meaningful information being conveyed to assistive technologies or to users.
Aria States And Properties
- ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree.
- There are 4 categories of ARIA states and properties:
  1. Widget attributes
  2. Live region attributes
  3. Drag-and-Drop attributes
  4. Relationship attributes

User Comments

There are currently no comments for this article.

About Embedding News Content

Navigate to the News Article you want to embed.
Copy the url of the article and paste into the input below.
- For a news article to be properly embedded, it must have valid <meta> tags as seen below.
- The image url must be able to be accessed from any source.

<meta property="og:type" content="article" />
<meta property="og:type" content="any string" />
<meta property="og:image" content="valid image url" />
<meta property="og:description" content="any string" />

Inserting Custom HTML:

Basics:

Double click inside the custom HTML to edit the html.
Learn about the basics of HTML using the mdn web docs on HTML.

Inserting Code Expressions:

 <dialog> below. You can generate inline code or block code, like seen below:

#include <stdio.h>

void bubble_sort(int arr[], int n) {
    int i, j;
    for (i = 0; i < n-1; i++) {
        for (j = 0; j < n-i-1; j++) {
            if (arr[j] > arr[j+1]) {
                int temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
}

Inserting $\Large{LaTeX}$ Expressions:

You can insert inline:

a^2+b^2=c^2

or block math expressions (see below) by using the Math Markup dialog below the code editor.

e^{i\pi}+1=0

SVG Icon Search

You can search for svg icons () by clicking the SVG Search button below.

AI Code Generation

To be Completed

The Sanitization of HTML

Go over the sanitization of HTML process:

Accessability for Web Applications

Widget attributes

Comments

User Comments