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.

• 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